MENU
  1. ホーム
  2. プログラミング言語
  3. CSS
  4. CSS入門
  5. CSSを勉強したいあなたに教える最短学習5ステップ

CSSを勉強したいあなたに教える最短学習5ステップ

CSS入門
侍エンジニア編集部
CSS初心者のための 最短学習５ステップ

こんにちは！　CSSのことなら私、ライターのナナミです。

WEBサイトを作ろうとしたら避けては通れないCSSの勉強、これから始めてみようと思っている方も多いと思います。

でもどう勉強したらいいのかわからない……
何を覚えればいいのかわからない……

という理由で、手がつけられていない方もいるかもしれませんね。

CSSの勉強といえば本やWEBサービスを使うイメージがあるかもしれませんが、ある程度継続してやらなければいけないので、飽きやすく挫折しやすい方法だったりします。

でも、基本だけなら1時間くらいでおさえることができるんです。

今回はこれからCSSを勉強したい方に向けて「CSS基本講座」をご用意しました！

抑えておきたいのはこの3つのポイントだけ。

  • 書き方のお作法
  • 要素分解する癖
  • 調べる癖


なぜこの3つが重要なのか、どのように活用すればいいのかを5つのステップで理解できる内容となっています。

さらにレベルアップしようとなると、本やWEBサービスが大活躍。これらをどのように活用すればいいのかもご紹介しますね！

この記事の要約
  • 基本の型を覚えるとCSSの学習が進めやすい
  • CSSの基礎はWebサイトで学ぶと良い
  • 実践学習時は書籍のサンプルコードを活用しよう

なお、どのプログラミング言語を学べばいいのか、どう学習を進めればいいのかなどがあいまいな人は「プログラミング学習プラン診断」をお試しください。

かかる時間は1分ほど。4つの質問に答えるだけで、あなたにあう言語や学習プランを診断してもらえます。

これからプログラミングを学ぼうとしている人は、ぜひ一度お試しください。

＼ 4つの質問に答えるだけ ／

1分で診断してみる
目次

本やサイトで勉強する前にCSSの基本をおさえよう

本やサービスに取り組む前に、まずはサクッと基本だけおさえちゃいましょう。

CSSの勉強方法としてメジャーなのは本やWEBサービスですが、「初心者向け」と言いつつも解説がわかりづらかったり、どこを覚えればいいのかがわかりづらいものもあったりします。

しかも今はたくさんの本やサービスがあるので、どれを選べばいいのかわからなくなってしまうことも……。

なので、この記事でCSSの基本がわかる5つのステップをご紹介！　絶対に覚えておきたい基本をまとめましたので、学習の第一歩に活用していただければと思います。

所要時間はたった1時間ほど。気軽にトライしてみましょう！

5ステップでわかるCSSの基礎

さあ、早速学習を始めていきましょう！

今回の解説は、HTMLについてはなんとなく知っていることを前提に話を進めていきます。CSSはHTML無くしては成り立たない言語だからです。

「HTMLってなんだ…？」

という方は、まずは下記の記事でHTMLについて確認してみてくださいね。

HTML5とは？初心者向けに特長や使い方を超わかりやすく説明してみた
更新日：2024年4月29日

ステップ1：まずは基本の型を覚える

CSSを使うには、まずはCSSの書き方を覚える必要があります。そしてその書いた内容を読み込むことで適用させることが可能です。

それぞれ詳しく確認していきましょう。

CSSの基本の書き方

CSSは下記のように書きます。

セレクタどのHTML要素にCSSを適用させるのかを指定する。
例）body .class #idなど
プロパティ線や色など、何を変えるのかを指定する部分。CSSのキモ。
例）background boarder paddingなど
値プロパティに対して、どのくらいの変化をさせるのかを指定する部分。プロパティごとに書き方の決まりがある。
例）#000 10px solidなど

【ここだけは覚えて！】

CSSは「セレクタ」「プロパティ」「値」の3つで構成される。

CSSの読み込み方

CSSは3つの読み込み方があります。基本的に「別ファイルにして読み込む」方が他のファイルに使い回しができたりして便利です。

別ファイルにして読み込む
CSSファイルを別で用意し、HTMLファイルのheadタグ内に下記のように書く。

<link rel="stylesheet" href="CSSファイルへのパス">

HTMLファイルに直接書く
HTMLファイルのheadタグ内にstyleタグを書き、そのの中に書く。

<head>
<style type="text/css" media="screen">
CSSの記述
</style>
</head>

HTMLタグに直接書く
適用させたいHTMLタグに直接プロパティと値を指定する。

<div style="ここに書く">

【ここだけは覚えて！】

  • CSSの読み込み方は3つある。
  • 「別ファイルにして読み込む」方法が便利

ステップ2：CSSの組み方を考える

書き方のお作法はひとまずこれでOK。次に大事なのは、どのようにCSSを組み立てていくのかです。

今回は下記のデザインを課題に、CSSの考え方を理解していきましょう！

全体の構成を分解して考える

まずはこのデザインが何個の要素で構成されているのかを分解していきます。

今回の場合、大きく4つのパーツに分けることができますね。ということは、少なくともHTML内で4つのパーツを用意しておく必要があります。

【HTML】

<header>
    My WEBSITE
</header>
<main>
    
</main>
<aside>
    
</aside>
<footer>
    
</footer>

CSSはまずは大雑把に見るのがコツ。細かい見た目は置いておいて、デザインを俯瞰して見ることから始めましょう。

【ここだけは覚えて！】

  • CSSのコツは「最初は大雑把に見る」こと
  • まずはパーツが何個あるのかを考えるべし

細かい見た目を分解して考える

パーツの準備ができたら、それぞれの見た目を分解していきましょう。ポイントはできるだけ細かく分解することです。

「文字が違う」ではなく「文字の色が違う」「文字の大きさが違う」というように、何がどのように違うのかを明確にしましょう。

  • 各要素には背景色と枠線がある
  • mainとasideは横並びになっている
  • asideの方が幅が小さい
  • footerの文字は中央に表示されている

という感じです。

つまり今回は

  • 背景色をつける
  • 枠線をつける
  • 要素を横並びにする
  • 幅を指定する
  • 文字を中央揃えにする

という5つをクリアすればこの見た目にできるということですね。

【ここだけは覚えて！】

見た目の分解は「何がどのように違うのか」まで細かく見るべし。

 ステップ3：必要なCSSのコードを探そう

ここまでくれば、あとは必要なCSSを書いていくだけです。

とはいえ、何を書けばいいのかパッと思い浮かぶのは慣れた人がやること。初心者であるみなさんは、何を書くべきなのかを探し出す必要がありますね。

そんな時の強い味方が、みんな大好きGoogle先生です。

困った時のGoogle先生

CSSはプロパティを覚える必要はありません。仕事で使うでも個人のサイトを作るときでも、調べながらやっても全く問題ないからです。

なので、わからないことは即Google先生に聞いちゃいましょう。

先ほど洗い出した

  • 背景色をつける
  • 枠線をつける
  • 要素を横並びにする
  • 幅を指定する
  • 文字を中央揃えにする


この5つの頭に「CSS」とつけて検索すれば

こんな感じで見つけ出すことができます。

【ここだけは覚えて！】 

  • 調べることは「悪」ではない！
  • 「CSS＋何をどうしたいか」で調べる癖をつけよう

Google先生でもわからないときは

調べ方も一つのスキルです。うまく目的のプロパティが見つけられなかったり、どうしても思った通りの見た目にできない……ということもあるかもしれませんね。

調べてもわからない…
それっぽいのが見つかったけどあってるのかわからない……

というところから、CSSの学習に挫折してしまう方も多くいます。

でも諦めないで！　先生はGoogleだけではありません。

人の悩みを即解決できるのは人です。専門の先生ならば、あなたの悩みをピンポイントで解決することができます。

もちろん「どのプロパティをどのように使うのか」だけでなく、「調べ方のスキルアップ方法」も伝授して、あなたひとりでも楽しくCSSが書けるようサポートします。

侍エンジニア塾はそんな先生が多数在籍しているスクールです。

興味がある方は、サービス内容を下記からチェックしてみてください！

侍エンジニア塾の
サービス詳細を見る

こんな感じで調べたり教えてもらった結果、下記のようなCSSができあがりました。

【CSS】

header {
    text-align: center;
    background-color: #FFC107;
    border: solid 2px #9e9e9e;
}

main {
    text-align: center;
    background-color: #03A9F4;
    border: solid 2px #9e9e9e;
    height: 400px;
    width: 70%;
    float: left;
    box-sizing: border-box;
}

aside {
    text-align: center;
    background-color: #fd9790;
    border: solid 2px #9e9e9e;
    width: 30%;
    height: 400px;
    float: left;
    box-sizing: border-box;
}

footer {
    text-align: center;
    background-color: #8BC34A;
    border: solid 2px #9e9e9e;
    clear: both;
    height: 50px;
}

この流れが「CSSを書く」ということなのです。

次の項目で早速練習をしてみましょう！

ステップ4:3つの課題をクリアしよう

CSSは解説を読んでいるだけでは身につきません。実際に手を動かすことが何よりも大事です。

ということで、簡単な練習問題をご用意しました。先ほどの流れを確認しながらやれば問題なくクリアできるので、レッツトライ！

答えはこちら

課題1：背景色をつけてみよう

下記のHTMLを使って、CSSで背景を水色にしてください。

【HTML】

<div>
    水色背景
</div>

課題2：文字の大きさを変えてみよう

下記のHTMLを使って、CSSで文字の大きさを40pxにしてください。

【HTML】

<div>
    文字サイズを40pxに
</div>

文字の大きさを変える

課題3：影をつけてみよう

下記のCSSに追記をして、要素に影をつけてください。

【HTML】

<div>
    影をつけましょう
</div>

【CSS】

div {
    padding: 40px;
    background-color: #00BCD4;
    text-align: center;
    color: #fff;
    font-size: 25px;
    font-weight: bold;
    border-radius: 5px;
}

問題の答えはこちら（アンカーリンク）

ステップ5:色々なルールを覚える

ここまでくればCSSの基礎はおさえたも当然！　しかし、CSSにはまだまだ細かいルールが存在しています。

これらは使いながら覚えていくのが一番です。今すぐ全てを覚えなくてもいいので「こういうルールがあるんだ」ということだけ覚えておきましょう。

【ここだけは覚えて！】

  • CSSには細かいルールがある
  • 最初は全て覚えなくてOK、ルールの存在だけ覚えておこう

CSSを適用する要素を指定する方法

CSSを書くときに必要なセレクタ、じつは色々な指定方法があります。基本的にはclassを使った指定をするのがおすすめです。

タグHTMLタグをそのまま指定する。
例）div p headerなど
IDHTMLタグに付けられたIDで指定する。
例）#ID名 （必ず頭に「#」をつける）
classHTMLタグに付けられたclassで指定する。
 例）.class名（必ず頭に「.」をつける）

ここまでの解説ではHTMLタグをそのままセレクタに使っていましたが、それだけでは自由なレイアウトは実現できません。タグにCSSを指定すると、そのタグ全てに同じCSSが適用されてしまうからです。

【HTML】

<div>水色の要素</div>
<div>こっちはオレンジにしたいのにできない…</div>

【CSS】

div {
    padding: 20px;
    background-color: #00BCD4;
    text-align: center;
    color: #fff;
    font-weight: bold;
    border-radius: 5px;
    margin-bottom: 10px;
}

とはいえHTMLタグにはルールがあるし、種類にも限りがあります。そこで活躍してくれるのがIDとclassです。

IDとclassはHTMLタグに名前をつけることができるものです。

【HTML】

<div id="id-name">こっちはIDが指定されています</div>
<div class="class-name">こっちはclassが指定されています</div>
<div class="class-name">classは何回でも使うことができます</div>

【CSS】

#id-name {
    padding: 20px;
    background-color: #00BCD4;
    text-align: center;
    color: #fff;
    font-weight: bold;
    border-radius: 5px;
    margin-bottom: 10px;
}

.class-name {
    padding: 20px;
    background-color: #FF9800;
    text-align: center;
    color: #fff;
    font-weight: bold;
    border-radius: 5px;
    margin-bottom: 10px;
}

IDはそのHTMLファイルの中で1回しか使えません。固有名詞ってことですね。

classの場合は何回でも使うことができます。こっちはグループ名って感じです。

これらを駆使して細かい指定を付けられるようにすることで、自由なレイアウトを実現することができるのです。

他にもセレクタのルールはあるのですが、ややこしくなるので今回は割愛します！

【ここだけは覚えて！】

  • セレクタは色々な指定方法がある
  • おすすめはclassを使った指定

classやIDの仕組みがよくわからない…という方は、下記の記事もチェックしてみてくださいね。

CSSとidの関係とは？要素に名前をつけて細かくデザイン指定しよう
更新日：2024年4月29日
classって何？CSSと組み合わせて使う方法を徹底解説
更新日：2024年4月29日

適用される優先順位

書いたCSSがきちんと適用されるように、下記のルールで書くことをおすすめしています。

【おすすめルール】

  • CSSをHTMLタグに直接指定しない
  • セレクタはclassで指定する
  • 優先したいものはCSSファイルの下の方に書く


なぜこのようにするかというと、CSSには下記のような適用の優先順位というルールがあるからです。

  • セレクタは「HTMLタグ＜class＜ID＜HTMLタグに直接記入＜important」の順に強い
  • 同じ強さのものはCSSファイル内の下にあるものが優先
  • セレクタを繋げて書くと優先順位が上がる
  • importantは何よりも優先される


ここまで解説してきて出てこなかった単語がありますね。ぶっちゃけこれらは初心者のうちは知らなくてもいいものなので説明を省いています。気になる方はGoogle先生に聞いてみましょう。

これらのルールを元にして考えた一番扱いやすい書き方が最初に紹介した3つのルールを守って書いたものです。念の為おさらいしておきましょう。

【ここだけは覚えて！】

  • CSSには適用の優先順位ルールがある
  • 最初は下記の「おすすめルール」だけ気をつければOK

【おすすめルール】

  • CSSをHTMLタグに直接指定しない
  • セレクタはclassで指定する
  • 優先したいものはCSSファイルの下の方に書く

もっとレベルアップしたいなら書籍やサービスを活用しよう

CSSの基本はここまで！　あとはとにかく書いてみて、プロパティの種類やルールに触れていくとどんどん理解が深まっていきます。

というときに便利なのが本やサービスです。今回私がご用意した課題とはまた違った課題を出してくれたり、もっと幅広い解説や細かいルールの話も出してくれます。

今回の記事でなんとなくCSSの仕組みがわかれば、これらをフル活用してさらにしっかりCSSを学習することができますよ！

もっと基本をしっかり学ぶWEBサービス

今回紹介した基本は「超初心者を対象にややこしい部分を省いた超簡易版」の内容です。これだけでもある程度のCSSは書くことができますが、もっと細かい指定をしたりする場合はまだまだ細かいルールを覚える必要が出てきます。

そんなときに便利なのがWEBサービス。最近は無料でできるものも増えてきましたね。

下記の「Progate」なんかは、テキストエディタの準備をしなくてもコードが書けるので、とても気軽に始めることができておすすめですよ！

Progate

お手本サイトを作って学ぶ書籍

ルールを覚えるのもそうだけど、実際にサイトを作って覚えていきたい。身についているのを実感しながら勉強したい！

そんな方は、お手本サイトを作りながら学習できる書籍がおすすめです。私が学習に使ったのは下記の本、パン屋さんのサイトを実際に作りながら勉強しました。

スラスラわかるHTML&CSSのきほん 第2版 | Amazon・楽天

HTML・CSS学習の決定版的書籍。使い方だけでなく仕組みまで解説してくれているので、手を動かしながら深く理解できる一冊です。
第2版はスマホ対応の方法も解説しており、過去よりさらにバージョンアップしています。

自由に作って学ぶスクール

もうすでに作ってみたいサイトがある。
自分のお店のサイトを早速作り始めたい！

という感じで自分の作りたいサイトがすでにある方は、スクールで学習してみるのはいかがでしょうか？

侍エンジニア塾はオリジナルカリキュラム。あなたの作りたいもの、なりたいビジョンに合わせた学習のステップをご用意し、専門講師によるマンツーマンレッスンでサポートをしていきます。

自分の場合どんなカリキュラムになるんだろう？
どのくらいの期間で作れるようになるのかな？

そう気になった方は、無料体験レッスンにいらっしゃいませんか？

プロのコンサルタントが、なんでも質問にお答えします。学習の上での悩み相談も大歓迎です。

ぜひお気軽にお申し込みください！

お急ぎの方はこちらからお問い合わせください。

読み込みに失敗しました。
大変お手数ですが、本ページを再度読み込んでください。

再度読み込んでも、読み込み失敗が起こる場合は
こちらからお問い合わせください。

カウンセリングはオンラインにて実施しております。

※予約完了後に、カウンセリングのためのURLやIDなどをメールにてご案内します

1.ご希望の日時を選択してください

空きあり 満席
前週
次週

ご希望日時に空きがない場合、こちらからお問い合わせください。

2.必須事項を入力してください

必須選択された日時

日時を選択してください

開催場所 オンライン

日時を選択する

必須お名前

必須電話番号

必須メールアドレス

    ご予約により、個人情報の取り扱いおよび利用規約に同意するものとします。

    まとめ

    CSSは細かいルールを覚えるのが大変ですが、基本の流れはそんなに難しいものではありません。

    重要なのは

    • 書き方のお作法
    • 要素分解する癖
    • 調べる癖


    この3つだけです。

    ぜひこの3つを意識して、素敵なWEBサイトをバンバン作っちゃってくださいね！

    各練習問題の答え

    課題1
    【CSS】

    div {
    background-color: #00BCD4;
}

    ※カラーコードが全く同じではなくても、水色であればOKです！

    課題2
    【CSS】

    div {
    font-size:40px;
}

    課題3
    【CSS】

    div {
    padding: 40px;
    background-color: #00BCD4;
    text-align: center;
    color: #fff;
    font-size: 25px;
    font-weight: bold;
    border-radius: 5px;
    box-shadow: 2px 2px 2px 2px #000;/*これを追記*/
}
    CSS入門

    この記事を書いた人

    侍エンジニア編集部のアバター 侍エンジニア編集部

    【プロフィール】
    DX認定取得事業者に選定されている株式会社SAMURAIのマーケティング・コミュニケーション部が運営。「質の高いIT教育を、すべての人に」をミッションに、IT・プログラミングを学び始めた初学者の方に向け記事を執筆。
    累計指導者数4万5,000名以上のプログラミングスクール「侍エンジニア」、累計登録者数1万8,000人以上のオンライン学習サービス「侍テラコヤ」で扱う教材開発のノウハウ、2013年の創業から運営で得た知見に基づき、記事の執筆だけでなく編集・監修も担当しています。
    【専門分野】
    IT/Web開発/AI・ロボット開発/インフラ開発/ゲーム開発/AI/Webデザイン

    この著者の記事一覧へ
    目次