Web

CSSの display: contents について

投稿日:

1. はじめに

CSS の display: contents についてのページを作りました。

デモページ

🔗 CSS: display: contents を試す

2. display: contents とは?

display プロパティに contents を指定したタグは、レイアウトに使用されなくなります(指定されたタグに対してボックスが生成されません)。

デモページでは、display: contents を指定したタグが「ない場合」と「ある場合」とを比較しています。

3. デモで使用している grid を見やすく表示する

デモとして表示している部分には grid を使って、各要素をレイアウトしています。

Chrome ブラウザの DevTools を使うと、grid の部分のレイアウトを分かりやすく表示してくれます(下のスクリーンショットを参照してください)。Microsoft Edge や Firefox でも同じ機能があります。

Chrome DevTools の [Elements]パネルで grid を見やすく表示する
Chrome DevTools の [Elements]パネルで grid を見やすく表示する

4. 使い所?

display: contents の使い所はどこなんでしょうか? あまり思いつきません。

デモで使われている grid なレイアウトであれば、確かに便利であるような気はしますが、実際どうなんでしょうか?

HTMLマークアップの構成はまとまりが良くなりますが、その代わりにレンダリングの処理が分かりにくくなって混乱を招く可能性もありそうです。

📂-Web
-

執筆者:labo


comment

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

関連記事

Web

Screen Wake Lock API を使って、ディスプレイをスリープさせないWebページを作る

Screen Wake Lock API を使ったサンプルページを作りました。

Google

Google マップの地図をウェブページに埋め込む手順

Google マップの地図を、ウェブページに埋め込む手順について説明します。 手順自体は簡単なのですが、Google マップの仕様が時々変わり、操作手順もその影響を受けることがあるため、現時点(201 …

Web

script 要素の src属性に .js 以外の拡張子を指定してもエラーにはならない

script タグの src属性に .js 以外の拡張子を指定してもエラーにはならないという話です。

Web

TypeSquare の導入手順

Webフォントサービスである TypeSquare の導入手順について説明しています。

Amazon ページ右端のカート内商品リストを非表示にする方法

Amazon ページ右端のカート内商品リストを非表示にする方法について説明します。