はじめに
こんにちは、エンジニア2年目の嶋田です。まずは、この記事を開いていただきありがとうございます！
今回は、CSS（Cascading Style Sheets）の基本について詳しく解説します。
なんでこのCSSが効かないんだろう…と思ったら大体は優先順位であったり、指定の仕方であったりします。
私自身が初めてCSSを使った時に躓いたポイントに偏ってはしまいますが是非、最後までお付き合いください！
目次
CSSとは？
CSS（Cascading Style Sheets）は、ウェブページのスタイルや装飾を指定するためのスタイルシート言語です。
HTML文書と組み合わせて使用され、ウェブページのデザインやレイアウトを制御します。
HTMLとCSSの関係
CSSを使わずにHTMLだけでウェブページをつくると文字と画像だけが上から下に並んだ単調なページになってしまいます。
HTMLはあくまでも土台を作るものです。
HTMLで作られたウェブページの土台に対して、「デザイン」や「レイアウト」を決めるのがCSSです。
CSSにより文字や背景の色を変えたり、カラフルな線を引いたり、余白を調整したりと見栄えをきれいにすることができます。
HTMLはウェブページの構造を定義し、CSSはその構造にスタイルを適用します。
HTMLはコンテンツの骨組みを提供し、CSSはその骨組みを彩り豊かにするということです！
CSSの基本
p {
background-color: #696969;
}
上記のCSSはHTMLのp要素を選択して背景カラーをグレーにするというルールを表しています。
ルールセットにはCSSの書き方に必要な「セレクタ」「プロパティ」「値」を書くことで「どこに」「何を」「どのように」を指定できます。
セレクタ
CSSではセレクタを使用して、どのHTML要素にスタイルを適用するかを指定します。
セレクタは要素の種類やクラス、IDなどに基づいて指定できます。
classセレクタ
<h1 class="example">Hello World!!</h1>
上記のように、HTML側にはスタイルを適用するタグにclass属性を指定します。
.example {
color: blue;
}
そしてCSS側にはHTML側のclass属性の属性値の部分、上記HTMLコードでは「example」ですが
属性値をCSSで「.」をセレクタの前につけて書きます。
そうすることでHTMLで同じclass指定が複数ある場合でもCSS側で書くセレクタの中のプロパティと値がクラスに別れて適用されます。
idセレクタ
<h1 id="example">Hello World!!</h1>
上記のように、HTML側にはスタイルを適用するタグにid属性で値を指定して書きます。
#example {
color: pink;
}
そしてCSS側にはHTMLで指定したidの属性値をセレクタとして書きますが、書き方はid属性値の前に#シャープを書きます。
idセレクタを書くときの注意点は、セレクタで指定した「id名」は一つのHTML内で一度しか使用ができません。それなのでidセレクタで選択できる要素は一つだけになります。
プロパティ
プロパティはスタイルの属性を指定します。フォントサイズ、色、余白など、さまざまなスタイルプロパティが存在します。
プロパティはセレクタに指定したHTMLの要素に「何を」デザインするかの指定を書く部分です。
CSSの書き方のルールをわかりやすくした「どこに(セレクタ)」「何を(プロパティ)」「どのように(値)」の「何を」の部分になり、大まかにいうと表示の操作と設定できる項目のひとつひとつをプロパティと言います。
プロパティの書き方はCSSのセレクタの後に波カッコを書いた中にスタイルを変更したいプロパティを書きます。
以下によく使うもの一覧をまとめておきます！
| プロパティ名 | 説明 |
|---|---|
color |
テキストの色を指定 |
font-size |
テキストのフォントサイズを指定 |
font-family |
テキストのフォントファミリーを指定 |
font-weight |
テキストの太さを指定 |
text-align |
テキストの水平方向の配置を指定 |
text-decoration |
テキストの装飾（下線、取り消し線など）を指定 |
line-height |
行の高さを指定 |
background-color |
背景色を指定 |
background-image |
背景画像を指定 |
background-size |
背景画像のサイズを指定 |
margin |
要素の外側の余白を指定 |
padding |
要素の内側の余白を指定 |
border |
境界線のスタイル、太さ、色を指定 |
width |
要素の幅を指定 |
height |
要素の高さを指定 |
display |
要素の表示方法を指定 |
position |
要素の位置指定方法（相対位置、絶対位置など）を指定 |
opacity |
要素の透明度を指定 |
box-shadow |
要素に影を付ける効果を指定 |
値
プロパティには値を指定します。例えば、フォントサイズを指定する場合、その値をピクセル単位で指定します。
CSSの値は指定したプロパティを「どのようにして」スタイルを適用させるかコントロールするために書きます。
なのでCSSで書く値はプロパティとセットで書くということがほとんどです。
値の書き方はプロパティの後にコロン:を書いてコロンの次にプロパティの値を書きます。
background-color: #aab1ff
コロンが抜けてしまうと正しく動作しないことがあるので注意してください。
また、コロンの前後には半角スペースを入れることがあります。
これはCSSコードを見やすくするためです。一般的にはコロンの後ろに半角スペースを入れます。
そしてスタイルを適用したいプロパティが複数になる場合は値も複数になるので値の最後にセミコロンを書き、
プロパティと値のセットの区切りをつけます。
h2 {
color: #aab1ff;
background-color: #aab1ff;
}
値はプロパティにcolorを書いて値を16進数のカラーコードを書く、余白を作るならmarginプロパティを書いて値を10pxにする等の書き方があります。
CSSの書き方
HTMLとの接続方法といいますか、どのようにHTMLとCSSを結びつけているのか。方法は3パターンです。
インラインCSS
インラインCSSはHTML要素の中に直接スタイルを記述する方法です。特定の要素に対して個別にスタイルを適用できます。
HTMLの要素に直接CSSを記述してスタイルをあてる書き方なので元からHTMLページで書いてるタグにstyle属性をつけてCSSを書きます。以下にインラインCSSの基本的な使い方を示します。
<p style="color:red;">インラインcss</p>
<p style="color:red; text-align:center;">インラインcss</p>
複数のCSSを指定する場合にはセミコロンで区切って書きます。
内部CSS
内部CSSは、HTML文書内に <style> タグを使用してスタイルを定義する方法です。この方法では、1つのHTMLファイル内でスタイル情報を再利用できます。内部CSSを使用すると、特定のHTMLページに適用するスタイルをHTMLファイル内で定義できます。以下に内部CSSの基本的な使い方を示します。
<!DOCTYPE html>
<html>
<head>
<style>
/* 内部CSSの例 */
p {
color: blue;
font-size: 16px;
}
h1 {
color: green;
}
</style>
</head>
<body>
<h1>内部CSSの例</h1>
<p>この段落は内部CSSを使用してスタイルが適用されています。</p>
</body>
</html>
上記の例では、<style> タグ内でCSSルールを定義しています。これにより、<h1> タグと <p> タグに対するスタイルを指定しています。内部CSSは単一のHTMLファイル内で有効であり、他のHTMLファイルには影響を与えません。
外部CSS
外部CSSは、別のCSSファイル（通常は .css 拡張子を持つ）にスタイルを定義し、HTMLファイルからリンクして使用する方法です。この方法を使用すると、複数のHTMLファイルで同じスタイルを共有でき、保守性が向上します。以下に外部CSSの基本的な使い方を示します。
style.css (外部CSSファイル)
/* 外部CSSの例 */
p {
color: blue;
font-size: 16px;
}
h1 {
color: green;
}
index.html (HTMLファイル)
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>外部CSSの例</h1>
<p>この段落は外部CSSを使用してスタイルが適用されています。</p>
</body>
</html>
上記の例では、外部CSSファイル（style.css）にスタイルを定義し、HTMLファイル内で <link> 要素を使用して外部CSSファイルを読み込んでいます。これにより、複数のHTMLファイルで同じスタイルを適用できます。
優先順位
CSSの優先順位は、スタイルが競合した場合にどのスタイルが適用されるかを決定します。
優先順位は以下のとおりです。
- セレクタの種類
- idセレクタ > classセレクタ > タイプセレクタ > その他
- より具体的なセレクタの方が優先される
- 属性セレクタ
- 属性セレクタは、セレクタの種類に関係なく、後から読み込まれたものが優先される
- インラインCSS
- インラインCSSは、他のCSSよりも優先される
- important
- importantを指定すると、そのプロパティの値が最優先される
また、CSSの優先順位は、以下の3つの要素の組み合わせで決まります。
- セレクタの種類
- 属性セレクタ
- 読み込み順
例えば、以下のコードの場合、idセレクタが classセレクタよりも優先されるので、#myDiv要素の背景色は赤になります。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>CSSの優先順位の例</title>
<style>
#myDiv {
background-color: red;
}
.myClass {
background-color: blue;
}
</style>
</head>
<body>
<div id="myDiv" class="myClass">
テキスト
</div>
</body>
</html>
また、以下のコードの場合、属性セレクタが優先されるので、a要素の背景色は黄色になります。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>CSSの優先順位の例</title>
<style>
a {
background-color: red;
}
a[href="https://example.com"] {
background-color: yellow;
}
</style>
</head>
<body>
<a href="https://example.com">テキスト</a>
</body>
</html>
優先順位の理解は、非常に重要です。
私自身、ここでかなり苦戦しました…。
スタイルが競合した場合、適用されるスタイルを正確に制御するために、優先順位を考慮する必要がありますね！
最後に
CSSはウェブデザインにおいて欠かせない要素であり、HTMLと組み合わせてウェブページを美しく装飾するための強力なツールです。意外と不快なCSSと思ったのでここの部分を記事にしてみました！初めて触れる方も含めて、理解が深まっていたら嬉しいです。
また、私自身まだまだ勉強中なので何かあればお気軽にコメントで教えてください！