※本文で使用する「CSS」には正確には「CSSのプロパティ」の意味合いを含むものがありますが、一般的な通用として「CSS」とまとめて表記しています。
前回の記事ではIEのサポート終了に伴い使っていきたい3つのCSSを紹介しました。
前回の記事はこちらから
IE（Internet Explorer）がサポート終了したので使っていきたい便利なCSS10選!! 【Part1】
2回目となります今回も3つの即戦力CSSを紹介していきたいと思います。
今回は
・scroll-behavior
・background-blend-mode
・max-inline-size
の3つを紹介します。
IEでは使えなかった便利なCSS 10選
- 01 position:sticky （Part1で紹介済）
- 02 object-fit/object-position （Part1で紹介済）
- 03 justify-content: space-evenly （Part1で紹介済）
- 04 scroll-behavior
- 05 background-blend-mode
- 06 max-inline-size
- 07 :not() （Part3で紹介）
- 08 ::placeholder （Part3で紹介）
- 09 accent-color （Part3で紹介）
- 10 Filter Effects （Part3で紹介）
04 scroll-behavior
サイトが縦に長くなった時にページの下部などに「トップに戻る」のような一番上に戻るためのボタンを設置することがあります。
また、ページの上部に下に続く各見出しに一気にジャンプできるような目次やボタンを設置する「ページ内リンク」「ページ内遷移」などと呼ばれる機能を実装することがあるかと思います。
そのような際、単にアンカーリンクだけで飛ばすと一瞬で移動して、どのような動線で動いたのかも分かりにくい時があるので、一気に飛ぶのではなく、するすると移動の動きを残すためのスクロールの挙動を入れることがよくあります。
今まではスクロールを実装するためにJavaScriptで色々とコードを書かなければなりませんでした。
ですが、htmlタグにscroll-behavior: smooth;というCSSを一行追加するだけでページ内リンクの際にスムーズにスクロールしてくれます！
とっても簡単ですね。
簡単な分デメリットもあるので注意しましょう。
・全てのページ内リンクに反映される
・スピードの設定はできない
・細かい移動先の位置を指定できない
などが主なデメリットとなりますので、これらを気にしなくていい場合にはサクッと実装できます。
05 background-blend-mode
次はbackground-blend-modeです。
これはPhotoshopを使う人だとレイヤー効果というとわかりやすいと思います。
Photoshopでデザインのために使用されてあるレイヤー効果をブラウザ上で再現したり、背景画像と背景色、または背景画像同士に色々な加工（ブレンド）を行うことができます。
例えば以下のように背景画像の上にテキスト画像が浮いているデザインがあるとします。
このテキスト画像に背景画像をブレンドするためにblend-mode(overley)をかけてみます。
すると上のテキスト画像が透過とも違う不思議な背景画像とのブレンドを見せてくれます。
ブレンドモードは他にもscreenやdifferenceなど色々な値がありますので、こちらを参考に色々と試してみてください。
Photoshopのレイヤー効果との関係を理解しておけばカンプの再現にも役立つと思います。
06 max-inline-size
Part2の最後はmax-inline-sizeです。
これは位置指定のCSSです。
例えば「左寄せの文字を中央揃えにしたい」みたいなことはよくあると思います。
そういう場合、これまではテキストをラッパーで囲って、
ラッパーにはtext-alignでcenterを指定して（もしくはflexのjustify-content:center;など）中のテキストはdisplay: inline-block;にしてtext-align: left;などを与えることで実現できましたが、どうしても以下のように周りを囲う必要がありました。
.wrap {
text-align: center;
display: block;
}
.wrap .text {
text-align: left;
display: inline-block;
}
ですがmax-inline-sizeを使えばラップをする必要がありません。
Pタグなどの中央揃えしたい要素（上で言えば.text）に
max-inline-size:max-content;
margin-inline: auto;
を指定するだけです。
この文字は左寄せだけれど
このテキスト自体は中央揃えにしたい
この2行だけで実装できます。
便利なのでぜひ使ってみてください。
Part2でも3つの即戦力のプロパティをご紹介しました。
Part3では残りの4つの即戦力プロパティを紹介したいと思います。
それではまたPart3でお会いしましょう！
