More than 5 years have passed since last update.

メモ帳をつくる - HTML要素を編集可能にする方法

Last updated at 2018-07-05Posted at 2018-07-04

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

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

editable.html

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

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

#さいごに

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