Zenn
📑

モダンなCSS記法でコーディングを効率化する

2023/08/23に公開
CSS
Scss
tech

概要

個人的に CSS の記述が効率化されたなと感じた、コーディングの Tips まとめ。

margin-inlineを使用した中央配置

margin: auto;で要素を中央寄せすると、margin-topとmargin-bottomにもautoが適用される。
不要な CSS の指定を避けるために、これまではmargin-right: auto;とmargin-left: auto;で対応してたが、margin-inlineを使用することで記述を短縮することができる。

従来の方法
margin-right: auto;
margin-left: auto;
margin-inlineを使用した例
margin-inline: auto;

insetで一括指定

topやleftなどのプロパティはinsetで短縮が可能。

従来の方法
top: 0;
right: 0;
bottom: 0;
left: 0;
insetを使用した例
inset: 0;

place-itemsを使用した要素の中央配置

flexでは３行かかる中央配置がgridを使用すると２行で実装可能。

従来の方法
display: flex;
justify-content: center;
align-items: center;
gridを使用した例
display: grid;
place-items: center;

gridを使用して画像と文字を重ねる

画像の上に文字を重ねる時にpositionではなくgridで実装する方法。
次のコードで画像の中央に文字が配置されます。タグなどでよく使用する左上に配置する方法も可能。

下記は例です。※containerの中にimgとtitle要素が入っていると考えてください。

style.css
.container {
  display: grid;
  max-width: 500px;
  place-items: center;
}

.container img {
  grid-area: 1 / 1;
  width: 100%;
}

.title {
  grid-area: 1 / 1;
  z-index: 1;
  color: white;
}

inline-flexでflexとinline-blockを指定

inline-blockにしたいけどflexを使いたいときに使用する。

style.css
display: inline-flex;

widthのみで最大幅を指定する

従来の方法
width: 100%;
max-width: 560px;
widthだけで指定する方法
width: min(100%, 560px);
GitHubで編集を提案

Discussion