カテゴリー: CSS

投稿日:

CSS Subgrid で孫要素の行の高さを揃える

まずは通常の “親 > 子” の Subgrid の例。
.item に subgrid を指定することで .item 内の行の高さを揃えることができる。

<div class="container">
  <div class="item">
    <div class="item-media"><img src="imgPath"></div>
    <div class="item-title">タイトル</div>
    <div class="item-description">美しい風景と自然に触れる冒険に出かけましょう。説明文</div>
    <div class="item-paragraph">テキスト</div>
  </div>
  <div class="item"></div>
  <div class="item"></div>
  …
</div>

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
.item {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 4;
}

See the Pen CSS Subgrid by sho doi (@sho_doi) on CodePen.

次に “親 > 子 > 孫” の場合

<div class="container">
  <div class="item">
    <div class="item-inner">
      <div class="item-media"><img src="imgPath"></div>
      <div class="item-title">タイトル</div>
      <div class="item-description">美しい風景と自然に触れる冒険に出かけましょう。説明文</div>
      <div class="item-paragraph">テキスト</div>
    </div>
  </div>
  <div class="item">
    <div class="item-inner"></div>
  </div>
  <div class="item">
    <div class="item-inner"></div>
  </div>
  …
</div>

というケース。

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
.item {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 4;
}
.item-inner {
  display: inherit;
  grid-template-rows: inherit;
  grid-row: inherit;
}

.item-inner で .item の display, grid-template-rows, grid-row を継承することで孫要素内の行の高さを揃えることができる。

See the Pen CSS Subgrid by sho doi (@sho_doi) on CodePen.

投稿日:

CSS4で追加予定の:matches()擬似クラスが便利

CSS4から追加予定のどれかのセレクタにマッチする擬似クラス:matchesが便利そうです。

既存CSSの冗長な例

CSSをコーディングしていてよくあるのが以下のケース。

  • INFORMATIONというページのテーブルにのみスタイルを指定したい
  • thとtdは基本的に共通するスタイル

CSSだと以下の様になると思います。
（普段はもう少し省略しますがあえてtable以下を全て書いています）

	body#information #content table tbody tr th,
	body#information #content table tbody tr td {
		border: 1px solid #999;
		padding: 1em;
	}

このコードで感じるのが body#information #content table tbody tr が繰り返されていて冗長だなと。2回も同じコード書きたくない…
CSS3で便利な機能が追加されたのでなにか解決方法あるのではと探しましたが現状では不可でした。
※後述のブラウザ独自実装で可能ですが現実的ではありません。

:matches()擬似クラスを使う

というわけで現状では使えませんがCSS4で追加予定の:matches()擬似クラスを使うと簡単に記述できます。

	body#information #content table tbody tr :matches(th, td) {
		border: 1px solid #999;
		padding: 1em;
	}

上記のように:matches()の引数にセレクタを指定することで先のコードと同様の指定となります。便利ですね！CSS3から実装して欲しかったです！！

ブラウザ独自実装 :any()

同機能はFirefoxがversion4から-moz-any()で独自実装していたようです。
:any – MDN
Chromeも-webkit-any()で対応しているみたいですね。

	body#information #content table tbody tr :-moz-any(th, td) {
		border: 1px solid #999;
		padding: 1em;
	}

ただ、両方対応させようとしたらベンダープレフィックスを2つ記述する必要がでてくるので本末転倒になってしまいますから現実的ではありません。IEも多分駄目でしょうし。（未確認）
しかもカンマ区切りが無理だったので以下のようなコードになってしまいます。

	body#information #content table tbody tr :-moz-any(th, td) {
		border: 1px solid #999;
		padding: 1em;
	}
	body#information #content table tbody tr :-webkit-any(th, td) {
		border: 1px solid #999;
		padding: 1em;
	}

というわけでCSS4が待ち遠しいですね。

参考サイト