ホームページを作るはじめの一歩（２）

こんにちは、メモ蔵です！

ホームページを作るはじめの一歩の第２回目として、【CSS】の基本について紹介します。

CSSとは

CSSは、ウェブページのスタイリングを担当する言語です。

メモ蔵

HTMLがページの「骨格」を形成するのに対し、CSSはそれに「肉付け」をすることで、ページを美しく、使いやすくします。

基本的な構文

CSSは【セレクタ】と【宣言ブロック】で構成されます。

セレクタはスタイルを適用するHTML要素を指定し、宣言ブロック（中括弧 {} で囲まれた部分）内にプロパティと値を設定します。

p {
  color: red;
  font-size: 16px;
}

この例では、すべての<p>タグ（段落）に赤色の文字と16ピクセルのフォントサイズを適用しています。

メモ蔵

セレクタと宣言ブロックという言葉は覚えなくても、CSSの基本構文の形をしっかりと覚えてください。

レスポンシブデザイン

Webサイトを閲覧するデバイスは、パソコンだけでなく、タブレットやスマートフォンなど、サイズもバラバラです。

それぞれのデバイスに対応したWebサイトを作成することは、現実的に不可能です。

そこで活躍するのが【メディアクエリ】です。

@media (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}

メモ蔵

この例では、画面の幅が600ピクセル以下の場合に、背景色をライトブルーに変更しています。

メディアクエリを使用して、デスクトップ、タブレット、スマートフォンなどの異なるデバイスでの表示を最適化することができるのです。

まとめ

CSSはWeb開発において非常に強力なツールです。

CSSを使いこなすことで、あなたが思い描いているWebサイトのデザインを表現することができます。

本日はここまでです。
最後までお読みいただき、ありがとうございます。