contenteditable=""

更新日
仕様 HTML Living Standard
分類 グローバル属性

contenteditable属性は、要素内容が編集可能かどうかを指定します。


<p contenteditable="true">編集可能かどうかを指定します</p>

属性
グローバル属性
contenteditable="" 編集可能かどうか true 編集を可能にする
false 編集できなくする
空文字列 編集を可能にする
  • この属性を省略した場合は、祖先要素の指定内容が継承されます。(祖先要素にも指定がない場合は、ブラウザ側のデフォルトの状態が使用されます)

contenteditable属性を指定すると、通常は編集できない要素であっても、その内容を書き換えることが可能になります。(対応しているブラウザのみ)

例えば、p要素内のテキストを編集可能にすることができます。

指定できる要素

contenteditable属性はグローバル属性のため、全てのHTML要素に指定することができます。

  • ただし、属性と要素の組み合わせによっては効果がない場合もあります。
旧HTMLからの変更点
  • HTML5:contenteditable属性が定義されました。

使用例

  • 以下は、編集した人の環境でのみ、編集内容が反映されることになります。(ソースが書き換わる訳ではありません)
div要素内のテキストを編集可能にした例

<div contenteditable="true">
対応しているブラウザでは、このテキストを編集することができます。改行も入れることができ、印刷プレビューにも反映されます。
</div>

表示例
対応しているブラウザでは、このテキストを編集することができます。改行も入れることができ、印刷プレビューにも反映されます。
div要素内に画像も配置した例

<div contenteditable="true">
<p>テキストの編集だけでなく、画像の位置を動かしたりすることもできます。</p>
<p><img src="logo.png" alt="TAG index" width="89" height="47"></p>
<p>他に、画像をコピーして貼り付けたり削除したりもできます。</p>
</div>

表示例

テキストの編集だけでなく、画像の位置を動かしたりすることもできます。

TAG index

他に、画像をコピーして貼り付けたり削除したりもできます。