Skip to content

CSS スタイル チートシート

CSS (Cascading Style Sheets) は、ウェブページのレイアウトやスタイリングを制御するために使用されます。このチートシートでは、最も頻繁に使用されるプロパティとセレクターを網羅しています。

セレクター

タイプ 例 説明
All * { } すべての要素に一致
Type h1 { } 指定した HTML タグに一致
Class .header { } class=“header” の要素に一致
ID #main { } id=“main” の要素に一致
Descendant div p { } div 内のすべての p に一致
Pseudo a:hover { } マウスホバー時の状態

ボックスモデル 

.box {
  width: 300px;
  height: 200px;
  padding: 10px;    /* 内側の余白 */
  border: 1px solid #ccc; /* 枠線 */
  margin: 20px;     /* 外側の余白 */
  box-sizing: border-box; /* 枠線とパディングを含む */
}

タイポグラフィ

Property 説明 例
font-family フォントファミリー font-family: Arial, sans-serif;
font-size フォントサイズ font-size: 16px;
font-weight フォントの太さ font-weight: bold;
text-align テキストの配置 text-align: center;
line-height 行の高さ line-height: 1.5;
color 文字色 color: #333;

色と背景

Property 説明 例
background-color 背景色 background-color: #f0f0f0;
background-image 背景画像 background-image: url('bg.jpg');
background-size 背景のサイズ background-size: cover;
opacity 不透明度 opacity: 0.8;

ポジショニング

  • position: static; : デフォルトのフローレイアウト
  • position: relative; : 元の位置からの相対的なオフセット
  • position: absolute; : 最も近い static 以外の親要素を基準とした配置
  • position: fixed; : ブラウザウィンドウを基準とした固定配置
  • position: sticky; : 特定のスクロール位置で固定される粘着配置
  • z-index: 10; : 重なりの順序を制御

表示とレイアウト

  • display: block; : ブロック要素
  • display: inline; : インライン要素
  • display: inline-block; : インラインブロック要素
  • display: flex; : フレックスボックスレイアウトを有効化
  • display: grid; : グリッドレイアウトを有効化
  • display: none; : 非表示（スペースを占有しない）

プロパティの省略形

  • margin: 10px 5px 15px 20px; (上 右 下 左)
  • padding: 10px 5px; (上下 左右)
  • border: 1px dashed red; (幅 スタイル 色)