この記事では、webサイト制作で必要な言語である「CSS」について解説をしていきます。
以前解説したHTMLと併せて使用する言語になるので、各々の役割や書き方を覚えていきましょう。
CSS について学ぼう
まずは、 CSSを簡単に説明していきます。
CSS とは
CSS (Cascading Style Sheets)も、HTML同様にwebサイトを作成するために使用される言語です。
以前紹介したHTMLは、「webサイトの構造を指定する」ための言語でした。
今回のCSSは「webサイトの見た目を指定する」ための言語になります。
私たちが普段目にしているwebサイトは、HTMLとCSSが合わさった状態で存在します。
CSSを使うことで、HTMLの要素に対し、
- 要素の大きさ
- 要素の並び
- 余白
- 色
などの見た目を追加することができます。
要素の見た目のことを「スタイル」という言い方をしますので、覚えておきましょう。
CSS の書き方
CSSの基本形
CSSの書き方の基本は「セレクタ」と「プロパティ」と「値」です。
HTMLの要素の「何に対して」「どこを変えるのか」「どのように変えるのか」をCSSで記述します。
「何に対して」に該当するものが「セレクタ」という箇所になります。
「どこを変えるのか」を指定するものが「プロパティ」となります。
「どのように変えるのか」を指定するものが「値」となります。
スタイルを変えるプロパティについては、実務でよく使うものを以下の記事で紹介しています。
こちらの記事も合わせてご覧いただけると幸いです。
CSSでスタイルを当てる
次にCSSでのスタイルの当て方を解説していきます。
スタイルを当てる方法は主に３種類あります。
- style属性で記述する
- styleタグで記述する
- 外部ファイル（cssファイル）で記述する
結論から先に申し上げると、CSSを記述する方法は「３.外部ファイル（cssファイル）で記述する」という方法が最適です。
「HTMLファイルはwebサイトの構造を記述する」「CSSファイルはwebサイトのスタイルを記述する」というように明確に役割を分担させていることにより、webサイトの制作・修正の負担を減らすことができます。
<!-- 直接、HTMLにstyle属性でスタイルを記述する例 -->
<p style="font-size: 24px; color: red;">テキスト</p>
<!-- 直接、HTMLにstyleタグでスタイルを記述する例 -->
<style>
.sample {
width: 80%;
}
</style>対し、「style属性」と「styleタグ」によるスタイルの記述は、HTMLファイル内に記述します。
これらの書き方だと、HTMLファイル内にスタイルが混在することになり、スタイルの修正が複雑になります。
つまり、webサイトの制作・修正の際の負担が大きく増えるのです。
また、スタイルの適用される優先順位の面から考慮しても望ましくありません。
なので、webサイトの構造とスタイルを管理するファイルをしっかり分けて、
「3.外部ファイル(cssファイル)」でスタイルを適用することを心がけましょう。
CSSのセレクタの種類
次に、CSSのセレクタについて説明します。
ここでは、webサイト制作で最低限使えるべきものを中心に解説していきます。
classセレクタ
.sample {
/* 「sample」というクラス名を持つ要素にスタイルを当てる */
}要素の「クラス名」でスタイルを変更したい要素を指定する方法です。
webサイト制作を行うにあたり、基本的にCSSのセレクタはこの方法で記述します。
HTMLに「class属性」を付与し、「クラス名」と呼ばれる値を入力します。
クラス名は「どこの - 何か」というように命名してあげると良いでしょう。
例. header-title、article-img
要素型セレクタ
p {
/* 全てのpタグにスタイルを当てる */
}
要素の「タグ名」でスタイルを変更したい要素を指定する方法です。
タグの名前で指定した場合、該当する全てのタグにスタイルが適用されてしまいます。
要素型セレクタばかり使用していると、意図せぬところでスタイルが変更されてしまう恐れがあります。
HTMLの要素のスタイルを変えるときは、最初に説明した「classセレクタ」で指定を行うようにしましょう。
ただし、この要素型セレクタは、
「リセットCSS」を作成する際に出番がありますので、頭の片隅に覚えておくようにしましょう。
idセレクタ
#sample {
/* 「sample」というID名を持つ要素に詳細度の高いスタイルを当てる */
}要素の「id名」でスタイルを変更したい要素を指定する方法です。
id属性で指定されたスタイルは、スタイルの優先順位（詳細度）が高くなります。
なので、idセレクタを多用してしまうと優先順位の管理が難しくなるので、サイトのスタイルの修正を複雑化してしまいます。
くどいようですが、HTMLの要素のスタイルを変えるときは、最初に説明した「classセレクタ」で指定を行うようにしましょう。
ここまでで基本的な３つのセレクタを説明しました。
他にもセレクタの書き方はたくさんあるのですが、classセレクタでスタイルを管理していくイメージを持っていただければ大丈夫です。
CSSの考え方をマスターしよう
今回は、webサイト制作に使われるCSSという言語について簡単に解説しました。
CSSはwebサイトの見た目を整える言語のイメージを持ってもらえれば大丈夫です。
次は、CSSのプロパティについて詳しく学び、どのように見た目を変更できるかの知識を蓄えていきましょう！
