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ファイルのパス">
1つのCSSには、複数ページ分の記述が書かれている場合と、1ページごとにファイルが分かれている場合があります。
参考: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を書くときに共通しているのは、「どの要素に」「どの種類を」「どの値で」ということです。
3パターンのメリット・デメリットは、この中の「どの要素に」の部分で大きく影響しています。
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の使い方に関しての記事を書いていきます。