CSS3で追加された使えるスタイル

CSS3は、CSSの第3版であり、多くの新しいスタイリング機能が追加されました。以下は、CSS3で追加された主なスタイルを少しご紹介させて頂きます。

ボックスシャドウ（Box Shadow）

box-shadow: 5px 5px 10px #888888;

要素に影を付けるためのプロパティで、位置、ぼかし半径、色を指定できます。

グラデーション（Gradients）

background: linear-gradient(to right, #ff0000, #0000ff);

背景色や文字色などに線形や放射状のグラデーションを作成できます。

角丸（Border Radius）

border-radius: 10px;

要素の角を丸くするためのプロパティで、四隅それぞれに個別の半径を指定できます。

アニメーション（Animations）

animation: slide 2s ease-in-out infinite;

要素にアニメーションを適用するためのプロパティで、キーフレームを使ってアニメーションの詳細を定義できます。

変形（Transform）

transform: rotate(45deg) scale(1.5);

要素を回転させたり、拡大縮小したりするためのプロパティです。

多列レイアウト（Multi-column Layout）

column-count: 2;

テキストコンテンツを複数の列に分割するためのプロパティです。

フレキシブルボックス（Flexbox）

display: flex;

レイアウトを管理するための新しいモデルで、要素の配置を柔軟に制御できます。

グリッドレイアウト（Grid Layout）

display: grid;

2次元のグリッドで要素の配置を管理するためのプロパティで、高度なレイアウトを作成できます。