CSS チートシート
最終更新
セレクタ
スタイルを当てたい要素を狙う方法。
| セレクタ | 一致するもの |
|---|---|
* | すべての要素 |
p | すべての <p> 要素 (タグで指定) |
.btn | class="btn" を持つ要素 |
#main | id="main" を持つ要素 |
div p | <div> 内のすべての <p> (子孫) |
div > p | 直接の子のみ |
a:hover | ホバー中のリンク (擬似クラス) |
li:first-child | 親の中の最初の <li> |
li:nth-child(2n) | 偶数番目の <li> すべて |
input[type="text"] | その属性を持つ入力 |
p::before | <p> の前に生成されるコンテンツ (擬似要素) |
ボックスモデル
すべての要素はボックスです: コンテンツ、パディング、ボーダー、マージン。
| プロパティ | 機能 |
|---|---|
width / height | コンテンツボックスのサイズ |
padding | ボーダーの内側の余白 |
border | 1px solid #333 - 太さ、スタイル、色 |
margin | ボーダーの外側の余白 |
box-sizing: border-box | width にパディング + ボーダーを含める |
margin: 0 auto | ブロック要素を水平方向に中央寄せ |
overflow: hidden | はみ出したコンテンツを切り取る |
タイポグラフィと色
| プロパティ | 例 |
|---|---|
color | color: #333 - 文字色 |
background | background: #fff、または画像/グラデーション |
font-family | font-family: system-ui, sans-serif |
font-size | font-size: 16px (または rem、em) |
font-weight | 400 (標準) … 700 (太字) |
line-height | 1.5 - 行間 |
text-align | left, center, right, justify |
text-decoration | underline, none |
Flexbox
一次元のレイアウト。行または列。親に display: flex を設定します。
| プロパティ (コンテナに) | 機能 |
|---|---|
display: flex | 子要素をフレックスアイテムにする |
flex-direction | row (既定) または column |
justify-content | 主軸に沿って整列 (center, space-between) |
align-items | 交差軸に沿って整列 (center, stretch) |
gap | アイテム間の間隔、例: gap: 16px |
flex-wrap | wrap でアイテムを新しい行に折り返す |
flex: 1 (子に) | アイテムが伸びて空きスペースを埋める |
Grid
二次元のレイアウト。親に display: grid を設定します。
| プロパティ | 機能 |
|---|---|
display: grid | 子要素をグリッドアイテムにする |
grid-template-columns | 1fr 1fr 1fr または repeat(3, 1fr) |
grid-template-rows | 行のサイズを定義 |
gap | 行と列の間の間隔 |
grid-column | 1 / 3 - アイテムを列にまたがらせる |
auto-fit / minmax | レスポンシブなグリッドには repeat(auto-fit, minmax(200px, 1fr)) |
place-items: center | 各アイテムをセル内で中央に配置 |
配置と display
| プロパティ / 値 | 機能 |
|---|---|
position: static | 既定。通常のフロー内 |
position: relative | 通常の位置からずらす |
position: absolute | 最も近い配置済みの祖先を基準に配置 |
position: fixed | ビューポートに固定 |
position: sticky | スクロールしてしきい値に達すると貼り付く |
top / right / bottom / left | 配置済み要素のオフセット |
z-index | 重なり順 (大きいほど手前) |
display: none | 要素をレイアウトから取り除く |
display: inline-block | インラインで並ぶが width/height を受け付ける |
トランジションと変形
| プロパティ | 例 |
|---|---|
transition | transition: all 0.2s ease |
transform: translate | translate(10px, 0) - 移動 |
transform: scale | scale(1.1) - 拡大縮小 |
transform: rotate | rotate(45deg) |
opacity | 0 (透明) … 1 (不透明) |
box-shadow | 0 2px 8px rgba(0,0,0,.15) |
border-radius | 8px - 角を丸める |
単位とレスポンシブデザイン
| 単位 / 機能 | 意味 |
|---|---|
px | 絶対的なピクセル |
% | 親に対する相対値 |
rem | ルートのフォントサイズに対する相対値 |
em | 現在のフォントサイズに対する相対値 |
vw / vh | ビューポートの幅 / 高さの 1% |
fr | 空きスペースの割合 (grid) |
@media (max-width: 600px) { … } | ブレークポイント以下でルールを適用 |
セレクタ、ボックスモデル、flexbox、grid、そしていつも忘れてしまうプロパティを 1 ページにまとめました。この CSS チートシートは、要素を狙うことから中央に配置することまで、Web ページのスタイリングとレイアウトのクイックリファレンスです。
ここに載っているものはすべて標準の CSS で、モダンブラウザで動作します。ルールをコピーするか、CSS を編集して即座にプレビューできる HTML プレイグラウンドでその場で試してみてください。
CSS チートシート よくある質問
この CSS チートシートは無料ですか?
はい。この CSS チートシートは登録不要で無料です。ブックマークしておけば、セレクタやプロパティ、レイアウトのパターンを調べたいときにいつでも使えます。
flexbox と grid のどちらを使うべきですか?
ボタンの並び、ナビバー、1 本の行や列に並ぶアイテムなど、一次元のレイアウトには flexbox を使います。ページレイアウトやカードギャラリーのように、行と列を同時に制御する二次元のレイアウトには grid を使います。両者は相性がよく、カードのグリッドの各カード内部で flexbox を使うのはよくある組み合わせです。
CSS で div を中央に配置するには?
最も簡単なモダンな方法は親に flexbox を使うことです:
display: flex; justify-content: center; align-items: center; で子要素を水平・垂直の両方向に中央寄せできます。幅を設定したブロック要素を水平方向だけ中央寄せするなら、margin: 0 auto でも今でも使えます。CSS をオンラインで練習できますか?
はい。HTML プレイグラウンドを開けば、ライブプレビューつきで HTML と CSS を一緒に書けます。体系的に学びたいときは、Coddy の無料インタラクティブ CSS コースが、セレクタ、ボックスモデル、flexbox、grid を段階的に解説します。
このチートシートは初心者に向いていますか?
はい。セレクタとボックスモデル (基礎) から flexbox、grid、トランジションへと進むので、上のセクションから始めてモダンなレイアウトへと慣れていけます。
関連リソース
他のチートシート
