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

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

# 中央揃えの話
当時よく多用していたのは`text-align: center`です。
基本的にはテキストの中央揃えがメインですが、inline要素であればそれらも中央にできるので重宝していました。
ただ、以降小要素にも適用されるのでテキストだけ左揃えに直していたのを思い出します。
`margin: 0 auto`でも同じように実現可能でしたが、これはwidth等で幅が決まっている必要がありました。
<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="ZEwdpwq" data-user="kiikikikkkiikikkiikikiki" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/kiikikikkkiikikkiikikiki/pen/ZEwdpwq">
  text-align: center;</a> by kiikikikkkiikikkiikikiki (<a href="https://codepen.io/kiikikikkkiikikkiikikiki">@kiikikikkkiikikkiikikiki</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>


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

<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="zYeVKVX" data-user="kiikikikkkiikikkiikikiki" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/kiikikikkkiikikkiikikiki/pen/zYeVKVX">
  center</a> by kiikikikkkiikikkiikikiki (<a href="https://codepen.io/kiikikikkkiikikkiikikiki">@kiikikikkkiikikkiikikiki</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>


&nbsp; 
天地中央の場合は当時はコードが短くて天地中央してる感があるのでtransformの手法をよく使用していました。
その他に`margin: auto`とtop:0;right:0;...の方法や`padding`や`line-height`で自力で設定していました。
自力はデザインに合わせるためには致し方なしでやっていましたが、あまり良い方法ではなかったと感じます。
```scss
  position: relative or absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
```
<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="Rwvzobo" data-user="kiikikikkkiikikkiikikiki" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/kiikikikkkiikikkiikikiki/pen/Rwvzobo">
  天地中央</a> by kiikikikkkiikikkiikikiki (<a href="https://codepen.io/kiikikikkkiikikkiikikiki">@kiikikikkkiikikkiikikiki</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>


これも現在では先ほど紹介した`flex`と`grid`に`align-items: center`するだけなので簡単です。擬似要素で頑張る時以外はこの設定をしています。
```scss
  display: flex or grid;
  justify-content: center;
  align-items: center;
```
<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="mdvZOEm" data-user="kiikikikkkiikikkiikikiki" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/kiikikikkkiikikkiikikiki/pen/mdvZOEm">
  Untitled</a> by kiikikikkkiikikkiikikiki (<a href="https://codepen.io/kiikikikkkiikikkiikikiki">@kiikikikkkiikikkiikikiki</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

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

https://developer.mozilla.org/ja/docs/Web/CSS/inset

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

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

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

↓

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

.target:hover {
  scale: 2;
}
```


# マージンの設定
マージンで変わったのは`margin-inline`と`margin-block`の登場です。
今まで左右のマージンをautoにするには、下記の方法で書く必要がありました。
```scss
  /* 一括指定する */
  margin: 0 auto;
  /* 個別に設定する */
  margin-left: auto;
  margin-right: auto;
```
一括で書いてしまうとtopとbottomに本来は不要な0を設定することで上書き等問題が発生するかもしれませんし、個別に書く場合は少し長めのプロパティを書いて2行になるのが気になります。
そこで`margin-inline`と`margin-block`で定義することで、それらの問題を解決できるようになりました。
```scss
  /* 右左auto指定する */
  margin-inline: auto;
  /* 上下auto指定する */
  margin-block: auto;
```

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

例えば少し前まではカードレイアウトにマージンをつける場合はこのようなマージンの調整をしていました。
```scss
  & + .card {
     margin-left: 15px;
  }
  
  &:nth-child(3n + 1) {
    margin-left: 0;
  }
  
  &:nth-child(n + 4) {
    margin-top: 15px;
  }
```
<p class="codepen" data-height="300" data-default-tab="result" data-slug-hash="QWYXGxY" data-user="kiikikikkkiikikkiikikiki" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/kiikikikkkiikikkiikikiki/pen/QWYXGxY">
  Untitled</a> by kiikikikkkiikikkiikikiki (<a href="https://codepen.io/kiikikikkkiikikkiikikiki">@kiikikikkkiikikkiikikiki</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

これが`gap: 15px;`だけで済みます。
レスポンシブや2カラムになった時の地獄を考えずに済むようになって安心しています。
<p class="codepen" data-height="300" data-default-tab="result" data-slug-hash="LYqKbXW" data-user="kiikikikkkiikikkiikikiki" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/kiikikikkkiikikkiikikiki/pen/LYqKbXW">
  Untitled</a> by kiikikikkkiikikkiikikiki (<a href="https://codepen.io/kiikikikkkiikikkiikikiki">@kiikikikkkiikikkiikikiki</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

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

```scss
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 100px 100px 100px;
  border-color: transparent transparent #1976D2 transparent;
```
扱いづらすぎて結局画像にする時があったことを思い出します。

これも`clip-path`が普及したことにより、簡単に実装できるようになりました。
```scss
  width: 100px;
  height: 100px;
  background-color: #1976D2;
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
```
三角以外にも様々な図形に対応しています。
https://bennettfeely.com/clippy/

図形を元に演出に使用することができたりします。
<p class="codepen" data-height="300" data-default-tab="result" data-slug-hash="jOdjyrO" data-user="kiikikikkkiikikkiikikiki" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/kiikikikkkiikikkiikikiki/pen/jOdjyrO">
  Untitled</a> by kiikikikkkiikikkiikikiki (<a href="https://codepen.io/kiikikikkkiikikkiikikiki">@kiikikikkkiikikkiikikiki</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

# サイズ指定について
%、px、em、rem...のように色々な単位やcalc()を用いてサイズ指定をしてきましたが、
`fit-content, min-content, max-content`が増えました。
使い方の説明は省略しますが、動作のサンプルは以下です。
<p class="codepen" data-height="300" data-default-tab="result" data-slug-hash="gOqNmZL" data-user="kiikikikkkiikikkiikikiki" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/kiikikikkkiikikkiikikiki/pen/gOqNmZL">
  Untitled</a> by kiikikikkkiikikkiikikiki (<a href="https://codepen.io/kiikikikkkiikikkiikikiki">@kiikikikkkiikikkiikikiki</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>
&nbsp; 

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

https://coliss.com/articles/build-websites/operation/css/intrinsic-sizing-in-css.html

https://coliss.com/articles/build-websites/operation/css/css-about-min-max-clamp.html

# 擬似クラス（:has,:where,:is）の登場
例えば、`<img>`が存在する場合に`.box`のスタイルを変化させる際は、今まで人力でclassをつけるかJavaScriptで判別するかぐらいでした。
```html
  <div class="box intext">
    <p>テキスト</p>
    <img src="image">
  </div>
```

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

`:has`の登場により判別処理や人力で設定不要になりました。
```scss
  .box {
    &:has(p) {
      background-color: red;
    }
  }
```

逆に`:is,:where`は、その要素が存在する場合にその要素に対してスタイルを付与できます。
```scss
  .box {
    :is(p) {
      background-color: red;
    }
  }
```

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

# アイコンのカラー変更
![家のアイコン素材.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/257183/5ff5c870-a644-7174-2d58-9ccb20209a55.png)
今まではアイコンを色を変更する場合は、
- 色を変えた画像を用意する
- svgの色を直接書き換える
- svg spriteで実装して書き換える
を適宜判断して選択していましたが、どれも手間がかかる部分がありました。

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

```scss
  &::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;
  }
```
<p class="codepen" data-height="300" data-default-tab="css,result" data-slug-hash="JjxgjMr" data-user="kiikikikkkiikikkiikikiki" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/kiikikikkkiikikkiikikiki/pen/JjxgjMr">
  Untitled</a> by kiikikikkkiikikkiikikiki (<a href="https://codepen.io/kiikikikkkiikikkiikikiki">@kiikikikkkiikikkiikikiki</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

# 画像の設定あれこれ
「表示領域は100×100のサイズだけど150×100の画像を伸ばさずに収めたい！」と言った場合に、
今までは`background-size: cover`で頑張って設定してきました。
<p class="codepen" data-height="300" data-default-tab="css,result" data-slug-hash="QWYeWzb" data-user="kiikikikkkiikikkiikikiki" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/kiikikikkkiikikkiikikiki/pen/QWYeWzb">
  Untitled</a> by kiikikikkkiikikkiikikiki (<a href="https://codepen.io/kiikikikkkiikikkiikikiki">@kiikikikkkiikikkiikikiki</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

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

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

<p class="codepen" data-height="300" data-default-tab="css,result" data-slug-hash="bGzXGzG" data-user="kiikikikkkiikikkiikikiki" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/kiikikikkkiikikkiikikiki/pen/bGzXGzG">
  Untitled</a> by kiikikikkkiikikkiikikiki (<a href="https://codepen.io/kiikikikkkiikikkiikikiki">@kiikikikkkiikikkiikikiki</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

また、画像の1:1や4:3の比率を保つために`padding-top`で頑張って設定していましたが、
```scss
  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`により直感的に設定できるようになりました。
```scss
  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 */
```

https://developer.mozilla.org/ja/docs/Web/CSS/aspect-ratio

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

https://coliss.com/articles/build-websites/operation/css/about-css-subgrid.html

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