CSSの基本
ウェブ開発において、HTMLがコンテンツの構造を定義するのに対し、CSS（Cascading Style Sheets）はそのコンテンツのスタイルやデザインを担当します。
この記事では、CSSの基本的な概念と使用方法について、初心者向けにわかりやすく解説します。
CSSとは？
CSSはスタイルシート言語であり、HTML文書やXML文書の外部または内部で、どのように表示されるかを指定するために使用されます。
HTMLがウェブページの構造を定義するのに対し、CSSはそのデザインやスタイルを担当し、ウェブページを美しく、使いやすくする役割を果たします。
基本の構文
CSSの基本的な構文は、選択子（Selector）とプロパティ（Property）と値（Value）の組み合わせです。
selector {
property: value;
}- Selector: スタイルを適用するHTML要素を指定します。
- Property: スタイルの種類を指定します（例: color、font-size、margin）。
- Value: プロパティに適用する値を指定します。
例えば、以下のCSSコードは、h1要素に対して文字の色を赤くし、テキストの大きさを24ピクセルに設定します。
h1 {
color: red;
font-size: 24px;
}選択子（Selectors）
選択子は、どのHTML要素にスタイルを適用するかを指定します。いくつかの基本的な選択子を紹介します。
- 要素セレクタ（Element Selector）: 特定のHTML要素を指定します。
p {
color: blue;
}- クラスセレクタ（Class Selector）: 特定のクラスを持つ要素を指定します。
.highlight {
background-color: yellow;
}- IDセレクタ（ID Selector）: 特定のIDを持つ要素を指定します。
#header {
font-size: 28px;
}- 子孫セレクタ（Descendant Selector）: 特定の要素の中にある別の要素を指定します。
div p {
font-style: italic;
}ボックスモデル
CSSは各HTML要素をボックスとして扱います。
このボックスには、コンテンツ、パディング、ボーダー、マージンなどが含まれます。これが「ボックスモデル」です。
- コンテンツ（Content）: テキストや画像などの実際のコンテンツが表示される領域。
- パディング（Padding）: コンテンツとボーダーの間の空白領域。
- ボーダー（Border）: パディングの外側にある枠線。
- マージン（Margin）: ボーダーと隣接する要素との間の空白領域。
.box {
width: 200px;
height: 100px;
padding: 20px;
border: 2px solid black;
margin: 10px;
}レイアウトの基本
CSSを使用してウェブページのレイアウトを設定することができます。以下は、基本的なレイアウトを作成するためのプロパティと値の例です。
display: 要素の表示方法を指定します。
.flex-container {
display: flex;
}
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}position: 要素の配置方法を指定します。
.relative-box {
position: relative;
top: 10px;
left: 20px;
}
.absolute-box {
position: absolute;
top: 0;
right: 0;
}float: 要素を左または右に浮動させます。
.float-left {
float: left;
}
.float-right {
float: right;
}色とフォント
CSSを使用して、テキストの色やフォントを変更することもできます。
color: テキストの色を指定します。
.red-text {
color: red;
}font-family: テキストのフォントを指定します。
body {
font-family: 'Arial', sans-serif;
}メディアクエリ
メディアクエリを使用すると、デバイスの幅や高さ、画面の向きなどに応じてスタイルを変更することができます。これはレスポンシブウェブデザインの一環です。
@media screen and (max-width: 600px) {
/* 600px以下の場合のスタイル */
body {
font-size: 14px;
}
}CSSのコメント
CSSではコメントを追加して、コードの理解を助けることができます。
/* これはコメントです。 */
.header {
font-size: 20px; /* このようにもコメントを追加できます。 */
}CSSのプリプロセッサ
CSSにはプリプロセッサと呼ばれる拡張があります。
代表的なものにはSassやLessがあります。
これらを使用すると、変数の使用やネストした構文、ミックスイン（再利用可能なスタイルのセット）などが可能になり、効率的なスタイルシートの管理ができます。
$primary-color: #3498db;
.button {
background-color: $primary-color;
&:hover {
background-color: darken($primary-color, 10%);
}
}ブラウザ開発者ツール
ほとんどのモダンなブラウザは、開発者がウェブページのスタイルをデバッグするための開発者ツールを提供しています。
これにより、リアルタイムでスタイルの変更やデバッグが行えます。
まとめ
CSSはウェブデザインにおいて不可欠な言語であり、HTMLとともにウェブページを美しく、使いやすくする役割を果たします。
基本の構文やプロパティ、選択子を理解し、開発者ツールを活用しながら実際にコーディングを行ってみることで、CSSの扱いに慣れていくことができます。
初心者の方も少しずつ実践してみて、素敵なウェブデザインを作り上げてください。