contenteditable属性の使い方〜HTML5

HTML&CSS

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

contenteditable属性を使ったサンプル

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

スポンサーリンク

お勧め書籍

AI関連

Python

JavaScript

HTML CSS関連

統計学

HTML&CSS Tips
スポンサーリンク
dororoをフォローする
IT工房|AI入門とWeb開発|エンジニアのグルメ日記
タイトルとURLをコピーしました