CSS/はじめに
CSSとは？
編集CSS（Cascading Style Sheets、カスケーディング・スタイルシート）は、Webページの見た目やレイアウトを定義するためのスタイルシート言語です。HTML（HyperText Markup Language）で記述されたコンテンツの構造を視覚的に表現するために使用されます。CSSは、Webページの要素のデザインや配置、フォントや色の設定、さらにはレスポンシブデザインやアニメーション効果など、幅広い視覚的表現を可能にします。
CSSの主な目的は、Webページの内容を視覚的に整理し、ユーザーにとって見やすく、使いやすいページを作成することです。これにより、ユーザー体験が向上し、デザインの統一感が保たれます。CSSはWebデザインの中心的な技術であり、HTMLと共にWebの基本構成要素として広く利用されています。
CSSの役割
編集CSSは、Webページのスタイルを管理する役割を果たします。具体的には、次のような要素を制御します：
- フォントのスタイルや色：テキストの表示に関するデザイン（フォントサイズ、フォントファミリー、色など）。
- レイアウト：Webページのレイアウトを決定します。これには、グリッドやフレックスボックス、位置決め、余白やパディングの設定が含まれます。
- 色や背景：要素の背景色、背景画像、グラデーションなどを指定します。
- 視覚的効果：ボーダー、シャドウ、透過効果など、ページの見た目を強化するためのスタイルを設定します。
- アニメーション：CSSを使用してページ内の要素にアニメーション効果を追加することができます。例えば、フェードイン、スライドイン、変形などです。
CSSは、HTMLのコンテンツとは別に定義され、Webページのスタイルを簡単に変更できるようにします。これにより、同じHTMLコンテンツを異なるデザインで表示したり、ページ全体のデザインを一元的に管理したりすることができます。
外部スタイルシート・埋め込みスタイルとインラインスタイル
編集CSSのスタイルは、主に3つの方法でHTML文書に適用できます。それぞれに特徴があり、使用するシーンに応じて使い分けることが重要です。
外部スタイルシート
編集外部スタイルシートは、CSSのスタイルを別ファイル（.cssファイル）として分離し、そのファイルをHTML文書にリンクする方法です。この方法は、スタイルシートを複数のHTML文書で共通に使用できるため、Webサイト全体のデザインを統一するのに非常に便利です。
外部スタイルシートを使うには、HTML文書の<head>セクションに<link>要素を使ってスタイルシートのファイルをリンクします。次のコード例は、外部スタイルシートをリンクする方法です：
<head> <link rel="stylesheet" href="styles.css"> </head>
外部スタイルシートの利点は、スタイルがHTMLから分離されることで、HTML文書が簡潔になり、メンテナンスがしやすくなる点です。また、複数のページで共通のスタイルシートを利用できるため、デザインを一元管理できます。
埋め込みスタイル
編集埋め込みスタイルは、CSSのスタイルをHTML文書内に直接記述する方法です。この場合、<style>要素を<head>セクションに記述します。スタイルシートはそのHTML文書内でのみ適用されます。次のコード例は、埋め込みスタイルを使った場合の例です：
<head> <style> body { background-color: lightblue; } h1 { color: darkblue; } </style> </head>
埋め込みスタイルの利点は、特定のHTML文書にのみスタイルを適用できることです。ただし、複数のページにわたって共通のスタイルを使用する場合には、外部スタイルシートを使用する方が効率的です。
インラインスタイル
編集インラインスタイルは、HTML要素に直接CSSを記述する方法です。HTML要素のstyle属性を使用して、各要素のスタイルを指定します。次のコード例は、インラインスタイルを使った例です：
<p style="color: red; font-size: 18px;">これはインラインスタイルの例です。</p>
インラインスタイルの利点は、特定の要素に対して即座にスタイルを適用できる点ですが、ページ内の他の要素にスタイルを適用したい場合は、それぞれにインラインスタイルを記述する必要があり、コードが冗長になりがちです。そのため、大規模なWebサイトでは、一般的に外部スタイルシートや埋め込みスタイルが好まれます。