ここ数年で変えたHTML/CSSコーディングの実装

Webのコーディングを初めてまだ７年目ですが、当初（２０１７年頃）から比較すると変わったと感じる部分があります。
あくまで主観なので当初や今の主流を断定するものではないことをご了承ください。

中央揃えの話

当時よく多用していたのはtext-align: centerです。
基本的にはテキストの中央揃えがメインですが、inline要素であればそれらも中央にできるので重宝していました。
ただ、以降小要素にも適用されるのでテキストだけ左揃えに直していたのを思い出します。
margin: 0 autoでも同じように実現可能でしたが、これはwidth等で幅が決まっている必要がありました。

See the Pen text-align: center; by kiikikikkkiikikkiikikiki (@kiikikikkkiikikkiikikiki) on CodePen.

 
現在はflex or gridとjustify-content: centerを使うことが多くなり、上記の実装はデメリットを考えるとあまり使用しないです。
2017年代にはありましたが、しっかりの根付いたのはここ数年だったと感じています。

  display: flex or grid;
  justify-content: center;

See the Pen center by kiikikikkkiikikkiikikiki (@kiikikikkkiikikkiikikiki) on CodePen.

 
天地中央の場合は当時はコードが短くて天地中央してる感があるのでtransformの手法をよく使用していました。
その他にmargin: autoとtop:0;right:0;...の方法やpaddingやline-heightで自力で設定していました。
自力はデザインに合わせるためには致し方なしでやっていましたが、あまり良い方法ではなかったと感じます。

  position: relative or absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

See the Pen 天地中央 by kiikikikkkiikikkiikikiki (@kiikikikkkiikikkiikikiki) on CodePen.

これも現在では先ほど紹介したflexとgridにalign-items: centerするだけなので簡単です。擬似要素で頑張る時以外はこの設定をしています。

  display: flex or grid;
  justify-content: center;
  align-items: center;

See the Pen Untitled by kiikikikkkiikikkiikikiki (@kiikikikkkiikikkiikikiki) on CodePen.

最近ではinsetでtop~leftの値を一括指定できるので、margin: autoの方法でも少し楽になったようです。

transformの設定

transformプロパティをアニメーションをさせる際に今までは全ての値を記載し直す必要がありましたが、それぞれ単一のものを指定できるようになりました。
tansitionやanimationのために一々全て書き直す手間が減るのは地味にありがたいです。

.target {
  transform: translateX(50%) rotate(30deg) scale(1.2);
}

.target:hover {
  transform: translateX(50%) rotate(30deg) scale(2);
}

↓

.target {
  translate: 50% 0;
  rotate: 30deg;
  scale: 1.2;
}

.target:hover {
  scale: 2;
}

マージンの設定

マージンで変わったのはmargin-inlineとmargin-blockの登場です。
今まで左右のマージンをautoにするには、下記の方法で書く必要がありました。

  /* 一括指定する */
  margin: 0 auto;
  /* 個別に設定する */
  margin-left: auto;
  margin-right: auto;

一括で書いてしまうとtopとbottomに本来は不要な0を設定することで上書き等問題が発生するかもしれませんし、個別に書く場合は少し長めのプロパティを書いて2行になるのが気になります。
そこでmargin-inlineとmargin-blockで定義することで、それらの問題を解決できるようになりました。

  /* 右左auto指定する */
  margin-inline: auto;
  /* 上下auto指定する */
  margin-block: auto;

また、最近ではIE11がサポートから消滅したことにより、flexやgridのgapをマージンの代わりに使用するケースが増えてきました。

例えば少し前まではカードレイアウトにマージンをつける場合はこのようなマージンの調整をしていました。

  & + .card {
     margin-left: 15px;
  }
  
  &:nth-child(3n + 1) {
    margin-left: 0;
  }
  
  &:nth-child(n + 4) {
    margin-top: 15px;
  }

See the Pen Untitled by kiikikikkkiikikkiikikiki (@kiikikikkkiikikkiikikiki) on CodePen.

これがgap: 15px;だけで済みます。
レスポンシブや2カラムになった時の地獄を考えずに済むようになって安心しています。

See the Pen Untitled by kiikikikkkiikikkiikikiki (@kiikikikkkiikikkiikikiki) on CodePen.

図形を作成する

ボタンの矢印三角（▲）等で図形をコーディングはboderで再現していました。
よく使用していたサイト↓
https://web-generates.com/css-generator/triangle/

  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 100px 100px 100px;
  border-color: transparent transparent #1976D2 transparent;

扱いづらすぎて結局画像にする時があったことを思い出します。

これもclip-pathが普及したことにより、簡単に実装できるようになりました。

  width: 100px;
  height: 100px;
  background-color: #1976D2;
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);

三角以外にも様々な図形に対応しています。
https://bennettfeely.com/clippy/

図形を元に演出に使用することができたりします。

See the Pen Untitled by kiikikikkkiikikkiikikiki (@kiikikikkkiikikkiikikiki) on CodePen.

サイズ指定について

%、px、em、rem...のように色々な単位やcalc()を用いてサイズ指定をしてきましたが、
fit-content, min-content, max-contentが増えました。
使い方の説明は省略しますが、動作のサンプルは以下です。

See the Pen Untitled by kiikikikkkiikikkiikikiki (@kiikikikkkiikikkiikikiki) on CodePen.

 

他にも、今までは頑張ってメディアクエリを細かくサイズ設定していましたが、min(),max(),clamp()の登場によりレスポンシブでの値の変化の設定が簡単になりました。

擬似クラス（:has,:where,:is）の登場

例えば、<img>が存在する場合に.boxのスタイルを変化させる際は、今まで人力でclassをつけるかJavaScriptで判別するかぐらいでした。

  <div class="box intext">
    <p>テキスト</p>
    <img src="image">
  </div>

  .box {
    &.intext {
      background-color: red;
    }
  }

:hasの登場により判別処理や人力で設定不要になりました。

  .box {
    &:has(p) {
      background-color: red;
    }
  }

逆に:is,:whereは、その要素が存在する場合にその要素に対してスタイルを付与できます。

  .box {
    :is(p) {
      background-color: red;
    }
  }

このようにcssだけでも要素の有無を判別できるようになったのはとても便利だと感じています。
:hasに関してはFirefoxがずっと対応遅れていましたが121(2023/12/19)で対応済みです。

アイコンのカラー変更

今まではアイコンを色を変更する場合は、

• 色を変えた画像を用意する
• svgの色を直接書き換える
• svg spriteで実装して書き換える
  を適宜判断して選択していましたが、どれも手間がかかる部分がありました。

最近ではmask-imageで簡単に色を変更できるようにしています。
上記3つよりはわかりやすくて調整しやすいと感じています。
*ベンダープレフィックスが必要です。

  &::before {
    position: absolute;
    right: -25px;
    bottom: 0;
    width: 18px;
    height: 18px;
    content: '';
    background-color: #000;
    mask-image: url(/assets/img/icon_blank.svg);
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
  }

See the Pen Untitled by kiikikikkkiikikkiikikiki (@kiikikikkkiikikkiikikiki) on CodePen.

画像の設定あれこれ

「表示領域は100×100のサイズだけど150×100の画像を伸ばさずに収めたい！」と言った場合に、
今まではbackground-size: coverで頑張って設定してきました。

See the Pen Untitled by kiikikikkkiikikkiikikiki (@kiikikikkkiikikkiikikiki) on CodePen.

しかし、これで実装してしまうとaltの設定はできませんし、画像を追加・差し替えする度にcssの書き換えが発生するので管理が大変でした。

そこでobject-fitを使用することで<img>でもbackground-size: coverと同様の実装ができるようになります。

See the Pen Untitled by kiikikikkkiikikkiikikiki (@kiikikikkkiikikkiikikiki) on CodePen.

また、画像の1:1や4:3の比率を保つためにpadding-topで頑張って設定していましたが、

  padding-top: 100%;   /* 1:1 */
  padding-top: 75%;    /* 4:3 */
  padding-top: 66.66%; /* 3:2 */
  padding-top: 56.25%; /* 16:9 */
  padding-top: 150%;   /* 2:3 */
  padding-top: 200%;   /* 1:2 */

これらもaspect-ratioにより直感的に設定できるようになりました。

  aspect-ratio: 1 / 1;   /* 1:1 */
  aspect-ratio: 4 / 3;    /* 4:3 */
  aspect-ratio: 3 / 2; /* 3:2 */
  aspect-ratio: 16 / 9; /* 16:9 */
  aspect-ratio: 2 / 3;   /* 2:3 */
  aspect-ratio: 1 / 2;   /* 1:2 */

感想

みなさんの中でもここ最近で変えた実装は多々あるのではないでしょうか？
通して思うのはIE11対応が徐々になくなってきたことで違った表現が増えたと感じています。
最近ではsubgridの登場で見出しの高さを揃えるだけのためのJavaScriptを用意しなくてもよくなるのが楽しみです（出たばかりなので様子見）。

レガシーな方法も良いですが、今後も新しい方法も模索していけたらなと思います。