はじめに
前回の投稿で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ページを作成しましょう！