contenteditable属性で直接編集

contenteditable属性はHTML5から導入された属性です。要素の内容編集の可否を指定する事が出来ます。HTML5からスタイルシートをボディの中にも書けるようになりました。普通ならボディに書いてもブラウザに表示される事はありません。それはブラウザがデフォルトでstyleというタグに対しdisplay:none;という指定をしてるからです。なのでstyleタグをdisplay:block;にすると見れちゃうんです。

下記のテキストはcssなんです。という事は、background-colorのcyanやyellowやmagentaと書いてある所を選択してredとかblueとかに書き換えてみて下さい。背景色が変わるでしょ。Firebugが無くてもできちゃうんです。これをやるには、あともう1つ指定しなければいけない事があります。これをやりたい要素(ここではli)にcontenteditable="true"というの指定が必要です。

2つの必要な指定

liの中に書いたstyleを見えるように指定する。

li style{display:block;}

直接編集したい要素(ここではli)にcontenteditable="true"を指定する。

li class="cyan"contenteditable="true"
リンク元 manakaa.com