contenteditable属性の使い方〜HTML5

HTML&CSS

contenteditable属性はHTML5で使用できる属性です。contenteditable=”true”を指定した要素は、ブラウザで閲覧するユーザーが自由に内容を変更できるものです。
アイデア次第でおもしろいサイトができあがることでしょう。

contenteditable属性を使ったサンプル

このサンプルでは、sectionタグにcontenteditable=”true”を指定することでsection要素内の子孫要素を含めて編集可能になっています。
Firefoxの場合は、画像もDeleteキーで消去できます。また、新しい画像をドラッグアンドドロップで挿入することも可能です。(chrome、safariは画像挿入はできませんでした。)
必要に応じてブラウザのメニューから保存でローカルに保存することもできます。

タイトルとURLをコピーしました