こんにちは、エンジニア2年目の嶋田です。まずは、この記事を開いていただきありがとうございます！

今回は、CSS（Cascading Style Sheets）の基本について詳しく解説します。 なんでこのCSSが効かないんだろう…と思ったら大体は優先順位であったり、指定の仕方であったりします。

私自身が初めてCSSを使った時に躓いたポイントに偏ってはしまいますが是非、最後までお付き合いください！

CSS（Cascading Style Sheets）は、ウェブページのスタイルや装飾を指定するためのスタイルシート言語です。 HTML文書と組み合わせて使用され、ウェブページのデザインやレイアウトを制御します。

CSSを使わずにHTMLだけでウェブページをつくると文字と画像だけが上から下に並んだ単調なページになってしまいます。 HTMLはあくまでも土台を作るものです。 HTMLで作られたウェブページの土台に対して、「デザイン」や「レイアウト」を決めるのがCSSです。 CSSにより文字や背景の色を変えたり、カラフルな線を引いたり、余白を調整したりと見栄えをきれいにすることができます。

HTMLはウェブページの構造を定義し、CSSはその構造にスタイルを適用します。 HTMLはコンテンツの骨組みを提供し、CSSはその骨組みを彩り豊かにするということです！

上記のCSSはHTMLのp要素を選択して背景カラーをグレーにするというルールを表しています。 ルールセットにはCSSの書き方に必要な「セレクタ」「プロパティ」「値」を書くことで「どこに」「何を」「どのように」を指定できます。

CSSではセレクタを使用して、どのHTML要素にスタイルを適用するかを指定します。 セレクタは要素の種類やクラス、IDなどに基づいて指定できます。

上記のように、HTML側にはスタイルを適用するタグにclass属性を指定します。

そしてCSS側にはHTML側のclass属性の属性値の部分、上記HTMLコードでは「example」ですが 属性値をCSSで「.」をセレクタの前につけて書きます。

そうすることでHTMLで同じclass指定が複数ある場合でもCSS側で書くセレクタの中のプロパティと値がクラスに別れて適用されます。

上記のように、HTML側にはスタイルを適用するタグにid属性で値を指定して書きます。

そしてCSS側にはHTMLで指定したidの属性値をセレクタとして書きますが、書き方はid属性値の前に#シャープを書きます。

idセレクタを書くときの注意点は、セレクタで指定した「id名」は一つのHTML内で一度しか使用ができません。それなのでidセレクタで選択できる要素は一つだけになります。

プロパティはスタイルの属性を指定します。フォントサイズ、色、余白など、さまざまなスタイルプロパティが存在します。 プロパティはセレクタに指定したHTMLの要素に「何を」デザインするかの指定を書く部分です。 CSSの書き方のルールをわかりやすくした「どこに(セレクタ)」「何を(プロパティ)」「どのように(値)」の「何を」の部分になり、大まかにいうと表示の操作と設定できる項目のひとつひとつをプロパティと言います。 プロパティの書き方はCSSのセレクタの後に波カッコを書いた中にスタイルを変更したいプロパティを書きます。 以下によく使うもの一覧をまとめておきます！

プロパティには値を指定します。例えば、フォントサイズを指定する場合、その値をピクセル単位で指定します。 CSSの値は指定したプロパティを「どのようにして」スタイルを適用させるかコントロールするために書きます。 なのでCSSで書く値はプロパティとセットで書くということがほとんどです。 値の書き方はプロパティの後にコロン:を書いてコロンの次にプロパティの値を書きます。

コロンが抜けてしまうと正しく動作しないことがあるので注意してください。 また、コロンの前後には半角スペースを入れることがあります。 これはCSSコードを見やすくするためです。一般的にはコロンの後ろに半角スペースを入れます。

そしてスタイルを適用したいプロパティが複数になる場合は値も複数になるので値の最後にセミコロンを書き、 プロパティと値のセットの区切りをつけます。

値はプロパティにcolorを書いて値を16進数のカラーコードを書く、余白を作るならmarginプロパティを書いて値を10pxにする等の書き方があります。

HTMLとの接続方法といいますか、どのようにHTMLとCSSを結びつけているのか。方法は3パターンです。

インラインCSSはHTML要素の中に直接スタイルを記述する方法です。特定の要素に対して個別にスタイルを適用できます。 HTMLの要素に直接CSSを記述してスタイルをあてる書き方なので元からHTMLページで書いてるタグにstyle属性をつけてCSSを書きます。以下にインラインCSSの基本的な使い方を示します。

複数のCSSを指定する場合にはセミコロンで区切って書きます。

内部CSSは、HTML文書内に タグを使用してスタイルを定義する方法です。この方法では、1つのHTMLファイル内でスタイル情報を再利用できます。内部CSSを使用すると、特定のHTMLページに適用するスタイルをHTMLファイル内で定義できます。以下に内部CSSの基本的な使い方を示します。

この段落は内部CSSを使用してスタイルが適用されています。

上記の例では、 タグ内でCSSルールを定義しています。これにより、 タグと

タグに対するスタイルを指定しています。内部CSSは単一のHTMLファイル内で有効であり、他のHTMLファイルには影響を与えません。

外部CSSは、別のCSSファイル（通常は .css 拡張子を持つ）にスタイルを定義し、HTMLファイルからリンクして使用する方法です。この方法を使用すると、複数のHTMLファイルで同じスタイルを共有でき、保守性が向上します。以下に外部CSSの基本的な使い方を示します。

style.css (外部CSSファイル)

index.html (HTMLファイル)

この段落は外部CSSを使用してスタイルが適用されています。

上記の例では、外部CSSファイル（style.css）にスタイルを定義し、HTMLファイル内で 要素を使用して外部CSSファイルを読み込んでいます。これにより、複数のHTMLファイルで同じスタイルを適用できます。

CSSの優先順位は、スタイルが競合した場合にどのスタイルが適用されるかを決定します。

優先順位は以下のとおりです。

また、CSSの優先順位は、以下の3つの要素の組み合わせで決まります。

例えば、以下のコードの場合、idセレクタが classセレクタよりも優先されるので、#myDiv要素の背景色は赤になります。

また、以下のコードの場合、属性セレクタが優先されるので、a要素の背景色は黄色になります。

優先順位の理解は、非常に重要です。 私自身、ここでかなり苦戦しました…。 スタイルが競合した場合、適用されるスタイルを正確に制御するために、優先順位を考慮する必要がありますね！

CSSはウェブデザインにおいて欠かせない要素であり、HTMLと組み合わせてウェブページを美しく装飾するための強力なツールです。意外と不快なCSSと思ったのでここの部分を記事にしてみました！初めて触れる方も含めて、理解が深まっていたら嬉しいです。 また、私自身まだまだ勉強中なので何かあればお気軽にコメントで教えてください！