CSS3 頻度の高いもの一覧用途別用例

この記事は約5分で読めます。

CSS3のプロパティの中でも特によく使われるものを、用途別に分けて表形式でまとめ、用例を含めたリストを作成します。以下の表を参考にしてください。

1. 基本スタイリング（色・フォント・テキスト関連）

プロパティ 用途 用例
color テキストの色を指定 color: #333;
background-color 背景色の指定 background-color: lightblue;
font-size フォントサイズを指定 font-size: 16px;
font-family フォントの種類を指定 font-family: Arial, sans-serif;
font-weight 文字の太さを設定 font-weight: bold;
line-height 行間を設定 line-height: 1.5;
text-align テキストの配置を指定 text-align: center;
text-decoration テキストの装飾を指定 text-decoration: underline;
letter-spacing 文字間隔を調整 letter-spacing: 2px;
word-spacing 単語間隔を調整 word-spacing: 5px;

2. レイアウト調整

プロパティ 用途 用例
margin 外側の余白を指定 margin: 20px;
padding 内側の余白を指定 padding: 10px 15px;
width 要素の幅を指定 width: 80%;
height 要素の高さを指定 height: 300px;
max-width 幅の最大値を設定 max-width: 1200px;
max-height 高さの最大値を設定 max-height: 600px;
min-width 幅の最小値を設定 min-width: 300px;
display 要素の表示方法を設定 display: flex;
position 要素の配置方法を指定 position: absolute;
top / right / bottom / left 配置を調整 top: 10px; left: 20px;

3. ボックスモデリング

プロパティ 用途 用例
border ボーダーを指定 border: 1px solid #ccc;
border-radius 角丸を設定 border-radius: 10px;
box-shadow ボックスに影を付ける box-shadow: 0 4px 8px rgba(0,0,0,0.2);
overflow コンテンツの溢れ方を指定 overflow: hidden;
box-sizing ボックスサイズのモデルを指定 box-sizing: border-box;
opacity 要素の透明度を指定 opacity: 0.8;

4. フレキシブルボックス（Flexbox）の使用

プロパティ 用途 用例
display Flexboxの初期化 display: flex;
flex-direction 子要素の配置方向を指定 flex-direction: row;
justify-content 縦軸方向の配置を調整 justify-content: center;
align-items 横軸方向の位置を調整 align-items: flex-start;
flex-wrap コンテンツ折返しを設定 flex-wrap: nowrap;
order 子要素の表示順序を指定 order: 2;
flex 要素の拡大縮小の指定 flex: 1;

5. グリッドレイアウト

プロパティ 用途 用例
display グリッド表示の初期化 display: grid;
grid-template-rows 行のテンプレートを指定 grid-template-rows: 100px auto;
grid-template-columns 列のテンプレートを指定 grid-template-columns: 1fr 2fr;
gap 行列間のギャップを設定 gap: 20px;
grid-area グリッド領域の指定 grid-area: header;
place-items 横＆縦方向両方の位置を調整する place-items: center;

6. トランジション・アニメーション

プロパティ 用途 用例
transition トランジションを指定 transition: all 0.3s ease;
transition-duration トランジションの時間を指定 transition-duration: 0.5s;
animation アニメーションを指定 animation: slidein 3s;
animation-name カスタムアニメ効果名を指定 animation-name: fadeIn;
animation-duration アニメーション時間を指定 animation-duration: 2s;

7. その他（発展的利用）

プロパティ 用途 用例
z-index 要素の重なり順を指定 z-index: 99;
clip-path 要素を特定の形状でクリップする clip-path: circle(50% at 50% 50%);
cursor マウスカーソルを指定 cursor: pointer;
filter フィルタ効果を付加 filter: blur(5px);

CSSプロパティは非常に多いため、上記は頻度が高いものの一部です。

その他参考リンク

Verified by MonsterInsights