HTMLの次はCSS！初心者向けに役割や基本の書き方をやさしく解説
Webサイト制作について学び始めると、「CSS」という言葉を目にする機会が増えてきます。
でも、
- 「CSSって何だろう？」
- 「HTMLとはどう違うの？」
- 「難しそうでよく分からない」
このように感じる方もいるのではないでしょうか。
CSSは、Webサイトの文字の色や大きさ・背景などの見た目を整えるための言語で、HTMLと組み合わせて使うことで見やすくデザインされたWebページを作れるようになります。
この記事では、CSSの役割やできること、基本的な書き方について初心者向けにやさしく解説します。
CSSとは？
CSS（Cascading Style Sheets）は、Webサイトの見た目を整えるための言語です。
文字の色や大きさを変更したり、背景色を付けたり、余白を調整したりと、Webページのデザインに関わる部分を担当しています。
Webサイトは主にHTMLとCSSを組み合わせて作られており、HTMLが文章や見出しなどの構造を作るのに対し、CSSはその構造にデザインを加える役割を持っています。
例えば、HTMLだけで作成したページは文字が並んでいるだけのシンプルな状態ですが、CSSを適用することで文字に色を付けたりレイアウトを整えたりして、見やすいWebページにすることができます。
イメージしやすく例えると、HTMLは家の骨組み、CSSは壁紙や家具などのインテリアのような存在です。骨組みだけではシンプルな家ですが、インテリアを加えることで快適で魅力的な空間になります。
このように、CSSはWebサイトのデザインを整えるために欠かせない言語です。
CSSでできること
CSSを使うと、Webサイトの見た目を自由に調整できます。
HTMLで作成した文章や見出しにデザインを加えることで、見やすく分かりやすいWebページを作れるようになります。
ここでは、CSSでできる代表的なことを紹介します。
文字の色を変える
CSSを使うと、文字の色を変更できます。
例えば、見出しを目立たせるために色を付けたり、重要な部分だけ色を変えたりすることが可能です。
文字色を工夫することで、読者に伝えたい内容が分かりやすくなります。
文字サイズを変更する
文字サイズを変更することもできます。
見出しを大きくしたり、補足説明を小さく表示したりすることで、文章にメリハリを付けられます。
適切な文字サイズを設定すると、読みやすいWebページになります。
背景色を付ける
Webページや特定の部分に背景色を付けることも可能です。
デザイン性だけでなく、情報を整理する効果もあります。
余白を調整する
CSSでは、文章や画像の周りの余白を調整できます。
適度な余白を設定することで、見やすく整ったレイアウトを作ることができます。
CSSには今回紹介したもの以外にも、多くの機能がありますが、まずは文字の色や大きさ・背景色・余白の調整といった基本的な使い方を知るだけでも十分です。
CSSを活用することで、読者にとって見やすく分かりやすいWebサイトを作れるようになります。
CSSの基本的な書き方
CSSは、「どの要素に」「どのデザインを適用するか」を指定して記述します。
基本的な書き方は次のとおりです。
h1 {
color: blue;
}このコードは、h1（見出し）の文字色を青色に変更するという意味です。
CSSは主に次の3つの要素で構成されています。
- セレクタ
- プロパティ
- 値
それぞれの役割を見ていきましょう。
セレクタ
セレクタは、どの要素にデザインを適用するかを指定する部分です。
先ほどの例では、h1 がセレクタにあたります。
h1 {
color: blue;
}この場合は、HTMLのh1タグに対してデザインを適用します。
プロパティ
プロパティは、何を変更するかを指定する部分です。
color: blue;この例では、color がプロパティです。
color は文字色を変更するためのプロパティで、他にも文字サイズや余白などを指定できるプロパティがあります。
値
値は、どのように変更するかを指定する部分です。
color: blue;この例では、blue が値にあたります。
つまり、
color→ 文字色を変更するblue→ 青色にする
という意味になります。
CSSの基本構造を覚えよう
CSSは基本的に次の形で記述します。
セレクタ {
プロパティ: 値;
}最初は難しく感じるかもしれませんが、「どの要素に、どんなデザインを適用するかを書くもの」と覚えておけば大丈夫です◎
CSSの基本構造を理解しておくと、今後さまざまなデザインを設定するときにも役立ちます。
class（クラス）とid（アイディー）
CSSでは、特定の要素だけにデザインを適用したい場合があります。
そのようなときに使用するのが「class」と「id」です。
classとは？
classは、複数の要素に同じデザインを適用したいときに使用します。
<p class="text-red">サンプルテキスト</p>.text-red {
color: red;
}classを指定すると、同じクラス名を持つ要素すべてにデザインを適用できます。
idとは？
idは、特定の1つの要素だけにデザインを適用したいときに使用します。
<p id="title">サンプルテキスト</p>#title {
color: blue;
}idはページ内で基本的に1回だけ使用する名前です。
classとidの違い
classは複数の要素で共有できるのに対し、idは1つの要素だけに使用します。
Webサイト制作ではclassを使う場面が多く、idは特別な要素を指定するときに使用されます。
HTMLとCSSの関係
HTMLだけでもWebページは作れますが、見やすく魅力的なサイトにするためにはCSSが欠かせません。
HTMLで構造を作り、CSSでデザインを整える。
まずはこの役割の違いを覚えておくだけでも十分です。
Webサイト制作ではHTMLとCSSをセットで使うため、両方の基本を理解しておくと学習がスムーズに進みます。
初心者さんが最初に覚えたいCSS
CSSにはたくさんのプロパティがありますが、最初からすべて覚える必要はありません。
まずは、Webサイトの見た目を整えるためによく使われる基本的なCSSから覚えていきましょう。
ここでは、初心者さんが最初に覚えておきたい代表的なプロパティを紹介します。
color
color は文字の色を変更するプロパティです。
p {
color: blue;
}上記のコードでは、文章の文字色が青色になります。
見出しを目立たせたり、重要な部分を強調したりするときによく使用します。
background-color
background-color は背景色を変更するプロパティです。
p {
background-color: yellow;
}背景色を設定することで、特定の内容を目立たせることができます。
font-size
font-size は文字の大きさを変更するプロパティです。
p {
font-size: 20px;
}文字サイズを調整すると、見出しと本文にメリハリを付けられます。
読者にとって読みやすいサイズを意識することも大切です。
margin
margin は要素の外側の余白を調整するプロパティです。
p {
margin: 20px;
}余白を設定することで、要素同士が詰まりすぎず、見やすいレイアウトになります。
padding
padding は要素の内側の余白を調整するプロパティです。
p {
padding: 20px;
}背景色を付けたボックスなどでよく使用され、文字と枠の間に余白を作ることができます。
まずは少しずつ覚えれば大丈夫
CSSには今回紹介したもの以外にも多くのプロパティがあります。
しかし、最初のうちはすべてを覚えようとしなくても問題ありません。
まずは、
- color
- background-color
- font-size
- margin
- padding
この5つを覚えるだけでも、Webサイトの見た目を大きく変えることができます。
実際にコードを書きながら少しずつ慣れていくことで、自然と使えるCSSが増えていくでしょう◎
まとめ
今回は、CSSとは何かについて初心者向けにやさしく解説しました。
CSSは、Webサイトの見た目を整えるための言語で、文字の色や大きさを変更したり・背景色を付けたり・余白を調整したりすることで、見やすくデザインされたWebページを作ることができます。
今回の記事のポイントは以下のとおりです。
- CSSはWebサイトの見た目を整えるための言語
- HTMLは構造、CSSはデザインを担当する
- CSSは「セレクタ・プロパティ・値」で記述する
- classとidを使うことで特定の要素にデザインを適用できる
- 最初は基本的なプロパティから覚えれば大丈夫
りなCSSには多くの機能がありますが、最初からすべてを覚える必要はありません
まずは実際にコードを書きながら少しずつ慣れていきましょう。
HTMLとCSSの基本を理解することで、Webサイト制作がより楽しく感じられるはずです。