前回の振り返り
CSSとは
色の指定方法
文字のスタイル
ボックスのスタイル
提出方法：zip形式

前回の振り返り

danger

前回やったこと

デスクトップにフォルダを作成する。

Visual Studio Codeでデスクトップに作ったフォルダを開き、「index.html」というファイルを作成して、自己紹介ページを制作する。

画像を表示させる。

前回の例のダウンロード

今回はその続きから

「style.css」というファイルを作成して、色や文字や余白をデザインする。

CSSとは

CSS（Cascading Stylesheets、カスケーディング・スタイルシート）は、ウェブサイトの見た目を決めるための言語です。

CSS には、文書を構成する要素の位置や大きさ、色の設定が書かれています。例えば、「段落を表す

p

という要素の文字の色

color

を赤

red

にする」という設定は以下のように記述されます。

p {
  color: red;
}

文書全体の見た目の設定から細かい要素の設定までが、何段階にも分かれて設定されるので、この様子を「何段にも連なった小さな滝（cascade）」に例えて CSS（Cascading StyleSheets）と呼ばれています。

HTML に CSS を適用する

HTML に CSS を適用するには、HTML の

<head>

要素の中に

<link>

要素を追加し、

href

属性に CSS ファイルのパスを、

rel

属性に

"stylesheet"

と指定する。

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

CSS のスタイルの書き方

セレクタ
スタイルを設定する要素を選択する。後ろの波括弧
{ }
の中にスタイルの宣言を書く。
宣言
プロパティと値の間にはコロン
:
、宣言の終わりにはセミコロン
;
を入れる。
プロパティ
色や大きさなど、スタイル付けしたいもの。

CSSでのコメントは

/*

と

*/

の間に書きます。

/* コメント */

色の指定方法

CSS で色を指定するには、いくつかの方法があります。

Web では RGB の各色を 16進数（0 から F で数える方法）で 2 桁ずつ合計 6 桁の数値で表し、先頭に#をつける方法が主流でした。以下の Web サイトでカラーコードを選んでみましょう.

WEB 色見本原色大辞典 - HTML カラーコード
このほかに、
red
などの色を表すキーワードを使う方法もあります。使用できるキーワードの一覧も見てみましょう。

参考ページ
RGB の 3 つの値を 0 から 255 で指定する方法も一般的です。
rgb(Rの値, Gの値, Bの値)
という書き方で使用できます。
```
p {
  color: rgb(255, 0, 0);
}
```
HSL（色相、彩度、明度）の 3 つの値をで指定する方法も、色の調整がしやすくて便利です。
hsl(色相の値, 彩度の値, 明度の値)
という書き方で使用できます。
```
p {
  color: hsl(0, 100%, 50%);
}
```
色相は 0 から 360、彩度と明度はそれぞれ 0%から 100%で表します。HSL の明度は、100%は白、0%が黒になるので、50%が中間の明度です。

danger

演習

color
プロパティで文字の色、
background-color
プロパティで、全体の背景の色を変えてみましょう。
html {
  color: 文字の色;
  background-color: 背景の色;
}

文字のスタイル

フォントの指定方法

font-family

プロパティで、書体を指定することができます。最も基本的な指定方法は、セリフ体（明朝体）

serif

かサンセリフ体（ゴシック体）

sans-serif

のどちらかを指定する方法です。

セレクタ {
  font-family: 書体名;
}

フォントの名前を細かく指定することもできますが、デバイスに入っていないフォントは使えないので、複数のフォントをカンマで区切って指定する必要があります。各デバイスにインストールされているフォントを調べて手入力するのは、少し大変なので以下のツールなどを利用すると良いです。

Font-family メーカー：標準フォント一覧からサクッと指定

フォントの大きさと太さ

font-size

プロパティで、フォントの大きさを指定できます。

セレクタ {
  font-size: 大きさ;
}

CSS で大きさを指定するときは、以下のような単位をつけて指定します。

px

ピクセル数で大きさを指定する。
rem

ルート要素（html 要素）に指定された文字の大きさを基準として、大きさを指定する。1rem が 1 文字分の大きさで、変更していない場合は 1rem = 16px。
em

親要素に指定された文字の大きさを基準として、大きさを指定する。1em が 1 文字分の大きさで、具体的な px 数は親要素によって異なる。
%

プロパティによって、親要素の文字の大きさやウィンドウの大きさを基準とした割合で、大きさを指定する。

また、

font-weight

プロパティで、文字の太さを指定することができます。値は通常

normal

か

bold

の 2 種です。細かい指定に対応しているフォントであれば、100~900 程度の数値を使って細かく設定することもできます（400が

normal

、700が

bold

）。

セレクタ {
  font-wight: 太さ;
}

行の間隔

line-height

プロパティで、1 行の高さを変更することで、行送り（行と行の間隔）を指定することができます。

1

と指定すると行の高さは 1 文字分になるため、行と行の間隔は空きません。

2

と指定すると行の高さは 2 文字分になるため、行と行の間隔は 1 文字分空きます。指定する数値は整数です。読みやすい文章の行間は 1.5〜2 と言われています。

セレクタ {
  line-height: 行間;
}

文字の間隔

letter-spacing

プロパティで、文字の間隔を指定することができます。例えば、

0.5em

を指定すると字間は半文字分開きます。

セレクタ {
  letter-spacing: 文字の間隔;
}

文字の配置

text-align

プロパティで、文字の配置を指定することができます。

left

や

right

、

center

と指定すると、文字を揃える基準が指定できます。

セレクタ {
  text-align: 文字の配置;
}

danger

演習

本文や見出しのフォントを変えてみましょう。

例

body {
  font-family: 'ヒラギノ角ゴシック','Hiragino Sans','メイリオ', Meiryo,sans-serif;
}

h1 {
  font-family: 'TsukuARdGothic-Regular',sans-serif;
  font-weight: bold;
}

info

おまけ：Webフォントの利用

フォントの指定方法でも説明しましたが、Webページを表示するときのフォントはデバイスにインストールされているものが使われるので、OSごとに表示が変わってしまいます。フォントが変わってしまうのを防ぐ方法として、Web上に公開されている「Webフォント」を使う方法があります。ここでは、Google Fontsを利用してみましょう。

Google Fonts で使いたいフォントを選択します。

フォントの太さを選んで「+」ボタンを押します。複数のフォントを選ぶことができます。

右側のサイドバーが表示されて、HTMLとCSSのコードがコピーできます。

HTML に
<link>
タグを、CSS に
font-family
プロパティを追加しましょう。基本のフォントと見出しだけに適用するフォントなどを分けることができます。

例：
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght@0,700;1,400&family=Noto+Sans+JP:wght@400;700&display=swap" rel="stylesheet">
/* 全体はNoto Sans */
body {
  font-family: "Noto Sans JP", sans-serif;
}

/* 見出しはJosefin */
h1 {
  font-family: 'Josefin Sans', sans-serif;
}

ボックスのスタイル

HTMLの要素に背景色をつけてみるとわかりますが、HTMLの要素はボックスモデルと呼ばれる四角でできています。この四角の大きさや周囲の余白を調節することで、簡単なレイアウトが調整できます。

要素の大きさ

width

プロパティや

height

プロパティを指定すると、要素の大きさが指定できます。また、

min-width

、

max-width

や

min-height

、

max-height

などのプロパティを指定すると、最小や最大の大きさを指定できる。

セレクタ {
    width: 横幅;
    height: 高さ;
}

大きさの単位は、文字の大きさと同様に

px

や

rem

が使えます。

px

ピクセルで大きさを指定
rem

文字サイズで大きさを指定（
1rem
は1文字）
%

親要素に対する割合で大きさを指定
vw
、
vh

view widthとview heightの略で、ウィンドウの横幅と高さを基準に大きさを指定。
100vw
でウィンドウの幅、
100vh
でウィンドウの高さと同じになる。

要素の余白

要素の外側の余白を指定する

margin

プロパティ、要素の内側の余白を指定する

padding

プロパティ、要素の枠線を指定する

border

プロパティを指定して、HTML 要素の要素の余白を調整してみましょう。

セレクタ {
  margin: 外側の余白;
  padding: 内側の余白;
  border: 線の種類 線の太さ 線の色;
}

線の種類

border で指定できる線の種類には、

実線…
solid
点線…
dotted
破線…
dashed
二重線…
double

などがあります。

1 方向だけに余白や線をつける

border-top
border-bottom
border-left
border-right
margin-top
margin-bottom
margin-left
margin-right
padding-top
padding-bottom
padding-left
padding-right

などのプロパティは、1 方向のみ指定できます。

大きさと余白の関係

デフォルトの状態では、大きさと余白は以下のような関係になっています。実際の要素の横幅は

width

padding

border

となってしまい、少々扱いづらいです。

box-sizing

プロパティを

border-box

に設定すると、

padding

や

border

を指定していても、要素の横幅は

width

で指定した数値になるので扱いやすくなります。

width

と

padding

や

border

を一緒に指定するときは、この設定も追加しておきましょう。

セレクタ {
  box-sizing: border-box;
}

danger

演習

本文や見出しの余白を変えて、デザインをしてみましょう。

おまけ

ボックスに影をつける

https://developer.mozilla.org/ja/docs/Web/CSS/box-shadow

角を丸くする

https://developer.mozilla.org/ja/docs/Web/CSS/border-radius

提出方法：zip形式

Webページが入ったフォルダ（HTMLファイル、CSSファイルが入ったフォルダ）を圧縮形式にして、1つのファイルとして扱うことができます。

Windowsの場合

Macの場合