うっかりWindows11にアップデートしてしまい、

「そろそろgridあたりを採用する時期かなぁ」

な気分になったので、別バージョンのテーマを製作開始。

※このサイトにも適用開始

Windows11でIEを使う

基本的に代理店様経由のサイトは、まだIE対応しなきゃいけない。

で、Windows11でもIEを起動できないとまずい。

 

Windows11でInternet Exploer11を起動する方法

いつまで使えるかはわからないが、現状では使える。とりあえず一安心。

 

以下、蛇足。

CSS grid

• IEを使えない環境が一気に増えそう
• ワードプレスのCSSエディタもだいぶ対応してきた

ので、今まで見送ってきたgridを使い始め。

「fr」は赤くならない。

「gap」は赤くなるけど、「grid-gap」はOK。

 

構文上は全く違うけれど、CSSの書き方はflexとtableの中間みたいなイメージ。

使い込むと奥が深いみたいだけど、タイル状に並べる程度なら大変便利。

ベンダープレフィクスを使えばIEにも対応できるけど、時期が時期なのでわざわざ対応はしない。

この状態だとIEではblock表示になって縦に積まれるだけ。まぁ大した問題ではない、とします。

タイル状に並べる

flexでタイル状に並べる際、一番面倒なのは子要素の間隔と思います。こんなのをメディアクエリーごとにずらずら書いてました。

.flex-container	{
	display: flex;
	flex-wrap: wrap;
}
/* ---------- 一部抜粋 ---------- */
@media only screen and (min-width: 744px) and (max-width: 768px)	{
	.flex-c3 .flex-child	{
		width: calc( ( 100% - 3% * 1 ) / 2 );
		margin: 2.99% 0 0 2.99%;
	}
	.flex-c3 .flex-child:nth-of-type( -n + 2 )	{
		margin-top: 0;
	}
	.flex-c3 .flex-child:nth-of-type( 2n + 1 )	{
		margin-left: 0;
	}
}
@media only screen and (min-width: 769px)	{
	.flex-c3 .flex-child	{
		width: calc( ( 100% - 3% * 2 ) / 3 );
		margin: 2.99% 0 0 2.99%;
	}
	.flex-c3 .flex-child:nth-of-type( -n + 3 )	{
		margin-top: 0;
	}
	.flex-c3 .flex-child:nth-of-type( 3n + 1 )	{
		margin-left: 0;
	}
}

• 列数を変えたかったらcalcの計算変えて、n番目を変えて（一発置換できない！）
• 間隔を変えたかったら「3%」「2.99%」を検索＆置換して（端数にしないとIEで段落ちする場合あり）

子要素への指定が必要なのでとにかくめんどくさい。

「space-between」の端数処理に「左寄せ」とかがあればこんなことにはならないんですが、、、

マイナスマージンを使えばもっと簡単と思いますが、それはそれで調整がいろいろと。

 

ホントは、メディアクエリー毎にもっと細かく制御してあったのですが、思い出しながら書いてる最中にも「これ、なんだっけ？」が多発して、うんざり。だいぶ簡略化して記事にしてます。

 

これがgridだと

.grid-container	{
	display: grid;
	grid-gap: 1.5em;
}
@media only screen and (min-width: 744px) and (max-width: 768px)	{
	.grid-container.grid-columns-3	{
		grid-template-columns: repeat( 2, 1fr );
	}
}
@media only screen and (min-width: 769px)	{
	.grid-container.grid-columns-3	{
		grid-template-columns: repeat( 3, 1fr );
	}
}

で済む。

メディアクエリーごとに間隔を変えるとしても1行づつ足すだけ。

 

左右の並び順には専用のプロパティが無いみたいで、「direction: rtl」を使うしかなさそう。

子要素にも継承されちゃうので、「direction: ltr」のリセット指定が必須。

 

また、上下揃えの調整もflexの方がいろいろ細工しやすい感じ。

2列レイアウトで固定ページを装飾するような場合は、flexのままの方が無難かも。

そのほかのCSS

CSS変数や「aspect-ratio」も早く導入したいところなのですが、代理店様経由サイトには全く使えないので、しばらくは実験サイト専用かな。