【CSS】基礎から学ぶ!はじめてのCSS

CSS(Cascading Style Sheets: シー・エス・エス)はWebページを装飾するために使用します。
具体的には、Webページの骨組みであるHTMLの各要素(apimgなど)の色付けや大きさの指定、表示位置などのレイアウトを行います。

例えば、body要素に次の要素が記述されたHTMLを見てみましょう。


<header>
    <div>
        <img src="https://picsum.photos/200" alt="ランダムで表示される画像">
    </div>
    <nav>
        <ul>
            <a href="#"><li>リンク1</li></a>
            <a href="#"><li>リンク2</li></a>
            <a href="#"><li>リンク3</li></a>
        </ul>
    </nav>
</header>
<main>
    メインコンテンツエリア
</main>
        

これをブラウザに表示すると次のような結果になります。

ランダムで表示される画像
メインコンテンツエリア

これをCSSを使用して装飾してみると次のように表示することができます。

メインコンテンツエリア

この様に、CSSを使うことでWebページを自由に装飾することができます。

理解度チェック

  • CSSにはどんな特徴がありますか?

CSSの書き方

CSSの書き方

CSSは「セレクタ」と「宣言ブロック」の二つで構成されます。

セレクタ

セレクタは「どの要素」に装飾を行うかを選択する箇所です。
このセレクタの書き方には複数の方法があり、書き方や書く場所によって適用される装飾の優先度が異なります

宣言ブロック

セレクタで指定した要素の「どの属性にどの値」を設定するかを指定します。
例えば「文字の色を赤色にする」場合は color: red; のように記述します。

(宣言ブロック)属性

CSSの属性(プロパティ: property)には非常に多くの種類があります。
自分の要素を装飾する属性や、子要素の配置を変える属性など多くの種類があります。

どの様な属性があるかについてはCSS Referenceを確認してみてください。

(宣言ブロック)値

属性に設定できる値は属性によって異なります。

また値には複数の書き方がある場合があります。指定できる単位も複数の種類があるので、最初は混乱するかもしれませんが、一つずつ試して理解することが重要です。

h1要素に装飾する例


h1 { 
  color: red;
  font-size: 24px; 
}
    

この例では、h1要素 の文字色(color)を 赤(red)に、フォントサイズ(font-size)を 24px に装飾するように宣言しています。

セレクタの宣言ブロックは波括弧({})で括り、属性 と 値はコロン(:)で繋げます。
また、終端文字にセミコロン(;)が必要です。

書き方として重要なことは、改行とインデント(文頭のスペース)です。
この例のコードは次のように書くこともできます。


h1{color: red;font-size:24px;}
    

見て分かるとおり、このように書いてしまうとCSSのコードが見づらくなってしまいます。
複数人で開発する場合は特にコードの書き方には気を使う必要があります。
また個人開発であっても、一度書いたコードは将来的に見直す可能性があるため、可読性を意識してコーディングするようにしましょう。

理解度チェック

  • CSSのセレクタについて説明してください。
  • CSSの宣言ブロックについて説明してください。
  • CSSの属性について説明してください。
  • CSSの値について説明してください。
  • 読みやすいコードを意識して書く必要があるのはなぜですか?

VS Codeの拡張機能

VS Codeを使用してHTMLやCSS、JavaScriptなどを記述する際に便利な拡張機能を紹介します。

拡張機能の使い方や、その他の拡張機能のインストールについてはVS Codeのダウンロードページをご確認ください。

ESLint

この拡張機能をインストールすると、HTML、CSSやJavaScriptのエラーを探索し、波線やメッセージで教えてくれるようになります。

拡張機能: ESLint

Bracket Pair Colorizer 2をインストールしている場合、インストール直後は括弧の色が適用されない場合があります。VS Codeを再起動すれば正常に反映されます。

CSSを書けるところ

CSSコードは次の3つの箇所で記述することができます。

  • インラインスタイル
  • 内部スタイルシート
  • 外部スタイルシート

インラインスタイル

インラインスタイルはHTMLのstyle属性にスタイルを記述します。
style属性はHTMLのグローバル属性となっているため、どのタグにも記述できます。

要素そのものに記述するため、CSSのセレクタは不要です。


<h1 style="color: red;font-size: 24px;">PROGRABIでコーディング学習</h1>
    

このインラインスタイルは使用する際に気をつけなければならないいくつかの注意事項があります。

  • 可読性が下がる
    style属性に記述されたスタイルは読みづらくなります。改行やインデントで整形した場合でも、他のHTMLの要素と混在してしまうためです。
  • 優先度が高い
    他の書き方で宣言されたCSSよりも優先度が高くなります。そのため外部からの修正、更新が難しくなります。
  • 汎用性がない
    その要素にしか適用されないため他の要素で同じスタイルを繰り返し使用することができません。そのためコード量が増えてしまうことがあります。

内部スタイルシート

HTMLのタグを使用してCSSを記述することができます。


<style>
    h1 {
        color: red;
        font-size: 24px;
    }
</style>
    

この様にstyle要素を使用すれば、開始タグから終了タグの内部でCSSを記述することができます。
またstyle要素の中にCSS以外の言語(HTMLなど)は記述することができません。

head要素で使用されることが多いですが、body要素でも使用することができます。

外部スタイルシート

CSSファイルを作成し、その中にCSSを記述します。HTMLファイル内でCSSファイルを読み込むことでCSSを適用することができます。

style.css

h1 {
    color: red;
    font-size: 24px;
}
    
index.html

<head>
    <!-- head要素からCSSを読み込みます -->
    <link rel="stylesheet" href="style.css">
</head>
    

CSSを読み込むためにlink要素を使用します。link要素のrel属性には「どんな内容のファイルを読み込むか」の意味であるリンク種別を指定します。
CSSを読み込む場合はrel="stylesheet"となります。

href属性にはCSSファイルの位置(パス)を設定します。この例のhref="style.css"index.htmlと同じ階層にあるstyle.cssを読み込むという意味となります。

CSSの場合は、head要素でもbody要素でもlink要素を使用してCSSファイルを読み込むことができます。
しかし、body要素は画面に表示するための要素を記述する箇所ですので、通常はhead要素で使用されます。

理解度チェック

  • CSSのインラインスタイルはどのようなものですか?
  • CSSの内部スタイルシートとはどのようなものですか?
  • CSSの外部スタイルシートとはどのようなものですか?
  • CSSの記述方法をそれぞれ試してみましょう!

前のレッスン
次のレッスン

第四期生募集中

2021年2月スタートの第四期生を募集中です。
詳細は各コースをご覧ください。

分からないところは聞いてみよう

24時間いつでも質問できる

「分からない」ところを調べてもなかなか理解できないかもしれません。PROGRABIなら24時間いつでも質問できます。

モチベーションを継続する

「分からない」が続くと継続することは難しいです。PROGRABIなら毎週授業があるため継続して学習することができます。

複数人参加可能な授業

PROGRABIは複数人で授業に参加することができます。一人では気づけない疑問や問題、その解決方法など他の受講者から得られることが多くあります。

目標を達成する

コースの課題を制作することで自らの力でコーディングできる力を身に付けます。目標の達成に向けて徹底的にサポートします。