CSSはHTMLやXMLで書かれたコンテンツのスタイルを指定し、見た目やデザインを整えるための言語です。
CSSファイルは通常、「ファイル名.css」といった名前で保存され、HTMLファイルと組み合わせて使用されます。これにより、コードを分割してメンテナンスしやすくすることができます。
CSSを使うと、テキストのフォントや色、ボックスのサイズや位置、背景の設定など、さまざまなスタイリングが可能です。実際に手を動かして、どんな変化が生じるか試してみると理解が深まります。CSSの力を活かして、素敵なウェブページを作成する楽しみを味わってください！
目次 非表示
CSSの記述場所には、以下の3つのパターンがあります。
インライン形式
インライン形式は、HTMLのタグ内に直接CSSのスタイルを記述する手法です。この方法では、要素タグにstyle属性を追加し、その中にセレクタ・プロパティ・値を指定します。例えば、以下のように大見出しにフォントサイズを適用する場合です。
<h1 style="font-size: 24px;">大見出し</h1>この手法は直感的で分かりやすい反面、全ページで共通のスタイルを変更したい場合、各タグのスタイルを個別に更新する必要があります。これは保守性の点でデメリットとなります。
Web制作では、一時的なテストやHTMLメールの作成においては利用されますが、大規模なプロジェクトでは外部スタイルシートの使用が一般的です。外部スタイルシートを利用すると、スタイルを一元管理でき、全体の一貫性を保ちやすくなります。
ヘッダー埋め込み形式
<head>要素内でstyle要素を使用してCSSを一括して記述する方法は、特定のページ内でスタイルを一元管理する手法です。以下はその例です。
<head>
<style>
h1 {
font-size: 24px;
font-weight: bold;
color: #ff7800;
}
</style>
</head>
この方法では、<style>タグ内にセレクタ（ここではh1）を指定し、その中にプロパティと値を記述します。これにより、ページ内のh1要素に対して一括でスタイルが適用されます。
ただし、このアプローチもインライン形式と同様に、各ページごとにスタイルを管理するため、全ページで共通のスタイルを変更したい場合には全てのページやテンプレートを更新する必要があります。保守性の観点から、大規模なプロジェクトでは外部スタイルシートが好まれることがあります。
総括すると、この方法は特定のページ内での使用に適しており、全体の一貫性を保つためには外部スタイルシートが有益であると言えます。
外部参照
CSSを外部ファイルとして別に作成し、HTMLからlink要素でリンクを貼る方法は、Webサイト制作において一般的で効率的な手法です。以下がその例です。
<head>
<link rel="stylesheet" href="style.css">
</head>
この方法では、link要素を使用して外部のstyle.cssというファイルをHTMLに結びつけています。スタイルの追加や修正は、CSSファイルを更新するだけで、リンクしている全てのページに反映されるため、保守性と更新効率が向上します。
ただし、外部参照によるCSSの読み込みは、ブラウザのレンダリングブロックを引き起こす可能性があります。大きなCSSファイルを読み込む場合、ページの表示速度が遅くなるかもしれません。この問題を緩和するために、必要に応じてファーストビュー部分のスタイルを埋め込み形式にするなどの工夫が求められます。
総括すると、この方法はWebサイト全体の一貫性を確保する上で非常に便利ですが、パフォーマンスに配慮する必要があります。
基本的に私は外部参照の方法でやっていこうと思います。
