【2022年上半期】ホームページ制作・Web制作時に最近良く使うようになったCSSたち

いよいよIEのサポートが終了ですね。
コーディングしていていてもどうせIEで使えないしと新しいものを積極的に使えない時期が長らく続きました。
しかし最近ではIEの事を考えなくなってよくなったこともあり、使いたくても使えなかったりした新しいCSSを積極的に使うようになってきました。

そんな2022年になってよく使うようになったCSSたちを紹介したいと思います。

※細かい説明や使い方は割愛します。
※新しくないのもあります。

fit-content max-content

テキストにマーカーを引いて中央寄せしたい時なんかに便利です。
あとは複数行のテキストで文字は左揃えだけど中央寄せしたい時
flex絡みで画像が縦に伸びちゃったなんて時など他にも使い所はあります。

p {
  width: max-content;
  margin-inline: auto;
}

テキストは左揃え
全体は中央寄せ

fit-content – CSS: カスケーディングスタイルシート | MDN
max-content – CSS: カスケーディングスタイルシート | MDN

clamp()

リキッドデザインのフォントサイズで割りと使います。
無駄にブレークポイントを追加しなくてもなんとかしてくれます。

p {
  font-size: clamp(10px, 2vw, 30px);
}

画面幅によってフォントサイズを変更

clamp() – CSS: カスケーディングスタイルシート | MDN

編集部のおすすめ

REAL COST INCIDENT

APIの設定ミスで、1週間で55万円の請求が！

公開ページと従量課金APIを直結したことで起きた費用事故から、上限・クォータ・監視の設計を整理します。

費用事故から学ぶAPI設計を見る

aspect-ratio

CMSでどんなサイズの画像が入るかわからない時などにラッパーでaspect-ratioを設定して中の画像をobject-fit: cover;にして使っています。
他にもyoutubeとかgooglemapや円を作るときにも便利です。

div {
  width: 30%;
  aspect-ratio: 16/9;
}

img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

aspect-ratio – CSS: カスケーディングスタイルシート | MDN

gap

flexで並べたときの隙間の設定はgapでしています。
:not(nth-child(4n-3)) {margin-left: 20px;}
なんてやる必要はありません。

.flex {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

box

gap (grid-gap) – CSS: カスケーディングスタイルシート | MDN

編集部のおすすめ

SCOPE CREEP

その追加要望、今入れますか？

制作中に増えた要望を、目的・影響・費用・公開時期から判断し、修正・追加対応・公開後対応へ整理する考え方をご紹介します。

追加要望の判断基準を見る

margin-inline

margin-inline: auto;で中央寄せにしています。

div {
  width: 30%;
  aspect-ratio: 2/1;
  margin-inline: auto;
  border: 1px solid currentColor;
}

中央寄せ

margin-inline – CSS: カスケーディングスタイルシート | MDN

display: contents;

最初ただのimgにしていたけどあとからpictureにした時にpictureを無いものにしてくれます。
wordpressなんかで勝手に入れられたdivをないものにしてくれたり、使いようは色々とあると思います。

display – CSS: カスケーディングスタイルシート | MDN

currentColor

疑似要素やaタグの色を親と同じにしたい時に使ったりします。

a {
  color: currentColor;
}

CSS: カスケーディングスタイルシート | MDN

まとめ

IE終了にともなってそれまでは使えなかった便利なCSSを使えるようになりました。
何行か書いていたものが1行でできたりと無駄がなくなりスッキリするので積極的に取り入れていきたいですね。
紹介した物の中にはバグがあったりブラウザによっては思うようにいかなかったりすることもあるのでご使用の際はご注意ください。