【6日でできるHTML入門】CSSの基本①

　Webページに文字や画像を表示するだけではなく、その見た目を自由にカスタマイズするにはCSS（Cascading Style Sheets）が欠かせません。「CSSの基本①」では、CSSの役割から記述ルール、そして最も手軽な「style属性」を使った書式指定方法までを、具体的なサンプルとともに学んでいきます。まずはCSSの基本を押さえ、HTML＋CSSによるデザインの第一歩を踏み出しましょう。

１．CSSとは？

1.1. CSSの役割

　CSSは、HTMLで作成したページの「骨組み」に対して、文字サイズや文字色、背景色、余白などのデザインを指定する言語です。HTMLだけでは全ての要素が同じスタイルで表示されるため、見やすさやブランドイメージを反映させるにはCSSが必要になります。

1.2. CSSを記述する際のルール

プロパティと値はコロン(:)で区切る
font-size:20pt;
上記は font-size プロパティに 20pt を指定した例。
各指定はセミコロン(;)で終える
すべて半角文字で記述
大文字・小文字は区別しない
余分なスペースや改行は無視される
数値には単位を必ず付与

CSSで使える主な単位は次の通りです。

絶対単位	読み方（意味）
cm	センチメートル
mm	ミリメートル
in	インチ
pt	ポイント (1ポイント＝1/72インチ)
pc	パイカ (1パイカ＝12ポイント)

相対単位	読み方（意味）
em	現在の文字の高さを1とし、相対的にサイズを指定
ex	小文字「x」の高さを1とし、相対的にサイズを指定
px	モニタの1ピクセルを基準にサイズを指定
%	親要素やウィンドウを基準に、相対的にサイズを指定

２．CSSの指定方法① style属性を使う

2.1. 単一要素への指定

　HTMLタグの中に直接 style 属性を記述すると、その要素だけにCSSを書式指定できます。以下は「スイーツ紹介ページ」を例に、2番目の段落だけ文字サイズを大きくしたものです。

ファイル名： lesson08-1.html

<!-- ファイル名: lesson08-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>

ブラウザの出力例

「今月のおすすめは、ふわふわパンケーキです。」だけが18ポイントで表示されます。

2.2. 複数プロパティの指定例

　同じく style 属性で背景色と文字色を指定する例です。ここでは見出しを目立たせるため、背景に紺色、文字を白色に設定しています。

ファイル名： lesson08-2.html

<!-- ファイル名: lesson08-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>

ブラウザの出力例

見出しが濃紺背景に白文字で表示され、パンケーキ紹介の段落が18ポイントになります。

まとめ

ここで登場したタグと属性を整理します。

タグ／属性	説明
<p style="プロパティ:値;">…	その要素だけにCSSを指定
<h1 style="background-color:…;">	文字色・背景色など、複数プロパティを指定可能
プロパティ:値;	スタイル指定。最後にセミコロンを忘れずに

　次の「CSSの基本②」では、<style>要素を使った複数要素への共通スタイル定義や、クラス／IDを使った指定方法を解説します。まずはstyle属性での指定に慣れ、CSS記述の基礎をしっかり身につけましょう。