# 共通部品・背景・フッター等を作成する

# 共通部品を作成する

文字の色と背景色について、繰り返し使用する部分だけ Class に切り出して、単体で HTML に記述できるようにしようと思います。色は、赤 100%、緑 100%、青 100% 等、強い色を使うと見栄えがよくありません。今回は、マカロンカラー (opens new window)と呼ばれる色から 3 色選んで使用しようと思います。

以下の 3 色を今回のテーマカラーにします。たくさんの色を使う必要はありません。ページ内に使用する色は、なるべく少ないほうが良いとされています。

#E8AAA3

#AEAC78

#F3DEB9

基本の文字の色は黒ですが、黒 100% より少し色を入れるとコントラストが抑えられ、目に優しく映ります。これをダークカラー（.text-darkに割り当てて使用）と呼ぶことにします。

#000000

#101841

白色も、白 100% より少し下げた色にします。これをライトカラー（.text-lightに割り当てて使用）と呼ぶことにします。

#FFFFFF

#FEFEFE

すでに記載している main.css に、以下の Style を追記します。

~~/public/assets/main.css

a:hover {
  text-decoration: underline;
}
/* ===== BASIC END ===== */

/* ===== COMMON PARTS BEGIN ===== */
.text-dark {
  color: #101841;
}
.text-light {
  color: #fefefe;
}
.text-1 {
  color: #e8aaa3;
}
.text-2 {
  color: #aeac78;
}
.text-3 {
  color: #f3deb9;
}
.bg-1 {
  background-color: #e8aaa3;
}
.bg-2 {
  background-color: #aeac78;
}
.bg-3 {
  background-color: #f3deb9;
}
/* ===== COMMON PARTS END ===== */

/* ===== OVERALL BEGIN ===== */
...ここは後ほど自分で入力していきます。
/* ===== OVERALL END ===== */

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

これで、色をつけたい部分で Class を指定すると反映されます。以下は確認のためのコードです。 <body /> の内部をコピーして確認してください。確認後、追記した HTML は削除して問題ありません。

~~/public/index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="robots" content="noindex" />
    <title>Yumi's Portfolio</title>
    <link rel="stylesheet" href="./assets/main.css" />
  </head>
  <body>
    <div class="bg-3 text-dark">
      ここはダークカラーの文字です。
      <span class="text-1">ここは 色 1 の文字です。</span>
      背景色は 色 3 です。
    </div>
  </body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

現在の状態（参考）

色が変わることを確認して HTML を削除した後の状態（参考）

# 背景を設定する

NOTE

このセクションでは、コピー & 貼り付けではなく、自分でタイピングして入力しましょう。

背景色を設定しようと思います。<body /> に background-color プロパティを設定しても良いですが、今回は、 <body /> の中に <div /> を作成してこのタグの背景に色を設定しようと思います。

以下の一行を <body /> の中に書こうと思います。

<div class="page-cover bg-3 text-dark"></div>

ここで Visual Studio Code での入力補完を用いた方法を説明します。

上記の画面で、 11 行目の <body>ここ</body> ここの部分にカーソルを当て、Enter を押すと、以下のような画面になります。

12 行目にスペースが 4 つ入っています。これは、Visual Studio Code が HTML の構造を解釈し、自動的に字下げしてくれています。 HTML では複数の半角スペースの塊は 1 つの半角スペースとして認識されます。そのため、半角スペースを使用して字下げを行うことで、見やすくします。これを インデント と言います。

HTML はタグを入れ子にして構造を表現します。この入れ子の関係（ネスト (opens new window)）は絶対に崩してはいけません。以下は、入れ子の関係の OK な例と NG な例です。入れ子関係が正しく行われていれば 1 行で書いても問題ありません。記述量が多くなる場合は、インデントを行いましょう。インデントは、入れ子の関係が正しいかどうか、ひと目で確認するためにも重要です。

例1 OK (完璧)
<div>
  <p>文章1</p>
  <p>文章2</p>
</div>

例3 OK
<div><p>文章1</p><p>文章2</p></div>

例2 OK (ちょっと嫌 インデントがない)
<div>
<p>文章1</p>
<p>文章2</p>
</div>

例4 OK (すごい嫌 正しくインデントしましょう)
<div><p>文章1</p><p>文章2
</p></div>

例5 NG (構文ミス 入れ子関係がおかしい)
<div>
  <p>文章1</p>
  <p>文章2</div>
</p>

例6 NG (構文ミス 入れ子関係がおかしい)
<div><p>文章1</p><p>文章2</div></p>

例7 NG (構文ミス </p>が 1 つ足りない)
<div>
  <p>文章1</p>
  <p>文章2
</div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

<div class="page-cover bg-3 text-dark"></div>

さて、この 1 行を 1 つ前に示した画像において 12 行目の 5 文字目から入力することになるのですが、これを入力しようとする際の 1 文字目に入力する文字を < ではなく、d から始めてみて下さい。 div と入力すると入力補完が表示されるはずです。そのまま Enter を押して確定すると <div></div> が自動的に入力され、カーソルの位置は <div> と </div> の間に来るはずです。

Animation15

次に、左キー を押してカーソルを左に 1 つ移動させたあと半角スペースを 1 つ入れて c と入力します。そうすると class の入力補完が表示されるはずです。そのまま Enter を押すと class="" の文字が表示されカーソルの位置は class=" と " の間に来るはずです。あとは page-cover bg-3 text-dark の文字タイプして目的の 1 行を完成させましょう。

以下は、上述の内容を通しで入力している様子です。

Animation16

発展

もう一つの方法を紹介します。余裕のある方は実践してみてください。 div.page-cover.bg-3.text-dark と入力して Enter を押します。

Animation17

無事、タグが入力できました。現段階では、何も表示されません。理由は、 <div> と </div> の中に何もないためです。 <div /> は、特に意味を持たない汎用的なタグのため、中に何もない場合、高さが 0 となり、背景色を設定しても表示されません。

今入力した <div /> には Class を指定しています。

page-cover
bg-3
text-dark

この中で、 bg-3 と text-dark は役目を果たしています（Style にすでに記述済みです）が、 page-cover は Class 名を入れただけで、 CSS の指定がありません。そのためこの page-cover クラスにページの高さ一杯の高さを指定しようと思います。

以下のように、page-cover の最小の高さをページの高さと同じにする値を指定しようと思います。

~~/public/assets/main.css

/* ===== OVERALL BEGIN ===== */
.page-cover {
  min-height: 100vh;
}
/* ===== OVERALL END ===== */

1
2
3
4
5

ここでも入力方法を紹介します。

キー入力 (参考) ※ Mac ユーザーは Ctrl → Command 、 Alt → Option に置き換えてお読みください。

.page-cover 「.page-cover」と入力します。
半角スペース 続けて半角スペースを入力します。
{ 続けて「{」を入力します。このタイミングで「}」も自動的に入力されます。カーソルの位置は「{」と「}」の間にあるはずです。
Enter Enter を押して改行するとインデントされます。
min-h 「min-h」と入力すると「min-height」の候補が表示されます。
Enter Enter を押すと「min-height:;」が入力され、カーソルは「min-height:」と「;」の間にあるはずです。
100vh 「100vh」の値を入力します。
Ctrl + S 保存します。

Animation18

更新すると、背景が設定できています。

現在の状態（参考）

# タイトルを作成する

NOTE

このセクションでは、コピー & 貼り付けではなく、自分でタイピングして入力しましょう。

「Portfolio」というタイトルを作成します。

まず、タグを記述します。 <h1 /> に Class page-title と text-1 を指定します。後ほどこのタイトルに関する Style は page-title に設定しようと思います。

~~/public/index.html

  </head>
  <body>
    <div class="page-cover bg-3 text-dark">
      <h1 class="page-title text-1">Portfolio</h1>
    </div>
  </body>
</html>

1
2
3
4
5
6
7

入力の様子

キー入力 (参考) ※ Mac ユーザーは Ctrl → Command 、 Alt → Option に置き換えてお読みください。

h1 「h1」と入力します。
Enter 入力補完を確定します。（<h1>|</h1>が入力されます。）
左矢印キー カーソルを 1 つ左に移動します。
半角スペース 半角スペースを 1 つ入力します。
c 「c」を入力します。
Enter 入力補完を確定します。（class="|"が入力されます。）
page-title text-1 「page-title text-1」と入力します。
右矢印キー x2 カーソルを 2 つ右に移動します。
Portfolio 「Portfolio」を入力します。
Ctrl + S 保存します。
Google Chrome に切り替えます。（Windows ユーザー: Alt + Tab 等）
Crtl + R または Crtl + Shift + R ページを更新します。

Animation19

発展

もう一つの方法を紹介します。余裕のある方は実践してみてください。

キー入力 (参考) ※ Mac ユーザーは Ctrl → Command 、 Alt → Option に置き換えてお読みください。

h1.page-title.text-1 「h1.page-title.text-1」と入力します。
Enter 入力補完を確定します。（<h1 class="page-title text-1">|</h1>が入力されます。）
Portfolio 「Portfolio」を入力します。
Ctrl + S 保存します。
Google Chrome に切り替えます。（Windows ユーザー: Alt + Tab 等）
Crtl + R または Crtl + Shift + R ページを更新します。

Animation20

~~/public/assets/main.css

/* ===== OVERALL BEGIN ===== */
.page-cover {
  min-height: 100vh;
}
.page-title {
  margin: 0;
  height: 80px;
  line-height: 80px;
  text-align: center;
  font-size: 40px;
  font-weight: 800;
}
/* ===== OVERALL END ===== */

1
2
3
4
5
6
7
8
9
10
11
12
13

上記の Style を下の入力の様子を参考に、入力してみてください。

入力の様子 (解説のために Visual Studio Code のレイアウトを変更しています。)

まず、仮に background-color: blue; を指定して、余白や配置が思った通りになるか視覚的にわかるようにします。
一つづつ、プロパティを指定したら、ページを更新して、反映されていることを確認します。
最後に、仮に指定した background-color: blue; を削除して、入力完了です。

Animation22 2

現在の状態（参考）

# 背景に固定画像を配置する

NOTE

このセクションでは、コピー & 貼り付けではなく、自分でタイピングして入力しましょう。

ページ全体に対して、『「』と『」』のカギカッコが、左上と右下に来るように、画像を配置して見たいと思います。これは 2 つの SVG から成り立ちます。 SVG は画像ではありません。図形のパスが記載されたテキストファイルです。実際にファイルを開いてみると、以下のように図形のパスが記載されています。

SVG は通常の画像と同様に扱うことができます。通常の画像と SVG どちらを使うのが良いかは場合によりますが、直線や幾何学的な図形、色数が少ない場合は SVG にするとファイルサイズを抑えることができます。写真や文字が書かれている画像、複雑な曲線の多い画像は、.jpg や .png などの画像形式にする必要があります。 SVG はパス形式のため、ブラウザで大きく表示しても、ボヤけないという特徴があります。

今回は、この SVG ファイルが、それぞれ画面の左上と右下に、常に固定されて表示されるようにします。

左上用のファイルは ~~/public/assets/decorations/lt.svg です。(Left-Top)
右下用のファイルは ~~/public/assets/decorations/rb.svg です。(Right-Bottom)
<img /> の入力補完とファイルパスの入力補完を使用すると、簡単に入力できます。
<img /> の alt 属性は画像の説明を書きます。なるべく書くようにしましょう。
Class はこの背景画像共通の Style のための page-bg-icon クラスとそれぞれに割り当てる page-bg-icon-lt 、 page-bg-icon-rb クラスを指定しておきます。
position: fixed; を指定すると、要素の位置を固定できます。スクロールしても常に同じ場所にあり続けます。

~~/public/index.html

  </head>
  <body>
    <img
      src="./assets/decorations/lt.svg"
      alt="背景デザイン画像1"
      class="page-bg-icon page-bg-icon-lt"
    />
    <img
      src="./assets/decorations/rb.svg"
      alt="背景デザイン画像2"
      class="page-bg-icon page-bg-icon-rb"
    />
    <div class="page-cover bg-3 text-dark">
      <h1 class="page-title text-1">Portfolio</h1>
    </div>
  </body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

~~/public/assets/main.css

/* ===== OVERALL BEGIN ===== */
.page-cover {
  min-height: 100vh;
}
.page-title {
  margin: 0;
  height: 80px;
  line-height: 80px;
  text-align: center;
  font-size: 40px;
  font-weight: 800;
}
.page-bg-icon {
  position: fixed;
  width: 32px;
}
/* ===== OVERALL END ===== */

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

入力の様子（参考）

Animation23

続けて、 top、left、right、bottom、でそれぞれの方向から距離を指定します。

~~/public/assets/main.css

  font-size: 40px;
  font-weight: 800;
}
.page-bg-icon {
  position: fixed;
  width: 32px;
}
.page-bg-icon-lt {
  top: 16px;
  left: 16px;
}
.page-bg-icon-rb {
  right: 16px;
  bottom: 16px;
}
/* ===== OVERALL END ===== */

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

入力の様子（参考）

Animation24

# フッターを作成する

ページの下にある、フッターを作成します。以下のように追記してください。

background-color や box-shadow を使用して、デザインを整えています。
.footer-cover で指定している max-width: 1000px; は最大の横幅を 1000px にする設定です。margin: 0 auto; は上下方向の余白を 0 、左右方向の余白を auto に設定しています。このように組み合わせると、 1000px を超えたときに、左右に均等に余白が入り、結果的に中央に要素が表示されます。

~~/public/index.html

    <div class="page-cover bg-3 text-dark">
      <h1 class="page-title text-1">Portfolio</h1>

      <div style="height: 40px"></div>

      <footer class="footer-cover bg-2 text-light">
        <div style="height: 4px; background-color: rgba(0, 0, 0, 0.1)"></div>
        <div class="footer-contents">&copy; Yumi's web page.</div>
      </footer>
    </div>
  </body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12

~~/public/assets/main.css

  left: 16px;
}
.page-bg-icon-rb {
  right: 16px;
  bottom: 16px;
}
/* ===== OVERALL END ===== */

/* ===== FOOTER BEGIN ===== */
.footer-cover {
  max-width: 1000px;
  margin: 0 auto;
  box-shadow: 0px 0px 20px -7px rgba(0, 0, 0, 0.56);
  box-sizing: border-box;
  position: relative;
}
.footer-contents {
  padding: 16px;
  font-size: 0.875rem;
}
/* ===== FOOTER END ===== */

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

現在の状態（参考）

Animation25

# ここまでの状態

お疲れさまでした。Git に Commit 、 Push しておくと良いと思います。

さいごに、ここまでの状態を掲載しておきます。

~~/public/index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="robots" content="noindex" />
    <title>Yumi's Portfolio</title>
    <link rel="stylesheet" href="./assets/main.css" />
  </head>
  <body>
    <img
      src="./assets/decorations/lt.svg"
      alt="背景デザイン画像1"
      class="page-bg-icon page-bg-icon-lt"
    />
    <img
      src="./assets/decorations/rb.svg"
      alt="背景デザイン画像2"
      class="page-bg-icon page-bg-icon-rb"
    />
    <div class="page-cover bg-3 text-dark">
      <h1 class="page-title text-1">Portfolio</h1>

      <div style="height: 40px"></div>

      <footer class="footer-cover bg-2 text-light">
        <div style="height: 4px; background-color: rgba(0, 0, 0, 0.1)"></div>
        <div class="footer-contents">&copy; Yumi's web page.</div>
      </footer>
    </div>
  </body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

~~/public/assets/main.css

@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;500;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Pacifico&display=swap');

/* ===== BASIC BEGIN ===== */
html {
  scroll-behavior: smooth;
}
html,
body {
  font-family: Roboto, 'Noto Sans JP', sans-serif;
  font-weight: 400;
  margin: 0;
  padding: 0;
  font-size: 18px;
}
button {
  background-color: initial;
  border: initial;
  cursor: pointer;
  outline: initial;
  padding: initial;
  appearance: initial;
  -webkit-appearance: none;
  border-radius: initial;
  font-size: inherit;
}
li,
p {
  text-align: justify;
}
p {
  margin: 8px 0;
}
a {
  color: #e8aaa3;
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}
/* ===== BASIC END ===== */

/* ===== COMMON PARTS BEGIN ===== */
.text-dark {
  color: #101841;
}
.text-light {
  color: #fefefe;
}
.text-1 {
  color: #e8aaa3;
}
.text-2 {
  color: #aeac78;
}
.text-3 {
  color: #f3deb9;
}
.bg-1 {
  background-color: #e8aaa3;
}
.bg-2 {
  background-color: #aeac78;
}
.bg-3 {
  background-color: #f3deb9;
}
/* ===== COMMON PARTS END ===== */

/* ===== OVERALL BEGIN ===== */
.page-cover {
  min-height: 100vh;
}
.page-title {
  margin: 0;
  height: 80px;
  line-height: 80px;
  text-align: center;
  font-size: 40px;
  font-weight: 800;
}
.page-bg-icon {
  position: fixed;
  width: 32px;
}
.page-bg-icon-lt {
  top: 16px;
  left: 16px;
}
.page-bg-icon-rb {
  right: 16px;
  bottom: 16px;
}
/* ===== OVERALL END ===== */

/* ===== FOOTER BEGIN ===== */
.footer-cover {
  max-width: 1000px;
  margin: 0 auto;
  box-shadow: 0px 0px 20px -7px rgba(0, 0, 0, 0.56);
  box-sizing: border-box;
  position: relative;
}
.footer-contents {
  padding: 16px;
  font-size: 0.875rem;
}
/* ===== FOOTER END ===== */

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110

← 操作に慣れるカードを作成する →