コース: ウィークリー Web デザインシリーズ

今すぐコースを受講しましょう

今すぐ登録して、23,200件以上登録されている、業界エキスパート指導のコースを受講しましょう。

HTMLでForm要素以外の要素を編集可能にしてみよう！

HTMLでForm要素以外の要素を編集可能にしてみよう！

コース: ウィークリー Web デザインシリーズ

1ヶ月の無料トライアルを開始 法人向けサービス

HTMLでForm要素以外の要素を編集可能にしてみよう！

“

こんにちは、渡辺知規です。 今週は HTML で form 要素を使わなくても 通常の HTML タグで ユーザーが編集可能になる方法について ご紹介していきます。 まずはダウンロードしてきた こちらの「html-content-editable」 というフォルダの中に入っている この index.html を エディターで開いてください。 そしてこれがそのファイルを開いた状態です。 このファイルを使って今回のレッスンの解説を 進めていきたいと思います。 それでは早速、 ファイルの中身を見ていきましょう。 今回注目していただきたい部分が こちらの body タグの中、 この部分となります。 こちらの部分は ３つの要素で構成されています。 まずこちらの部分と そしてこちらの部分と こちらの部分ですね。 まず上のほうから見ていきましょう。 こちらは通常の p タグの中に このようにテキストが 入力されている状態となっています。 そして次に同じように p タグですが、 このように contenteditable="true" という属性が付いています。 このように form 要素でない 通常の HTML タグに対して このように contenteditable="true" と付けることによって、 このタグの中にあるこちらのテキスト部分が ウェブページ上で編集が可能となります。 こちらの下の部分も同じですね。 こちらは ul に対して contenteditable="true" と 付けているのですが、 このようにすることで、 この中のこちらの部分が ユーザーによって ウェブページ上で編集可能となります。 それではこの状態で、 この index.html ファイルを ブラウザで確認してみましょう。 これがその index.html を ブラウザで開いた状態です。 先ほど確認した通り、このように３つの ボックスがありますね。 上が p タグ、下も p タグですが、 ここに contenteditable="true" が 付いています。 そしてこちらは ul タグのほうですが、 こちらにも contenteditable="true" が 付いています。 では実際に試してみましょう。 まず通常の p タグからです。 こちらの部分ですが、 こちらの中をクリックして…

目次