HTML Tag Reference

contenteditable 属性

編集可否を指定する

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

contenteditable 属性はグローバル属性に分類され、すべての HTML 要素において使用することができます。編集後に文書をローカル環境に保存したり、そのまま印刷したりすることができます。

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

contenteditable に指定できる値（キーワード）と意味は下記の通りです。

キーワード 意味
true 編集可能
false 編集不可
空文字列 親要素の指定を継承

contenteditable 属性の仕様

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

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">

用途から目的の要素を探す

用途から HTML 要素を逆引きできます。