はじめに
この記事でわかること
- HTMLとCSSの違い
- CSSの基本の書き方と入れ方
- まず覚えたい指定と練習の題材
- 余白や横並びでつまずいたときの乗り越え方
結論
CSSは、HTMLで作った骨組みに、色や余白、配置などの見た目を付けるものです。私がつまずいたのは余白（marginとpadding）で、ブラウザの確認用の機能で1つずつ確かめるうちに体で覚えられました。
Photo by Tran Mau Tri Tam ✪ on Unsplash
CSSとは？
CSSを最初に触ったとき、「なんで思った通りに動かないんだろう」とずっと悩んでいました。marginとpaddingをいつも混同して、レイアウトが崩れては直して……その繰り返しでした。今思うと、その格闘がいちばん身につきました。
特に困ったのは、思ったように余白をあけられず、調整に時間がかかってしまうことでした。
HTMLが「中身」を作るのに対し、CSSは「見た目」を担当します。
- 文字の色
- 文字サイズ
- 背景デザイン
- レイアウト調整
- スマホ対応
基本は、公式の説明ページで確認できます。
HTMLの基本は「HTMLとは？ゼロからWebページを作る基本と、私が最初に作ったページ」でくわしく書いています。
HTMLとCSSの違い
| 役割 | 技術 |
|---|---|
| 構造 | HTML |
| デザイン | CSS |
| 動き | JavaScript |
Web制作はこの3つの組み合わせが基本です。
CSSが登場する前のWeb
1990年代のWebサイトはデザインと構造が分離されていませんでした。
- デザイン変更が困難
- コードが複雑化
- ページごとに修正が必要
<font color="red">
このようにHTMLの中に直接デザインを書く必要がありました。
CSSの歴史
CSS誕生（1994〜1996年）
CSSは1994年にホーコン・ウィウム・リーさんが提案し、1996年にW3C（Webの決まりを作る団体）の正式な決まり（勧告）になりました。
- HTML＝構造
- CSS＝デザイン
この分離によりWeb制作は大きく進化しました。
CSS1〜CSS3
- CSS1：文字・色・余白
- CSS2：レイアウト制御
- CSS3：アニメーション・Grid・Flexbox
現在のWebデザインはCSS3が中心です。
CSSのよい点
① 一括管理できる
1つのCSSファイルを直すだけで、全ページのデザインをまとめて変更できます。
② HTMLが見やすくなる
構造（HTML）とデザイン（CSS）を分けて書けるので、HTMLが読みやすくなります。
③ レスポンシブ対応
画面の幅に合わせて、スマホとPCで見た目を切り替えられます。
CSSの基本構造
CSSは、「どこに（セレクタ）」「何を（プロパティ）」「どうする（値）」の3つを組み合わせて書きます。セレクタで飾りたい場所を選び、波かっこ { } の中に、変えたい項目と値を「:」でつないで書き、最後に「;」で区切ります。
セレクタ {
プロパティ: 値;
}
h1 {
color: blue;
font-size: 40px;
}
この例では、ページの大見出し（h1）の文字を青色にして、大きさを40pxにしています。
CSSの導入方法
① 外部CSS（推奨）
<link rel="stylesheet" href="style.css">
② 内部CSS
<style>
h1 { color: blue; }
</style>
③ インラインCSS
<h1 style="color:red;">Hello</h1>
CSSのおすすめ学習順
- HTML
- CSS基礎
- Flexbox
- Grid
- レスポンシブ対応
まず覚えるプロパティ
- color
- font-size
- margin
- padding
- background-color
初心者の練習作品
- プロフィールページ
- ブログデザイン
- カード型の一覧（写真と文をカードのように並べる形）
- 商品ページ
Webデザインの専門校の課題では、架空のお店のページの見た目をCSSで整えました。色や余白を少し変えるだけで印象が大きく変わり、面白さと難しさを同時に感じました。
CSSを書いていて「ここが難しい」と感じたこと
marginとpaddingの違いを体で覚えるまで
最初にCSSを書いたとき、marginとpaddingの違いがなかなか染み込まなくて。「外側の余白」「内側の余白」と説明では理解できても、実際に書くと「あれ、どっちだっけ」ってなることが多かったです。
結局、ブラウザの検証ツール（デベロッパーツール）でボックスモデルの図を見ながら実際に値を変えて確認する、というのを繰り返すうちにやっと体で覚えました。説明を読むより、動かして確認する方が身につくスピードが早かった……というのが正直な感想です。
Flexboxを覚えたら世界が変わった
Photo by La-Rel Easter on Unsplash
「要素を横に並べる」という操作、CSSを知るまでは「なんで難しいの？」と思っていました。でも実際にやってみると、floatを使う古い方法は意図した通りにいかないことが多くて苦労して。Flexboxを教わってからは、横並び・中央寄せ・均等配置が数行で書けるようになって、ここで初めて「CSSって面白いかも」と感じました。
Flexboxは「コンテナとアイテムのどちらにプロパティを書くか」を意識するのが最初のポイントだと思います。親要素にdisplay: flexを書くと、子要素が自動で横並びになる仕組みです。
動きを付けるJavaScriptについては「JavaScriptとは？HTML・CSSとの違いと、つまずきの乗り越え方」でくわしく書いています。
初心者のころの自分に伝えたいこと
今、初心者のころの自分にアドバイスするなら、こう伝えたいです。
「AIでCSSを作ったとしても、デベロッパーツールで確認して、もっとシンプルに見やすくできないか考える習慣をつけよう」。
AIを使えば、それらしいCSSはすぐに手に入ります。
けれど、そのまま使うだけでは、なぜその見た目になっているのかが分からないままです。
デベロッパーツールで一つずつ確かめ、余計な指定を減らせないか考えることが、CSSを理解する近道になると感じています。
私自身もまだ勉強中ですが、この習慣は続けていきたいと思っています。
この記事のまとめ
CSSはWebサイトの見た目を決める重要な技術です。
HTMLと分離することで効率的なWeb制作が可能になります。
最初は「セレクタ・プロパティ・値」の書き方と、margin・paddingなどのよく使うプロパティから覚えるのがおすすめです。うまくいかないときは、デベロッパーツールで実際に値を変えて確かめると、仕組みが少しずつ見えてきます。
よくある質問（FAQ）
Q. CSSはどのエディタで書けばいいですか？
A. VS Code（Visual Studio Code）が最もよく使われていると思います。無料で使えて、入力の続きを候補で出してくれる機能（補完）もあるので、初心者にも使いやすいと思います。
Q. CSSのFlexboxとGridはどちらを先に覚えるべきですか？
A. 個人的にはFlexboxから始めた方がとっつきやすいと思います。横並びや縦横中央揃えなど、よく使う場面で活躍します。Gridは複雑なレイアウトを作るときに必要になることが多いかもしれません。
Q. CSSを独学するおすすめの方法はありますか？
A. 実際にあるサイトをまねして作る（模写）のが、一番身につきました。好きなサイトをHTMLとCSSで再現しようとすると、自然と必要な知識が身につきました。
Q. AIで作ったCSSは、そのまま使っても大丈夫ですか？
A. 動くことは多いと思いますが、私はデベロッパーツールで確認して、もっとシンプルに書けないかを考えるようにしています。仕組みを理解しておくと、あとから自分で直しやすくなります。
