【webデザイン CSS】flexboxでスプリットスクリーンのCSS3のポイント
See the Pen
Split screen layout including responsive by tatsuya☆ラボラトリ【 tatsuya-lab.com 】 (@labtatsuya)
on CodePen.
スプリットスクリーン・レイアウトのCSS3でのポイントです。
まずアスタリスク（*）ですがこれは全称セレクタと言いまして、全てのタグに対して適用することができます。
ただタグにCSSを設定したらタグ名で適用したCSSを優先するようになっています。
ということで、アスタリスク（*）いわゆる全てのタグに対してfont-feature-settings: “palt”;を指定します。
文字の自動カーニング
これは文字の自動カーニングです。
文字組を大事にしているwebデザイナーはブラウザで表示した時の文字間の開きが気になるところです。
プロパティletter-spacingで文字詰できますが一律に詰めるので不自然な文字詰になります。
そんな時にこのfont-feature-settingsプロパティ は文字が持っている元々の詰情報を解放してくれます。
値は”palt”が基本になりますが”palt”で詰めすぎる感じがする場合は”pwid”（プロポーショナル字形に置き換える指定）や”pkna”（仮名や仮名関連の字形セットをプロポーショナル字形に置き換える指定）があります。
背景画像をフルスクリーンで
そして<header>の背景にフルスクリーンで画像を設置するのですが内容は文字が一行だけです。
基本的に内容に応じて背景のサイズが決まりますので文字が一行だけの場合はその文章分の背景しかありません。
それを内容は文章一行で背景画像はフルスクリーンにするためには下準備が必要です。
まず<body>と<html>の幅と高さを100%にしておきます。
ということで
body,html{
width: 100%;
height: 100%;
}を指定しておきます。
そして<header>もフルスクリーンにします。
というわけで
header{
height: 100vh;
}と設定します。
するとheaderにbackground-imageプロパティを指定すると内容に関わらず背景画像がフルスクリーンで表示するようになります。
あとクラス名photo1やクラス名photo2、クラス名photo3の中にある<div>の背景に画像を設置するのですがそのタグを指定するのにクラス名は割り当てずに順番で指定するようにします。
擬似クラスを使って順番指定
これはCSS3から新しく追加された機能でJavaScriptではありましたが、ようやくCSSでも順番指定ができるようになりました。
:nth-of-type(n)でn番目を指定していきます。
これによりわざわざクラス名を付けなくてもCSS上でタグを特定できるようになります。
ここでは:nth-of-type(n)を使って背景画像をひとつずつ変更していきます。
.photo1 div:first-of-type{
background-image: url(https://tatsuya-lab.com/wp-content/uploads/2020/02/h-3.jpg);
}
.photo1 div:nth-of-type(2){
background-image: url(https://tatsuya-lab.com/wp-content/uploads/2020/02/h-4.jpg);
}
.photo1 div:last-of-type{
background-image: url(https://tatsuya-lab.com/wp-content/uploads/2020/02/h-5.jpg);
}