contentEditable 属性とは？
contentEditable属性は、HTML 要素をユーザーがブラウザ上で直接編集できるようにする機能です。この属性を指定することで、簡単にテキストを入力・変更可能なエディタを作成できるため、WYSIWYG（What You See Is What You Get）エディタにも利用されています。
基本的な使い方
contentEditable属性は、以下のように任意のHTML要素に追加して使用します。
この例では、div要素にcontentEditableが設定されているため、trueを指定すると編集可能になり、false を指定すると編集が無効になります。 また、plaintext-onlyの場合は太字のテキストを貼り付けた場合でもプレーンなテキストとして処理されます。
※デフォルトはfalseです。
<div contentEditable="true">
ここは編集可能です
</div>
<div contentEditable="false">
ここは編集可能です
</div>
<div contentEditable="plaintext-only">
plaintext-onlyです
</div>実装例
WYSIWYGエディターの実装
contentEditable属性を利用すると、HTMLコンテンツを視覚的に編集できるWYSIWYGエディタを実現できます。これにより、ブログの投稿作成画面やCMSのコンテンツ管理機能として、ユーザーがブラウザ上で直感的にテキストやレイアウトを編集できる環境を提供することができます。
バナー画像の作成
テンプレートを用意し、指定された部分や要素を画像としてキャプチャするための JavaScript ライブラリのhtml2canvas等を使用してテキスト部分だけを柔軟に変更して簡単にバナーを作成することができます。
履歴書の作成
履歴書のフォーマットを用意し、HTML コンテンツをPDFドキュメントとして変換するための JavaScript ライブラリのhtml2pdf等を使用することで必要項目を入力して簡単にPDFに変更することができるので就活等で利用できるアプリケーションを作成することができます。
注意点
ブラウザ間の互換性
contentEditableの動作は、ブラウザによって異なる場合があります。特に、plaintext-onlyはFirefoxでは対応していないので注意が必要です。
セキュリティリスク
単純にテキストを表示する場合は、ブラウザが自動的にHTMLエスケープを行うため、基本的に安全ですがJavaScriptで内容を操作する場合やコピペの際にXSS（クロスサイトスクリプティング）やHTMLインジェクションのリスクがありますので入力内容を適切にサニタイズし、悪意のあるコードが実行されないようにする必要があります。
まとめ
contentEditable属性は、HTML要素をブラウザ上で直接編集可能にするシンプルな方法で、多くのウェブアプリやCMSで活用されています。特にWYSIWYG エディタの構築に便利で、ユーザーがテキストや HTMLコンテンツを視覚的に編集できる機能を提供します。この属性はどのHTML要素にも設定でき、true で編集可能に、falseで編集不可にすることが可能です。また、plaintext-onlyを使用すると、HTML タグを除外してプレーンテキストのみの編集が可能ですが、この設定はFirefoxなど一部のブラウザではサポートされていない点とXSSやHTMLインジェクションの留意が必要です。
参考文献
contenteditable – HTML: ハイパーテキストマークアップ言語 | MDN
About – html2canvas
html2pdf.js | Client-side HTML-to-PDF rendering using pure JS.
HTML5&CSS3デザイン 現場の新標準ガイド【第2版】
