CSSプロパティの最新トレンドランキング
1. flex
flexboxは、行もしくは列の1次元のレイアウトを制御するプロパティです。最近は非常に一般的に使用されており、既に市民権を得たプロパティの1つです。widthやheightの実数を指定しなくても、割合に応じて自動で配置されるメリットがあります。
例えば、以下のようにflexboxを指定した場合、contenaクラスが適用された要素がフレックスコンテナになり、その直接の子要素（<div>要素）がフレックスアイテムになります。空間が許す限り、sample3を1つ分として、sample2が4つ分、sample1が2つ分で自動的に均等に配置されます。
■サンプル
/* コンテナをフレックスコンテナにする */
.contena {
display: flex;
column-gap: 1em;
}
/* フレックスアイテムのレイアウトと調整を制御する */
.contena > div {
background-color:#ccc;
}
.sample1 {flex:2;}
.sample2 {flex:4;}
.sample3 {flex:1;} さらに詳しい制御のためには、flex-direction（主軸の方向）、justify-content（主軸に沿ったアイテムの配置）、align-items（交差軸に沿ったアイテムの配置）、flex-wrap（アイテムの折り返し）、flex-grow（アイテムの成長率）、flex-shrink（アイテムの収縮率）などのプロパティを使用することができます。
2. grid-template-columns
flexと同様、CSS Grid Layoutも最近ではごく一般的なレイアウトの手法となっています。こちらのページではプロパティランキングのため、grid-template-columnsとして記載していますが、いわゆるdisplay:grid;などと指定するCSSになります。
この「columns」は、列の意味です。
そのため、grid-template-columnsプロパティは、CSS Grid Layoutの列のサイズと数を定義します。値はスペース区切りで指定し、各値が一つの列を表します。
■サンプル
.columns {
display: grid;
grid-template-columns: 1fr 2fr;
}<div class="columns"> <div class="col1">Column 1</div> <div class="col2">Column 2</div> </div>
この例では、columnsクラスが適用された要素がグリッドコンテナになり、そのグリッドには2列があります。1列目は利用可能スペースの1部を占有し、2列目は利用可能スペースの2部を占有します。
このfrはfraction（分数）を意味し、利用可能なスペースに対する相対的な単位を表します。
たとえば、grid-template-columns: 1fr 2fr;と指定すると、最初の列は利用可能なスペースの1部分を、2番目の列は利用可能なスペースの2部分を占めるようになります。合計で3部分あるため、最初の列は全体の1/3、2番目の列は全体の2/3を占めます。
これは、レイアウトが動的に変更されるレスポンシブデザインを簡単に実装できるようにするための非常に便利な単位です。画面のサイズが変更されても、各列は常に指定された比率でスペースを占め続けます。
なお、frはFlexbox（flex）のflex-growプロパティと同様の概念で、残りの空きスペースをどのように分割するかを指定しますが、frはCSS Grid Layout専用の単位であり、Flexboxでは使用できません。
3. grid-template-rows
一方、「rows」は行の意味になります。
grid-template-rowsプロパティは、CSS Grid Layoutの行のサイズと数を定義します。値はスペース区切りで指定し、各値が一つの行を表します。
■サンプル
.rows {
display: grid;
grid-template-rows: 1fr 2fr;
gap: 10px;
}<div class="rows"> <div class="row1">Row 1</div> <div class="row2">Row 2</div> </div>
この例では、.rows内の最初のdiv要素（Row 1）が1行目に自動的に配置され、2番目のdiv要素（Row 2）が2行目に配置されます。grid-template-rows: 1fr 2fr;と指定されているため、最初の行（Row 1）は利用可能なスペースの1部分を、2番目の行（Row 2）は利用可能なスペースの2部分を占めます。合計で3部分あるため、最初の行は全体の1/3、2番目の行は全体の2/3を占めます。
4. transition
CSSの遷移は、あるCSSプロパティの値が別の値に変わるときにその変化を滑らかにすることができます。
■サンプル
/* ボタンのホバーエフェクトを滑らかに遷移させる */
.button {
background-color: blue;
transition: background-color 0.5s ease;
}.button:hover {
background-color: red;
}
以下のボタンにマウスのカーソルでポイントすると色が変化します。
この例では、.buttonクラスが適用された要素がホバーされたときに背景色が滑らかに赤色に変わるように設定しています。transitionプロパティは、遷移させるプロパティ名、遷移の時間、タイミング関数（この場合はease）を指定します。
5. border-radius
border-radiusプロパティは、要素の角を丸くするために使用します。特に、カード型のデザインやボタンなどによく使われます。
■サンプル
.radius {
border-radius: 10px;
}この例では、.radiusクラスが適用された要素の角が10pxの半径で丸くなります。その結果、要素は丸みを帯びたボーダーを持つようになります。
6. opacity
opacityプロパティは、要素の透明度を設定します。値は0（完全に透明）から1（全く透明でない）までの間で指定します。
■サンプル
.transparent-box {
opacity: 0.5;
}この例では、.transparent-boxクラスが適用された要素が半透明になります。
7. box-shadow
box-shadowプロパティは、要素にドロップシャドウ（ボックスシャドウ）を追加します。水平方向の影の位置、垂直方向の影の位置、ぼかしの範囲、広がりの範囲、そして色を指定します。
■サンプル
.shadow-box {
box-shadow: 10px 5px 5px grey;
}この例では、.shadow-boxクラスが適用された要素に右下にグレーのドロップシャドウが追加されます。影は右に10px、下に5pxずれ、ぼかしの範囲が5pxです。
box-shadowも市民権を得た感があり、Googleなどの検索ボックスなどでも見かけることがあります。
8. filter
CSSフィルターは、ぼかし、明度の調整、コントラストの調整、グレースケール変換、セピア変換など、画像にさまざまな効果を適用します。以下に例を示します：
■サンプル
/* 画像をグレースケールに変換する */
.img {
filter: grayscale(100%);
}この例では、.imgクラスが適用された画像が完全にグレースケール（モノクロ）に変換されます。
9. linear-gradient
linear-gradient()関数は、二つ以上の色を直線（線形）に沿ってスムーズに変化させることができます。色の開始点と終了点を指定することで色が一方から他方へと変化します。
■サンプル
.gradient-box {
background: linear-gradient(red, yellow);
}この例では、.gradient-boxクラスが適用された要素の背景が赤色から黄色への線形グラデーションになります。
10. radial-gradient
radial-gradient()関数は、一つの色から他の色へ放射状に変化するグラデーションを作成します。色の開始点（中心点）と終了点（円の端）を指定することで色が中心から外側へと変化します。
■サンプル
.radial-gradient-box {
background: radial-gradient(red, yellow);
}この例では、.radial-gradient-boxクラスが適用された要素の背景が赤色から黄色への放射状のグラデーションになります。
グラデーション関連は、それほど主流とはなっていないかもしれませんが、表現力豊かなデザインの実現が可能となる便利なプロパティです。