usako1124のブックマーク - はてなブックマーク

HTML5 入れ子チートシート | 吉川ウェブ
HTML 5.2のそれぞれの要素が入れ子にできる「子要素」、包含されることが可能な「親要素」の一覧のルールを視覚化して表示します。 ※1 a要素の親要素が包含可能であること※1 audio要素の親要素が包含可能であること※1 canvas要素の親要素が包含可能であること※1 del要素の親要素が包含可能であること※1 ins要素の親要素が包含可能であること子要素省略※1 map要素の親要素が包含可能であること※1 noscript要素の親要素が包含可能であることかつ body要素の子孫であること子要素省略※1 video要素の親要素が包含可能であることルート要素＆文書メタデータ html 親子 head 親子 title 親子 base 親子 link 親子※HTML 5.2から可能。フレージングコンテンツが期待される場所※head要素の子孫であること meta 親子※he
usako1124 2021/12/20
html

cheatsheet
リンク
word-wrap周りのベストプラクティスを考えてみた | 吉川ウェブ
固定幅の要素内で、連続した英字をはみ出させずに折り返したいとき、次のプロパティを使うことが多いと思います。 word-wrap: break-word （または、overflow-wrap: break-word） word-break: break-all ↑こういうやつ結局どっちがいいのか、ということを解決します。結論基本的には word-wrap: break-word のみを使用部分的に word-break: break-all を使う。もしくはなにかプロパティを付加して解決するを推奨します。 word-wrap: break-word と word-break: break-all の2つのざっくりした違い word-wrap: break-word◆（overflow-wrap: break-word）単語があふれないように適切な位置で改行（適切、がポイント） w
usako1124 2019/05/07
css
リンク
HTML5の子要素・親要素の入れ子のルールがすぐわかるツール
HTMLが、HTML5になってから、ありそうでなかったツール。作りました。 HTML5 入れ子チートシート。どういうツールかたとえば、「a要素ってsection要素を子要素にすることってできるんだっけ？」とか「h1要素ってdtのタグで囲んでいいんだっけ？」とか思ったときに調べるツールです。使い方以下にアクセス。調べたい要素にマウスポインタを合わす「親」と「子」が出てくるので、どちらかを押下色が変わった要素が、その要素が取り得ることのできる要素ガラケー以外の、だいたいの端末やブラウザで動くはずです。制作経緯こういったことが簡単にわかるサイトが見つからず（探しきれていないだけかもですが）、仕様書を見てもわかりづらい。 HTML 4.01 は、ブロック要素とインライン要素さえ覚えていれば、なんとかなりましたが、HTML5からは複雑になってしまいました。そこで、「なければ作れ
usako1124 2017/12/21
html

tool
リンク
1