僕の好きなcssプロパティ・値5選

こんにちは、うえむーです。

僕の好きなcssプロパティ・値5選を紹介していきます。

今回紹介するcssプロパティ・値は今後、Web標準化されたら実用できそうなものをばかりです。
IEブラウザ・safariの古いバージョンだとモダンなプロパティ・値はサポートされず実務には適用されないのが現状ですが、今後のために覚えても損はないかと思います。

実際に、サンプルを作成してみました。
以下のページにいくつかのモダンなプロパティ・値を利用して実装してます。
こちらのページでいくつか説明していきたいと思います。
https://css-modan.vercel.app/myfavorite-css/

position:sticky;

まず、一つ目の紹介は「position:sticky」です。
stickyは日本語で訳すとベトベトしたという意味になります。

IEブラウザが完全にサポート終了したら一番使いたい値です。
「position:sticky」は追従型のヘッダーや、サイドナビの追従型メニューなどいろんな所に実用できます。

以下のキャプチャーの赤枠で囲っている箇所をstyleで書くと以下のようになります。

画像(1)

// 画像(1)
header {
  display: flex;
  flex-wrap: wrap;
  position: sticky;
  top: 0;
  background: var(--white);
  z-index: 10;
}

サイドナビの追従型メニューの箇所は以下のように記述します。

画像(2)

// 画像(2)
.l-sidebar-wrap {
  position: sticky;
  top: 130px;
}

「position:sticky」は親要素の高さの範囲しか動かないので、注意が必要です。

Can I useで確認すると、サポートされてないブラウザはIEになります。

display: grid;

二つ目の紹介は「display: grid;」です。
今までは以下のように複雑なレイアウトを実装しなければならない時はHTMLの入れ子構造が複雑にしないと実いけなかったのですが、Gridを利用することでHTMLがシンプルに記述できます。

画像(3)

HTMLがシンプルになるのが大きなメリットですが、「grid」は少し癖が強いので慣れるのに時間がかかってしまうのがデメリットです。

上記のキャプチャーの赤枠で囲っている箇所をstyleで書くと以下のようになります。

// 画像(3)
.t-ranking ul {
  display: grid;
  grid-template-columns: calc(100);
  gap: 10px;
}
.t-ranking li {
  position: relative;
}
.t-ranking li:nth-of-type(1) {
  grid-row:1 / 3;
  grid-column: 1 / 3;
}
.t-ranking li:nth-of-type(2) {
  grid-row:1 / 2;
  grid-column: 3 / 4;
}
.t-ranking li:nth-of-type(3) {
  grid-row:2 / 3;
  grid-column: 3 / 4;
}
.t-ranking li:nth-of-type(4) {
  grid-row:3 / 4;
  grid-column: 1 / 2;
}
.t-ranking li:nth-of-type(5) {
  grid-row:3 / 4;  
  grid-column: 2 / 3;
}
.t-ranking li:nth-of-type(6) {
  grid-row:3 / 4;
  grid-column: 3 / 4;
}

IE11もサポートされておりますが、「ベンダープレフィックス」を利用しなければならず他のブラウザと記述方法が異なるので注意が必要です。

gap: XXpx;

gapプロパティは親要素に指定するだけで、上下左右の余白を一括で調整ことができます。
gapプロパティは元々、gridのみでしか利用できなかったのですが、Flexboxでも利用できるようです。
ただし、Safariのバージョンは14以上でないと利用できません。
また、親要素に擬似要素を指定するとその分の余白が生まれるので注意が必要です。

画像(4)

上記のキャプチャーの赤枠で囲っている箇所をstyleで書くと以下のようになります。

// 画像(4)
.t-ranking ul {
    display: grid;
    -ms-grid-columns: calc(100%);
    gap: 10px;
}

Can I useで確認すると、サポートされてないブラウザはIEになります。

aspect-ratio: X, Y;

4つ目の紹介は「aspect-ratio」です。
aspect「アクペクト」というのは縦横の比のことを言います。
昔はブレイクポイント毎に縦横をpx単位で指定したり、少し前までは子要素にabosoluteを指定し、親要素のpadding-topで縦横の比率を計算して実装してました。
aspect-ratioのプロパティを利用することで、youtube・googlemapなどを埋め込み・レスポンシブ対応が簡単に実装できます。

画像(5)

上記のキャプチャーの赤枠で囲っている箇所をstyleで書くと以下のようになります。

// 画像(5)
.l-map {
  overflow:hidden;
  aspect-ratio: 3 / 2;
}
.l-map iframe {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}

今年の9/21にはsafari15 IOS/mac共にリリースされましたが、まだアップデートされてないユーザーが多いので以下のサイトでIOSの利用率を確認してから実装した方がいいでしょう。

http://smatabinfo.jp/os/ios/index.html

scroll-behavior

最後に紹介するプロパティは「scroll-behavior」です、親要素に「scroll-behavior」を指定するだけで以下のようにスクロールトップボタンやスライダー実装ができます。safariのブラウザはサポートされておらず業務での実装はできませんが覚えても損はないかと思います。

画像(6)

画像(7)

上記のキャプチャーの赤枠で囲っている箇所をstyleで書くと以下のようになります。

// 画像(6)
.t-main ol {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    overflow-x: scroll;
    counter-reset: item;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
}
.t-main ol li {
    background-size: 100%;
    position: relative;
    flex: 0 0 100%;
    width: 100%;
    background-repeat: no-repeat;
    top: -50%;
    transform: translatey(50%);
}

// 画像(7)
html {
    scroll-behavior: smooth;
}

...

footer.l-footer [href*="top"] {
    position: fixed;
    width: 40px;
    height: 40px;
    inset: calc(100% - 60px) 0 0 calc(100% - 60px);
    background: var(--black);
    border: 1px solid var(--white);
    border-radius: 50%;
}

以上が僕の好きなcssプロパティ・値を紹介しました。
IEのサポートが終了してないのでモダンなプロパティ・値を利用するのは難しいところですが、今のうちに学習をしても損はないかと思います。
モダンなプロパティ・値を今のうちに慣らしておきましょう。

https://github.com/uemura5683/css-modan/tree/main/myfavorite-css

https://css-modan.vercel.app/myfavorite-css/

https://speakerdeck.com/uemura/pu-falsehao-kinacsshurohateizhi-5xuan