【2023年】CSS3の最新機能やモジュールについて4選まとめ

4月 10, 2023 4月 10, 2023

こた

こんにちは！静岡県浜松市でホームページ制作をしているフリーランスWEBデザイナーのこたです。

最近のWeb界隈は情報のアップデートが速く、私も時代に取り遅れない様に必死に情報収集に励んでいます。

特にCSS3は様々な便利な機能が増え、WEB制作に役立つ機能を知っているか知らないかでサイトの質と制作スピードがガラリと変わってきます。

そこで今回はCSS3の最新の機能について調べてみましたので、まとめてご紹介いたします。

2023年CSSの最新仕様は？

2023年に最新とされるCSSの仕様は、現在のところまだ策定されていません。（2023/4月時点）
CSSの仕様はW3C（World Wide Web Consortium）によって策定され、最新の仕様はCSS3です。

現在、W3CはCSSの次の大きなバージョンである「CSS 4」についての仕様策定を進めていますが、正式なリリース時期はまだ明確にされていません。

ただし、現在のCSS3でも、新しい機能やモジュールが追加されており、使用することができますので、便利機能をご紹介いたします。

最新のCSS3の機能としては、以下のようなものがあります。

CSS Grid Layout

複数の要素をグリッド状に配置するレイアウト方式です。

CSS Grid Layoutは、HTML要素を縦横のグリッド形式に配置するためのCSSの機能です。
グリッドには、行と列の数、サイズ、配置が指定でき、要素を配置するための多様な方法を提供します。

基本的に、CSS Gridは、親要素にdisplay: gridプロパティを設定し、子要素をグリッド内に配置することで使用します。
以下の例では、3つの列と3つの行を持つグリッドを作成しています。

See the Pen
Untitled by こた@WEBデザイナー (@kota_webdesign)
on CodePen.

この例では、grid-template-columnsとgrid-template-rowsプロパティを使用して、3つの列と3つの行を作成し、各セルの高さを50ピクセルに設定します。
gapプロパティは、セル間の間隔を指定します。

子要素を配置するために、grid-columnとgrid-rowプロパティを使用します。
上記の例では、item1からitem6までのそれぞれの要素に異なるgrid-columnとgrid-row値を指定しています。
これにより、異なる配置を設定できます。

CSS Flexbox Layout

フレキシブルボックスを使用して、柔軟なレイアウトを作成する方法です。

Flexbox Layoutは、HTML要素を行や列の形で柔軟に配置するためのCSSの機能です。
Flexboxを使用すると、要素を垂直方向や水平方向に配置することができ、要素を自動的に調整してレイアウトを作成することができます。

Flexboxを使う場合、親要素に対してdisplay: flex;プロパティを設定し、それによってFlexboxレイアウトが有効になります。
子要素には、flex-grow、flex-shrink、flex-basisといったプロパティを指定することで、親要素内での幅や高さ、配置、余白などを調整することができます。

以下は、基本的なFlexboxレイアウトの例です。

See the Pen
Untitled by こた@WEBデザイナー (@kota_webdesign)
on CodePen.

この例では、親要素である.containerにdisplay: flex;を設定し、子要素である.boxにはflex: 1;を設定しています。
これによって、.boxは等分に幅を取り、余白も均等に設定されます。
justify-contentプロパティは、子要素を親要素内で水平方向にどのように配置するかを指定し、align-itemsプロパティは、子要素を親要素内で垂直方向にどのように配置するかを指定します。

Flexboxレイアウトは、レスポンシブなデザインを作成するのに非常に役立ちます！
親要素と子要素に適切なプロパティを設定することで、画面サイズやデバイスに応じて自動的にレイアウトを調整することができます。

CSS Custom Properties

カスタムプロパティを使用して、再利用可能なスタイルを定義する方法です。

CSS Custom Propertiesは、変数のようなもので、CSSの値を再利用可能にするための機能です。
Custom Propertiesを使用することで、同じ値を何度も繰り返し書く必要がなくなり、CSSの保守性が向上します。

Custom Propertiesは、--から始まる名前を持ち、CSSルール内で定義されます。
以下は、Custom Propertiesを使用した例です。

:root {
  --main-color: #007bff;
  --secondary-color: #6c757d;
}

button {
  background-color: var(--main-color);
  color: white;
}

a {
  color: var(--secondary-color);
}

上記の例では、:rootセレクターを使用してCustom Propertiesを定義しています。
--main-colorは主要な色を表し、--secondary-colorはセカンダリの色を表します。
その後、buttonセレクターでbackground-colorにvar(--main-color)を使用しているため、ボタンの背景色は--main-colorに設定された色になります。

また、aセレクターでcolorにvar(--secondary-color)を使用しているため、リンクの文字色は--secondary-colorに設定された色になります。

Custom Propertiesを使用することで、後で変更することが必要な値を簡単に見つけることができます。
また、同じ値を何度も繰り返し書く必要がなくなるため、CSSのファイルサイズも小さくなるメリットもあります。