HTML/CSS入門編｜5章：CSSの基本を学ぼう

HTML/CSS入門編 5章：CSSの基本を学ぼう

本章では、Webページのスタイリングをおこなうための言語であるCSSの基本を学びます。

【5-1】CSSとは

CSSとは、Cascading Style Sheetの略称で、スタイルシートと呼ばれることもあります。
CSSはWebページのスタイリング（レイアウト、装飾、余白、文字サイズや色、文字組、背景画像の表示など）を設定するための言語です。
テキストをHTMLのタグで囲むと、見出しは見出しらしく、箇条書きリストは箇条書きリストらしく一応それなりの見た目を作ってくれますが、HTMLはあくまでも情報の構造化のために使用する言語であり、Webページの見た目を担当するのはCSSの役割です。

HTMLでマークアップされただけのページ（構造・骨組み）

CSSでスタイリングされたページ（装飾・レイアウト）

それでは、CSSの基本を学んでいきましょう。

演習素材について
本章では、「5章CSSの基本を学ぼう」フォルダ内の演習データを使用します。
「5章CSSの基本を学ぼう」フォルダの中には、「css-lesson」と「anchor-css」フォルダが入っています。

「5章CSSの基本を学ぼう」フォルダ
- start：作業前のデータが入っています。
- fin：完成データが入っています。

演習を行う際には、「start」フォルダ内のファイルを使用して下さい。
自分で書いたコードがうまく表示されないときは、「fin」フォルダ内の完成データとの違いを探してみると良いでしょう。

※「HTML/CSS入門編はじめに - Webページのことを知ろう」の「【0-4】HTML/CSS 入門編演習素材のダウンロード」節で、本教材の演習で使用するデータをまとめてダウンロードすることができます。

【5-2】CSSファイルを作成しよう

本演習では、「css-lesson」内のファイルを使用します。
「css-lesson」フォルダ内の「start」フォルダに格納されているpasta-recipe.htmlをVS Codeで開いてからブラウザプレビューをして下さい。
こちらのファイルの中身は、HTML/CSS入門編 3章画像を表示しようの【3-3】練習問題で完成させたpasta-recipe.htmlと同じものですので、どちらを使って頂いても問題ありません。

ブラウザプレビュー

外部CSSファイルを準備しよう

CSSのコードをHTMLファイルに適用する方法は、全部で下記の3種類があります。
Web制作の現場では、メンテナンスのしやすさから、圧倒的に外部CSSファイルを参照する方法が採用されています。
本教材でも、原則として外部CSSファイルを参照する方法で解説を進めていきます。

CSSをHTMLファイルに適用する方法

外部CSSファイルを参照する（外部参照）
styleタグを使いHTMLファイル中に埋め込む（内部参照）
style属性を使いHTMLタグの中に記述する（インライン）

新規ファイルを作成しよう

VS Codeで新しいテキストファイルを作成して下さい。
HTMLファイルと同じ階層に「css」フォルダを作成してから、その中に「style.css」というファイル名をつけて保存して下さい。

ファイル名には半角英数字と「-（ハイフン）」「_（アンダースコア）」が使えます。
CSSファイルの拡張子は「.css」であり、「style.css」はよく使われるファイル名です。

ファイル構成

【画面収録】新規ファイルの作成と保存

文字コードの指定をしよう

1行目に文字コードの指定のためのコードを記述します。
このコードがないと、CSSファイル中に日本語を入力した際に、文字化けする可能性があります。
日本語の文字化けを確実に防止するために必ず記述しましょう。

文字コードの指定

@charset "utf-8";

HTML/CSS入門編サンプルコード5-1

【画面収録】文字コードの指定

HTMLファイルからCSSファイルを外部参照しよう

HTMLファイルからCSSファイルを外部参照すること（要するにCSSファイルをリンクさせて読み込むということ）を「関連付けする」と言います。
関連付けを済ませておかないと、CSSを記述してもブラウザの表示は何も変化しませんので、CSSのコードを書き前にやっておきましょう。
この<link> タグは、 <head>～</head> 内に記述します。

それでは、実際にVS Codeでlinkタグを入力してみましょう。
style.cssはpasta-recipe.htmlの1つ下の階層にありますので、「フォルダ名/ファイル名」の表記法を使い、href属性の属性値として「css/style.css」を記述します。
属性値に「css」と入力すれば、すぐにcssフォルダ内のstyle.cssを選択できるようになりますが、もし選択できなければ、フォルダやファイルが正しい場所に置かれているかどうかを確認しましょう。

linkタグに必須の属性

rel属性：外部参照するファイルの種類を指定するための属性。CSSを参照する場合は、属性値に”stylesheet”を指定する。
href属性：外部参照するCSSファイルのパス（通常は相対パス）を記述するための属性。

外部CSSファイルの参照

<link rel="stylesheet" href="css/style.css">

HTML/CSS入門編サンプルコード5-2

【画面収録】外部CSSファイルの参照

これで外部CSSファイルの参照が完了しました。
続いて、CSSの基本書式を学びましょう。

【5-3】CSSの基本書式を学ぼう

CSSの基本書式

CSSの基本書式は下の画像の通りです。
スタイリングしたいHTMLの各要素に対して、プロパティの値を設定します。
CSSによるスタイリングは、HTMLタグでマークアップされた要素に対して行われるため、Webページをスタイリングするためには、HTMLマークアップを先に済ませておかなければなりません。

CSSの書式はとてもシンプルです。
セレクタのプロパティに値をセットするというのが基本ですが、この書式を覚えるときは、「どこの（セレクタ）」「なにを（プロパティ）」「どうする（バリュー）」と頭に入れておくとよいでしょう。

CSSの記述例

h1{color:#ff0000;} /*h1要素の文字色を赤にする*/

p{font-size:20px;} /*p要素の文字サイズを20pxにする*/

HTML/CSS入門編サンプルコード5-3

記号の読み方

記号	読み方
{ }	波括弧（ナミカッコ）
：	コロン
；	セミコロン

各用語の解説

セレクタ（どこの）

スタイリングの対象となるタグの要素のことです。
一般的なWebサイト制作に使用するものは10〜20程度と言われています。
（もっと少なくてもWebサイトの制作は可能です。）

プロパティ（なにを）

スタイリングの具体的な内容を表す単語のことです。
例えば、文字色、サイズ、背景、レイアウト、アニメーションなどの設定が可能です。
総数は数百に上りますが、一般的なWebサイト制作に使用するものは30〜100ぐらいと言われています。

バリュー（どうする）

プロパティに対してセットする値のことです。
例えば、文字色（font-sizeプロパティ）に対して赤（redまたは#ff0000）という値をセットするという書式で、具体的なスタイリングを定義します。
プロパティの種類によって設定できるバリュー（値）が決まっています。

本章で学ぶCSSプロパティ一覧

本章では、以下のプロパティの使い方を学びます。

テキスト関連のプロパティ

プロパティ名	説明
color	文字色
font-size	文字サイズ
line-height	行間
text-align	行揃え
text-shadow	文字の影
font-family	フォントの種類
font-weight	文字の太さ
letter-spacing	字間
text-decoration	テキストの装飾
text-indent	字下げ（インデント）
font-style	イタリック（斜体）

背景関連のプロパティ

プロパティ名	説明
background-color	背景色
background-image	背景画像
background-repeat	背景画像の繰り返し方法
background-position	背景画像の表示位置
background-size	背景画像のサイズ
background-attachment	背景画像の固定orスクロール

それでは、実際にCSSのコードを入力してWebページのスタイリングをしていきましょう。
本章では、基本のCSSプロパティの中から、よく使うものを「テキスト関連」「背景関連」の2つのカテゴリーに絞り、ひとつずつ紹介していきます。
ひとつひとつのプロパティを実際に自分で入力してからブラウザプレビューを行い、どのようにスタイリングされるかということを確認しながら、学習を進めましょう。

エディタ画面を分割して作業しよう

CSSによるスタイリングは、HTMLファイル中のタグの要素に対して行うため、作業中のHTMLとCSSのソースコードを両方並べて配置し、同時に見比べられるようにしておくとコーディングをスムースに行うことができます。
VS Codeのようなコード入力専用のエディタには、ウインドウを分割して表示する機能が備わっていますので利用するとよいでしょう。

【画面収録】ウインドウを横に二分割する方法

【画面収録】ウインドウを縦に二分割する方法

【5-4】テキスト関連のプロパティを覚えよう

文字色を設定しよう

文字色の設定

color:色指定;

HTML/CSS入門編サンプルコード5-4

まずはh1テキストの文字の色を設定してみましょう。

文字の色はcolorプロパティで設定します。
セレクタ{ プロパティ:バリュー（値）;} の書式でstyle.css 内に記述します。
セレクタにはタグの要素名（h1など）を記述します。
{ }の間は改行した方が、コードが読みやすいです。

ここからは、ひとつのプロパティを入力後、その都度CSSファイルを上書き保存してブラウザプレビューを行って下さい。
入力ミスのチェックと、各プロパティがどのようなスタイリングの変化をもたらすのかをしっかりと見届けるためです。

h1要素の文字色を赤にする

h1 {
  color: #ff0000;
}

HTML/CSS入門編サンプルコード5-5

h1テキストの文字色を設定できたら、続いてh2要素のテキスト色も設定してみましょう。
h2要素は2箇所にありますので、両方とも同じ色が設定されます。
現時点では、お好きな色を設定しておいて下さい。

h2要素の文字色を緑にする

h2 {
  color: #00ff00;
}

HTML/CSS入門編サンプルコード5-6

ブラウザプレビュー

【画面収録】h1要素とh2要素にcolorプロパティを設定する

CSSの色指定の方法

16進数のRGB値

英語の色名が一覧表示されます。

16進数のRGB値

16進数のRGB値とは

光の3原色

256段階

16進数のRGB値の例

16進数のRGB値	色
#FF0000	赤
#00FF00	緑
#0000FF	青
#FFFFFF	白
#000000	黒
#808080	グレー

内部参照とインラインのCSSの適用方法

Web制作の現場では、あまり使われることはありませんが、内部参照とインラインのCSSの適用方法を以下に解説します。

styleタグを使いHTMLファイル中に埋め込む（内部参照）

CSSの内部参照とは、下記サンプルコードのように、headタグ内にstyleタグを記述し、その中にCSSを記述する方法です。
外部ファイルを作成せずにCSSを適用できるため、簡単で便利に感じますが、複数のHTMLファイルでCSSを再利用する（使いまわす）ことができないため、外部参照に比べるとメンテナンス性において非効率的な方法です。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>みんなのパスタレシピ</title>
    <style>
      h1 {
        color: #ff0000;
      }
    </style>
  </head>

  <body>
    <h1>みんなのパスタレシピ</h1>
    
  </body>
</html>

HTML/CSS入門編サンプルコード5-7

style属性を使いHTMLタグの中に記述する（インライン）

インラインでCSSを記述するとは、下記サンプルコードのように、style属性をHTMLタグ中に追加し、ひとつひとつのタグに対してCSSを適用する方法のことです。
HTMLとCSSのコードが混在するため、可読性が下がります。
メンテナンス性においては、内部参照よりもさらに非効率的な方法です。
WordPressなどに代表されるCMSの管理画面で、簡易的なCSSのスタイリングを行う際には有用なこともあります。

<h1 style="color:#ff0000;">みんなのパスタレシピ</h1>

HTML/CSS入門編サンプルコード5-8

文字サイズを設定しよう

文字サイズの設定

font-size:サイズ指定;

HTML/CSS入門編サンプルコード5-9

まずはh1テキストの文字サイズを設定してみましょう。

文字の色はfont-sizeプロパティで設定します。
サイズの指定に使う単位には「px（ピクセル）」「%（パーセント）」「em（エム）」「rem（レム）」など複数の種類があります。
ブラウザの初期文字サイズは16pxに設定されています。
HTMLタグでマークアップされていないテキスト、また、見出しタグのように文字サイズが変わるタグ以外のタグでマークアップされたテキストは、16pxでブラウザに表示されます。

h1要素の文字サイズを45pxにする

h1 {
  font-size: 45px;
}

HTML/CSS入門編サンプルコード5-10

colorプロパティの後に続けてfont-sizeプロパティを入力します。
「;」（セミコロン）で区切られていれば、下記CSSサンプルコード5-10のように、複数のプロパティの設定を横一列に繋げて記述しても問題ありません。

h1 {color: #ff0000;font-size: 45px;}

HTML/CSS入門編サンプルコード5-11

しかし、コードの可読性を考慮すると、以下のCSSサンプルコード5-11のように改行した方が良いでしょう。

h1 {
  color: #ff0000;
  font-size: 45px;
}

HTML/CSS入門編サンプルコード5-12

h1テキストの文字サイズを設定できましたら、続いてp要素の文字サイズも設定してみましょう。

現時点では、お好きなサイズを設定しておいて下さい。

p {
  font-size: 20px;
}

HTML/CSS入門編サンプルコード5-13

ブラウザプレビュー

【画面収録】h1要素とp要素にfont-sizeプロパティを設定する

CSSで使う単位について

単位	説明
px（ピクセル）	ディスプレイ上のピクセルに基づいた絶対的なサイズ指定。
%（パーセント）	基準となる要素に対する相対的なサイズ指定。
em（エム）	1文字の大きさを1emとする単位。
rem（レム）	html要素に指定されたfont-sizeを1remとする相対的な単位。
vw（ビューポート・ウィドゥス）	端末の画面の幅を基準とする相対的な単位。 1vw = 画面の幅の1%
vh（ビューポート・ハイト）	端末の画面の高さを基準とする相対的な単位。 1vh = 画面の高さの1%

行間を設定しよう

行間の設定

line-height:値;

HTML/CSS入門編サンプルコード5-14

行間とは行の高さを表す言葉です。
行間はline-heightプロパティで設定します。

視覚的には、複数行テキストの1行と1行の間の余白の大きさとなって表れます。
行間の値の単位はpxで指定することもできますが、次のように、文字サイズに応じて決まる指定方法がオススメです。

line-height:1;/*行間なし。狭すぎる*/
line-height:2;/*文字1つ分の行間 やや広め*/
line-height:3;/*文字2つ分の行間。広すぎる*/
line-height:1.75;/*文字サイズの1.75倍。ちょうど良い行間*/

HTML/CSS入門編サンプルコード5-16

主要ブラウザのline-heightの初期値は、フォントの種類にもよりますが、1.2〜1.4になっています。
この初期値は、通常の文章を読むにはやや狭めであるため、読みやすい値に調整する必要があります。

一般的な文章に設定する適切な行間の値は、文字サイズや1行あたりの文字数（行長）、文章の内容によっても異なりますが、文字サイズの1.5〜2倍と言われています。
その場合、1.5〜2または150%〜200%と値を指定します。

p要素の行間を1.75に設定する

p {
  line-height:1.75;
}

HTML/CSS入門編サンプルコード5-15

ブラウザプレビュー

【画面収録】p要素にline-heightプロパティを設定する

行揃えを設定しよう

行揃えの設定

text-align:値（center,left,rightなど）;

HTML/CSS入門編サンプルコード5-17

水平方向の行揃えはtext-alignプロパティで設定します。
ほとんどのHTMLタグで、テキストは左揃えに設定されますが、text-alignプロパティを使うと、初期設定の左揃え（left）以外にも、中央揃え（center）や右揃え（right）を設定することができます。

h1要素のテキストを中央揃えにする

h1 {
  text-align: center;
}

HTML/CSS入門編サンプルコード5-18

ブラウザプレビュー（text-align: left;（初期値））

ブラウザプレビュー（text-align: center;）

ブラウザプレビュー（text-align: right;）

【画面収録】h1要素にtext-alignプロパティを設定する

文字に影をつけよう

文字の影を設定

text-shadow : 横位置 縦位置 ぼかし幅 #色指定;

HTML/CSS入門編サンプルコード5-19

text-shadowプロパティを使うと、ドロップシャドウのような効果をテキストに対して適用することができます。
「横位置（px）縦位置（px）ぼかし幅（px） #色指定」の順番で値を設定します。
横位置（px）縦位置（px）でテキストと影の距離を、ぼかし幅で、影のぼかし度をそれぞれ設定します。
影の色は黒やグレーに限らず、好きな色を設定することができます。

h1要素のテキストに影をつける

h1 {
  text-shadow: 2px 2px 10px #6c6c6c;
}

HTML/CSS入門編サンプルコード5-20

ブラウザプレビュー

text-shadowを使用する際は、装飾過多にならないよう、視認性を十分に考慮して設定しましょう。

装飾過多で視認性を損ねてしまった例

【画面収録】h1要素にtext-shadowプロパティを設定する

フォントの種類を設定しよう

フォントの種類の設定

font-family: フォント指定;

HTML/CSS入門編サンプルコード5-21

フォントの種類は、font-familyプロパティで設定します。
font-familyはブラウザにより初期設定が異なります。
例えば、Google Chromeではゴシック体が初期設定ですが、Safariでは明朝体が初期設定です。

Google Chromeの初期設定（ゴシック体）

Safariの初期設定（明朝体）

font-familyの指定方法

フォント指定	表示されるフォント
sans-serif	ゴシック系のフォント
serif	明朝系のフォント
特定のフォント名	「ヒラギノ明朝 ProN」のようにフォント名にスペースが含まれているものは、"ヒラギノ明朝 ProN"と、フォント名を「”」（ダブルクォーテーション）で囲む。

font-familyによるフォントの種類の指定は、ユーザーの環境にインストールされているフォントしか表示できないため、指定したフォントで表示できるとは限りません。
ユーザーのPCにインストールされていないフォントが指定されている場合は、別のフォントに置き換えられるため、次のように「,（カンマ）」で区切りながら複数の候補を指定しておきましょう。

複数のフォントの候補を指定する

font-family: "ヒラギノ明朝 ProN", serif;

HTML/CSS入門編サンプルコード5-22

これは、"ヒラギノ明朝 ProN"がインストールされていないPCでの閲覧時には、そのPCに入っている明朝系のフォントを表示するという設定です。
また、ユーザーの閲覧環境に依存しないfont-familyの設定をする方法として、Webフォントを利用する方法があります。（Webフォントの利用方法は、次章以降で解説）
font-familyの選定次第で、Webサイトのデザインの印象が大きく変わりますので、そのサイトのテーマや雰囲気にあったものを選ぶようにしましょう。

【画面収録】h1要素にfont-familyプロパティを設定する

文字の太さを設定しよう

フォントの太さを設定

font-weight : 数値またはキーワード;

HTML/CSS入門編サンプルコード5-23

フォントの太さは、font-familyプロパティで設定します。
100、200、300、400、500、600、700、800、900の数値でフォントの太さを指定する方法と、以下のキーワードで指定する方法があります。
一般的には、太字（bold）か通常（normal）のどちらかを指定することが多いですが、Webフォントを利用する際には、数値を指定することもよくあります。

font-weightの指定（キーワード）

指定方法	太さ
normal	標準の太さ（数値で400を指定した場合と同じ）
bold	一般的な太字の太さ（数値で700を指定した場合と同じ）
lighter	相対的に一段階細くする
bolder	相対的に一段階太くする

【画面収録】h1要素とp要素にfont-familyプロパティを設定する

字間を設定しよう

字間の設定

letter-spacing : 数値（単位はpx、em など）;

HTML/CSS入門編サンプルコード5-24

字間とは、テキストの1文字1文字の間隔のことです。

letter-spacingプロパティを設定すると、指定したHTML要素内のテキストに、均一な字間を設定することができます。

ポイント

letter-spacingを設定するときの注意点

「読ませる文章」

単語をまとまりとして認識しにくくなります。

可読性を阻害し、スムースに読むことができなくなります。

見出しやキャッチコピーには効果的

「見せる文章」

視認性を上げる効果が期待できます。

h1要素のテキストに字間を設定する

h1 {
  letter-spacing: 0.1em;
}

HTML/CSS入門編サンプルコード5-25

ブラウザプレビュー

【画面収録】h1要素にletter-spacingプロパティを設定する

単位emとは？

em（エム）

要素の現在のフォントサイズを基準にしたサイズ指定のための単位

テキストの装飾を設定しよう

テキストの装飾を設定する

text-decoration : 値 ;

HTML/CSS入門編サンプルコード5-26

装飾の種類には下線、上線、取り消し線などがあります。
text-decorationプロパティにさまざまな値を設定します。
p要素にtext-decorationプロパティを設定していろいろな値を試してみましょう。

text-decorationの指定

指定方法	装飾の種類
none	テキストの装飾なし（初期値）
underline	テキストに下線を引く
overline	テキストに上線を引く
line-through	テキストに取り消し線を引く

ブラウザプレビュー（text-decoration: none;）

ブラウザプレビュー（text-decoration: underline;）

ブラウザプレビュー（text-decoration: overline;）

ブラウザプレビュー（text-decoration: line-through;）

【画面収録】p要素にtext-decorationプロパティを設定する

字下げ（インデント）を設定しよう

字下げ（インデント）の設定

text-indent: 数値（単位はpx、em など）;

HTML/CSS入門編サンプルコード5-27

text-indentプロパティは、段落の最初の一行目の字下げなどに使用します。
マイナスの値を指定することも可能です。

ブラウザプレビュー

【画面収録】p要素にtext-indentプロパティを設定する

文字をイタリック（斜体）にしよう

イタリック、斜体の設定

font-style: italicまたはoblique;

HTML/CSS入門編サンプルコード5-28

ont-styleプロパティでは、通常体 (normal)、筆記体 (italic)、斜体 (oblique)の3種類の値を設定することができます。
欧文書体の場合、italic（筆記体）のフォントがない場合は、oblique（斜体）のものが使われます。
日本語フォントの場合は、通常、筆記体や斜体のものは用意されていないので、標準のスタイルのフォントが斜体に変形されます。
テキストを強調したいときなどに、太字と同じような効果を持ちますが、日本語書体ではあまり使われず、主に欧文書体に設定します。

ブラウザプレビュー

【画面収録】p要素にtext-indentプロパティを設定する

【5-5】背景関連のプロパティを覚えよう

背景色を設定しよう

背景色の設定

background-color : 色指定;

HTML/CSS入門編サンプルコード5-29

背景色はbackground-colorプロパティで設定します。
ブラウザ画面全体に背景色を入れる場合は、bodyをセレクタにします。
見出しや段落など、body以外の要素に背景色を設定すると、内容物が入っている四角い領域に色が入ります。

ブラウザプレビュー

【画面収録】body、h1、h2要素にbackground-colorプロパティを設定する

背景画像を設定しよう

演習素材について

「images」フォルダ内の「bg」フォルダの中には、「bg.png」「stripe.png」「italy-photo.jpg」の3枚の画像ファイルが入っています。

bg.png

stripe.png

itary-photo.jpg

背景画像の設定

background-image: url(画像ファイルのパス);

HTML/CSS入門編サンプルコード5-30

背景画像はbackground-imageプロパティで設定します。
背景画像を指定すると、縦横にリピートされ、要素全体が繰り返された画像で埋め尽くされます。
background-colorと一緒に使用すると、背景色の上を背景画像が覆います。
また、関連のプロパティを使うと、繰り返し方法、表示位置、表示サイズ、固定表示などの指定もできます。

body要素に背景画像として「bg.png」を指定してみましょう。
このときのファイルパスは、style.cssからbg.pngまでの相対パスなので、「../images/bg/bg.png」となります

p要素には背景画像として「stripe.png」を指定してみましょう。
このときのファイルパスは、「../images/bg/stripe.png」となります。

ブラウザプレビュー

【画面収録】body、h1、h2要素にbackground-colorプロパティを設定する

背景画像の繰り返し方法を設定しよう

背景画像の設定

background-repeat: 値;

HTML/CSS入門編サンプルコード5-31

背景画像の繰り返し方法はbackground-repeatプロパティで設定します。
使用できる値は以下のとおりです。

値	繰り返し方法
repeat（初期値）	背景画像を敷き詰める
repeat-x	背景画像を水平方向に敷き詰める
repeat-y	背景画像を垂直方向に敷き詰める
no-repeat	背景を敷き詰めず、１つだけ表示する

ブラウザプレビュー（repeat-x）

ブラウザプレビュー（repeat-y）

ブラウザプレビュー（no-repeat）

【画面収録】background-repeatプロパティを設定する

背景画像の表示位置を設定する

背景画像の表示位置を設定

background-position: 水平位置 垂直位置;

HTML/CSS入門編サンプルコード5-32

背景画像の表示位置はbackground-positionプロパティで設定します。
初期値は「background-position: left top;」です。

表示位置	値
水平位置	center,left,right
垂直位置	center,top,bottom

※水平位置、垂直位置をpx単位で指定することもできます。

ブラウザプレビュー（ background-position : center top ; ）

【画面収録】background-positionプロパティを設定する

背景画像のサイズを設定しよう

背景画像のサイズを設定

background-size : 値;

HTML/CSS入門編サンプルコード5-33

背景画像のサイズはbackground-sizeプロパティで設定します。
使用できる値は以下のとおりです。

値	説明
cover	画像の縦横比を崩すことなく、画像が可能な限り大きくなるよう拡大縮小します。画像の縦横比が要素と異なる場合、空き領域が残らないように上下または左右のどちらかをトリミングします。最もよく使う値です。
contain	画像をトリミング縦横比を崩すことなく、画像ができるだけ大きくなるよう拡大縮小します。画像の縦横比が要素と異なる場合、空き領域が残ります。
auto	縦横比が維持されるように、適切な方向に背景画像を拡大縮小します。 ※幅、高さの順でpxまたは%指定することもできます。

bodyに設定したbackgroud-imageの画像を「italy-photo.jpg」に差し替えてから、background-size:cover;を設定してみましょう。

ブラウザプレビュー

【画面収録】background-sizeプロパティを設定する（background-size : cover;）

背景画像を固定表示するかスクロールさせるかを設定しよう

背景画像を固定表示

background-attachment : 値;

HTML/CSS入門編サンプルコード5-34

background-attachmentで背景画像を固定表示するかスクロールさせるかを設定することができます。

値	説明
scroll（初期値）	背景画像がブラウザ画面のスクロールにともないスクロールします。
fixed	背景画像を固定します。ブラウザ画面をスクロールしても、背景画像はスクロールしません。

ブラウザプレビュー

【画面収録】background-attachmentプロパティを設定する（background-attachment : fixed;）

背景関連のプロパティをひとまとめにして記述しよう（ショートハンドプロパティ）

背景関連プロパティのショートハンドの書式

background:値1 値2 値3 値4・・・・;

HTML/CSS入門編サンプルコード5-35

CSSのプロパティの中には、複数のプロパティの値を一括で設定できるショートハンドという省略形の記述方法を持つものがあります。
背景関連の「background-◯◯◯◯」という記述形式のプロパティは、上のショートハンドの書式を使い、1行にまとめて記述することが可能です。

例として、ここまでにbody要素に設定した次の背景関連のプロパティを、ショートハンドで省略形に書き換えてみましょう。

省略前

body {
  background-color: #ffefcd;
  background-image: url(../images/bg/italy-photo.jpg);
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
  background-attachment: fixed;
}

HTML/CSS入門編サンプルコード5-36

省略後（ショートハンド）

background: #ffefcd url(../images/bg/italy-photo.jpg) no-repeat center top /cover fixed;

HTML/CSS入門編サンプルコード5-37

省略前のコードと省略後のコードは同じ意味です。
基本的には、各プロパティの値を半角スペースで区切りながら記述していくだけです。
ただし、記述時には注意点がいくつかありますので、下記のbackgroundのショートハンド記述時の注意点をよく読んで確認しておきましょう。

backgroundのショートハンド記述時の注意点

1. 推奨されている順番がある

サンプルコードは「color image repeat position / size attachment」の順で記述されており、これが推奨されている順番です。
とくに、background-positionとbackground-sizeは値の書式が似てしまうことがあるため、ブラウザが誤解釈しないように、background-positionのあとに「/（スラッシュ）」を入れてからbackground-sizeを指定します。
「/（スラッシュ）」は、background-positionとbackground-sizeを区切るための専用の記号で、他のプロパティを区切るためには使用できません。
そして、background-attachmentはbackground-positionの後に記述することにより、ブラウザの誤解釈を防ぐことができます。

全ての値を指定しなくてもよい

例えば次のように、必要なものだけをまとめて記述すればOKです。

background:url(../images/bg/italy-photo.jpg) no-repeat;

HTML/CSS入門編サンプルコード5-38

また、次のように最低限の指定のみでも正しく適用されます。

background: #ffefcd;

HTML/CSS入門編サンプルコード5-39

【5-6】リンクテキストにCSSを設定しよう

演習素材について

演習の準備

1. 「start」フォルダ内のindex.htmlをエディターで開き、ブラウザプレビューします。
2. 新しいテキストファイルを作成し、style.cssと名前をつけてcssフォルダに保存します。（cssフォルダはindex.htmlと同じ階層に自分で作成します）
3. style.cssの1行目に@charset "utf-8";を記述します。
4. index.htmlとstyle.cssをlinkタグで関連付けます。

【画面収録】演習の準備

ここでは、リンクテキストをCSSでスタイリングする方法について学びます。
リンクテキストとはaタグでマークアップされたテキストのことです。
リンクテキストには、以下の4つの状態に応じてCSSを適用することができます。

リンクテキストの状態

通常の状態
リンク先に訪問済みの状態
マウスホバーしている状態
クリックした瞬間の状態

通常、リンクテキストをスタイリングする際は、a要素にCSSを設定すればよいので、例えば文字色を設定する場合は、以下のように記述します。

a要素に文字色を設定する

a {
  color: #00dee5;
}

HTML/CSS入門編サンプルコード5-40

上記のように、a要素をセレクタとしてCSSを記述すれば、リンクが先述した4種類の状態のうちのどの状態であっても、すべてのaタグがスタイリングされます。
リンクテキストのスタイリングは、4種類のリンクテキストの状態に合わせてCSSを切り替えて設定することもできます。
これらのリンクテキストの状態を表すためのセレクタは「擬似クラス」と呼びます。
擬似クラスは以下のように記述します。

擬似クラス

セレクタ	説明
a:link	href属性がついているa要素
a:visited	リンク先に訪問済みのa要素
a:hover	マウスポインタが乗っているa要素
a:active	クリックされた瞬間（プレス中）のa要素

一般的なWebサイト制作では、これらの擬似クラスをすべて使うことはほとんどありません。

a:linkは、上記CSSサンプルコード5-30のa要素をセレクタにしたスタイリングとほぼ同じですし、a:visitedに関しては、訪問済みリンクのスタイリングが変わってしまうと、Webサイトのデザイン性を損ねることもありますので、この2つの擬似クラスは多くのWebサイトでは使われていません。

そこで、実務的には、次のようにaとa:hoverとa:activeを書くことが多くなります。

ブラウザプレビュー

【画面収録】a要素に文字色を設定する

a要素を擬似クラスでスタイリングする

通常のリンクテキストに下線（アンダーライン）を消す設定をします。
マウスホバー時に下線が表示される設定をします。
クリックされた瞬間には文字色が変化する設定をします。

a {
  color: #00dee5;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

a:active {
  color: #006161;
}

HTML/CSS入門編サンプルコード5-41

ブラウザプレビュー

【画面収録】a要素を擬似クラスでスタイリングする

【5-7】外部CSSファイルを再利用しよう

最後に、index.htmlと関連付けされたstyle.cssを他のHTMLファイルとも関連付けすることにより、全ページに同じCSSが適用された状態にしましょう。
以下のHTMLファイルにもlinkタグを入力し、それぞれのHTMLファイルからstyle.cssへの相対パスを設定しましょう。

linkタグで関連付けするHTML

dog.html（1つ下の階層のパス）
cat.html（階層をまたいだパス）
rabbit.html（階層をまたいだパス）

通常のWebサイト制作では、このように1枚の外部CSSファイルを複数ページ間で再利用する（使いまわす）ことにより、CSSを一元管理します。
このことにより、次の利点があります。

外部CSSを複数のHTMLファイルで再利用する利点

メンテナンス性の向上

以上のことから、Webサイト制作には、基本的に外部CSSを使いましょう。

【画面収録】外部CSSファイルを再利用

これで「HTML/CSS入門編 5章：CSSの基本を学ぼう」の解説を終わります。
次の章に進みましょう。