はじめに

前回の投稿でHTMLで見出しや文章、画像などを表示できるようになる学習をしてきましたが、

文字の色を変えたい
文字を大きくしたい
余白をつけて見やすくしたい

と思ったことはありませんか？

HTMLだけではWebページの見た目を自由に変更することはできません。

そこで活躍するのがCSS(Cascading Style Sheets) です

この記事では、CSSの役割から書き方、基本構文、初心者が最初に覚えたいプロパティまで、これからCSSを学ぶ方にもわかりやすく解説します。

CSSとは？

CSSとは、Webページの見た目（デザイン）を指定するための言語です。

HTMLが「文章や画像などの内容（骨組み）」を作る役割なのに対し、CSSは「色・文字サイズ・レイアウトなどの見た目」を整える役割があります。

例えば、HTMLだけで見出しを書くと次のようになります。

<h1>こんにちは</h1>

このままでも表示されますが、色や文字サイズはブラウザの初期設定です。

CSSを追加すると、

h1 {
  color: blue;
  font-size: 32px;
}

見出しの色を青にしたり、文字サイズを大きくしたりできます。

つまり、

HTML：Webページの内容を作る
CSS：Webページのデザインを整える

この2つを組み合わせることで、見やすくデザインされたWebページを作成できます。

CSSを書く3つの方法

CSSには主に3つの書き方があります。

① インラインCSS

HTMLタグの中に直接CSSを書きます。

<p style="color: red;">こんにちは</p>

メリット

すぐにスタイルを適用できる

デメリット

管理しにくい
同じスタイルを何度も書くことになる

学習用としては便利ですが、実際の開発ではあまり使われません。

② 内部CSS

HTMLファイル内の<style>タグにCSSを書きます。

<head>
  <style>
    p {
      color: red;
    }
  </style>
</head>

メリット

1つのHTMLファイル内で管理できる

デメリット

ページ数が増えると管理が大変になる

③ 外部CSS（おすすめ）

CSSを別ファイルに書き、HTMLから読み込みます。

style.css

p {
  color: red;
}

HTMLでは<link>タグで読み込みます。

<head>
  <link rel="stylesheet" href="style.css">
</head>

メリット

管理しやすい
複数ページで使い回せる
実際のWeb制作で最もよく使われる

初心者の方も、最終的には外部CSSを使うことをおすすめします。

CSSの基本構文

CSSは次のような形で書きます。

h1 {
  color: blue;
}

それぞれの役割は次のとおりです。

名前	役割
`h1`	セレクタ（どの要素に適用するか）
`color`	プロパティ（何を変更するか）
`blue`	値（どのように変更するか）

つまり、

「h1の文字色を青にする」 という意味になります。

CSSは次の形で書くのが基本です。

セレクタ {
  プロパティ: 値;
}

コメントの書き方

CSSではコメントを書くことができます。

/* 見出しの色を変更 */
h1 {
  color: blue;
}

コメントはブラウザには表示されず、プログラムにも影響しません。

例えば、

コードの説明を書く
メモを残す
後から見返しやすくする

といった目的で使われます。

最初に覚えたいCSSプロパティ

ここでは、初心者が最初に覚えておきたい5つのプロパティを紹介します。

color

文字の色を変更します。

p {
  color: red;
}

表示結果

文字が赤色になります。

background-color

背景色を変更します。

p {
  background-color: yellow;
}

表示結果

背景が黄色になります。

font-size

文字サイズを変更します。

p {
  font-size: 24px;
}

表示結果

文字が大きく表示されます。

font-weight

文字の太さを変更します。

p {
  font-weight: bold;
}

表示結果

文字が太字になります。

text-align

文字の配置を変更します。

p {
  text-align: center;
}

主な指定方法は次のとおりです。

値	意味
`left`	左寄せ（初期値）
`center`	中央寄せ
`right`	右寄せ

まとめ

今回はCSSの基本について紹介しました。

この記事で学んだ内容は次のとおりです。

CSSはWebページの見た目を整える言語
CSSには3つの書き方がある
実際の開発では外部CSSが最もよく使われる
CSSは「セレクタ・プロパティ・値」の組み合わせで書く
colorやfont-sizeなど基本的なプロパティから覚えると学習しやすい

HTMLだけではシンプルだったWebページも、CSSを使うことで見やすくデザイン性のあるページに仕上げることが出来ます。

今回はCSSの基本に関して記載しました
今回はpart1なのでpart2で続編を記載する予定です。
ぜひHTMLからCSSpart1・2を読んで基本の基礎を学んでwebページを作成しましょう！