【入門】CSSの基礎講義【知識ゼロから基礎を学ぶ】

WEB制作を学びたくて、勉強を始めたけどCSSとかどこから勉強したら良いかわかんないよ・・・。

このような方向けの記事です。

本記事ではCSSの基礎を初心者にわかりやすく解説していきます。サラッと読むだけでも良いし、実際にパソコンで手を動かしながら学んでもOKです！

これからWEB制作を学びたくて、CSSをこれから学ぼうと思っている方は参考にしてみてください。

1.CSSとは
2.CSSの環境構築をしよう
3.CSSの書き方を解説
4.CSSの読み込まれる優先順位
5.CSSのコツ：コメントアウトでメモをとろう
6.CSS講義のまとめとポイント

HTMLの学習がまだの方はこちらから

【入門】HTMLの基礎講義【仕組みからタグの書き方までを網羅】

CSSはHTMLをサラッと理解した方が分かりやすいので、HTMLの学習がまだの方は上記の記事を先に読んでからの方が良き。

CSSとは【ウェブページの見た目を作る言語】

CSS（Cascading Style Sheets、カスケーディング・スタイル・シート）とは、ウェブページのスタイルを指定するための言語です。ワープロソフトなどで作成される文書も含めて、文書のスタイルを指定する技術全般をスタイルシートといいます。 HTMLやXHTMLなどで作成されるウェブページにスタイルを適用する場合には、スタイルシート言語の1つであるCSSが一般的に利用されています。HTMLクイックリファレンス

分かりやすく説明しますとHTMlで作ったウェブページを装飾するための言語です。

なので、CSSを勉強していくにはHTMLの知識が必要となります。このサイトもそうなのですが、全てのサイトのデザインや見た目はCSSを使って作られておりますので、CSSを学習する事で色々なデザインのウェブページを作れるようになります。

本記事では、まずはCSSの基礎中の基礎を解説します。

CSSの環境構築をしよう【CSS用のファイルを作成する】

CSSを書いていく前にまずは、CSSを書くためのファイルを作成する必要があります。まずは、下記のような構造でフォルダを作成しましょう。

まずはCSSファイルを作成

「style.css」というファイルがCSSのファイルになります。今回は一緒に「index.html」というhtmlファイルも作っています。拡張子がそれぞれcssとhtmlになっているのが特徴です。

今回使用するindex.htmlのファイルの中身は下記の通りです。

HTML
<!DOCTYPE html>
<html lang="ja">
<head>
  <!-- charsetの設定 -->
  <meta charset="UTF-8">
  <!-- viewport設定 -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- description設定 -->
  <meta name="description" content="サイトの説明をここに記入する">
  <!-- titleタグの記述 -->
  <title>タツキの樹</title>
  <!-- CSSの読み込み -->
  <link rel="stylesheet" href="style.css">
</head>
<body>
<!-- ここからホームページの内容 -->

<p id="main-title">メインタイトル</p>
<p class="sub-title">サブタイトル</p>
<p>CSSの練習</p>

</body>
</html>

上記のような感じです。ここからは上記のコードを例に解説していきます。重要なところとしては、head内のlinkタグで「style.css」を読み込んでいます。これが無いとCSSが反映されないので注意が必要です。

CSSはこれから書いていきますので、空白のままで問題なし。

CSSの書き方を解説【基本を抑えておけばOK】

WEB制作をする上で、最低限必要な書き方を解説します。本記事で解説しているもの以外にも書き方はありますが、一度に覚える必要はないので、慣れてきたらググって色々な書き方を学習してみて下さい。

CSSの基本の書き方

基本の書き方

上記が基本的なCSSの書き方です。
分かりやすく訳すと「pタグの色を赤色にする」という意味になります。

セレクタのプロパティを値にする。

上記が基本的な読み方です。
基本の読み方を覚えたところで、実際のコードを使用して解説します。

HTML
<p id="main-title">メインタイトル</p>
<p class="sub-title">サブタイトル</p>
<p>CSSの練習</p>

上記のようなHTMLがあった場合は次のようにCSSを書けます。

CSS
p{
  color: red;
  font-size: 22px;
}

完成後のイメージ

pタグに対して、文字の色とフォントサイズを変更しています。上記のCSSでは文字の色を「赤」フォントサイズを22pxにしています。

このようにして、HTMLで作ったモノに対してデザインを作っていくのがCSSの役割です。

CSSには多くのプロパティが存在して、自由自在にデザインする事ができます。プロパティは一気に暗記するモノでないので、WEB制作をしていく上で必要なものだけをググって徐々に覚えていきましょう。

CSSは基本ググれば何でも解決できる事が多いので、わからない時はグーグル検索する癖をつけましょうね。

CSS関連のググり方のポイント

例えば、文字の太さを変えたいなと思った時は「CSS 文字の太さ　変更」などでググればすぐ出てきます。なのでプロパティを暗記するのではなくて、ググる能力を上げていけば暗記の必要はないです。

よく使うモノはググっていく内に覚えてきますの英単語みたいにゴリゴリ覚えなくて大丈夫ですよ。
また、セレクタはタグだけではなくてclassやidなどでも指定する事ができます。

idを指定する書き方

CSS
#main-title{
  color: red;
  font-size: 22px;
}

上記がidに対するCSSの書き方です。

idを指定したい時は「＃＋id名」で、そのidを指定する事ができます。この場合は「main-title」というidに対して、スタイルを指定しています。

classを指定する書き方

CSS
.sub-title{
  color: red;
  font-size: 22px;
}

上記がclassに対するCSSの書き方です。

idが#（シャープ）だったのに対して、classは.（ドット）を付ける事で指定する事ができます。この場合ですと「sub-title」というclassに対してスタイルを指定しています。

CSSの読み込まれる優先順位【基本のみ理解しよう】

CSSにはスタイルが重複していた場合に、スタイルの指定の仕方によって優先順位が決まるようになっております。ここではザックリとCSSの優先順位を解説します。

基本的な優先順位は下記の通り。

優先順位①：!important
優先順位②：id
優先順位③：class

上記が優先順位の早見表です。

実際はもっと細かく優先順位があるのですが、はじめは上記だけ覚えておけば問題なし。

こちらの優先順位のみを確実におさえておき、CSSを記述していく上でCSSが指定できないなってなった際はデベロッパーツールで、どのスタイルが優先されているのかを確認してみましょう。

デベロッパーツールはWEB制作をする上の必須のツールです。使った事がない方は下記の記事で基本的な使い方を解説しているので参考にしてみてください。

【コーダー向け】デベロッパーツールの使い方を解説【Chrome検証機能】

基本の基本：同じ指定方法では後に書かれたモノが優先

同じ指定方法で重複していた場合は後に書いた方が優先的に表示されます。

プログラミングの基本なのですが、コードは上から順番に読み込まれるので、重複している時は上書きされていきます。

例えば下記のようにCSSを書いた場合を考えてみましょう。

CSS
p{
  color: red;
}
p{
  color: blue;
}
p{
  color: green;
}

この場合ですと、一番最後に書いたgreenの色になります。プログラミング全般に言える事なのですが、重複していた場合は最後に書いたものが表示されるようになっております。

先程のHTMLコードですと下記のようになります。

green

上手く表示されない時は重複していないか確認してみましょうね。

優先順位①：!important

CSS
p{
  color: red;
}
p{
  color: blue !important;
}
p{
  color: green;
}

上記がimportantの書き方です。

!importantを書いた場合は、最優先でそのスタイルが適用されます。先程の解説通りなら、greenになりますが「！important」が付いているblueが最優先で適用させます。

この書き方はあまり推奨されていない為、最終手段として考えましょう。基本的には他の手段を探すのが吉です。最終奥義的な感じで抑えておきましょう。

優先順位②：idと優先順位③：classの解説

!importantの次に優先されるのが、idです。その次にclassになります。

ここは一緒に理解した方が分かりやすいのでidとclassを一緒に解説していきます。結論はidの方が優先されると理解しておけばOKです。

HTML
<h2 id="main" class"title">メインタイトル</h2>

CSS
h2{
  color: red;
}
#main{
  color: blue;
}
.title{
  color: green;
}

上記では、h2にid=”main”とclass=”title”を付けておりますが、この場合はid=”main”に指定したblueが適用されます。

ゴチャゴチャしてて分からないという方は、実際にコーディングなどをしている内に身いつきますので何となく覚えておけば大丈夫です。

CSSのコツ：コメントアウトでメモをとろう

そこそこの規模のサイトになりますと、CSSの量が大量になってきます。

そういう時にはコメントアウトをして、自分なりに分かりやすいようにメモをして管理する事ができますよ。

CSS
/* ここからタイトルのスタイル */
h2{
  color: red;
}
#main{
  color: blue;
}
.title{
  color: green;
}
/* ここまでがタイトルのスタイル */

上記ように、メモしたい事を/* */で囲む事でコメントアウトする事ができます。

後々CSSを編集する時に、ゴチャゴチャしないようにサイト制作などをする時は、こまめにコメントアウトしておき分かりやすいようにしておくのがオススメ。

CSS講義のまとめとポイント

CSSは装飾するための言語
初めは基本的な書き方を身に付けるだけでOK
優先順位は!important > id > classだけ抑える

上記の事項が理解できていれば本記事の目標達成です。

学べば学ぶほど奥の深いCSSですが、基本的な書き方を覚えるだけで、一通りWEB制作をする事ができますので初めのうちは深く学ぶ必要は無いです。

1番の学習の近道は、何か1サイトを丸々コーディングしてみるのが最短の学習方法です。模写コーディンと呼ばれるモノなのですが、こちらは「【簡単】模写コーディングの手順とやり方を徹底解説【脱初心者】」で解説していますのでCSSを極めたい方は挑戦してみてください。

それでは。