こんにちは！Reiです(˵ •̀ ᴗ – ˵) ✧
CSSを書いていると、
「中央寄せって何で指定するんだっけ？」
「影やぼかしって、何をどう使い分ければいいの？」
など、どんなCSSを使えば良いか悩んでしまって、手が止まってしまうことはありませんか…？ 👀
その原因になりやすいのが、CSSをプロパティ単体で覚えようとしてしまっていることです。
CSSは、1つの指定だけで完結するよりも、
複数の指定を組み合わせて整える場面のほうが圧倒的に多いものです。
だからこそ大事なのは、「この場面ではこの組み合わせを使う」という形で、定番パターンとして押さえること。
この考え方で実装できると、
- 中央寄せや横並びを迷わず書ける
- 省略表示や改行制御の抜け漏れが減る
- 見た目の装飾を目的ごとに使い分けやすくなる
といった形で、実装がかなり安定してきます ✨
＼＼ この記事で学べること ／／
・CSSを組み合わせで考える基本
・レイアウト / 余白 / 文字 / 見た目 / 動きの定番パターン
・よく使うCSSプロパティの役割の違い
・実装で迷いやすい指定の整理の仕方
「なんとなく書いていたCSS」を、なぜその組み合わせなのかという視点で整理しながら身につけていきましょう ᥫᩣ ̖́-
CSSは「プロパティ」より「組み合わせ」で考える
ここからは、CSSの考え方について整理していきます 👀
まずは、「なぜCSSで迷いやすいのか」と「どう整理すると使いやすいのか」から見ていきましょう！
CSSは単体よりセットで覚えると使いやすい
CSSは、1つのプロパティだけで完結する場面よりも、複数の指定を組み合わせてレイアウトを整える場面のほうが多いです。
たとえば、
display: flex;
だけでは横並びになるだけですが、
display: flex;
justify-content: center;
align-items: center;
と組み合わせることで、中央寄せまで一気に整えることができます。
テキストの省略表示でも同じで、
overflow: hidden;
だけでは不十分で、
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
のように複数の指定を組み合わせる必要があります。
このように、CSSは「単体のプロパティ」ではなく「プロパティの組み合わせでひとつの役割を作るもの」として覚えていきましょう！
まずは役割ごとに分けて見ると整理しやすい
CSSで迷ったときは、最初に「何を整えたいのか」を決めると整理しやすくなります。
たとえば、
- 配置を整えたいのか
- 余白を調整したいのか
- 文字を整えたいのか
- 見た目を装飾したいのか
- 動きをつけたいのか
といったように、目的ごとに分けて考えるのがポイントです。
プロパティ名から考え始めるよりも、「やりたいこと」から考えたほうが迷いにくくなります 👀
今回の記事では、
- レイアウト
- サイズと余白
- 文字
- 背景と見た目
- アクション
という流れで整理しています！
レイアウトでよく使う定番パターン
ここからは、レイアウトまわりでよく使うCSSを見ていきます 👀
要素の並び方や位置調整は、CSSの中でも特に出番が多い部分です。
毎回ゼロから考えるより、まずは定番の形を持っておくとかなり書きやすくなります。
配置まわりでよく使うパターンから順番に見ていきましょう！
上下左右の中央に置くならflexの中央寄せを使う
要素を上下左右の中央に配置したいときは、Flexboxの組み合わせが定番です。
.parent {
display: flex;
justify-content: center;
align-items: center;
}
このコードでは、親要素に display: flex; を指定し、justify-content と align-items を使って中央に配置しています。
ポイント 💡
・ display: flex; → 子要素を横並び（フレックスレイアウト）にする
・ justify-content → 主軸方向（横方向）の配置を決める
・ align-items → 交差方向（縦方向）の配置を決める
この3つを組み合わせることで、上下左右の中央に揃えることができます。
ローディング表示やモーダルの中身など、中央に配置したい場面でよく使われる基本パターンです！
※ 主軸と交差方向は、flex-direction によって縦横が入れ替わる点に注意
横並びや折り返しはflexの基本セットで考える
要素を横並びにしたいときや、折り返して表示したいときも、Flexboxの組み合わせが使われます。
.row {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
このコードでは、display: flex; で要素を横並びにし、justify-content で配置を、flex-wrap で折り返しを制御しています。
ポイント 💡
・ display: flex; → 子要素を横並びにする
・ justify-content → 横方向の配置を調整する（space-between は、両端に寄せつつ要素の間を均等に広げる配置）
・ flex-wrap → 要素を折り返すかどうかを決める
カード一覧やナビゲーションなど、横並び＋折り返しが必要なUIでよく使われる基本パターンです。
絶対配置や固定配置は基準になる親を意識する
要素を好きな位置に配置したいときは、position を使います。
.parent {
position: relative;
}
.child {
position: absolute;
top: 0;
right: 0;
}
このコードでは、子要素に position: absolute; を指定し、親要素を基準にして位置を決めています。
position は、要素の配置方法を指定するプロパティで、どの位置を基準にして要素を配置するかを制御します。
ポイント 💡
・ position: absolute; → 基準となる要素をもとに自由に配置する
・ position: relative; → 子要素の配置基準になる
・ top / right / bottom / left → 位置を指定する
画面の右上にボタンを置きたいときや、カードの中にアイコンを重ねたいときなど、位置を自由にコントロールしたい場面で使われます。
このセットで指定しましょう↓
親：position: relative;
子：position: absolute;
・ absolute は「最も近い position が指定された親要素」を基準にします
・ 親に position を指定しない場合、画面全体（body）が基準になります
サイズと余白でよく使う定番パターン
ここからは、サイズや余白まわりでよく使うCSSを見ていきます 👀
レイアウトが崩れる原因の多くは、サイズの指定や余白の扱い方にあることも…。
見た目がズレる・はみ出る・思った通りにならない、といった問題は、このあたりの理解で解決できることがかなり多いです。
box-sizingは先に整えておくと扱いやすい
サイズ指定で迷いにくくするなら、box-sizing: border-box; を先に入れておくのが定番です。
*,
*::before,
*::after {
box-sizing: border-box;
}
このコードでは、すべての要素に対して box-sizing: border-box; を適用しています。
box-sizing は、要素のサイズ（width / height）の計算方法を指定するプロパティで、padding や border を含めるかどうかを切り替えます
ポイント 💡
・ border-box → width / height に padding と border を含めて計算する
・ content-box → width / height に padding と border を含めない（デフォルト）
計算イメージ↓
/* border-box */
width: 100px;
padding: 20px;
/* → 実際の幅は 100px のまま */
/* content-box */
width: 100px;
padding: 20px;
/* → 実際の幅は 140px になる */
レイアウトのズレやはみ出しを防ぐためにも、最初に全体へ適用しておくことが多い基本設定のひとつでもあります！
サイズ計算がズレる場合は、「box-sizing の設定がどうなっているのか？」を確認すると原因を見つけやすくなります 💡
・ border-box を使うと、指定した幅の中に padding が収まるためレイアウトが崩れにくくなる
・ content-box のままだと、padding を足した分だけ要素が大きくなる
画像や動画は比率を保ちながら収める
画像や動画を枠に収めるときは、比率を保つかどうかを意識するのがポイントです。
.thumbnail {
width: 100%;
height: 100%;
object-fit: cover;
}
.media {
aspect-ratio: 16 / 9;
width: 100%;
}
このコードでは、object-fit と aspect-ratio を使って、画像や要素の見え方をコントロールしています。
object-fit は img や video などの中身の表示方法を調整するプロパティで、aspect-ratio は要素そのもののサイズ比率を保つために使うプロパティです。
ポイント 💡
・ object-fit: cover; → 枠いっぱいに表示しつつ、はみ出た部分は切り抜く
・ object-fit: contain; → 全体を表示しつつ、枠に収める（余白ができる）
・ aspect-ratio → 要素の縦横比を固定する
カードのサムネイルや動画プレイヤーなど、見た目を崩さずに収めたい場面でよく使われます。
迷ったときは、
- 枠を埋めたい → cover
- 全体を見せたい → contain
のように考えると選びやすくなると思います 👀
高さは固定しすぎずmin-heightで考えると崩れにくい
高さを height で固定すると、中身が増えたときにレイアウトが崩れることがあります。
.section {
min-height: 500px;
}
このコードでは、min-height を使って最低限の高さだけを指定しています。
ポイント 💡
・ height → 高さを固定する
・ min-height → 最低限の高さを確保しつつ、内容に応じて伸びる
・ max-height → 高さの上限を制限する
ヒーローエリアやカード、案内ボックスなど、中身の量が変わる可能性がある要素で使われます。
「高さを固定したいのか、それとも中身に合わせたいのか」、「要素をどこまで広げてよいのか」を考えてみると、height / min-height / max-height のどれを使うべきか決めやすくなります 💡
テキストでよく使う定番パターン
ここからは、文字まわりでよく使うCSSを見ていきます 👀
テキストの指定は見た目だけでなく、読みやすさや使いやすさにも直結する重要な部分です。
特に、省略表示や改行の制御は、一覧UIやカードデザインでも頻繁に出てきます！
文字まわりは細かい調整が多い分、後からの修正や崩れが起きやすいポイントでもあります。
基本の形を先に整理して、安定して扱えるようになりましょう！
1行や複数行の省略表示はセットで覚える
テキストを ... で省略したいときは、1つの指定だけでは実現できません。
.single-line {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.multi-line {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
このコードでは、1行と複数行それぞれで、必要なプロパティを組み合わせて省略表示を実現しています。
ポイント 💡
・ 1行省略 → white-space / overflow / text-overflow をセットで使う
・ 複数行省略 → -webkit-line-clamp と display: -webkit-box を組み合わせる
・ overflow: hidden; はどちらでも必要になる
text-overflow: ellipsis; だけでは省略は機能しないことに注意してください。
複数行省略はブラウザ依存の指定になるため、対応状況に注意
行間や改行の制御で読みやすさを整える
文字サイズだけでなく、行間や改行の仕方も読みやすさに大きく影響します。
文章が詰まって見える、単語がはみ出す、といった問題は、このあたりの調整で改善できることが多いです。
.text {
line-height: 1.8;
overflow-wrap: break-word;
}
このコードでは、line-height と overflow-wrap を使って、テキストの読みやすさを整えています。
ポイント 💡
・ line-height → 行間を調整して、文章の読みやすさを整える
・ overflow-wrap: break-word; → 長い単語やURLのはみ出しを防ぐ
記事本文や説明文など、長いテキストを扱う場面で特に重要な調整です。
・ line-height は 1.5〜2 くらいで調整すると読みやすくなりやすい
・ overflow-wrap を指定しないと、長い単語がはみ出すことがある
文字の装飾は影や間隔を少しだけ使う
文字に印象を加えたいときは、text-shadow や letter-spacing を使います。
.title {
letter-spacing: 0.04em;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
}
このコードでは、文字の間隔と影を調整して、見た目の印象を少しだけ変えています。
ポイント 💡
・ letter-spacing → 文字間を調整して詰まりをやわらげる
・ text-shadow → 背景とのコントラストを補助する
見出しや強調テキストなど、少しだけ印象を調整したい場面で使われます。
装飾は強くかけるよりも、読みやすさを崩さない範囲で整えるのがポイントです。
・ letter-spacing は 0.02〜0.05em 程度の小さな調整が使いやすい
・ text-shadow は強くしすぎると読みにくくなる
背景と見た目でよく使う定番パターン
ここからは、背景や見た目まわりでよく使うCSSを見ていきます 👀
色や影、ぼかしなどの装飾は、画面の印象を大きく左右する要素です。
同じレイアウトでも、ここを整えるだけで雰囲気が大きく変わります！
装飾は増やしすぎると情報量が多くなり、見づらくなってしまうので、見た目を整えるときは、
- 背景を少し華やかにしたいのか
- 要素を浮かせたいのか
- 奥行きや柔らかさを出したいのか
といったようなことからどのくらい使用するのかを検討してみましょう！
グラデーションや円形はシンプルな組み合わせで作れる
背景に少し変化をつけたいときは、グラデーションがおすすめです。
また、アイコンやアバターの土台や影を表現したいときは、円形の指定してみてください。
.gradient-bg {
background: linear-gradient(135deg, #4facfe, #00f2fe);
}
.circle {
width: 80px;
height: 80px;
border-radius: 50%;
}
このコードでは、linear-gradient と border-radius を使って、背景の変化と円形の見た目を作っています。
ポイント 💡
・ linear-gradient() → 角度と色を指定してグラデーションを作る
・ border-radius: 50%; → 要素を円形にする
ボタン背景やカードの装飾、プロフィール画像の土台など、見た目に少しアクセントを加えたい場面でおすすめのプロパティです
ぼかしや影は重ねすぎず役割を決めて使う
背景をぼかしたいときや、要素に立体感を出したいときは、backdrop-filter や box-shadow を使います。
.glass {
background: rgba(255, 255, 255, 0.5);
backdrop-filter: blur(10px);
}
.card {
box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12);
}
このコードでは、backdrop-filter で背景をぼかし、box-shadow で要素に影をつけています。
box-shadow は、要素の外側に影を付けるプロパティで、backdrop-filter は、要素の背後にある背景に対してぼかしや明るさなどのフィルター効果を適用するプロパティです。
ポイント 💡
・ backdrop-filter → 背景をぼかして透け感を出す
・ box-shadow → 要素に影をつけて立体感を出す
カードUIやモーダル、ガラス風デザインなどで使用すると、見た目に立体感や浮き上がり、柔らかさを出すことができます。
アクションと動きでよく使う定番パターン
ここからは、アクションや動きまわりでよく使うCSSを見ていきます 👀
ユーザーが操作したときの反応は、操作の分かりやすさや使いやすさに直結する重要な要素です。
ボタンに触れたときに変化があるだけでも、操作できることが伝わりやすくなります。
こうした動きは、CSSだけでも基本的な部分をしっかり表現できます。
よく使う基本のパターンを押さえながら、順番に見ていきましょう！
ホバー変化はtransitionとtransformの組み合わせが基本
ボタンやカードにマウスを乗せたときの変化は、transition と組み合わせることで自然に見せることができます。
.button {
transition: background-color 0.3s ease, transform 0.3s ease;
}
.button:hover {
background-color: #2563eb;
transform: scale(1.05);
}
このコードでは、ホバー時の変化に transition を設定し、背景色とサイズの変化をなめらかにしています。
ポイント 💡
・ transition → 変化をなめらかにする
・ transform → 拡大や移動などの動きをつける
ボタンやリンクカードなどに使用することで、ユーザーの操作に反応を返したい表現ができます。
・ transition は「変化させるプロパティ / 時間 / イージング」の順で指定する
・ transition0.2〜0.3秒程度の控えめな変化にすると自然に見せれる
・ transform は scale() / translate() / rotate() などで動きをつけられる
クリックできない要素は見た目だけではなく挙動も制御する
操作できない要素を表現するときは、見た目だけでなく挙動も合わせて制御することが大切です。
.is-disabled {
opacity: 0.5;
pointer-events: none;
cursor: not-allowed;
}
このコードでは、見た目を薄くするだけでなく、クリックできない状態もあわせて制御しています。
ポイント 💡
・ opacity → 見た目を薄くする（透明度）
・ pointer-events: none; → マウス操作を無効にする
・ cursor: not-allowed; → 操作できないことを見た目で伝える
ボタンの無効状態や、処理中の操作制限など、ユーザーに誤解を与えないための表現としてよく使われます。
見た目だけでなく、実際の操作も一致させることが重要なポイントです。
・ opacity だけだと、見た目は変わってもクリックはできてしまう
・ pointer-events を指定することで、実際の操作も無効になる
今回のポイントおさらい !!
最後に、今回出てきた考え方と定番パターンを見直しましょう 👀
CSSの考え方
・プロパティ単体ではなく、「やりたいこと」に対する組み合わせで考える
・迷ったときは、まず何を整えたいのか（配置 / 余白 / 文字 / 見た目 / 動き）を決める
レイアウト
・中央寄せは flex の基本セット（display / justify-content / align-items）で考える
・自由な配置は「どの要素を基準にするか」を意識して position を使う
サイズと余白
・box-sizing: border-box; を土台にするとサイズ計算が安定する
・高さは固定しすぎず、min-height で内容に合わせて伸ばす
テキスト
・省略表示は1つの指定ではなく、複数のプロパティをセットで使う
・行間や改行を整えて、読みやすさを優先する
見た目
・装飾は「何のために使うか（背景 / 立体感）」を決めてから選ぶ
・影やぼかしは重ねすぎず、役割ごとに使い分ける
アクション
・ホバーは transition と transform を組み合わせて自然に見せる
・無効状態は見た目（opacity）と挙動（pointer-events）をセットで整える
最後に
CSSは、プロパティの数が多く、最初は「全部覚えないと」と思ってしまいがちですよね 💦
だからこそ、「中央寄せしたい」「省略したい」「少し浮かせたい」のように、やりたいことから考えて、必要な組み合わせを選ぶことが大事！
次にCSSで手が止まったときは、まずどのカテゴリの悩みなのかを決めて、そこから定番の組み合わせを思い出す形で進めてみてください ᥫᩣ ̖́-
コメント