HTML5メモ書き Contenteditableコンテンツ属性

今日からHTML5の勉強を再開したのでアウトプットの意味を
込めてブログを書いていこうかと思います。

以前からIEに採用されており、有用なので使おうかという「機能の再利用」
の考えから採択されている属性。

「contenteditable」


この属性を使うとその使っている要素は

Webサイト上でも編集することができるようになるものです。

よくCMS（ContentManagementSystem)であるWordpressとかでも

見るかもしれませんが、TinyMCE、いわゆるwysiwygエディタみたいな

リッチテキストエディタなどの機能を実現できるものです。

ちなみにMicrosoftは細かい規定について決めていなかったので

リバースエンジニアリングという形で今回仕様化されています。

使い方

1. <div contenteditable="true">
2. <p>contenteditableで要素を編集可能に！！</p>
3. <p>文字追加や改行も可能です！！</p>
4. </div>

と書くだけで、divの要素内は編集可能になります。

文字を追加したり、消したりと自由に！！

ただし、contenteditable="false"にすると、編集ができませんのでご注意ください。

1. <div contenteditable="true">
2. <p contenteditable="false">編集不可能！！</p>
3. <p>編集可能ですよ！！</p>
4. </div>

以上、本日のHTML5メモ書きでした。