今回は「CSS（スタイルシート）がどのようなものか」を理解するとともに、基本的な書き方を学んでいきましょう。CSSを理解するには、ある程度のHTMLの知識が必要になります。さきほどリンクをのせた「0からのHTML入門」を読んでからこの記事を読むと、理解しやすくなると思います。

1.CSSとは？

CSSとは、ウェブページのデザインやレイアウトなどの見栄えを変えていくためのコンピュータ言語です。CSSは「スタイルシート」とも呼ばれます。

1-1.もしCSSを使わずにウェブページを作ると…

HTMLだけでCSSを使わないと

CSSを使わずにHTMLだけでウェブページをつくると文字と画像だけが上から下に並んだ単調なページになってしまいます。HTMLはあくまでも土台を作るものなのです。

CSSでデザインを決める

HTMLで作られたウェブページの土台に対して、「デザイン」や「レイアウト」を決めるのがCSSです。CSSにより文字や背景の色を変えたり、カラフルな線を引いたり、余白を調整したりと見栄えをきれいにすることができます。

CSSだけでデザインすると

HTMLだけだと…こちらは記事公開当時のサルワカのトップページをHTMLだけで表示した例です。なんとも単調でバランスの悪いデザインのサイトになってしまいました。

サルワカのトップページをCSSとHTMLで

HTML+CSSなら…こちらは記事公開当時のサルワカのトップページをCSSで整えた例です。CSSを使えば、ウェブページの見栄えを自分の好きなようにカスタマイズできるのです。

1-2.CSSでできること

詳しい説明は後でしますが、CSSでできることを少しだけ紹介します。

たとえば文字を自分の好きな色に変えることができます。次のようなHTMLコードがあるとします。<p>~</p>は段落を表すのでしたね。

HTMLコード
<p>これは例文です。</p>
ブラウザ表示

CSSにより文字の色をオレンジに変えてみましょう。

HTMLコード
<p>これは例文です。</p>
CSSコード
p {
  color: orange;
}
ブラウザ表示

CSSコードの書き方は後でくわしく説明するので、現時点で理解する必要はありません。 さらに文字を大きくしてみましょう。↓

HTMLコード
<p>これは例文です。</p>
CSSコード
p { 
  color: orange;
  font-size: 20px;
}
ブラウザ表示

このようにCSSでは色や大きさを変えるなど様々なデザイン設定をすることができます。

2.CSSはどこに書くの？

では、CSSはどこに書くのでしょうか。どのようにHTMLとCSSを結びつけるのでしょうか。

2-1.書く方法は3パターンある

CSSを書く場所

CSSの書く場所は3パターンに分けることができます。それぞれメリット・デメリットがあり、うまく使い分けていく必要があります。

HTMLファイルにstyleタグを作って書く

今回は最も分かりやすい『HTMLファイルにstyleタグを追加してその中にCSSを書く方法』を紹介します。

2-2.HTMLのstyleタグ内にサンプルCSSを書いてみよう。

ここからの画面画像は旧版のSublime Textとブラウザを使ったものです。保存・再読み込み・ローカルHTMLファイルを開く操作は今もできますが、ボタンや画面の配置は現在と異なる場合があります。

簡単なので一緒にやっていきましょう。

1.テキストエディターを開く

テキストエディターを開く

テキストエディターを開きます。ここではSublime Textの旧版画面を使います。現在の版では画面やメニューが異なる場合がありますが、コードを書いて保存する操作は同じです。

2.HTMLファイルを作る

まずは土台となるHTMLファイルを作りましょう。

HTMLコード
<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>CSS練習</title>
</head>
<body>
	<div id="headline">
	<h1>CSS入門</h1>
	<p>これは段落です。</p>
	</div>
	<div class="main">
	<h2>これは見出しです。</h2>
	<p>これは<span class="light">例</span>です。</p>
	<p>
	<a href="https://saruwakakun.com/">ホームへ</a>
	戻ります。</p>
	</div>
</body>
</html>

こちらのコードをコピーして、テキストエディターに貼りましょう。

HTMLタグをテキストエディタに貼付け

画像は旧版のエディターで、コードに画面幅の指定を追加する前のものです。コピーする際は上の更新済みコード全体を使ってください。
このような感じになりますね。 tabや半角スペースによりコードの左側にスペースを空けて整理しておくと見やすくなります。 字下げのための行頭の空白は通常そのまま表示されません。ただし、文章やインライン要素の間の空白は見た目に影響する場合があります。

このHTMLファイルを保存してブラウザで表示しましょう。手順はHTML入門で行ったものと同じですが、もう一度説明しておきます。

3.HTMLファイルを保存

ファイル名を◯◯.htmlに
  • Windows：ctrl+S
  • Mac:⌘+S

でファイルを保存します。ファイル名は何でも良いですが、末尾は.htmlにしましょう。保存先を選び[Save]をクリックします。

保存したHTMLファイルは引き続き使うので、開いたままにしておいてください。

4.ブラウザにHTMLファイルをドラッグ

保存したファイルをブラウザ上にドラッグ

ブラウザウィンドウとフォルダウィンドウをそれぞれ縮小して横に並べます。そして、保存したHTMLファイルをブラウザの上にドラッグします。

5.ブラウザでHTMLファイルが表示される

HTMLファイルがブラウザで表示されました

ブラウザでHTMLファイルが開きました。現段階ではHTMLだけなので、質素な見た目ですね。この質素な見た目をCSSで変えていきましょう。

6.HTMLファイル内にstyleタグを書く

テキストエディターに戻ります。HTMLのheadタグの中は「ウェブページの様々な情報や設定を書く」部分でしたね。ここにstyleタグを作れば、その中にCSSを書いていくことができます。

styleタグを書く

CSSを書くためにheadタグの中にstyleタグを書きます。</head>の直前に<style> </style>と書きましょう。

styleタグ内にCSSを書く

あとはstyleタグ内にCSSを書いていくことで、ページの見た目を変えることができます。

7. CSSを書いてみよう

先ほど作った<style>と</style>の間に、次のCSSだけを書いてみましょう。styleタグを二重に書かないようにします（CSSの書き方は後ほど解説します）。

CSSコード
body {
  color: gray;
}

このCSSを既存のstyleタグ内に書きます。図は旧版の画面でstyleタグも写っていますが、左のコードには二重書きを避けるため中身だけ載せています。ざっくりと「bodyタグ内の文字色(color)をグレイ(gray)に」という意味になります。

bodyタグにCSSを適用

ここでbodyタグを見てみましょう。body {~}という指定は「body要素の文字色を指定する」という意味です。colorは通常、色を個別指定していない子要素へ継承されます。ただし、リンクなどブラウザ側で別の色が指定される要素はその色が優先されます。画像は旧版の例ですが、本文が灰色になりリンクは青色のままです。

よく分からなくてもOKです。

8. 保存してブラウザを再読み込み

テキストエディターでctrl+Sでファイルを上書き保存します。Macならctrlのかわりに⌘

本文の文字色がグレーに
ブラウザで再読み込みすると、テキストエディターに書いたCSSが反映されます。
  • Windows：F5
  • Mac:⌘+R
文字が全体的にグレイになりましたね。

このようにHTMLファイルのheadタグ内にstyleタグを作り、その中にCSSを書くことができます。ちなみにCSSを書く方法は他にもう２種類あります。こちらの記事にまとめたので、この記事を読み終わった後にでも目を通してみると良いでしょう。

3.書き方の基本

ここからはCSSの書き方を学んでいきましょう。

3-1.CSSの基本文法

CSSの書き方の基本

CSSの書き方は以下のように決まっています。
セレクタ {
プロパティ: 値
}セレクタ・プロパティ・値と呼ばれる部分を埋めることにより「どこの・何を・どのような見た目に変えるのか」を指定できます。図は旧版で全角コロンが写っていますが、実際のCSSでは半角の:を使ってください。

セレクタ

セレクタとは？

セレクタにはデザイン変更の適用先を書きます。つまり「どの部分のデザインを変えるのか」を指定します。ここにはタグ名やclass名、id名を書きます。

たとえば、p{〜}と書けば「pタグ内のデザインを変える」という指定に、h1{〜}と書けば「h1タグ内のデザインを変える」という指定になります。※ 詳しいセレクタの書き方はのちほど。

プロパティ

プロパティとは？

プロパティでは「セレクタで指定された部分の何を変えるのか」を決めます。色を変えるのか、それとも線をひくのか、あるいは余白を調整するのか、ということを指定するわけですね。

たとえばプロパティにcolorと書けば文字色、background-colorと書けば背景色を指定できます。

値

CSSの値とは？

値では「どのように見た目を変えるのか」を決めます。たとえばセレクタとプロパティで「pタグの文字色を変える」ということが指定されているなら、値では「何色に変えるのか」を決めるわけですね。

たとえばプロパティで「color」が指定されているなら、値ではblueやredというように「適用する色」を指定します。

プロパティと値は波括弧で囲う

プロパティと値は波括弧で囲う

セレクタは何にも囲まず先頭に書きます。プロパティと値は波括弧{}で囲います。

プロパティと値はコロン（:）でつなぐ

プロパティと値はコロンでつなぐ

プロパティと値は常にセットで、単独で使われることはありません。プロパティと値の間にはコロン:を書きます。

複数のプロパティを指定するときはセミコロン（;）で区切る

複数のプロパティを指定するときはセミコロンで区切る

複数のプロパティをまとめて指定したいときはセミコロン;で区切り、そのあとに別の「プロパティ:値」を書きます。これで同時にいくつでもプロパティを指定することができます。

3-2.書き方例

CSSの基本文法

例えばこのCSSコードはbodyの文字色を灰色に指定します。子要素は色を個別指定していなければ継承します。リンクなどは別の色が指定されるため、その色のままの場合があります。

3-3.コードの間に半角スペースやtab、改行を入れてもOK

CSSでは、波括弧の内側を改行したり、宣言の前に半角スペースやTabで字下げしたりすると読みやすくなります。ただし、セレクター内の空白は子孫セレクターを表すなど意味を持ち、値の途中の空白も書き方に関係します。図の例のように、区切りを守って整理しましょう。ただし、全角スペースは絶対に使わないようにしましょう。

4.セレクタの基本的な書き方を覚えよう

セレクタとは？

セレクタでは「どの部分のデザインを変えるのか」という適用先を指定するのでしたね。以下のHTMLコードは、先ほど作ったHTMLファイルのbody内に置く断片です。CSSコードはstyle内に書きます。セレクタの書き方には色々なパターンがあります。全て紹介しようとするとものすごーく長くなってしまうので、今回は「これだけ知っておけばだいたい対応できる」というセレクタに絞って紹介します。

4-1.タグ名で適用先を指定

タグ名 {〜}

ひとつめはタグで指定する方法です。タグで指定する場合は、タグ名をそのまま書けばOKです。a{〜}やdiv{〜}、img{〜}といった具合ですね。例えば、pタグの文字色をオレンジ色にしてみましょう。

タグ名でCSS適用先を指定

↓実際のコードとブラウザでの表示を見てみます。

HTMLコード
<body>
<div id="headline">
	<h1>CSS入門</h1>
	<p>これは段落です。</p>
</div>
<div class="main">
	<h2>これは見出しです。</h2>
	<p>これは<span class="light">例</span>です。</p>
	<p>
	<a href="https://saruwakakun.com/">ホームへ</a>
	戻ります。</p>
</div>
</body>
CSSコード
p {
  color: orange;
}
ブラウザ表示CSS例

↑pタグ内の文字がオレンジ色になりました。

CSSはstyleタグ内に書きましょう。

4-2.id名で指定

#id名{〜}

HTMLでは<タグ名 id="id名">のようにidが指定されるんでしたね（そして同じid名はページ内に1回しか使えないんでしたね）。このid名をデザインの適用先に指定する場合は#id名{}というようにid名の前に#をつけましょう。

試しにid="headline"の部分の文字色をオレンジにしてみましょう。

セレクタ：id名で指定

タグに自分の好きなid名を書いておき、CSSでそのid名に対してデザインを指定すれば良いわけですね。

↓実際にコードを書いて、ブラウザでの表示を見てみましょう。

HTMLコード
<div id="headline">
	<h1>CSS入門</h1>
	<p>これは段落です。</p>
</div>
<div class="main">
	<h2>これは見出しです。</h2>
	<p>これは<span class="light">例</span>です。</p>
	<p>
	<a href="https://saruwakakun.com/">ホームへ</a>
	戻ります。</p>
</div>
CSSコード
#headline {
  color: orange;
}
ブラウザ表示CSS練習 4

↑id="headline"のタグ内の文字色がオレンジになりました。

4-3. class名で指定

.class名{〜}

HTMLでは<タグ名 class="class名">というように指定をするんでしたね。class名でセレクタを指定する場合は.class名{〜}のように.ドット(ピリオド)を前につけます。試しにclass="main"の文字色をオレンジにしてみましょう。

class名で指定

↓実際のコードとブラウザでの表示を見てみます。

HTMLコード
<body>
<div id="headline">
	<h1>CSS入門</h1>
	<p>これは段落です。</p>
</div>
<div class="main">
	<h2>これは見出しです。</h2>
	<p>これは<span class="light">例</span>です。</p>
	<p>
	<a href="https://saruwakakun.com/">ホームへ</a>
	戻ります。</p>
</div>
</body>
CSSコード
.main {
  color: orange;
}
ブラウザ表示CSS練習 5

class="main"のタグ内の文字がオレンジになりました。

4-4.適用先を複数指定する

◯◯,◯◯,◯◯ {~}

もし同じデザインを適用させたいタグやclass、idがいくつかあるときは、複数指定をしましょう。複数の要素のデザインをまとめて変更することができます。複数選択したいときは、タグやclass名、id名を半角コンマ,で区切って並べていきます。並べる数がはいくつでもOKです。また、並び順は関係ありません。試しにh2タグとid="headline"を指定して、文字色をオレンジにしてみましょう。

セレクタ適用先の複数指定

↓実際にHTMLとCSSを書いて、ブラウザでの表示を見てみます。

HTMLコード
<div id="headline">
	<h1>CSS入門</h1>
	<p>これは段落です。</p>
</div>
<div class="main">
	<h2>これは見出しです。</h2>
	<p>これは<span class="light">例</span>です。</p>
	<p>
	<a href="https://saruwakakun.com/">ホームへ</a>
	戻ります。</p>
</div>
CSSコード
#headline, h2 {
  color: orange;
}
ブラウザ表示CSS練習 6

↑h2タグ内の文字とid="headline"内の文字の色がオレンジになりました。

4-5.子孫セレクタ（絞り込み指定）

◯◯ ◯◯ ◯◯ {〜}

子孫セレクタと呼ばれる便利な適用先指定の方法もあります。これは「◯◯タグ内にある◯◯タグにだけデザインを適用させたい」ときに使うものです。タグ名やid名、class名を半角スペースで区切って並べると、どんどん適用先が絞り込まれていきます。div p a{~}と書けば、divタグの中のpタグの中のaタグの中にだけデザイン指定が適用されます。たとえば、class="main"タグの中のpタグの中のspanタグ内にのみデザインを適用させてみましょう。

子孫セレクタ

↓実際のコードとブラウザでの表示を見てみます。

HTMLコード
<div id="headline">
	<h1>CSS入門</h1>
	<p>これは段落です。</p>
</div>
<div class="main">
	<h2>これは見出しです。</h2>
	<p>これは<span class="light">例</span>です。</p>
	<p>
	<a href="https://saruwakakun.com/">ホームへ</a>
	戻ります。</p>
</div>
CSSコード
.main p span {
  color: orange;
}
ブラウザ表示CSS練習 7

↑spanタグにだけデザインが適用されます。

ここまで5つのセレクタの書き方を指定してきました。この5つの書き方を押さえると、基本的な適用先を指定できます。 その他のセレクタ種類については、今後別の記事で紹介していきます。

5.プロパティと値の基本

次はプロパティと値の書き方を見ていきましょう。宣言ではプロパティと値を組にして書きます。colorならblueやgreenなど、CSSの色として使える値を指定します。といってもなかなか分かりづらいと思うので、実際に例を見ながら書き方を理解していきましょう。

5-1.文字の大きさを変えてみよう

セレクタ {font-size: ◯◯px or ◯◯em}

文字の大きさ（フォントサイズ）を変えるときはfont-sizeプロパティを使います。値には12pxというように数字+単位を書きます。ここではpxとemの違いを試します。サイト全体の文字サイズを扱うときは、ルート要素を基準にするremもよく使います。

font-sizeに対する値の単位

  • px：CSSピクセルを単位に指定固定の大きさを指定します。本文を一律のpx値に決め打ちせず、読者の文字サイズ設定や読みやすさも考えましょう。
  • em：現在のフォントサイズに対する倍率font-sizeに使う場合、親要素の計算済み文字サイズに対する倍率です。親が10pxなら2emは20pxになります。remはルート要素の文字サイズを基準にします。

フォントサイズの変更例

それでは実際にpタグ内の文字のフォントサイズを変えてみましょう。pxで指定する場合と、emで指定する場合の両方を試してみます。

HTMLコード
<p>初期設定のフォントサイズ</p>
<p class="px">20pxにした場合</p>
<p class="em">1.2emにした場合</p>
CSSコード
.px {
  font-size: 20px;
}
.em {
  font-size: 1.2em;
}
ブラウザ表示

5-2.文字の色を変えてみよう

セレクタ {color: 色名orカラーコード}

次に文字を自分の好きな色に変えてみましょう。さきほども何回か触れましたが、文字色を変えるときにはcolorプロパティを使います。値には色名や16進数のカラーコード、rgb()などの色表記を書けます。

colorに対する値の書き方

  • 色名：英語の色名を書く赤ならred、青ならblue、緑ならgreen、黒ならblackという感じです。
  • カラーコード：#RRGGBBなどで書くたとえば白は#FFFFFFです。3桁や8桁の16進表記、rgb()などの書き方もあります。

膨大な数の色名やカラーコードを覚えるのは常人には不可能なので、カラーコード表を見て使いたい色のコードをコピペしましょう。

文字色の変更例

HTMLコード
<p>通常の文字</p>
<p id="example1">greenの文字</p>
<p id="example2">#FFC778の文字</p>
<p id="example3">#f89174の文字</p>
CSSコード
#example1 {
  color: green;
}
#example2 {
  color: #FFC778;
}
#example3 {
  color: #f89174;
}
ブラウザ表示

5-3.文字を中央/右に寄せてみよう

セレクタ {text-align: center or right}

日本語など左から右へ書く文章は通常左寄せですが、中央寄せや右寄せにもできます。「文字をどちらに寄せるか」はtext-alignプロパティで指定します。値は以下の3つをよく使います。

text-alignに対する値

  • left：左寄せ （左から右へ書く文章では一般的）
  • center：中央寄せ
  • right：右寄せ

文字寄せの変更例

実際にCSSを書いてみましょう。

HTMLコード
<body>
<p>CSS指定なしの文</p>
<p class="center">中央寄せの文</p>
<p class="right">右寄せの文</p>
</body>
CSSコード
.center {
  text-align: center;
}
.right {
  text-align: right;
}
ブラウザ表示

body { text-align: center; }とすると、その設定を継承する子要素の行内の文字や画像は中央寄せになります。ただし、ブロック全体を中央へ移動する指定ではありません。

5-4.背景色を変えてみよう

セレクタ { background-color: 色名orカラーコード }

背景色はbackground-colorプロパティにより変えることができます。値は文字色と同様に色名もしくはカラーコードを書きます。

背景色の変更例

ページ全体の背景色を変えたい場合は、bodyをセレクタに指定します。

HTMLコード
<body>
<div class="main">
  <p>これは例1です。</p>
  <p>これは例2です。</p>
</div>
  <p>これは例3です。</p>
</body>
CSSコード
body {
  background-color: #FFC778;
}
ブラウザ表示CSS適用例

↑ページ全体の背景色が変わりました。

一部の背景を変えたいときは、その部分をセレクタで指定します。以下の例では<div class="main">〜</div>の背景色のみを変えてみることにします。

HTMLコード
<body>
<div class="main">
  <p>これは例1です。</p>
  <p>これは例2です。</p>
</div>
  <p>これは例3です。</p>
</body>
CSSコード
.main {
  background-color: #FFC778;
}
ブラウザ表示CSS練習 1

↑一部の背景色のみが変わりました。background: #FFC778;でもこの例は同じ見た目になりますが、こちらは背景画像などの設定もまとめて初期化する一括指定です。色だけを変えるときはbackground-colorを使いましょう。

5-5.線で囲う・線を引く

セレクタ {border: 線の種類 太さ 色} この例では線の種類・太さ・色を半角スペースで区切って書きます。太さと色は省略できますが、線を表示するには種類の指定が必要です。

線をひくときはborderプロパティを使います。

borderプロパティの書き方

border:の後に、この例では次の3つを並べます。

  • 線の種類
  • 線の太さ
  • 線の色

値の間には半角スペースを空けます。3つの順番は自由です。太さや色は省略できますが、線の種類を省くと初期値のnoneになり、線は表示されません。

上図の例だと、実線（solid）で太さは1px、色は黒（black）という指定になります。

線の種類

線の種類は、実線（solid）以外にもたくさんの中から選ぶことができます。

線の種類

よく使うのはこの4つです。点線や破線をうまく使えば、オシャレなウェブデザインにすることができます。

線を消すにはborder: noneを指定します。border-styleの初期値もnoneです。

線の太さと色

線の太さは1px〜3pxを指定する場合がほとんどです。ただし、線の種類がdouble（二重線）の場合、2本の線合わせての太さなので、少し線の太めにする必要があります。線の色は、色名かカラーコードで指定します。

borderの作成例

HTMLコード
<body>
<p class="solid">solid 2px grayの場合</p>
<p class="dotted">dotted 2px grayの場合</p>
<p class="dashed">dashed 2px grayの場合</p>
<p class="double">double 5px grayの場合</p>
<p class="px1">solid 1px orangeの場合</p>
</body>
CSSコード
.solid {
  border: solid 2px gray;
}
.dotted {
  border: dotted 2px gray;
}
.dashed {
  border: dashed 2px gray;
}
.double {
  border: double 5px gray;
}
.px1 {
  border: solid 1px orange;
}
ブラウザ表示
CSS練習 9
旧版の結果画像。画像内の黒色・double 2pxの表記は上の更新済みコードと異なります。実際の結果はこの枠のプレビューを確認してください。

上下左右のどこかだけに線を引きたいときは？

ウェブサイトを作っていく中で「上にだけ線を引きたい」というようなことも出てくると思います。そんなときはプロパティ名を変えましょう。

上下左右 個別に線をひく

  • 上にだけ線を引く：border-top:〜
  • 下にだけ線を引く：border-bottom:〜
  • 左にだけ線を引く：border-left:〜
  • 右にだけ線を引く：border-right:〜

↑値（〜の部分）の書き方はさきほどのborder:線の種類 太さ 色と同じです。

HTMLコード
<p class="rei1">上と左にだけ線</p>
<p class="rei2">下と右にだけ線</p>
CSSコード
.rei1 {
  border-top: solid 2px #FFA07A;
  border-left: solid 2px #FFA07A;
}
.rei2 {
  border-bottom: solid 2px #FFA07A;
  border-right: solid 2px #FFA07A;
}
ブラウザ表示自分の好きな部分にだけ線を引く

↑複数の宣言は;で区切るんでしたね。このように上下左右の好きな部分にだけ線を書くことができます。

5-6.コメントアウトを書いてみよう

/* この中の文章はCSSに反映されません */

コメントアウトとは、CSSの中に自分用のメモ書きをする方法です。コメントの文字列は画面に表示されません。ただし、CSSファイルの内容はページの訪問者も確認できるため、公開したくない情報は書かないようにしましょう。コメントアウトは/* コメントアウトする内容 */というように書きます。入力方法はキーボードによって異なります。HTMLのコメントアウトとは書き方が異なるので、注意しましょう（HTMLは<!-- 〜 -->でしたね）。

コメントアウトの書き方例

HTMLコード
<body>
<p>これは例文です。</p>
</body>
CSSコード
p {
  /*このようにメモ書き*/
  color: orange;
}
ブラウザ表示

このようにコメントアウトの内容は一切ウェブページに反映されません。

6.ここまでの復習

CSSには他にもたくさんの書き方がありますが、ここまで紹介してきた内容だけでもウェブページをずいぶんと華やかにすることができます。最後にここまでの内容を組み合わせて、少しオシャレなデザインのページを作ってみましょう。内容を覚えるためにも、ぜひ一緒に書いてみてください。

HTMLコード
<body>
	<div id="headline">
	<h1>CSS入門</h1>
	<p>これは段落です。</p>
	</div>
	<div class="main">
	<h2>これは見出しです。</h2>
	<p>これは<span class="light">例</span>です。</p>
	<p>
	<a href="https://saruwakakun.com/">ホームへ</a>
	戻ります。</p>
	</div>
</body>
CSSコード
body {
  /*ページ全体の背景色をベージュに*/
  background-color: #fffbf4;
  /*全文字を中央揃えに*/
  text-align: center;
}
h1 {
  /*h1タグ内の文字色を変える*/
  color: #f89174;
}
#headline {
  /*id="headline"の下に点線を引く*/
  border-bottom: dotted 2px #f89174;
}
#headline p {
  /*id="headline"の中のフォントサイズを1.2倍に*/
  font-size: 1.2em;
}
h2 {
  /*h2タグの文字色をオレンジに*/
  color: orange;
}
a {
  /*リンクの文字色をグレイに*/
  color:gray;
}
ブラウザ表示ブラウザでCSSを表示

このように少し見栄えがよくなりましたね。次の講座では「幅と高さの指定」について学びましょう。