プログラミング

CSSを勉強するための最短ステップ【初心者向け】

プログラミングをはじめたので、CSSを学びたいけど、何から始めればいいかわからない…。初心者でも勉強できるサイトや効率的な方法が知りたい…。

こんなふうに、「勉強したいけど、何をすれば…?」と悩んでいませんか?CSSについて理解をし、きちんとステップを踏めば、初心者の方でもCSSのコーディング力を身につけることができます。

その方法について、
プログラミング初心者から約1ヶ月でCSSをマスターし、
サイトの模写ができるようになった
この私が、わかりやすく解説していきます。

CSS勉強の始め方

CSSとは

CSSとは、Cascading Style Sheetsの略です。文字だけの文書であるHTMLを、見やすい形にデザインしたり、飾り付けしたりするために使うものです。

主婦のゆうちゃんです。現在はプログラミングと動画編集を独学で習得中!
皆さんのロールモデルになれるよう、会得した知識を発信していきます。

主婦のゆうちゃんです。現在はプログラミング動画編集を独学で習得中!
皆さんのロールモデルになれるよう、会得した知識を発信していきます。

この2つの文章を比べると、下の方が色や枠が付いていて、読みやすくなっていますよね!?
上の文章は文字が並んでいるだけで、メリハリがなく、読もうとする意欲を欠くような文章だと思います。

このように、文字だけのHTMLを読み手にわかりやすいページにするために、CSSは使われます。

 

準備するもの

CSSをコーディングしていくために、準備すべきものはたった1つ!それは、

テキストエディタ

です。

CSSを勉強しようと思っている人は、HTMLも既に勉強していると思うので、テキストエディタはご存知かと思います。しかし、「まだテキストエディタって何?」「いろいろあるけどどれを使えばいいんだろう?」などと悩んでいる方がいれば、こちらの記事↓を先にご覧ください。

【初心者必見】在宅ワーク実現に向けたプログラミングの始め方副業や在宅ワークとしてプログラミングを始めたい方へ。 忙しい主婦でも、家の中にこもってできる仕事がしたい! その手段として、...

私も使っている「Visual Studio Code」というテキストエディタについてインストール方法と共に解説しています。参考にしてみてください。

 

プログラミング初心者でも大丈夫な2つの理由

CSSを勉強は初心者でも全く問題ありません

要素はたったの3つ

  1. セレクタ
  2. プロパティ

CSSを構成する要素はこの3つしかありません。なので、初心者の方でも、この仕組みを一度理解してしまえばCSSを簡単にマスターすることができます。

各パートの役割について、

HTML

<body>
  <div>
   <h1>CSSの構成要素</h1>
   <p>CSSは3つのパートから成り立っています</p>
   <ul>
    <li>セレクタ</li>
    <li>プロパティ</li>
    <li>値</li>
   </ul>
  </div>

 </body>

CSS

h1 {
 color: red;

}

表示

という文章で、「CSSの構成要素」というタイトル部分を赤字にする場合を例に説明していきます!

 

①セレクタ


セレクタは、HTML文書の「どこの」を指すためのものです。
例文のHTMLでいうと、「h1」の部分を修飾したいので、セレクタは「h1」になります。

 

セレクタを指定した後、{}という記号を使って、次から説明するプロパティと値を囲む必要があります。{}を忘れずに書きましょう!

 

②プロパティ


プロパティは、セレクタの「何を」を指すためのものです。
例文のHTMLでいうと、h1部分の「色」を変えたいので、プロパティは「color」になります。

 

プロパティを指定した後、「」いう記号で区切る必要があります。
を忘れるとうまく表示されないので、忘れずに書きましょう!

 

③値

値は、プロパティを「どのようにしたいか」を指すためのものです。
例文のHTMLでいうと、h1の色を「赤」にしたいので、値は「red」になります。

値を指定した後、「;」いう記号で区切る必要があります。
;を忘れるとうまく表示されないので、忘れずに書きましょう!

このように、CSSはたった3つの要素だけで成り立っています。ですから、初心者の方でも全く問題なく始めることができます!

 

わからなかったらGoogle検索でOK

どんなに経験を積み重ねても、全てのプロパティや値を覚えることは不可能です。多すぎます。なので、「この表示ってどうコーディングすればいいんだろう?」とわからなくなったら、Google検索すれば大丈夫!大抵のことは出てきます。

わからない ⇄ Google検索

これを繰り返していくと、何度も使うプロパティや値は自然と覚えてきます。そうすると、コーディングも少しずつ速くなってきますよ。

 

おすすめサイトと効率的な勉強3ステップ

それでは、どのように勉強を進めていけばいいのかについて解説していきます。

おすすめサイト

今回、CSSの勉強サイトとしてオススメするのは、TechAcademyさんの

です。全34本の動画になっています。

動画で学習すべき理由

百聞は一見に如かずです。特にCSSはHTMLよりも学ぶべき内容が多く、少し複雑なとこももあります。動画は、本や文字情報で学ぶよりも断然、わかりやすく、理解しやすいです。

【初心者必見】無料でHTMLを学習する方法HTMLの学習法が知りたいと思っている方。 プログラミングを始めた初心者の方。 「まずはHTMLから学習しよう」と思ったけど、具...

こちらの記事↑で紹介したHTMLの動画サイトと同じ方の解説動画になりますので、合わせて勉強するとより理解が進むと思いますよ。

 

勉強3ステップ

上記のサイトにアクセスしたら、次の勉強3ステップに従って、効率的にCSSのコーディング力を身に付けていきましょう。

 

ステップ①:動画の視聴

兎にも角にも、まずは動画を視聴しましょう。動画は、CSSのプロパティや値についての解説 → 実際のコーディング例の順に、実例を交えて見せてくれています。先ほどのCSSを構成する3要素に注目して、動画を見ましょう。

 

ステップ②:実践

動画1本見たら、一時停止!ここからは実践タイムです。コーディングをして手を動かしていきましょう。ここで私が実際にコーディングしてみることをオススメする理由は2つあります。

①わかっていないところが明らかになる

動画の解説者は、プログラミングに精通していて、プロです。なので、動画内の概要説明やコーディング例はスラスラとミスなく進みます。

しかし、実際に自分の手を使って解説通りにコーディングをしてみると「うまくいかない」なんてことが普通に起こります

動画だけを見て進んでいくと、自分のできるようになったと錯覚し、満足してしまいます。しかし、本当にCSSのコーディング能力を身に着けたいのであれば、動画を見て満足するだけではいけません!

自分の手でコーディングしてみて、自分のわかっていないところを明らかにしましょう。

②効率的な学習になる

実際に手を動かしてみると、うまく表示される時もあれば、何度やってもうまく表示されないなんてこともあります。できることを何度も繰り返していても、できないことができるようにはなりません。

せっかく手を動かして、できるところとできないところが明らかになりました。できるところに時間を使っていてはもったいないです!

次は「できないところをできる」にするために時間をさきましょう。そうすると、ムダなくCSSを勉強していくことができますよ!

 

ステップ③:ノートの作成

動画を見て、実践をしたら、ノートも取りましょう。

学習を進めていくと必ず行き詰まることがあります。また、CSSはHTMLよりプロパティや値の種類も豊富です。だから全部覚えるなんて無理!
ノートを残しておくことで、振り返ったり、どうやって行き詰まったところを乗り越えたのか残しておくことができます。

ノートの作成方法は、先ほども紹介した下記の記事で解説しています↓↓↓

【初心者必見】無料でHTMLを学習する方法HTMLの学習法が知りたいと思っている方。 プログラミングを始めた初心者の方。 「まずはHTMLから学習しよう」と思ったけど、具...

こちらを参考に作成してみてください。

 

まとめ

今回は、CSS勉強の始め方についてご紹介してきました。

本記事のまとめ
  1. CSSをざっくり理解
  2. プログラミング初心者でも大丈夫
  3. オススメのサイトと勉強3ステップを紹介

CSSを勉強し始める方の力に少しでもなれていたら幸いです。

最後まで、お読みいただきありがとうございました。