イイダリョウのブログ。CSSHTML5で新たに追加されたfigure要素とvideo要素。なんとなく画像はfigure要素、動画はvideo要素というイメージを持っていたが、figure要素はもっと広い用途に当てはまり、video要素も内包する要素でした。HTMLのセマンティック(文書構造)的にもCSSのスタイル(装飾)的にもvideo要素はfigure要素で囲った方が良いことがわかりました。クモのようにコツコツとfigureは画像ではなく「注釈」figureについてこんな記事を見つけました。へー「コードの列挙」(pre要素)もfigureなんだ?さらにこの記事では表組み(table要素)もfigureで囲うとしている。ちなみに自分の場合は画像全部をfigureを囲っているわけではなく、アイコンや背景などは囲わない。あと、ビットマップ画像の表はfigureで囲うがtable要素は囲っていなかった(不統一という認識がなかった)。inlineだった!もうひとつ気になったのがvideo要素。動画もある意味では画像とおなじく「注釈」といえるのではないか。そんなことを考えているとこんな記事が。MDNvideo要素は置換要素です。ビューポートの既定の幅と高さは埋め込まれる映像で定義されます。ほえ?displayがinlineとな?なぜに?ほんとかなぁためしにp要素の中にインラインでvideo要素を入れてみる。ああああああああああああああああ</p></section></article>あ!ほんとだ!インラインになった!ど、どーゆーこと?太字とか斜体、アイコンみたく文章の中に文字と同サイズで入れ込むような使い方はあまりないだろうに。blockなので改行されるちなみに、figure要素のdisplayはデフォルトでブロックです。文章とは独立しても成立する「注釈」なのでp要素(段落)と同じく改行する。ああああああああああああああああ</p></section>figure要素でvideo要素を囲うとセマンティック、スタイル両面でベターと、いうことで、video要素もfigure要素で囲うとちゃんと改行してくれます。ああああああああああああああああ</p></section>セマンテック(文書構造)的にもスタイル(装飾)的にもvideo要素はfigure要素で囲うのがベターだと感じました。他にも、pre要素、table要素も本文から独立した注釈的な位置付けであればfigureで囲うのが望ましいと思います。*2最後に:どうせ囲うならセマンティックGoogleの検索技術が向上すると、厳密じゃないHTMLのタグでもコンテンツの内容を正しく読み取ってくれる可能性があります。Googleの機械は読みとってくれても、人間(共同作業のメンバーや半年後の自分)にとっては話が別です。スタイル的にブロックにしたいだけならdiv要素でもなんでもいいんです。第三者がHTMLのコードを見て一目で意味がわかるのが望ましい。「それ」としか解釈しようがないものは、ふさわしい「それ」で囲う。div要素やspan要素などの汎用的なタグは、他にふさわしいものない時の「最終手段」として登場されたいものです。CSSやってみたシリーズqiita.com*1:もしかしてアニメーションアイコン用?レアケースだよなw*2:ちなみにfigcaption要素(キャプション)の有無はfigure要素で囲う理由にはあまり作用しないと思います。Gridで12分割グリッドシステムが簡単に作れた(grid-template-areas推し...HTML要素を横に並べる方法はいくつかあるが、その中の一つ「CSS...2018-10-30【CSSドット絵】マリオ立ちポーズとジャンプポーズの切り替え以前、CSSだけでドット絵がかけるのか、というシリーズをやって...2018-07-05CSS変数でドット絵マリオをルイージにしたった!「CSSドット絵マリオ」の続きです。はてなブログProフロントエンドエンジニア。神奈川に住まう四十路のオジキ。DTP→Webデザイナーから転向し今に至る。引き続きコツコツの日々。(24)リンクTwitterInstagramYoutubeCodePenGitHubPinterestQuolaFacebooknoteQiitaはてなブログをはじめよう!idr_zzさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。