スタッフブログStaff Blog

HTML5おもしろ属性

Web技術

こんにちわオガタです。
気づけば一ヶ月経っていました。

調べ物をしている時に、ちょっと目に入った記事とかってついつい見ちゃいますよね。
その中でおもしろい技術を見つけました。

仕事で役立つかは分かりません。

 

ではまず下のボタンをおしてみてください。

おすのじゃ

 

 

とくに変わりなさそうですが今のは魔法のボタンです。

例のあの人もびっくり!ページ内のテキストを自由に変更・削除できるようになりました!!

適当に文字をクリックして入力・削除してみてください。

ちなみに僕がすきな呪文は「ルーモス!光よ!」です。

 

 

これは「contentEditable」という属性を付与することでその要素内のテキストは自由に変更できるようになります!

(もちろん更新したり、他のページ移動すれば元に戻ります。)

 

このテキストは編集できます!

 


HTML5にこんな属性があったんですね。

Webの技術はどんどん新しい物が増えるのでワクワクしますね!
その分勉強もいっぱいしないといけないですけどね!

 

TAMさんの記事を参考にさせていただいたのですが、
ブックマークレットにして、スクショ撮りたい時にちょちょっと直せちゃうのは便利かもしれないですね。

 

■参考

君はHTML5の contentEditable 属性を知っているか

  • このエントリーをはてなブックマークに追加