はじめに

この記事では、HTMLファイルをブラウザで開いた後、内容を編集可能にする方法を紹介します。

やり方

HTMLファイルのテキスト関連のタグ内に、「contenteditable="true"」を記入します。
先ほどのGIFのHTMLファイルは下記のように記述されています。

editable.html

    <h1 contenteditable="true">編集可能タイトル</h1>
    <div contenteditable="true">編集可能コンテンツ</div>
    <h1>編集できないタイトル</h1>
    <div>編集できないコンテンツ</div>

「contenteditable="true"」が記述されていないタグについては、編集ができません。

保存やテキスト装飾を組み合わせれば、Evernoteライクなページを作成することができます。
見た目も、textareaよりカッコいいです！