contenteditable 属性編集可否を指定する

contenteditable 属性は該当する要素内の編集可否を指定します。

contenteditable 属性はグローバル属性に分類され、すべての HTML 要素において使用することができます。HTML5 においては、この属性を指定することによって、ほぼすべての要素が閲覧者によって編集可能になります。編集後に文書をローカル環境に保存したり、そのまま印刷したりすることができます。

ただし、編集した内容をブラウザウィンドウを閉じた後なども継続して利用するには、サーバサイド、もしくは Cookie や localStorage などクライアントサイドの仕組みによりデータを保持する必要があります。

contenteditable 属性の値は下記より選択可能です。

属性値 概要
true 編集可能
false 編集不可
空文字列 上位要素の指定を継承

サンプルソースを見る

contenteditable 属性の仕様

この属性を使用できる要素
  • すべての HTML5 要素

contenteditable 属性のサンプルソース

<p>
 私は <i contenteditable="true" class="interest">サッカー</i> が好きです。
</p>
<!-- 定型文を HTML 文書で作っておき、必要な箇所を編集して印刷するといったことも可能です -->
<article>
<h1>第 <span contenteditable="true">23</span> 回 定例会議のお知らせ</h1>
<p>
 下記の通り、定例会議の開催についてお知らせします。
</p>
<dl>
 <dt>日時</dt>
 <dd contenteditable="true">2013年6月14日 14時~15時</dd>
 <dt>会場</dt>
 <dd contenteditable="true">本社会議室</dd>
</dl>
…省略…
</article>
<!-- 例えば下記のように記述した HTML 文書をブラウザで開くとメモ帳のように使用できます -->
<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8" />
  <title>メモ帳</title>
 </head>
 <body contenteditable="true">
 </body>
</html>
<!-- 上記サンプルは実際には下記の記述だけでも同じです -->
<html contenteditable="true">