CODE ATLAS / 文法辞典
CSSの書き方
よく使う文法・タグ・操作を、短い例で。39項目から探せます。
39 / 39項目
セレクターと宣言
「どこに」「何を」適用するかを書くルールです。
style.css
p {
color: blue;
}余白とボックスモデル
要素の内側と外側には、別々の余白があります。
style.css
p {
padding: 10px;
margin: 20px;
border: 1px solid black;
}文字と色
読みやすさは、サイズと行間でも変わります。
style.css
p {
font-size: 20px;
color: blue;
}Flexboxで横に並べる
一方向に並べたいときの、基本の配置方法です。
style.css
.items {
display: flex;
gap: 10px;
}Gridで一覧を作る
行と列をそろえるなら、Gridが便利です。
style.css
.items {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}画面幅に合わせる
スマートフォンでは、無理に横に並べません。
style.css
p { font-size: 20px; }
@media (max-width: 600px) {
p { font-size: 16px; }
}操作時のスタイル
マウスとキーボードの両方で、操作を分かりやすくします。
style.css
button:hover {
background: yellow;
}コメント
スタイル内にメモを残す。
style.css
/* 文字色を指定 */
p { color: blue; }複数・子孫・子の指定
複数の対象、内側の対象、直接の子を選ぶ。
style.css
h1, h2 { color: blue; }
.card p { margin: 0; }
.list > li { padding: 8px; }id・属性の指定
idや属性の値で対象を選ぶ。
style.css
#title { color: red; }
input[type="email"] { width: 100%; }先頭・末尾・n番目
並びの位置で選ぶ。
style.css
li:first-child { font-weight: bold; }
li:last-child { margin-bottom: 0; }
li:nth-child(2) { color: blue; }除外・状態で選ぶ
一部の要素を除外したり状態で選ぶ。
style.css
button:not(:disabled) { cursor: pointer; }
input:checked { accent-color: blue; }フォーカス
キーボードで選んだ位置を示す。
style.css
button:focus-visible {
outline: 3px solid blue;
}疑似要素
要素の前後に補足を表示する。
style.css
.required::after {
content: "（必須）";
color: red;
}フォント・行間
書体、太さ、行間を指定する。
style.css
body {
font-family: sans-serif;
font-weight: 400;
line-height: 1.8;
}文字揃え・装飾
位置や下線を指定する。
style.css
h1 { text-align: center; }
a { text-decoration: underline; }背景・枠・角丸
面の色と輪郭を整える。
style.css
.card {
background: white;
border: 1px solid gray;
border-radius: 8px;
}影・透明度
影や透け具合を指定する。
style.css
.card { box-shadow: 0 2px 8px #0002; }
.note { opacity: 0.7; }画像の収め方
画像の縦横比を保って枠に収める。
style.css
img {
width: 200px;
height: 150px;
object-fit: cover;
}単位
pxは固定、remはルートの文字サイズ基準。
style.css
p { font-size: 1rem; }
.box { width: 80%; max-width: 600px; }
.hero { min-height: 50vh; }長い文字・改行
折り返しや改行の扱いを決める。
style.css
.text { overflow-wrap: anywhere; }
.memo { white-space: pre-wrap; }変数
色などを一か所で管理する。
style.css
:root { --main-color: blue; }
h1 { color: var(--main-color); }幅・高さ・最大幅
要素の大きさを指定する。
style.css
.box {
width: 100%;
max-width: 600px;
min-height: 100px;
}box-sizing
幅に余白と枠を含めて計算する。
style.css
* { box-sizing: border-box; }上下・左右の余白
2値なら上下と左右の順で指定する。
style.css
.box { margin: 10px 20px; padding: 16px; }中央に置く
幅を決めたブロックを左右中央へ。
style.css
.box { max-width: 600px; margin: 0 auto; }display
配置の種類や表示・非表示を決める。
style.css
span { display: inline-block; }
.hidden { display: none; }Flexboxの揃え方
横方向・縦方向の位置を揃える。
style.css
.row {
display: flex;
justify-content: center;
align-items: center;
}Flexboxの折り返し
幅が足りない項目を次の行へ。
style.css
.row { display: flex; flex-wrap: wrap; gap: 10px; }
.item { flex: 1; }Gridの列と配置
3列に分け、項目を2列分に広げる。
style.css
.grid { display: grid; grid-template-columns: repeat(3, 1fr); }
.wide { grid-column: span 2; }自動で列数を調整
幅に合わせて列数を変える。
style.css
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}相対・絶対位置
親を基準に子の位置を決める。
style.css
.box { position: relative; }
.label { position: absolute; top: 0; right: 0; }固定・追従
画面固定、またはスクロールで追従。
style.css
.button { position: fixed; bottom: 20px; right: 20px; }
.menu { position: sticky; top: 0; }重なり・はみ出し
重なる順番と溢れた内容を扱う。
style.css
.box { position: relative; z-index: 2; overflow: auto; }変化を滑らかにする
状態の変化に時間を付ける。
style.css
button { transition: background-color 0.2s; }
button:hover { background-color: yellow; }移動・拡大
位置や大きさを見た目上変える。
style.css
.box { transform: translateY(10px) scale(1.1); }アニメーション
時間による変化を指定する。
style.css
@keyframes fade {
from { opacity: 0; }
to { opacity: 1; }
}
.box { animation: fade 0.5s; }calc・clamp
値を計算し、最小・最大の範囲に収める。
style.css
.box { width: calc(100% - 40px); }
h1 { font-size: clamp(24px, 4vw, 40px); }動きを減らす設定
利用者の設定に合わせて動きを止める。
style.css
@media (prefers-reduced-motion: reduce) {
.box { animation: none; transition: none; }
}