CSSとは？CSSの書き方を解説！ CSSとは？CSSの書き方を解説！

CSSとは？CSSの書き方を解説！

2023.02.02 CSS

HTMLを学び始めた人なら、HTMLとセットで学ぶのがCSSだと思います。
今回はCSSの役割や、できることなど、基礎知識を解説していきます。

CSS初心者の方でも理解しやすい内容にまとめましたので、ぜひ最後までご覧になってみてください。

CSSの役割

CSSの役割は、HTMLでコーディングされた要素に、色や枠、文字の大きさなど、主に見た目の装飾をつけるための言語です。

そのため、CSSが単体で使われることはなく、HTMLとCSSは常にセットで使用されます。

こちらはCSSを実装していないHTMLをプレビューしたものです。

HTMLでコーディングされた要素は上記のように、文章構造のみで色や配置、枠線などの装飾が施されていません。

HTMLファイルにCSSでデザインを実装することで、見た目やレイアウトが整い、見やすいデザインにすることが出来ます。

このようにCSSの役割は、Webサイトの見た目を制御しているのです。

CSSでできる事

CSSでは、文字の色や大きさ、フォント、背景色の変更などを記述します。

さらに、

  • 文字や画像を左寄せにするか、中央揃えにするか
  • 2段組みにするか
  • 文字と文字の間隔はどれくらいにするか

等といったレイアウトの調整もCSSで行います。

また、CSSでアニメーションの記述も可能です。
本格的に動的なWebサイトを作る場合はJavaScriptというスクリプト言語を使うことになりますが、

  • マウスがボタンの上に置かれたときに、ボタンの色を変更する
  • ラジオボタンやチェックボックスをユーザのクリックにあわせて表示する
  • 数秒ごとに画像を切り替える

といった簡単なアニメーションならCSSの記述で行うことができます。

CSSの書き方

CSSは、「セレクタ」「プロパティ」「値」の3つを使って書いていきます。

セレクタ {
 プロパティ: 値;
}

セレクタ

セレクタとは、セレクト（選択する）という名前の通り、HTML要素のどの部分に対して、CSSを適用させるかを選択する役割を果たします。

例：「body、h1、h2、p」などの要素や、「id=”属性名” class=”属性名”」などの属性名のことを指定します。

セレクタで指定されたHTML要素は、HTMLファイル内に複数存在しても、同じルールが適用されます。

セレクタの指定方法はいくつかルールがありますので、こちらの記事で詳しく説明しています。

CSSのセレクタ！覚えておきたい25種類の書き方

プロパティ

プロパティとは、適用するCSSのスタイルの種類のことです。

文字サイズを変更したい「font-size」、背景色を変更したい「background-color」などを指定します。

CSSには多くのプロパティが存在しており、表現したいデザインに合わせてプロパティを使い分けていきます。

値

値とは、セレクタに適用するプロパティを「どのように変更するのか」の具体的な指示のことです。

文字サイズの数値や背景色の色、位置や高さなどを具体的に指定します。

値の書き方は、プロパティごとに異なっています。

記述例

h1 {
  font-size: 18px;
  color: #000000
}

記述の手順は、まずh1のセレクタを先頭に記述し、プロパティと値は、{ }（波括弧）で囲います。プロパティと値は、:（コロン）でつなぎます。

複数のプロパティを同時に指定する場合は、;（セミコロン）で区切って記述します。最後の行のセミコロンは省略することもできます。

CSSの書く場所

CSSは「セレクタ」「プロパティ」「値」を指定して書くのが通常パターンです。

この通常パターンは「CSSファイル」か「styleタグ」に書くことが出来ます。

また、HTMLタグに直接書く方法もあり、CSSの書く場所は3パターンに分けることができます。

CSSの3つのパターン

CSSファイルを作って読み込ませる

CSSファイルとは、HTMLファイルが「.HTML」に対して、「.css」のファイルのことを指します。

このファイル内には、上記で述べた通常パターンのルールがいくつも記載されており、ファイルを読み込むことで、HTMLファイルに反映させることが出来ます。

<link rel="stylesheet" href="CSSファイルのパス">

１つのCSSには、複数ページ分の記述が書かれている場合と、１ページごとにファイルが分かれている場合があります。

参考：https://storyof-website.xyz/web/wp-content/themes/web/asset/css/common.css

HTMLファイル内にstyleタグを作って書く

CSSファイルに書かれている記載内容は、<style></style>の間に書くことで、HTMLファイル内でも機能させることが出来ます。

<style>
h1 {
  font-size: 18px;
  color: #000000
}
</style>

<style></style>の間であれば、CSSファイルの中身を全て記載しても、機能することが出来ます。

逆を言えば、styleタグに書かれる内容をまとめたファイルがCSSファイルと言うことです。

HTMLタグに直接書き込む

この方法は、<h1>・<p>・<img>などのHTMLタグに、style=””と記載して、スタイルを指示することが出来ます。

<h1 style="font-size: 18px; color: #000000">テキストテキストテキスト</h1>

「プロパティ」「値」をHTMLタグに直接記載して、スタイルを指示する方法になります。

通常パターンの書き方とは違い、他のHTMLタグへは反映されません。

CSSを書く3パターンのメリット・デメリット

CSSを書くときに共通しているのは、「どの要素に」「どの種類を」「どの値で」ということです。

３パターンのメリット・デメリットは、この中の「どの要素に」の部分で大きく影響しています。

HTMLタグに直接書き込む

メリット

CSSファイルのスタイル指示は、他の要素にも影響を与えます。

HTMLタグに直接書き込む場合は、書き込んだHTMLタグだけに影響を与えるので、他のタグとは異なる指示にすることが出来ます。

デメリット

一方で、HTMLタグに直接書く場合、スタイル指示の優先度が最優先となり、CSSファイルで指示した内容をかき消してしまいます。

また、デバイスごとに値を変えたい時などは、制御がしにくいため、値が変わる指示に関しては、推奨しません。

HTMLファイル内にstyleタグを作って書く

メリット

HTMLファイルに直接書いているため、外部ファイルを読み込むよりも、読み込み速度が速いです。

また、複数要素にもスタイル指示を反映させることが出来ます。

デメリット

HTMLファイルごとに<style></style>を書かなければいけません。

それだけ？と思う方もいると思いますが、複数ページに同じ記述がある場合は、修正が非常に手間と言えます。

また、<style>内の記載が長文になると、HTMLファイルの容量が大きくなり、ページの読み込み速度が落ちてしまいます。

CSSファイルを作って読み込ませる

メリット

CSSの書き方では、最も採用されている方法です。

複数要素にもスタイル指示を反映させることが出来、デバイスごとに値を変えることも可能です。

また、複数のHTMLファイルに読み込ませれば、1つのCSSファイルで複数ページへスタイル指示を設定することが可能です。

編集をする際は、該当のCSSファイルのみの修正で済むため、作業効率も非常に良い方法です。

デメリット

外部ファイルの読み込みは、ページ読み込みを遅らせます。

ただし、容量が大きかったり、複数のCSSファイルを読み込ませなければ、そこまでの影響はありません。

またページ読み込みに影響がでるのは、styleタグで書く方法と変わりません。

なので、CSSファイルを読み込ませる方法が最も採用されているのです。

まとめ

Webサイトを作るときは、HTMLとCSSはセットとなり、必要不可欠です。

ただし、使う言語は異なる為、この時点で「嫌だ」って思ってしまう人も多いと思います。

ですが、この壁を乗り越えることが出来れば、Web制作の初歩を踏み出すことができます。

他にもHTMLとCSSの使い方に関しての記事を書いていきます。

HTML初心...
JavaSc...