ウェブサイトで適切なフォントを選ぶことは重要です！

フォント選択の重要性

適切なフォントを選ぶことは、読者がウェブサイトをどのように感じるかに大きな影響を与えます。

適切なフォントはブランドの強いアイデンティティを作り出すことができます。

読みやすいフォントを使用することも重要です。フォントはテキストに価値を加えます。また、フォントの色とテキストサイズを正しく選ぶことも重要です。

一般的なフォントファミリー

CSSでは、以下の5つの一般的なフォントファミリーがあります：

• Serif – 各文字の端に小さなストロークがあります。形式的でエレガントな印象を与えます。
• Sans-serif – クリーンなラインで、装飾のない現代的でミニマリスティックな外観を作り出します。
• Monospace – すべての文字が同じ固定幅です。機械的な外観を作り出します。
• Cursive – 人の手書きを模倣したフォントです。
• Fantasy – 装飾的で遊び心のあるフォントです。

すべてのフォント名は、これらの一般的なフォントファミリーのうちのどれかに属します。

SerifとSans-serifの違い

Serif と Sans-serif の違い

注：コンピューターの画面では、Sans-serif フォントの方が Serif フォントよりも読みやすいとされています。

いくつかのフォントの例

CSSのfont-familyプロパティ

CSSでは、テキストのフォントを指定するためにfont-familyプロパティが使われます。

注：フォント名が複数語の場合は、”Times New Roman” のように引用符で囲む必要があります。

ヒント：font-familyプロパティは複数のフォント名を「フォールバック」システムとして保持するべきです。これにより、異なるブラウザやオペレーティングシステム間で最大限の互換性が確保されます。最初に望むフォントを指定し、最後に一般的なファミリー名を記述します（もし他のフォントが利用できない場合にはブラウザが代替フォントを選ぶため）。フォント名はコンマで区切ります。フォールバックフォントについての詳細は次の章で説明します。

例

.p1 {
  font-family: "Times New Roman", Times, serif;
}

.p2 {
  font-family: Arial, Helvetica, sans-serif;
}

.p3 {
  font-family: "Lucida Console", "Courier New", monospace;
}

CSSにはテキストをフォーマットするための多くのプロパティがあります。

テキストの色

colorプロパティはテキストの色を設定します。色は以下のように指定されます：

• 色の名前 – 例: “red”
• HEX値 – 例: “#ff0000”
• RGB値 – 例: “rgb(255,0,0)”

可能な色の値の完全なリストについては、CSS Color Valuesを参照してください。

ページのデフォルトのテキスト色は、bodyセレクタで定義されます。

例

>body {
  color: blue;
}

>h1 {
  color: green;
}

テキストの色と背景色

次の例では、background-colorプロパティとcolorプロパティの両方を定義します：

例

>body {
  background-color: lightgrey;
  color: blue;
}

>h1 {
  background-color: black;
  color: white;
}

>div {
  background-color: blue;
  color: white;
}

重要：視覚障害を持つ人々にとって、高いコントラストは非常に重要です。そのため、テキストの色と背景色（または背景画像）の間のコントラストが良好であることを常に確認してください！

CSS テキスト色プロパティ

アウトラインは、要素の境界線の外側に描かれる線です。

CSS アウトライン

アウトラインは要素の周囲に描かれる線で、境界線の外側に描かれて要素を目立たせます。

CSSには以下のアウトラインプロパティがあります：

• outline-style
• outline-color
• outline-width
• outline-offset
• outline

注意：アウトラインはボーダーとは異なります！ボーダーと違い、アウトラインは要素の境界線の外側に描かれ、他のコンテンツと重なることがあります。また、アウトラインは要素の寸法の一部ではありません。要素の全幅と高さにアウトラインの幅が影響することはありません。

CSS アウトラインスタイル

outline-styleプロパティはアウトラインのスタイルを指定し、以下の値のいずれかを持つことができます：

• dotted – 点線のアウトラインを定義します
• dashed – 破線のアウトラインを定義します
• solid – 実線のアウトラインを定義します
• double – 二重線のアウトラインを定義します
• groove – 3Dの凹線のアウトラインを定義します
• ridge – 3Dの凸線のアウトラインを定義します
• inset – 3Dの浮き出し線のアウトラインを定義します
• outset – 3Dの沈み込み線のアウトラインを定義します
• none – アウトラインを定義しません
• hidden – 隠れたアウトラインを定義します

例

異なるアウトラインスタイルのデモンストレーション：

p.dotted {outline-style: dotted; border: 1px solid black; outline-color: green; outline-width: 10px;}
p.dashed {outline-style: dashed; border: 1px solid black; outline-color: green; outline-width: 10px;}
p.solid {outline-style: solid; border: 1px solid black; outline-color: green; outline-width: 10px;}
p.double {outline-style: double; border: 1px solid black; outline-color: green; outline-width: 10px;}
p.groove {outline-style: groove; border: 1px solid black; outline-color: green; outline-width: 10px;}
p.ridge {outline-style: ridge; border: 1px solid black; outline-color: green; outline-width: 10px;}
p.inset {outline-style: inset; border: 1px solid black; outline-color: green; outline-width: 10px;}
p.outset {outline-style: outset; border: 1px solid black; outline-color: green; outline-width: 10px;}

結果：

点線のアウトライン。

破線のアウトライン。

実線のアウトライン。

二重線のアウトライン。

凹線のアウトライン。エフェクトはoutline-colorの値に依存します。

凸線のアウトライン。エフェクトはoutline-colorの値に依存します。

浮き出し線のアウトライン。エフェクトはoutline-colorの値に依存します。

沈み込み線のアウトライン。エフェクトはoutline-colorの値に依存します。

注意：次の章で詳しく学ぶ他のアウトラインプロパティは、outline-styleプロパティが設定されていない限り、いかなる影響も与えません！

すべてのHTML要素はボックスとして考えることができます。

CSS ボックスモデル

CSSでは、デザインやレイアウトについて語る際に「ボックスモデル」という用語が使われます。

CSSボックスモデルは基本的に、すべてのHTML要素を囲むボックスで構成されています。以下の要素からなります：

• コンテンツ： ボックスの中に表示されるテキストや画像
• パディング： コンテンツの周囲にクリアされる領域。パディングは透明です
• ボーダー： パディングとコンテンツの周囲に設定される境界線
• マージン： ボーダーの外側にクリアされる領域。マージンは透明です

ボックスモデルにより、要素の周囲に境界線を追加したり、要素間のスペースを定義したりすることができます。

例

ボックスモデルのデモンストレーション：

div {
  width: 300px;
  border: 15px solid green;
  padding: 50px;
  margin: 20px;
}

要素の幅と高さ

すべてのブラウザで要素の幅と高さを正しく設定するためには、ボックスモデルがどのように機能するかを理解する必要があります。

重要：CSSで要素の幅と高さプロパティを設定するときは、コンテンツ領域の幅と高さのみが設定されます。要素の実際の幅と高さを計算するには、パディングとボーダーも含める必要があります。

例

この<div>要素は、全体の幅が350px、高さが80pxになります：

div {
  width: 320px;
  height: 50px;
  padding: 10px;
  border: 5px solid gray;
  margin: 0;

}

計算方法：

• 320px（コンテンツ領域の幅）
• + 20px（左パディング + 右パディング）
• + 10px（左ボーダー + 右ボーダー）
• = 350px（全体の幅）

• 50px（コンテンツ領域の高さ）
• + 20px（上パディング + 下パディング）
• + 10px（上ボーダー + 下ボーダー）
• = 80px（全体の高さ）

要素の全体の幅は以下のように計算されます：

要素の全体の幅 = 幅 + 左パディング + 右パディング + 左ボーダー + 右ボーダー

要素の全体の高さは以下のように計算されます：

要素の全体の高さ = 高さ + 上パディング + 下パディング + 上ボーダー + 下ボーダー

注意：マージンプロパティは、ボックスがページ上で占める総スペースに影響しますが、実際のボックスのサイズには含まれません。ボックスの全体の幅と高さはボーダーで止まります。

この要素の高さは50ピクセルで、幅は100%です。

CSS 高さと幅の設定

高さと幅のプロパティは、要素の高さと幅を設定するために使用されます。

高さと幅のプロパティは、パディング、ボーダー、またはマージンを含みません。これらは要素のパディング、ボーダー、およびマージンの内側の領域の高さ/幅を設定します。

CSS 高さと幅の値

高さと幅のプロパティには、以下の値が指定できます：

• auto – ブラウザが高さと幅を計算します（デフォルト）
• length – px、cmなどの単位で高さ/幅を定義します
• % – コンテイニングブロックの幅の%で高さ/幅を定義します
• initial – 高さ/幅を初期値に設定します
• inherit – 高さ/幅は親要素から継承されます

CSS 高さと幅の例

この要素は高さ200ピクセルで幅が50%です。

div {
  height: 200px;
  width: 50%;
  background-color: powderblue;
}

この要素は高さが100ピクセルで幅が500ピクセルです。

div {
  height: 100px;
  width: 500px;
  background-color: powderblue;
}

注意: 高さと幅のプロパティにはパディング、ボーダー、またはマージンは含まれません！これらは要素のパディング、ボーダー、およびマージンの内側の領域の高さ/幅を設定します。

最大幅の設定

最大幅のプロパティは、要素の最大幅を設定するために使用されます。

最大幅は、px、cmなどの長さの値、またはコンテイニングブロックの%で指定することができます。または、none（これがデフォルトです。最大幅がありません）に設定することもできます。

上記の<div>要素の問題は、ブラウザウィンドウが要素の幅（500px）よりも小さい場合に発生します。その場合、ブラウザはページに水平スクロールバーを追加します。

この状況では、代わりにmax-widthを使用することで、小さいウィンドウでのブラウザの処理を改善できます。

ヒント: ブラウザウィンドウを500pxより小さくドラッグして、2つの<div>の違いを確認してください！

この要素は高さが100ピクセルで最大幅が500ピクセルです。

div {
  max-width: 500px;
  height: 100px;
  background-color: powderblue;
}

すべてのCSS次元プロパティ

この要素には70pxのパディングがあります。

CSS パディングプロパティ

CSSのパディングプロパティは、要素の内容の周囲にスペースを作成するために使用されます。これにより、定義されたボーダーの内側にスペースが作られます。

CSSを使用すると、パディングを完全に制御できます。要素の各側面（上、右、下、左）のパディングを設定するプロパティがあります。

パディング – 個々の側面

CSSには、要素の各側面のパディングを指定するためのプロパティがあります：

• padding-top
• padding-right
• padding-bottom
• padding-left

すべてのパディングプロパティは、以下の値を持つことができます：

• length – px、pt、cmなどの単位でパディングを指定します
• % – コンテナ要素の幅の%でパディングを指定します
• inherit – パディングが親要素から継承されることを指定します

ヒント: 負の値は許可されていません。

例

<div>要素の4つの側面すべてに異なるパディングを設定します：

div {
  padding-top: 50px;
  padding-right: 30px;
  padding-bottom: 50px;
  padding-left: 80px;
}

パディング – ショートハンドプロパティ

コードを短縮するために、すべてのパディングプロパティを1つのプロパティで指定することができます。

paddingプロパティは、以下の個々のパディングプロパティのショートハンドプロパティです：

• padding-top
• padding-right
• padding-bottom
• padding-left

以下はその動作方法です：

paddingプロパティに4つの値がある場合：

padding: 25px 50px 75px 100px;

• 上のパディングは25px
• 右のパディングは50px
• 下のパディングは75px
• 左のパディングは100px

例

4つの値を持つパディングショートハンドプロパティを使用します：

div {
  padding: 25px 50px 75px 100px;
}

paddingプロパティに3つの値がある場合：

padding: 25px 50px 75px;

• 上のパディングは25px
• 右と左のパディングは50px
• 下のパディングは75px

例

3つの値を持つパディングショートハンドプロパティを使用します：

div {
  padding: 25px 50px 75px;
}

paddingプロパティに2つの値がある場合：

padding: 25px 50px;

• 上下のパディングは25px
• 右左のパディングは50px

例

2つの値を持つパディングショートハンドプロパティを使用します：

div {
  padding: 25px 50px;
}

paddingプロパティに1つの値がある場合：

padding: 25px;

• すべての側面のパディングは25px

例

1つの値を持つパディングショートハンドプロパティを使用します：

div {
  padding: 25px;
}

パディングと要素の幅

CSSのwidthプロパティは、要素の内容領域の幅を指定します。内容領域は、要素のパディング、ボーダー、マージンの内側です（ボックスモデル）。

したがって、要素に指定された幅がある場合、その要素に追加されるパディングは要素の合計幅に追加されます。これはしばしば望ましくない結果です。

例

<div>要素に幅300pxを指定します。ただし、<div>要素の実際の幅は350pxになります（300px + 左側のパディング25px + 右側のパディング25px）：

div {
  width: 300px;
  padding: 25px;
}

パディングを増やしても要素の幅を300pxに保つには、box-sizingプロパティを使用します。これにより、要素はその実際の幅を維持し、パディングを増やすと利用可能なコンテンツスペースが減少します。

例

box-sizingプロパティを使用して、パディングの量に関係なく幅を300pxに保ちます：

div {
  width: 300px;
  padding: 25px;
  box-sizing: border-box;
}

その他の例

左のパディングを設定する

この例では、<p>要素の左パディングを設定する方法を示します。

右のパディングを設定する

この例では、<p>要素の右パディングを設定する方法を示します。

上のパディングを設定する

この例では、<p>要素の上パディングを設定する方法を示します。

下のパディングを設定する

この例では、<p>要素の下パディングを設定する方法を示します。

すべてのCSSパディングプロパティ

この要素には70pxのマージンがあります。

CSS マージンプロパティ

CSSのマージンプロパティは、要素の周囲にスペースを作成するために使用されます。これにより、定義されたボーダーの外側にスペースが作られます。

CSSを使用すると、マージンを完全に制御できます。要素の各側面（上、右、下、左）のマージンを設定するプロパティがあります。

マージン – 個々の側面

CSSには、要素の各側面のマージンを指定するためのプロパティがあります：

• margin-top
• margin-right
• margin-bottom
• margin-left

すべてのマージンプロパティは、以下の値を持つことができます：

• auto – ブラウザがマージンを計算します
• length – px, pt, cmなどの単位でマージンを指定します
• % – コンテナ要素の幅の%でマージンを指定します
• inherit – マージンが親要素から継承されることを指定します

ヒント: 負の値も使用できます。

例

<p>要素の4つの側面すべてに異なるマージンを設定します：

p {
  margin-top: 100px;
  margin-bottom: 100px;
  margin-right: 150px;
  margin-left: 80px;
}

マージン – ショートハンドプロパティ

コードを短縮するために、すべてのマージンプロパティを1つのプロパティで指定することができます。

marginプロパティは、以下の個々のマージンプロパティのショートハンドプロパティです：

• margin-top
• margin-right
• margin-bottom
• margin-left

以下はその動作方法です：

marginプロパティに4つの値がある場合：

margin: 25px 50px 75px 100px;

• 上のマージンは25px
• 右のマージンは50px
• 下のマージンは75px
• 左のマージンは100px

例

4つの値を持つマージンショートハンドプロパティを使用します：

p {
  margin: 25px 50px 75px 100px;
}

marginプロパティに3つの値がある場合：

margin: 25px 50px 75px;

• 上のマージンは25px
• 右と左のマージンは50px
• 下のマージンは75px

例

3つの値を持つマージンショートハンドプロパティを使用します：

p {
  margin: 25px 50px 75px;
}

marginプロパティに2つの値がある場合：

margin: 25px 50px;

• 上下のマージンは25px
• 左右のマージンは50px

例

2つの値を持つマージンショートハンドプロパティを使用します：

p {
  margin: 25px 50px;
}

marginプロパティに1つの値がある場合：

margin: 25px;

• すべての側面のマージンは25px

例

1つの値を持つマージンショートハンドプロパティを使用します：

p {
  margin: 25px;
}

auto値

要素をコンテナ内で水平に中央に配置するために、marginプロパティをautoに設定できます。

要素は指定された幅を取り、残りのスペースは左右のマージン間で等しく分割されます。

例

margin: autoを使用します：

div {
  width: 300px;
  margin: auto;
  border: 1px solid red;
}

inherit値

この例では、<p class=”ex1″>要素の左マージンが親要素(<div>)から継承されます：

例

inherit値の使用：

div {
  border: 1px solid red;
  margin-left: 100px;
}

p.ex1 {
  margin-left: inherit;
}

すべてのCSSマージンプロパティ

すべての辺にボーダーがあります。

下辺に赤いボーダーがあります。

角が丸くなったボーダーがあります。

左辺に青いボーダーがあります。

CSS Border Style

border-styleプロパティは、表示するボーダーの種類を指定します。

以下の値が使用できます：

• dotted – 点線のボーダーを定義します
• dashed – 破線のボーダーを定義します
• solid – 実線のボーダーを定義します
• double – 二重線のボーダーを定義します
• groove – 3D溝付きボーダーを定義します。効果はborder-colorの値によって異なります
• ridge – 3D隆起ボーダーを定義します。効果はborder-colorの値によって異なります
• inset – 3Dインセットボーダーを定義します。効果はborder-colorの値によって異なります
• outset – 3Dアウトセットボーダーを定義します。効果はborder-colorの値によって異なります
• none – ボーダーを定義しません
• hidden – 隠されたボーダーを定義します

border-styleプロパティは、上辺、右辺、下辺、左辺に対して1つから4つの値を持つことができます。

例

さまざまなボーダースタイルのデモンストレーション：

p.dotted {border-style: dotted;}
p.dashed {border-style: dashed;}
p.solid {border-style: solid;}
p.double {border-style: double;}
p.groove {border-style: groove;}
p.ridge {border-style: ridge;}
p.inset {border-style: inset;}
p.outset {border-style: outset;}
p.none {border-style: none;}
p.hidden {border-style: hidden;}
p.mix {border-style: dotted dashed solid double;}

点線のボーダー。

破線のボーダー。

実線のボーダー。

二重線のボーダー。

溝付きボーダー。効果はborder-colorの値によって異なります。

隆起ボーダー。効果はborder-colorの値によって異なります。

インセットボーダー。効果はborder-colorの値によって異なります。

アウトセットボーダー。効果はborder-colorの値によって異なります。

ボーダーなし。

隠されたボーダー。

混合ボーダー。

CSSの背景プロパティは、要素に背景効果を追加するために使用されます。

これらの章では、以下のCSS背景プロパティについて学びます：

• background-color
• background-image
• background-repeat
• background-attachment
• background-position
• background（ショートハンドプロパティ）

CSS background-color

background-colorプロパティは、要素の背景色を指定します。

例

ページの背景色は次のように設定されます：

body {
  background-color: lightblue;
}

CSSでは、色は以下の方法で指定されることが最も多いです：

• 有効なカラー名 – 例：「red」
• HEX値 – 例：「#ff0000」
• RGB値 – 例：「rgb(255,0,0)」

その他の要素

任意のHTML要素に対して背景色を設定できます：

例

ここでは、<h1>、<p>、および<div>要素が異なる背景色を持ちます：

h1 {
  background-color: green;
}

div {
  background-color: lightblue;
}

p {
  background-color: yellow;
}

不透明度 / 透明度

opacityプロパティは、要素の不透明度/透明度を指定します。このプロパティは、0.0から1.0までの値を取ることができます。値が低いほど、透明度が高くなります：

例

div {
  background-color: green;
  opacity: 0.3;
}

注意：opacityプロパティを使用して要素の背景に透明度を追加すると、そのすべての子要素も同じ透明度を継承します。これにより、完全に透明な要素内のテキストが読みづらくなることがあります。

RGBAを使用した透明度

上記の例のように子要素に不透明度を適用したくない場合は、RGBA色値を使用します。次の例では、背景色に対して不透明度を設定し、テキストには適用されません：

CSS Colorsの章で学んだように、RGBを色値として使用できます。RGBに加えて、アルファチャンネル（RGBA）を使用して不透明度を指定することもできます。

RGBA色値は次のように指定されます：rgba(red, green, blue, alpha)。alphaパラメータは0.0（完全に透明）から1.0（完全に不透明）の間の数値です。

例

div {
  background: rgba(0, 128, 0, 0.3) /* 30%の不透明度の緑色の背景 */
}

CSS Background Color プロパティ

カラーは、事前定義されたカラー名、またはRGB、HEX、HSL、RGBA、HSLAの値を使用して指定します。

CSS カラー名

CSSでは、事前定義されたカラー名を使用して色を指定できます：

• Tomato
• Orange
• DodgerBlue
• MediumSeaGreen
• Gray
• SlateBlue
• Violet
• LightGray

CSS/HTMLは140の標準カラー名をサポートしています。

CSS 背景色

HTML要素の背景色を設定できます：

例

<h1 style="background-color:DodgerBlue;">Hello World</h1>
<p style="background-color:Tomato;">Lorem ipsum...</p>

CSS テキストカラー

テキストの色を設定できます：

例

<h1 style="color:Tomato;">Hello World</h1>
<p style="color:DodgerBlue;">Lorem ipsum...</p>
<p style="color:MediumSeaGreen;">Ut wisi enim...</p>

CSS ボーダーカラー

ボーダーの色を設定できます：

例

<h1 style="border:2px solid Tomato;">Hello World</h1>
<h1 style="border:2px solid DodgerBlue;">Hello World</h1>
<h1 style="border:2px solid Violet;">Hello World</h1>

CSS カラー値

CSSでは、カラーをRGB値、HEX値、HSL値、RGBA値、およびHSLA値を使用して指定することもできます：

カラー名 “Tomato” と同じ：

• rgb(255, 99, 71)
• #ff6347
• hsl(9, 100%, 64%)

カラー名 “Tomato” と同じですが、50% 透明：

• rgba(255, 99, 71, 0.5)
• hsla(9, 100%, 64%, 0.5)

例

<h1 style="background-color:rgb(255, 99, 71);">...</h1>
<h1 style="background-color:#ff6347;">...</h1>
<h1 style="background-color:hsl(9, 100%, 64%);">...</h1>

<h1 style="background-color:rgba(255, 99, 71, 0.5);">...</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 0.5);">...</h1>