サイト訪問者のために編集可能なウェブページコンテンツを設定する方法を学ぶ

Contenteditable属性の使用

ユーザーが編集できるウェブサイト上のテキストを、予想以上に簡単にすることができます。 HTMLはこの目的のための属性を提供します：contenteditable。

contenteditable属性は、 HTML5のリリースで2014年に初めて導入されました。 それは、それが支配するコンテンツを、サイト訪問者がブラウザ内から変更できるかどうかを指定します。

Contenteditable属性のサポート

最新のデスクトップブラウザのほとんどは、この属性をサポートしています。

これらには、

同じことがほとんどのモバイルブラウザにも当てはまります。

Contenteditableの使い方

編集可能にしたいHTML要素に属性を追加するだけです。 これには、true、false、およびinheritの3つの値があります。 Inheritはデフォルト値です。つまり、要素がその親の値を受け取ります。 同様に、新しく編集可能なコンテンツの子要素も、値をfalseに変更しない限り編集可能です。 たとえば、DIV要素を編集可能にするには、次のようにします。

Contenteditableで編集可能なTo-Doリストを作成する

編集可能なコンテンツは、ローカルストレージとペアにすると最も効果的です。そのため、セッションとサイト訪問の間にコンテンツが存続します。

  1. HTMLエディタでページを開きます。
  2. myTasksという名前の箇条書きリストを作成します。

    • いくつかのタスク
    • 別のタスク
  1. contenteditable属性を
      要素に追加します。
      編集可能なToDoリストが作成されましたが、ブラウザを閉じるかページを離れるとリストは消えます。 解決策：タスクをlocalStorageに保存するための簡単なスクリプトを追加します。
    • ドキュメントのにjQueryへのリンクを追加します。