初級編のプロパティをマスターしたら、次は「表現力」を高めるステップです。
この記事では、「要素を重ねたい」「動かしたい」「はみ出しを制御したい」といった、少し高度な要望を叶えるためのプロパティをまとめました。
これらを使いこなせれば、あなたはもう立派なフロントエンドエンジニアです！
目次：応用プロパティ
1. 位置と重なり（Z軸）
Webサイトに「奥行き」を持たせたり、スクロールしても付いてくる要素を作ります。
| プロパティ | 意味 | よく使う値の例 |
|---|---|---|
| position | 配置ルール | relative (相対位置・基準点になる)absolute (絶対位置・浮く)fixed (画面に固定)sticky (スクロールするとくっつく) |
| top / right bottom / left |
配置する座標 | 0 (端にピタッと合わせる)50% (真ん中のライン)-10px (わざとはみ出させる) |
| z-index | 重なり順 | 10 (手前に持ってくる)-1 (背景の後ろに隠す)9999 (最前面・モーダルなど) |
2. 動きと変化（アニメーション）
JavaScriptを使わずにリッチな動きを作ります。
| プロパティ | 意味 | よく使う値の例 |
|---|---|---|
| transform | 変形 | translate(-50%, -50%) (位置移動・中央寄せ)rotate(45deg) (45度回転)scale(1.1) (1.1倍に拡大) |
| transition | 変化の時間 (滑らかさ) |
0.3s (0.3秒かけて変化)all 0.5s ease-out (全ての変化を0.5秒で減速しながら) |
| animation | アニメーション実行 | fadein 2s infinite(fadeinという動きを2秒かけて無限に繰り返す) |
3. はみ出し・表示の制御
レイアウト崩れを防いだり、特殊な非表示設定を行います。
| プロパティ | 意味 | よく使う値の例 |
|---|---|---|
| overflow | はみ出し時の挙動 | hidden (はみ出した部分を隠す・トリミング)scroll (スクロールバーを出す)visible (はみ出して表示・初期値) |
| visibility | 可視性 | hidden (見えなくなるが、場所は確保される)※display: none は場所ごと消える違いがある |
| white-space | 改行のルール | nowrap (勝手に改行させない)pre-wrap (エディタの改行や空白をそのまま表示) |
| text-overflow | 文字溢れの表示 | ellipsis (溢れたら「…」にする)※overflow: hidden; white-space: nowrap; とセットで使う |
4. プロ御用達の便利機能
知っていると「魔法使い」になれる、特殊効果プロパティです。
| プロパティ | 意味 | よく使う値の例 |
|---|---|---|
| calc() | 計算式 | width: calc(100% - 40px);(100%から40px引いた幅にする。超便利！) |
| filter | 画像加工フィルター | blur(5px) (ぼかし)brightness(0.5) (暗くする)grayscale(100%) (白黒にする) |
| pointer-events | クリック判定 | none (クリックを透過させる)※画像の上に文字を重ねた時、下のボタンを押させたい時などに使う |
| user-select | テキスト選択 | none (テキストを選択・コピペできなくする)※アプリっぽいUIを作る時に使う |
まとめ：焦らず必要な時に調べよう
ここにあるプロパティは、すべてを常に使うわけではありません。
「画像を暗くしたいな…」「はみ出した文字を点々にしたいな…」と思った時に、このページを思い出してください。
特に calc() は、レスポンシブデザインで最強の武器になるので、ぜひ試してみてくださいね！