※本文で使用する「CSS」には正確には「CSSのプロパティ」の意味合いを含むものがありますが、一般的な通用として「CSS」とまとめて表記しています。
2022年6月16日、ついにInternet Explorer（以降：IE）がサポート終了となりました。
これまではクライアントの中にIEで閲覧している人がいる以上はIEでの表示も意識したコーディングが必要でした。
そのためIE以外のモダンブラウザ（Google ChromeやSafari、Firefox、Opera等の最新版）では使えるのに、IEではサポートされていないので使えない（表示が崩れてしまう、モダンブラウザと表示が異なる 等）CSSがたくさんありました。
ですが、IEがサポート終了したことで、今後IEで閲覧しないようMicrosoft社が勧告を出ました。
なので今後はIEでサイトを見る人がいなくなる為、IEでの表示まで意識したコーディングは不要になりました。
そんな今だからこそ、これまで使えなかったけど、今後率先して使って行きたい便利なCSSの中から、HTML/CSSビギナー向きな目線で実際に実務で使えるオススメCSSを10個厳選して、Part1、Part2、Part3の3回に渡って紹介してみようと思います！
今回はその1回目となります。
今回は
・position:sticky
・object-fit/object-position
・justify-content: space-evenly
の3つを紹介します。
IEでは使えなかった便利なCSS 10選
- 01 position:sticky
- 02 object-fit/object-position
- 03 justify-content: space-evenly
- 04 scroll-behavior （Part2で紹介）
- 05 background-blend-mode （Part2で紹介）
- 06 max-inline-size （Part2で紹介）
- 07 :not() （Part3で紹介）
- 08 ::placeholder （Part3で紹介）
- 09 accent-color （Part3で紹介）
- 10 Filter Effects （Part3で紹介）
01 position:sticky
実際に実務で使えそうという意味合いから言うとこれが今回の目玉ではないでしょうか。
position:stickyです。
コーダーの方はpositionというとabsoluteやrelativeやfixedなどをよく使ってあるかと思いますが、stickyというプロパティがあります。
これはrelativeとabsoluteとfixedのいいとこどりのような便利なCSSです。
例えばヘッダーを固定したい場合、これまではposition:fixed;を使っていたと思います。
これを記述すれば(absoluteも同様ですが)ヘッダーは固定されますが、それと同時にヘッダーの下の要素が元々ヘッダーがあったスペースに上がってきてしまいます。そのため、ヘッダー下の要素にmargin-topやpadding-topを取って位置を調整していたと思います。
ですが、このstickyを使えば一発で解決します！
stickyを指定すると、fixedやabsoluteのように要素は指定された位置に固定されます。
ですが、その下の要素は上にあがる事なく、stickyを当てた要素の高さの分、上部のスペースを保った位置から配置されます。
↓ ヘッダー固定のデモはこちら（ここではabsoluteを使用しています）
ヘッダーをabusoluteにした場合
■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■
この部分がヘッダーに隠れてしまう
■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■
H2のタイトルが入ります。
テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。
テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。
テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。
テキストが入ります。テキストが入ります。テキストが入ります。
テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。
テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。
テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。
テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。
テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。
テキストが入ります。テキストが入ります。
ヘッダーをstickyにした場合
■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■
この部分がヘッダーに隠れない
■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■
H2のタイトルが入ります。
テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。
テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。
テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。
テキストが入ります。テキストが入ります。テキストが入ります。
テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。
テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。
テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。
テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。
テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。
テキストが入ります。テキストが入ります。
応用としてフッター固定などでも使えます。
フッターを固定した場合もフッター上の要素に固定したフッターがかぶるので、フッター上の要素にmargin-bottomやpadding-bottomをあてて、固定しているフッター分の高さを指定して全部見えるように調整が必要でしたが、stickyを使えば固定したフッターの高さを計算してフッター上の要素の下にスペースを取ってくれます。
とても便利ですね。(๑>◡<๑)
※stickyを使うにはその要素(A)の親要素(A親)の中にその要素(A)以外の要素(BやC)が入っていなければいけません。
親要素の中にstickyをかけた子要素だけでは機能しません。親のラッパー（スティッキーコンテナ）に対して発動するプロパティなのでご注意ください。
またstickyを指定したヘッダーで先ほどはtop:0;にしましたが、もしtop:100px;などにした場合、上から100pxの位置にヘッダーがきますが、その下から、次の要素が始まるわけではなく、ヘッダーの高さ分のスペースをとったところから次の要素が始まるだけで、次の要素の上にヘッダーが被って表示されることになります。
また、もしヘッダーにmargin-bottomをかけていた場合、そのマージン分もスペースをとったところから次の要素が始まるのも覚えておきましょう。
02 object-fit/object-position
次はobject-fit/object-positionです。
これは画像の表示方法に関するプロパティなんですが、日頃CSSを書いてある方に一番わかりやすい説明としては
背景画像で使用するbackground-sizeでよくcoverやcontainなどを使ってある方も多いと思いますが、あれを背景画像ではなく、普通に配置している画像に対して適応させるようなイメージです。
例えば「投稿一覧のサムネイルがアップロードされた画像サイズがまちまちなために綺麗に揃わず、幅や高さがガタガタになってしまう。どうにか綺麗に揃えられないものか。」
そういう状況はよくあると思いますが、そういう時に従来であれば画像の入る要素のサイズを決めて、その要素の背景画像としてサムネイル画像を表示して、サイズの違う画像をbackground-sizeを使って揃うように調整するという手法をとってきたと思います。
そういう場合にわざわざ背景画像ではなく、実際に要素の中に入っている画像をトリミングすることでサイズを揃えるという手法になります。
例えば画像に対してwidthとheightをCSSを指定したとします。
img{
width:200px;
height:100px;
}
この場合通常「画像のサイズを横200px、高さ100pxにする」
という意味になりますが、ここにobject-fitを指定することで、
「この画像を横200px、高さ100pxでマスクを切る」という意味に変わります。
img{
width:200px;
height:100px;
object-fit:cover;
}
そしてcoverを指定することで横200px、高さ100pxのボックスに対して画像をどう表示するかの指定として
「縦横の短い方を覆うサイズにして長い方は見切れるように」という表示を指示することになります。
coverやcontainはbackground-sizeの指定方法と同じ意味になります。
fill：要素の縦横比とサイズが調整され、ボックスを完全に埋めるように表示されます。
contain：要素の縦横比を保ったまま、ボックスに要素全体が収まるサイズに調整されて表示されます。要素の幅と高さのうち、長いほうだけがボックスにフィットします。
cover：要素の縦横比を保ったまま、ボックスを完全に埋めるサイズに調整されて表示されます。要素の幅と高さのうち、短いほうがボックスにフィットし、長いほうははみ出します。
none：サイズは調整されず、そのまま表示されます。
初期値はfillです
object-positionも同じくbackground-positionと同じと思っていただけば効果を想像しやすいかと思います。
画像に対してマスクサイズを決めてcoverやcontainを指定した際に見えている部分の位置を調整するための値を指定できます。
左右・上下の順でtop、center、left、px等で指定できるのはbackground-positionと変わりません。
それぞれの画像を同じサイズでマスクを切ることが出来ました。
object-positionの初期値は50% 50%でセンター配置となります。
変化を見るために左の画像をtop(object-position:center top;)、右の画像をright(object-position:right center;)と表示の起点を変えてみます。
はい。ちゃんと左の画像は一番上から表示され、右の画像は一番右から表示されました。
このような感じで見せたい部分を指定できます。便利ですね。
バラバラのサイズの画像を揃えたい時に是非とも使ってみてください。
03 justify-content: space-evenly
Part1の最後はjustify-content:space-evenly;です。
これはdisplay:flex;での横間隔指定のプロパティjustify-contentの値の一つです。
justify-contentというとcenterやspace-betweenなどをよく使われるかもしれませんが、space-evenlyというものがあります。
space(スペース)、evenly(均等に)という言葉の通りですが、これは図解するのが一番わかりやすいと思います。
justify-content:center;
justify-content:center;を指定すると、子要素は全部センターに寄って左右のマージンなどを取っていなければ子要素同士ひっついてしまいます。
justify-content:space-between;
space(スペース)、between(間の)
justify-content:space-between;を指定すると、親要素に対して一番最初の子要素が左に、いちばん最後の子要素が右に配置され、残りの子要素は間のスペースを均等に分けて配置されます。子要素が3個の場合は真ん中の要素は丁度真ん中に配置されます。
justify-content:space-evenly;
space(スペース)、evenly(均等の)
justify-content:space-evenly;を指定すると、親要素の中のスペースを均等に分けて子要素が配置されます。すべてのスペースの幅は均等です。
両端が親要素の際に引っ付くのが嫌な場合に使うといい感じにバランスを取ってくれます。
justify-content: space-around;
余談ですが、space-aroundという値もあります。evenlyとの違いが分かりにくいのですが、これは親要素の中のスペースを子要素の左右のマージンで均等に分配します。なので子要素同士の間のスペースは両サイドのスペースの倍（お互いの隣り合う横マージン二つ分）になります。これを使う状況は少なそうですが、一応紹介しておきます。
Part1では３つの即戦力のプロパティをご紹介しました。
便利なCSSはどんどん使っていきましょう。
それではまたPart2でお会いしましょう！
