← トップページに戻る

ページの装飾

CSSによる見た目・レイアウト・アニメーション・レスポンシブ・テキスト・画像・表示制御に関するリファレンス

見た目系

文字色・背景色の指定

テキストや要素の色を指定する

color, background-color

フォント（種類・サイズ・太さ）

フォントの見た目を制御する

font-family, font-size, font-weight

透明度

要素全体の透明度を設定する

影（box-shadow, text-shadow）

要素やテキストに影を付ける

box-shadow, text-shadow

枠線（border）

要素に枠線を設定する

border, border-style, border-color

角丸（border-radius）

要素の角を丸くする

border-radius

レイアウト系

Flexbox（横・縦並び）

要素を横・縦に柔軟に並べる

display: flex, flex-direction

Grid（格子状配置）

要素を格子状に配置する

display: grid, grid-template

余白（margin, padding）

要素の外側・内側の余白を設定する

margin, padding

幅・高さの指定

要素のサイズを指定する

width, height, max-width, min-height

位置指定（position）

要素の配置方法を制御する

position, top, left, right, bottom

重なり順（z-index）

要素の前後の重なり順を制御する

アニメーション系

トランジション（変化の滑らかさ）

プロパティ変化を滑らかにアニメートする

transition, transition-duration

キーフレームアニメーション

複雑なアニメーションをキーフレームで定義する

@keyframes, animation

変形（拡大・縮小・回転・移動）

要素を拡大・縮小・回転・移動させる

transform, scale, rotate, translate

レスポンシブ系

メディアクエリ（画面サイズ対応）

画面サイズに応じてスタイルを切り替える

@media, breakpoint

可変単位（vw, vh, rem, %）

画面・親要素に相対的なサイズ単位を使う

vw, vh, rem, em, %

コンテナクエリ

親コンテナのサイズに応じてスタイルを変える

@container, container-type

テキスト系

行間・文字間隔

テキストの行間と文字間隔を調整する

line-height, letter-spacing

テキスト揃え（左・中央・右）

テキストの水平方向の配置を指定する

折り返し・はみ出し処理

テキストの折り返しとはみ出しを制御する

white-space, word-break, text-overflow

下線・打消し線

テキストに下線・打消し線などを付ける

text-decoration, underline, line-through

画像・背景系

背景画像の配置・サイズ

背景画像の表示方法を設定する

background-image, background-size, background-position

画像のトリミング（object-fit）

画像をコンテナに合わせてトリミングする

object-fit, object-position

グラデーション

色のグラデーションを作成する

linear-gradient, radial-gradient

フィルター（ぼかし・明度など）

要素にぼかし・明度などの視覚効果を適用する

filter, blur, brightness, contrast

表示制御系

表示・非表示（display, visibility）

要素の表示・非表示を切り替える

display, visibility, opacity

はみ出し処理（overflow）

コンテナからはみ出したコンテンツを制御する

overflow, overflow-x, overflow-y

カーソルの形状変更

マウスカーソルの形状を変更する

cursor, pointer, grab, not-allowed

印刷用スタイル

印刷時専用のスタイルを定義する

@media print, page-break

このサイトについて使用ライブラリ一覧 ☕ Buy Me a Coffee

© UI Memo