今日のCSS実践

HTMLは書けるのに、
CSSで手が止まる人へ

デザインを見てもCSSが書けない初心者向けに、
最初に見るべき5つのポイントを解説します。

HTMLはなんとなく書ける。

見出しはh2。
文章はp。
画像はimg。
ボタンはaやbutton。

ここまでは分かる。

でも、見本のデザインを見た瞬間、

「CSSを何から書けばいいか分からない」

「marginとpaddingをどこに使うのか迷う」

「flexを使ったら、逆にレイアウトが崩れた」

「見本みたいな余白にならない」

こんな状態になっていませんか？

CSSが書けない原因は、文法不足だけではありません。

多くの場合、デザインを見る順番を知らないだけです。

CSSは思いつきで書くと迷子になる

初心者の頃は、見本を見ながらいきなりCSSを書きがちです。

color: #333;
font-size: 18px;
border-radius: 10px;

もちろん、文字色や角丸も大事です。

でも、最初にそこを触っても、全体のデザインは整いません。

最初に見るべきなのは、色や角丸ではありません。

もっと大きな部分から見ていく必要があります。

CSSを書く時は、次の順番で見てください。

横幅
余白
並び方
文字
色・装飾

この順番を決めるだけで、CSSはかなり書きやすくなります。

① 最初に見るのは横幅

デザインを見たら、まず横幅を確認してください。

画面いっぱいに広がっているのか
中央に細くまとまっているのか
左右に余白があるのか
コンテンツ幅が決まっているのか

ここでよく使うのがcontainerです。

.container {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 20px;
}

max-widthは最大の横幅を決めるCSSです。

margin: 0 auto;で中央寄せ。
padding: 0 20px;でスマホ時の左右余白を作ります。

② 次に見るのは余白

CSSで一番大事なのは、実は余白です。

デザインが素人っぽく見える原因の多くは、色ではなく余白です。

見る場所はこの4つです。

セクションの上の余白
セクションの下の余白
見出しと文章の間隔
カード同士の間隔

例えば、セクション全体の上下に余白を入れるならこうです。

.section {
  padding: 80px 0;
}

見出しの下に余白を入れるならこうです。

.title {
  margin-bottom: 32px;
}

迷ったら、まず上下の余白を見てください。

余白が整うだけで、デザインはかなり見やすくなります。

③ 次に見るのは並び方

次に、要素がどう並んでいるかを見ます。

縦に並んでいるのか
横に並んでいるのか
中央揃えなのか
左右に分かれているのか

カードが横に並んでいるなら、display: flex;を使います。

.card-list {
  display: flex;
  gap: 24px;
}

画像と文章が左右に並んでいるなら、こうです。

.about {
  display: flex;
  align-items: center;
  gap: 40px;
}

flexは魔法の呪文ではありません。

横に並べたい時に使うCSSです。
まずは「縦か横か」を判断してください。

④ 次に見るのは文字

レイアウトがある程度できてから、文字を整えます。

文字で見るのはこの4つです。

文字サイズ
文字の太さ
行間
中央揃えか左揃えか

.title {
  font-size: 32px;
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
}

初心者はfont-sizeだけを触りがちです。

でも、読みやすさにはline-heightもかなり重要です。

⑤ 最後に色・装飾を見る

最後に、色や装飾を整えます。

背景色
文字色
角丸
影
枠線

.card {
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

色や影は最後で大丈夫です。

レイアウトが崩れている状態で装飾だけ合わせても、見本には近づきません。

今日の宿題

今日は、CSSを書く前に「デザインを見る練習」をしてください。

宿題は5つです。

宿題①見本デザインを1枚選ぶ 宿題②大きな箱を3つに分ける 宿題③横幅と余白を書き出す 宿題④縦並びか横並びかを判断する 宿題⑤CSSを書く順番をメモする

完了：0 / 5

宿題①：見本デザインを1枚選ぶ

まずは、模写したいデザインを1つ選んでください。

いきなり長いLPや複雑なサイトは選ばなくて大丈夫です。

おすすめはこのあたりです。

カードデザイン
プロフィール欄
サービス紹介セクション
カフェのメニュー紹介
会社概要セクション

今日のゴールは、1ページ全部を作ることではありません。

まずは1セクションだけでOKです。

宿題②：大きな箱を3つに分ける

選んだデザインを見て、大きな箱を3つに分けてください。

例えばカードなら、

画像エリア
テキストエリア
ボタンエリア

サービス紹介なら、

見出しエリア
説明文エリア
カード一覧エリア

このレベルで大丈夫です。

ここでコードを書かないでください。

先に、目で見て分ける練習をします。

宿題③：横幅と余白を書き出す

次に、CSSで最初に見るべき部分を確認します。

横幅
左右の余白
上下の余白
要素同士の間隔

例えば、カードならこのように書き出します。

カード全体は横幅300pxくらい
内側に24pxくらい余白がある
画像と見出しの間に20pxくらい余白がある
ボタンの上に16pxくらい余白がある

ざっくりでOKです。

最初から正確なpxを当てる必要はありません。

宿題④：縦並びか横並びかを判断する

次に、配置を見ます。

縦に並んでいるのか
横に並んでいるのか
中央揃えなのか
左右に分かれているのか

CSSでは、ここでdisplay: flex;を使うかどうかが決まります。

最初はコードを書かなくてOKです。

まずは、縦か横かを判断する練習をしてください。

宿題⑤：CSSを書く順番をメモする

最後に、CSSを書く順番をメモしてください。

横幅
余白
並び方
文字
色・装飾

この順番で見るだけで、CSSはかなり書きやすくなります。

いきなり色や角丸から入らないでください。

まずは横幅、余白、並び方から整えます。

今日の宿題ができた人へ

LINEに

CSS宿題

と送ってください。

送る内容は、この5つです。

① 選んだデザイン：

② 大きな箱：

③ 横幅・余白：

④ 縦並び or 横並び：

⑤ CSSを書く順番：

例はこちらです。

① 選んだデザイン：カフェのメニューカード

② 大きな箱：画像、タイトル、説明文、価格

③ 横幅・余白：カード幅300pxくらい、内側24px、画像とタイトルの間20px

④ 縦並び or 横並び：カード内は縦並び、カード一覧は横並び

⑤ CSSを書く順番：横幅 → 余白 → 並び方 → 文字 → 色

読むだけで終わる人は、またCSSで止まります。

でも、今日この5つを書き出した人は、
デザインを見てCSSに変える準備ができます。

完璧じゃなくて大丈夫です。

まずは1つのデザインを選んで、LINEに「CSS宿題」と送ってください。

LINEで「CSS宿題」と送る

ボタンを押した後、LINEのトーク画面で「CSS宿題」と送信してください。

HTMLは書けるのに、CSSで手が止まる人へ