・初めに

この記事は以下の方を対象としています。また、記事修正のコメントやLGTMなどモチベーションにつながるのでよろしければお願いします‼

初学者の方
フロントエンドエンジニア志望の方
CSSの概要について学習、復習したい方

・導入

閲覧ありがとうございます。この記事は、初学者がフロントエンド目指してロードマップに沿ってアウトプットしていく記事になります。
こちらの記事はPart6です。最初からご覧になりたいかたは、以下よりどうぞ。

Roadmap

・記事一覧

part1: Internet【HTTP,Browsers】
part2: Internet【DNS,Domain,Hosting】
part3: HTML 【basics】
part4: HTML 【Form validation】
part5: HTML 【20 best practices】

・Part6　CSS 【basic】

CSSとは？

CSSとはCascading StyleSheetsの略で、ブラウザ上のウェブページなどにおいて、見た目を装飾する言語のことを指します。ここでいう装飾とは、よりユーザーが使いやすいウェブページにするため、HTML要素に対してCSSを適用し、文字や背景に色を付けたり配置を変えたりすることをいいます。

CSSができる前はHTMLで装飾をおこなっていました。しかし、HTMLでのスタイル指定には限界があることや、コードが長くなってしまい可読性が下がることから、スタイル指定と文書の構造設計をそれぞれCSSとHTMLによって分ける方法が生み出されました。現在では、これが一般的になっています。

CSSの書き方

例えば、ウェブページ上の<h1>の要素を大きく、赤くしたい場合のコードは以下のようになります。

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

このとき、h1の部分をセレクターと呼び、h1をはじめとした多くのHTML要素などを選択することができます。詳しくはPart7で紹介しています。よければご覧ください。
また、セレクター(h1)のあとの{ }を宣言ブロックと呼び、宣言ブロックの中に書かれているcolor: red;などを宣言と呼びます。セレクターにはいくつかの宣言を1つ以上書くことができ、宣言はcolorなどのプロパティと、それに対応する:(コロン)のあとのredなどのプロパティ値(または値)を持っており、;(セミコロン)で分割されます。

例えば、colorプロパティは様々なcolor値を持っており、font-sizeプロパティは値として様々なsize値を持っています。そのため、色やサイズの変更が可能になっています。
ですから、下のコードのようにcolorプロパティに大きさを指定したとしても、colorプロパティはsize値を持たないため、CSSは適用されません。注意しましょう。

ダメな例

h1 {
  color: 16px
}

この他にも多くのプロパティと値がありますが、覚えることが難しいため、使うときになってから調べて覚えていくという方法がいいかと思います。

CSSの適用

ここまでCSSの書き方について解説してきましたが、実際にCSSをHTMLに適応するにはどうすればいいのでしょうか。
それには3つの方法があります。外部スタイルシートと内部スタイルシートとインラインスタイルです。それぞれについてみていきましょう。

インラインスタイル

インラインスタイルは、単一のHTML要素にのみ影響を与えることのできるCSSで、style属性のなかに記述します。インラインスタイルは基本的には推奨されていません。それは、HTMLの変更毎にCSSも書き換える必要があるということや、コードが長くなり読みずらいなどの理由が挙げられます。
インラインスタイルは、作業空間が制限され、使わざるを得ない場合に使用します。

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>スポーツ速報</title>
  </head>
  <body>
    <h1 style="color: blue;background-color: yellow;border: 1px solid black;">プロ野球速報</h1>
    <p style="color:red;">柳田選手が、今シーズン230本目のホームランを打ちました。怪物です。</p>
  </body>
</html>

内部スタイルシート

内部スタイルシートはその名の通り、HTMLにそのまま記述する方法で、<head>の<style>要素の中に置きます。
これは、あるシステムによって外部ファイルの変更が禁止されている場合などのCSSの記述としては有効ですが、この記述方法だとファイルごとにCSSを記述する必要があるため、あまり効率的ではありません。

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>スポーツ速報</title>
    <style>
      h1 {
        color: blue;
        background-color: yellow;
        border: 1px solid black;
      }

      p {
        color: red;
      }
    </style>
  </head>
  <body>
    <h1>プロ野球速報</h1>
    <p>柳田選手が、今シーズン230本目のホームランを打ちました。怪物です。</p>
  </body>
</html>

外部スタイルシート

外部スタイルシートは、その名の通りHTMLファイル外に.cssの拡張子ファイルで扱う方法で、現在最も多く使用されています。

なぜ外部スタイルシートが多く使用されているかというと、それぞれ説明したデメリットを始めとして、インラインスタイルの場合はその要素のみ、内部スタイルシートはそのページ内の要素のみにしかスタイルを適用しません。もしWebページが何百、何千ページとなった場合、1ページずつスタイルを変更していくのは非常に骨が折れる作業になってしまいます。
しかし、外部スタイルシートはHTML内でlinkタグを使用してスタイルシートと結びつけるだけで、そのスタイルシートに定義されているスタイルが反映されます。また、1つのスタイルシートのファイル内にあるスタイルを変更するだけで、linkタグでつながっているすべてのHTMLファイルの要素のスタイルを変更することができます。
このようにメリットが複数あることから、今では外部スタイルシートを採用するのが一般的となっています。

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>スポーツ速報</title>
    <link rel="stylesheet" href="styles/style.css">
  </head>
  <body>
    <h1>プロ野球速報</h1>
    <p>柳田選手が、今シーズン230本目のホームランを打ちました。怪物です。</p>
  </body>
</html>

styles/style.css

h1 {
  color: blue;
  background-color: yellow;
  border: 1px solid black;
}

p {
  color: red;
}

この時のrel=はファイルのタイプ指定のために、href=はファイルのURLを指定のために記述します。複数のスタイルシートが読み込まれた場合は、後に読み込まれたものが優先されます。

まとめ

今回はCSSの基本と、3つのCSSの適用方法について述べてきましたが、適用方法についてどれを使うかは、そのプロジェクトに最適なものを選ぶ必要があることを覚えておきましょう！

次回予告

CSSの基礎についてはこの辺にして、次回はもう少し詳しくセレクターについてみていきたいと思います。

参考文献

MDN Web Docs
WebMedia

【ありえへん凡記事】CSSの基本ついてまとめてみた

・初めに

・導入

・記事一覧

・Part6 CSS 【basic】

CSSとは？

CSSの書き方

CSSの適用

インラインスタイル

内部スタイルシート

外部スタイルシート

まとめ

次回予告

参考文献

・Part6　CSS 【basic】