6日でできる 新HTML入門｜CSSの基本①

HTMLにCSSを加えると、Webページはただ表示するだけでなく、見やすく伝わるデザインへ変わります。

HTMLは、見出し、段落、画像、リンクなどを使ってWebページの構造を作るための言語です。これまでの記事では、HTMLタグを使って文章や画像を配置したり、ページ同士をリンクでつないだりする方法を学んできました。

ただし、HTMLだけで作ったページは、基本的にブラウザが用意している標準の見た目で表示されます。文字の大きさ、文字の色、背景色、余白などを自分で調整したい場合は、CSSを使います。

CSSはCascading Style Sheetsの略で、HTMLで作ったページにデザインを指定するための言語です。CSSを使うと、文字を大きくしたり、見出しに背景色を付けたり、ページ全体の印象を整えたりできます。

ここでは、CSSの役割、CSSを書くときの基本ルール、サイズ指定で使う単位、そして最も手軽に試せるstyle属性を使った指定方法について、サンプルHTMLを使いながらやさしく解説していきます。

CSSはHTMLの見た目を整えるために使う

HTMLは、Webページの骨組みを作る役割を持っています。たとえば、h1要素は大きな見出し、p要素は段落、img要素は画像、a要素はリンクというように、それぞれのタグが文章や部品の意味を表します。

一方で、CSSはその骨組みに対して、見た目を指定する役割を持ちます。

たとえば、次のような調整はCSSで行います。

CSSで指定できること内容
文字サイズ見出しや本文の文字を大きくする、小さくする
文字色文字を赤、青、白などに変更する
背景色見出しや段落の背景に色を付ける
余白要素の周囲にスペースを作る
幅や高さ画像や領域のサイズを調整する
配置中央寄せや左右の配置を調整する

HTMLだけでもWebページは作れますが、ページの印象を整えたり、読みやすくしたりするにはCSSがとても重要です。

たとえば、同じ文章でも、文字が小さすぎると読みにくくなります。見出しに色が付いていると、どこから新しい内容が始まるのか分かりやすくなります。CSSは、読者にとって見やすく、分かりやすいページを作るための大切な道具です。

図1：HTMLとCSSの役割の違い

この図から分かること

HTMLは、Webページの内容や構造を作る役割を持っています。見出し、段落、画像、リンクなどを配置し、ページの骨組みを作ります。

CSSは、そのHTMLに対して見た目を指定する役割を持っています。文字サイズ、文字色、背景色、余白などを調整することで、読みやすく見栄えのよいページに近づけられます。

CSSの基本はプロパティと値の組み合わせ

CSSでは、何を変えるのかをプロパティで指定し、どのように変えるのかを値で指定します。

たとえば、文字サイズを18ptにしたい場合は、次のように考えます。

項目内容
プロパティfont-size
値18pt
意味文字サイズを18ポイントにする

CSSの基本形は、プロパティ、コロン、値、セミコロンの順番です。

font-size:18pt;

この指定では、font-sizeプロパティに18ptという値を設定しています。font-sizeは文字サイズを表すプロパティです。18ptは文字の大きさを表す値です。

CSSでは、プロパティと値の間にコロンを入れます。そして、指定の最後にはセミコロンを付けます。

記号役割
:プロパティと値を区切る
;1つのCSS指定の終わりを示す

CSSを書き始めたばかりのころは、コロンとセミコロンを間違えやすいです。font-size:18pt; のように、プロパティ、コロン、値、セミコロンの順で書くことを意識しましょう。

CSSを書くときの基本ルール

CSSには、いくつかの基本的な書き方のルールがあります。細かいように見えますが、最初に押さえておくとミスを減らせます。

ルール説明
プロパティと値はコロンで区切るfont-size:18pt; のように書く
1つの指定はセミコロンで終えるcolor:red; のように最後にセミコロンを書く
記号は半角で書く:、;、=、" " などは半角で入力する
プロパティ名は小文字で書くのが一般的font-size、color、background-colorのように書く
余分なスペースや改行は基本的に無視される読みやすさのためにスペースを入れることはできる
数値には必要に応じて単位を付ける18pt、300px、80%など

CSSでは、大文字と小文字が区別されない場面もありますが、学習段階では小文字で統一すると読みやすくなります。HTMLのタグ名と同じように、CSSのプロパティ名も小文字で書く習慣を付けておくと安心です。

また、数値を指定する場合は、単位が必要なものがあります。たとえば、文字サイズを指定するときに18だけを書くのではなく、18ptや18pxのように単位を付けます。

font-size:18pt;
color:white;
background-color:navy;

この例では、font-sizeで文字サイズ、colorで文字色、background-colorで背景色を指定しています。CSSではこのように、複数の指定を組み合わせて見た目を整えていきます。

CSSで使う主な単位

CSSでは、文字サイズ、幅、高さ、余白などを指定するときに単位を使います。単位には、実際の長さを基準にする絶対単位と、ほかの要素や画面を基準にする相対単位があります。

絶対単位

絶対単位は、ある程度決まった長さを基準にする単位です。印刷物に近い考え方で使われることがあります。

絶対単位読み方意味
cmセンチメートル長さをセンチメートルで指定する
mmミリメートル長さをミリメートルで指定する
inインチ1インチを基準に指定する
ptポイント1ポイントは1/72インチ
pcパイカ1パイカは12ポイント

ptは文字サイズの説明で見かけることがあります。たとえば、font-size:18pt; のように指定すると、文字サイズを18ポイントにできます。

ただし、Webページでは画面サイズや表示環境がさまざまです。そのため、実際のWeb制作ではpxや%、emなどの相対単位もよく使われます。

相対単位

相対単位は、現在の文字サイズ、親要素、画面、ピクセルなどを基準にしてサイズを指定する単位です。Webページでは、表示環境に合わせやすいためよく使われます。

相対単位読み方意味
emエム現在の文字サイズを基準に相対的に指定する
exエックス小文字xの高さを基準に指定する
pxピクセル画面上の1ピクセルを基準に指定する
%パーセント親要素や画面などを基準に割合で指定する

pxは、Web制作でよく使われる単位です。たとえば、画像の幅や余白などを指定するときに使われます。

%は、親要素や画面幅を基準にして割合で指定します。たとえば、幅を80%にすると、基準となる領域に対して80%の幅になります。

emは、文字サイズを基準にした相対的な単位です。現在の文字サイズをもとに大きさを変えたいときに使われます。

図2：CSSのプロパティ、値、単位の関係

この図から分かること

CSSは、プロパティと値を組み合わせて書きます。font-size:18pt; の場合、font-sizeが変更したい内容、18ptが指定する値です。

数値を使う場合は、ptやpx、%などの単位が必要になることがあります。CSSを書くときは、プロパティ、コロン、値、セミコロンの順番を意識すると、基本の形を理解しやすくなります。

CSSをHTMLに書く方法

CSSをHTMLに適用する方法はいくつかあります。代表的には、style属性を使う方法、style要素を使う方法、外部CSSファイルを読み込む方法があります。

今回扱うのは、最も手軽に試せるstyle属性を使う方法です。

style属性は、HTMLタグの中に直接CSSを書く方法です。指定した要素だけにCSSが適用されます。

たとえば、ある段落だけ文字を大きくしたい場合、そのp要素の開始タグにstyle属性を追加します。

CSSの指定方法特徴
style属性1つの要素だけに直接CSSを指定する
style要素HTML内で複数の要素にまとめてCSSを指定する
外部CSSファイル別ファイルにCSSを書き、複数ページで共有する

style属性は、CSSの動きをすぐ確認したいときに便利です。ただし、同じデザインをたくさんの要素に指定したい場合は、毎回style属性を書く必要があるため、管理が大変になります。

style要素や外部CSSファイルを使う方法は、CSSに関する記事以降で詳しく扱います。ここでは、まずstyle属性でCSSの基本的な書き方に慣れていきましょう。

style属性で1つの要素だけにCSSを指定する

style属性は、HTMLタグの開始タグの中に書きます。style属性の値として、CSSのプロパティと値を指定します。

ここでは、スイーツ紹介ページを例に、2つ目の段落だけ文字サイズを大きくしてみます。

ファイル名： Lesson8-1.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>スイーツ紹介ページ</title>
</head>
<body>
  <h1>おすすめスイーツ紹介</h1>
  <p>このページでは、季節ごとに楽しめるスイーツを紹介します。</p>
  <p style="font-size:18pt;">今月のおすすめは、ふんわり焼き上げた米粉パンケーキです。</p>
</body>
</html>

ブラウザの表示例

このHTMLでは、2つ目のp要素にstyle属性を指定しています。

font-size:18pt;

この指定によって、その段落だけ文字サイズが18ポイントになります。1つ目の段落にはstyle属性を付けていないため、ブラウザの標準的な文字サイズで表示されます。

style属性は、指定した要素だけにCSSを適用する方法です。そのため、ページ内の一部だけを試しに変更したいときに分かりやすい書き方です。

style属性を書く場所

style属性は、CSSを適用したいHTMLタグの開始タグに書きます。p要素に指定したい場合はpタグの中に、h1要素に指定したい場合はh1タグの中に書きます。

CSSを適用したい要素style属性を書く場所
段落に適用したいp要素の開始タグ
見出しに適用したいh1要素やh2要素の開始タグ
画像に適用したいimg要素のタグ内
リンクに適用したいa要素の開始タグ

style属性は、その要素だけに効果があります。たとえば、1つのp要素にstyle属性を書いても、ほかのp要素には自動で同じ指定は適用されません。

同じデザインを複数の要素に使いたい場合は、後の記事で学ぶstyle要素やclass属性を使った方法が便利です。ここでは、style属性は「その場で1つの要素に直接CSSを指定する方法」と覚えておきましょう。

複数のCSSプロパティを指定する

style属性の中には、複数のCSS指定を書くこともできます。たとえば、見出しの背景色を変えながら、文字色も変えることができます。

複数のCSS指定を書くときは、それぞれをセミコロンで区切ります。

background-color:navy; color:white;

この指定では、background-colorで背景色を紺色にし、colorで文字色を白にしています。

プロパティ役割値の例
background-color背景色を指定するnavy
color文字色を指定するwhite
font-size文字サイズを指定する18pt

CSSでは、色を名前で指定できる場合があります。navyは紺色、whiteは白色を表します。ほかにもred、blue、green、blackなどの色名があります。

ただし、色の指定方法には複数の種類があります。色名以外にも、カラーコードなどを使う方法がありますが、詳しい色指定はCSSに関する記事以降で少しずつ扱っていきます。

図3：style属性で要素ごとにデザインを指定する

この図から分かること

style属性を使うと、HTMLタグの中に直接CSSを書けます。h1要素にstyle属性を書けば、そのh1要素だけに背景色や文字色を指定できます。

複数のCSSプロパティを指定する場合は、background-color:navy; color:white; のように、1つずつセミコロンで区切って書きます。style属性は手軽に試せますが、指定した要素だけに効果がある点を理解しておきましょう。

背景色と文字色を指定するHTMLファイルの例

ここでは、カフェ紹介ページを例に、見出しの背景色と文字色を変更し、さらに本文の一部だけ文字サイズを大きくします。

ファイル名： Lesson8-2.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>カフェ紹介ページ</title>
</head>
<body>
  <h1 style="background-color:navy; color:white;">カフェ・ブルームへようこそ</h1>
  <p>当店では、香り豊かなオリジナルブレンドコーヒーを提供しています。</p>
  <p style="font-size:18pt;">季節限定のアップルタルトもおすすめです。</p>
</body>
</html>

ブラウザの表示例

このHTMLでは、h1要素にstyle属性を指定し、背景色と文字色を設定しています。

h1要素のstyle属性には、次の2つのCSS指定が入っています。

CSS指定内容
background-color:navy;背景色を紺色にする
color:white;文字色を白にする

また、2つ目のp要素には、font-size:18pt; を指定しています。これにより、その段落だけ文字サイズが大きくなります。

このように、style属性を使うと、要素ごとに異なるデザインを指定できます。見出しには背景色と文字色、段落には文字サイズというように、要素の役割に合わせてCSSを指定できます。

style属性の便利なところ

style属性は、CSSをすぐ試せる点が便利です。HTMLファイル1つだけで、指定した要素の見た目を変えられるため、CSSの学習を始めるときに分かりやすい方法です。

便利な点説明
すぐに試せるHTMLタグの中に直接CSSを書ける
効果が分かりやすい指定した要素だけ見た目が変わる
小さな確認に向いている文字サイズや色の変更を試しやすい

たとえば、特定の段落だけ文字を大きくしたい場合や、見出しだけ背景色を付けたい場合は、style属性で簡単に確認できます。

CSSの基本を理解する段階では、style属性を使うことで、プロパティと値の関係をつかみやすくなります。

style属性を使うときの注意点

style属性は手軽ですが、大きなWebページや複数ページのサイトでは管理が大変になることがあります。

たとえば、10個の見出しをすべて同じデザインにしたい場合、10個すべてのh1要素やh2要素にstyle属性を書く必要があります。そのあと色を変更したくなった場合も、10か所を修正しなければなりません。

style属性の注意点内容
同じ指定を何度も書くことがある複数の要素に同じデザインを使う場合は手間が増える
修正箇所が増えやすいデザイン変更時に複数箇所を直す必要がある
HTMLが長くなりやすいタグの中にCSSを書くため、コードが読みにくくなる場合がある

style属性は、CSSの基本を試すには分かりやすい方法です。ただし、実際のWeb制作では、複数の要素にまとめてCSSを指定する方法がよく使われます。

次の学習では、style要素を使ってHTML内にまとめてCSSを書く方法や、複数の要素へ共通のスタイルを指定する方法を扱います。

CSSを書くときに起こりやすいミス

CSSを書き始めたばかりのころは、少しの入力ミスで思った通りに表示されないことがあります。よくあるミスを確認しておきましょう。

よくあるミス内容
コロンとセミコロンを間違えるfont-size;18pt: のように書いてしまう
セミコロンを書き忘れる複数指定の区切りが分かりにくくなる
単位を書き忘れる18ptや300pxのpt、pxを忘れる
全角記号を使う：や；などの全角記号を使ってしまう
属性の引用符を閉じ忘れるstyle="..." の閉じるダブルクォーテーションを忘れる
プロパティ名を間違えるfont-sizeをfont-sizaのように入力してしまう

CSSが効かないときは、まずプロパティ名、コロン、値、単位、セミコロンを順番に確認しましょう。特に、日本語入力のまま全角記号を入力してしまうと、見た目では気づきにくいことがあります。

使用したタグ、属性、CSS一覧

タグ／属性／CSS説明
<p style="プロパティ:値;">p要素にstyle属性を使ってCSSを指定する
<h1 style="プロパティ:値;">h1要素にstyle属性を使ってCSSを指定する
style属性HTMLタグの中に直接CSSを書くための属性
font-size文字サイズを指定するCSSプロパティ
background-color背景色を指定するCSSプロパティ
color文字色を指定するCSSプロパティ
プロパティ:値;CSS指定の基本形。プロパティと値をコロンで区切り、最後にセミコロンを書く
ptポイントを表す単位。文字サイズ指定などで使われる
pxピクセルを表す単位。画面上のサイズ指定でよく使われる
%割合で大きさを指定する単位
em現在の文字サイズを基準にした相対単位