Webページのデザインやレイアウトを整えるために不可欠なのがCSS（Cascading Style Sheets）です。CSSを使えば、文字の色やサイズ、背景、余白などを自在にコントロールすることができます。本記事では、CSSの中でも最も重要な概念であるセレクタと基本的なスタイリング方法について詳しく解説します。
CSSの基本
CSSとは何か？
CSS（Cascading Style Sheets）は、HTMLで構築したWebページの見た目を装飾するためのスタイルシート言語です。文字の色やフォント、背景色、余白、レイアウトなどを指定してWebページをデザインします。
- HTMLは構造、CSSはデザイン：HTMLがWebページの構造を定義するのに対し、CSSはその見た目を整える役割を担います。
- スタイルの分離：HTMLとCSSを分離することで、コードの管理がしやすくなり、再利用性も高まります。
CSSセレクタの基本
セレクタは、どのHTML要素にスタイルを適用するかを指定するためのものです。さまざまな種類のセレクタを使い分けることで、柔軟なデザインが可能になります。
1. 要素セレクタ
要素セレクタは、HTMLの要素そのものを指定します。たとえば、すべてのpタグに対してスタイルを適用するには次のように記述します。
p {
color: blue;
font-size: 16px;
}
この例では、ページ内のすべての段落（<p>）に青色のテキストと16pxの文字サイズを適用しています。
2. クラスセレクタ
クラスセレクタは、特定の要素にスタイルを適用するために使います。HTML内でclass属性を付与し、そのクラス名をCSSで指定します。
例
HTML：
<p class="highlight">この段落には特別なスタイルが適用されます。</p>
CSS：
.highlight {
background-color: yellow;
font-weight: bold;
}
この例では、highlightクラスを持つすべての段落に黄色い背景色と太字を適用しています。
3. IDセレクタ
IDセレクタは、id属性を持つ特定の要素にスタイルを適用します。IDはページ内で一意でなければならないため、通常は特定の要素に対してのみ使用します。
例
HTML：
<h1 id="main-title">メインタイトル</h1>
CSS：
#main-title {
color: red;
font-size: 24px;
}
この例では、id="main-title"を持つ要素に赤色のテキストと24pxの文字サイズを適用しています。
4. グループセレクタ
複数の要素に同じスタイルを一度に適用する場合には、カンマで区切って指定できます。
例
h1, h2, h3 {
font-family: Arial, sans-serif;
color: darkblue;
}
この例では、すべての見出しタグ（h1、h2、h3）に共通のフォントとテキスト色を適用しています。
5. 子孫セレクタ
子孫セレクタは、ある特定の要素内に含まれる別の要素にスタイルを適用します。
例
div p {
color: green;
}
この例では、div要素内にあるすべてのpタグに緑色のテキストを適用します。
CSSの基本スタイリング
色と背景色の指定
文字の色や背景色を変更するには、colorとbackground-colorプロパティを使用します。
例
body {
color: black;
background-color: lightgray;
}
この例では、ページ全体の文字色を黒、背景色を薄いグレーに設定しています。
フォントスタイルの設定
文字の見た目を変更するには、font-family、font-size、font-weightなどを使用します。
例
p {
font-family: 'Arial, sans-serif';
font-size: 14px;
font-weight: bold;
}
この例では、すべての段落にArialフォント、14pxの文字サイズ、太字を適用しています。
マージンとパディング
要素の外側と内側の余白を調整するには、それぞれmarginとpaddingプロパティを使用します。
例
div {
margin: 20px;
padding: 10px;
border: 1px solid black;
}
この例では、すべてのdiv要素に20pxの外側余白、10pxの内側余白、1pxの黒いボーダーを設定しています。
ボーダーの設定
要素の周囲に境界線を引くには、borderプロパティを使用します。
例
img {
border: 5px solid red;
border-radius: 10px;
}
この例では、画像に5pxの赤いボーダーと10pxの角の丸みを設定しています。
応用セレクタ
属性セレクタ
特定の属性を持つ要素にスタイルを適用するには、属性セレクタを使用します。
例
a[target="_blank"] {
color: orange;
text-decoration: underline;
}
この例では、target="_blank"属性を持つリンクにオレンジ色と下線を適用しています。
擬似クラスセレクタ
擬似クラスを使用すると、特定の状態にある要素に対してスタイルを適用できます。
例
a:hover {
color: red;
text-decoration: none;
}
この例では、リンクにマウスホバーしたときに赤い色にし、下線を消します。
結論
CSSセレクタと基本的なスタイリングを理解することで、Webページのデザインの幅が大きく広がります。これらの知識を活用して、見た目が美しいだけでなく、使いやすいWebサイトを構築しましょう。次のステップとして、レスポンシブデザインやアニメーションの設定に進むこともおすすめです。
