HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTMLのcontenteditable属性とは？使い方を実例付きでわかりやすく解説

HTMLのcontenteditable属性は、要素の内容がユーザーによって編集可能かどうかを、ブール値（true / false）で指定するための属性です。この属性はグローバル属性に分類されるため、どのHTML要素にも適用できるのが特徴です。

contenteditable属性の基本構文

基本的な書き方は以下のとおりです。

<element contenteditable="true|false">

要素を編集可能にしたい場合は true を指定し、編集不可にしたい場合は false を指定します。また、親要素から値を継承させたい場合には空文字列（""）を指定することもできます。

contenteditable属性の使用例

それでは、実際にHTMLでcontenteditable属性を使ってみましょう。次のコードでは、見出し（h2）と段落（p）を編集可能な状態に設定しています。

サンプルコード

<!DOCTYPE html>
<html>
<body>
   <h2 contenteditable="true">デモ用の見出し</h2>
   <p contenteditable="true">これはデモ用のテキストです。</p>
</body>
</html>

実行結果

上記のコードをブラウザで表示すると、見出しと段落がそのまま表示されます。contenteditable属性に「true」が設定されているため、これらの要素はブラウザ上で直接編集できる状態になっています。

HTMLのcontenteditable属性とは？使い方を実例付きでわかりやすく解説

実際にブラウザ上でテキストをクリックすると、通常のテキストエディタのようにカーソルが表示され、内容を自由に書き換えることができます。下のスクリーンショットでは、見出しの文字列を変更した様子を確認できます。

HTMLのcontenteditable属性とは？使い方を実例付きでわかりやすく解説

コードのポイント解説

サンプルコードでは、以下のように見出しとテキストを設定しています。

<h2 contenteditable="true">デモ用の見出し</h2>
<p contenteditable="true">これはデモ用のテキストです。</p>

ここで注目すべきは contenteditable="true" の部分です。このように属性にtrueを設定するだけで、JavaScriptなど特別なスクリプトを書かなくても、Webページ上で直接その要素を編集できるようになります。

h2 contenteditable="true"

まとめ

contenteditable属性を使えば、ブラウザ上で手軽に編集可能なコンテンツを作成できます。メモアプリやリッチテキストエディタ、CMSの入力画面など、ユーザーが直接ページの内容を編集できる機能を実装したい場合に非常に便利な属性です。ぜひ活用してみてください。

  1. HTMLのwrap属性とは？textareaのテキスト折り返し設定を解説

    wrap属性とは HTMLのwrap属性は、<textarea>要素内のテキストを、フォーム送信時にどのように折り返すかを定義する属性です。画面上での見た目だけでなく、サーバーへ送信されるデータに改行コードを含めるかどうかを制御できる点が特徴です。 指定できる値 soft：画面上では自動的に折り返して表示されますが、送信されるテキストには改行コードが挿入されません（デフォルト値）。 hard：画面上の折り返し位置に基づいて、フォーム送信時に改行コードが挿入されます。この値を使用する場合はcols属性の指定が必須です。 構文 wrap属性の基本的な書き方は以下のとおりです。

  2. HTMLのdraggable属性とは？使い方とサンプルコードを解説

    HTMLのdraggable属性とはHTML DOMのdraggable属性は、要素がドラッグ可能かどうかを示す真偽値（boolean）を取得・設定するための属性です。この属性を活用することで、ドラッグ＆ドロップ操作に対応したインタラクティブなWebページを簡単に実装できます。注意：リンク（<a>タグ）や画像（<img>タグ）は、デフォルトでドラッグ可能に設定されています。draggable属性に指定できる値true … 要素をドラッグ可能にするfalse … 要素をドラッグ不可にするauto … ブラウザのデフォルト動作に従うHTML draggable属性の使用例以