プログラミング、気楽な生き方を中心に発信しています。
  • twitter
  • instagram
  • facebook

2020年7月6日

HTML/CSS

【入門】CSSの基礎講義【必要な事だけを解説】

吹き出しくん

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

こんな悩みを持っている方へ

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

これからWEB制作を学びたくてCSSをこれから学ぼうと思っている方にオススメです。

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

【入門】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ファイルを作成

「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の書き方を解説

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 文字の太さ　変更」などでググればすぐ出てきます。なのでプロパティを暗記するのではなくて、ググる能力を上げていけば暗記の必要はないです。

よく使うモノはググっていく内に覚えてきますの英単語みたいにゴリゴリ覚えなくて大丈夫ですよ。
また、セレクタはタグだけではなくて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

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

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

この場合ですと、一番最後に書いた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を極めたい方は挑戦してみてください。

それでは。