HTML５・CSS３
更新日:
【HTML５・CSS３】 ワークショップ Webサイト制作
準備をしよう
Webサイト制作は、「Replit」というブラウザ上で開発できるサービスを利用します。
Replitを使う準備をしよう
それではReplitを使う準備をしていきましょう。
まずは下記のリンクからReplitの公式サイトにアクセスします。
下記の画面になるので、右上の「Start building」をクリックしましょう。
以下のようにアカウントを作成する画面になりますので、Googleアカウントをお持ちの方は「Continue with Google」をクリックしてください。
Googleアカウントをお持ちでない方は「Continue with email →」をクリックして、「Emailアドレス」、「パスワード」を入力し、「Create Account」をクリックします。
アカウント作成後、下記の画面になったら「For personal user」と「none」を選択し、「Start building」をクリックしましょう。
すると下記の画面になるので、「Explorer replit」をクリックしましょう。
下記の画面になったら左上の「Create Repl」をクリックしましょう。
すると下記の画面になるので、Templateは「HTML,CSS,JS」を選択し、Titleに「pikawaka-workshop-web」を入力後、「Create Repl」をクリックします。
その後、下記の画面になれば準備完了です。
※以下の画像のコードと一致していなくても問題ありません。
画面の左側が実際にHTMLやCSSのコードを記述するテキストエディタ、右側がプレビューです。
以下のようにプレビューの右上にあるアイコンをクリックすると、別タブで全画面表示することができます。
次は、必要なファイルなどを用意していきます。
必要なファイルを用意しよう
まずは不要なファイルを削除します。
マウスポインタを「index.html」に移動させて、以下のように三点リーダをクリックします。メニューが表示されるので、「Delete」をクリックしてファイルを削除しましょう。
同じように「script.js」と「style.css」も削除しましょう。
その後、下記の画面になればファイルの削除完了です。
続いて、必要なファイルを用意します。
以下のリンクをクリックして、「web-workshop.zip」という名前のファイルをダウンロードしましょう。
ファイルをダウンロードできたら、以下のようにファイルを解凍しておきましょう。
続いて、web-workshop内のcssとimgフォルダとindex.htmlのファイルをそれぞれアップロードしていきます。
まずは、以下のようにメニューから「Upload folder」をクリックしましょう。
以下のようにweb-workshop内にある「css」のフォルダをクリックしてアップロードしましょう。
※ web-workshopフォルダはアップロードしないでください。
アップロード後、以下のように「css」という名前のフォルダがあることを確認しましょう。
同様に「img」フォルダをアップロードしていきます。
以下のようにメニューから「Upload folder」をクリックしましょう。
以下のようにweb-workshop内にある「img」のフォルダをクリックしてアップロードしましょう。
最後に「index.html」という名前のファイルをアップロードしていきます。
以下のようにメニューから「Upload file」をクリックしましょう。
以下のようにweb-workshop内にある「index.html」のファイルをクリックしてアップロードしましょう。
最後に「css」と「img」という名前のフォルダ、「index.html」という名前のファイルがあることを確認しましょう。
上記の「css」と「img」をクリックすると、フォルダ内のファイルが表示されます。フォルダ内に以下のファイルが含まれていることを確認しましょう。
「css」のフォルダ内にある「reset.css」について説明します。Chrome/Firefox/Edgeなど、各ブラウザはそれぞれデフォルトで効くCSSを持っています。何もしないと見え方が微妙に変わるので、デフォルトのCSSをリセットしてブラウザごとの表示の差異をなくすために書くのが「reset.css」の役割です。
WebページのCSSは、「style.css」のファイルに記述していきます。
完成ページを確認しよう
今回は、前半で学んだHTML・CSSの内容で以下のWebページを作成してみます。
学習した内容を振り返りながら進めてみましょう！
HTMLの基本構造を理解しよう
HTMLでは文書全体に関するタグが用意されています。HTMLの基本構造やWebページのレイアウトを押さえておきましょう。
HTMLの基本構造
HTMLファイルは、次のような基本的な構造を持ちます。
最新バージョンであるHTML5では、以下のように記述します。
HTML文書の基本構造
1
2
3
4
5
6
7
8
9
<!DOCTYPE html>
<html>
<head>
<!-- 文書に関する情報 -->
</head>
<body>
<!-- 文書本体 -->
</body>
</html>
body要素の中に他の要素を配置することで、ブラウザ側に文書のコンテンツを示す部分だと解釈させることができます。
ページのタイトル
head要素には、文書に関する情報を指定することができます。
例えばhead内でtitle要素を使うと、ページのタイトルを指定することができます。このタイトルはページが読み込まれたときにブラウザのタブに表示されます。
例えば、以下のような「index.html」というHTMLファイルがあるとします。
index.html | ページのタイトルを指定する
1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html>
<head>
<title>HTMLの基礎を学ぼう</title>
</head>
<body>
<img src="img/logo.png">
<h1>HTMLの概要を学ぼう</h1>
<p>HTMLとは「HyperText Markup Language」の略です。</p>
<a href="http://www.htmq.com">HTMLクイックリファレンス</a>
</body>
</html>
head内にtitle要素でページのタイトルを指定することで、以下のようにブラウザのタグにファイル名ではなく、ページのタイトルとしてtitleタグで囲ったテキストを表示することができます。
基本的なWebサイトのレイアウト
さまざまな形のWebサイトがありますが、「ヘッダー、フッター、メイン」を持つ基本的なWebサイトのレイアウトを押さえておきましょう。
Pikawakaのサイトも基本的には、上記のレイアウトになります。
HTML5では、ヘッダー、フッター、メインのように基本的なページの構造を表すタグが追加されました。
| 要素 | 意味 | タグ |
|---|---|---|
| header | ヘッダーであることを意味する | <header>と</header> |
| main | 文書内の主要な内容を意味する | <main>と</main> |
| footer | フッターであることを意味する | <footer>と</footer> |
これらの要素はbody要素の中に配置し、ブラウザの画面上に表示させます。
body要素の中にヘッダー、メイン、フッターを配置する
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<header>
<!-- サイトロゴやメニューなど -->
</header>
<main>
<!-- ページのメインとなるコンテンツ -->
</main>
<footer>
<!-- サイトの連絡先や著作権に関する情報 -->
</footer>
</body>
</html>
head要素とheader要素は、全く別の要素なので注意しよう！
手を動かしてみよう
今回作るWebサイトも以下の画像のように基本的なレイアウトのheader, main, footerの三部構成になっております。
基本的にHTMLを作成するときは、上から順番に作っていくのでまずはheaderから作っていきましょう。
headerを作成しよう！
まずは、index.html を開いて下さい。
現在 index.html のファイルの中身は以下の記述になっているはずです。
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Pikawakaワークショップ</title>
<meta name="description" content="">
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
</body>
</html>
以下のようにヘッダーを作成するためのheaderタグを記述しましょう。
index.html | headerタグを記述する
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Pikawakaワークショップ</title>
<meta name="description" content="">
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header></header>
</body>
</html>
このheaderタグの中にヘッダーの内容を記述していきます。
headerの見本を見てみると、薄い青色の背景色であることが分かります。
headerタグに背景色を指定しましょう。
style.cssを開いてください。
style.cssは現在以下のような記述になっているはずです。
style.css -->
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
/*======================
header
======================*/
/*=======================
ニュース
====================*/
/*========================
Pikawakaワークショップで学習する内容
========================*/
/*========================
プログラミング言語の特徴
========================*/
/*========================
footer
========================*/
header と書かれているコメントの下に、headerに適用するスタイルを追加していきましょう。
以下のように style.css を編集して下さい。
style.css | 背景色のスタイルを適用
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
/*======================
header
======================*/
header {
background-color: #ebf1ff;
padding: 38px 0 28px;
}
/*=======================
ニュース
====================*/
/*========================
Pikawakaワークショップで学習する内容
========================*/
/*========================
プログラミング言語の特徴
========================*/
/*========================
footer
========================*/
プレビューで確認してみます。
プレビューを確認すると、以下の画像のように薄い青色の背景色がヘッダーに表示されていることが分かります。
それではheaderの中身を作っていきます。
まず完成サイトのコンテンツの横幅は500pxで作られているので、コンテンツが必ず500pxの幅におさまるようにスタイルを制御していきます。
以下のように index.html ファイルを編集していきましょう。
index.html | headerの横幅を制御
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Pikawakaワークショップ</title>
<meta name="description" content="">
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header class="header">
<div class="container">
</div>
</header>
</body>
</html>
index.htmlファイルの編集が完了したら、style.cssファイルを開いてください。
次に、style.cssを以下のように編集しましょう。
style.css
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
body {
color: #000000;
}
.container {
margin: 0 auto;
width: 500px;
}
img {
width: 100%;
}
/*======================
header
======================*/
header {
background-color: #ebf1ff;
padding: 38px 0 28px;
}
/*=======================
ニュース
====================*/
/*========================
Pikawakaワークショップで学習する内容
========================*/
/*========================
プログラミング言語の特徴
========================*/
/*========================
footer
========================*/
今回の編集では、サイト全体の文字色を body セレクタの color プロパティを指定して定義しています。
そして .container というクラスセレクタに幅500pxを指定することで、必ず500pxの範囲内にコンテンツが表示されるように制御しています。
margin: 0 auto; を指定することで、500pxに指定した幅がサイト全体の真ん中寄せになって表示されます。
この幅500pxの真ん中寄せしたコンテンツの中に、ロゴとサブタイトルを表示します。
それでは、ロゴとサブタイトルを表示していきましょう。
以下のように index.html ファイルを編集して下さい。
index.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
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Pikawakaワークショップ</title>
<meta name="description" content="">
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header class="header">
<div class="container">
<h1 class="header-title">
<img src="img/logo.png" alt="Pikawakaワークショップ">
</h1>
<p class="header-subtitle">
Pikawakaワークショップで勉強する内容
</p>
</div>
</header>
</body>
</html>
サイトのロゴはWebサイトの中で最も強調させて表示したいので、h1タグで囲っています。
そしてロゴ画像を表示するために img要素を使いました。
img は画像を表示するための要素になります。
src属性に画像ファイルのパスを指定します。index.html と同じ階層に img というフォルダがあります。 img フォルダを展開して、logo.pngというファイルがありますが、その画像ファイルまでのパスをsrc属性に指定することで画像を表示できています。
1
<img src="img/logo.png" alt="Pikawakaワークショップ">
またalt属性を利用することで、ネットワークなどが悪く画像が表示できない場合に代わりにどのような画像が表示されているかというテキストをalt属性を使えば表示できます。
それでは新たに追加したロゴとサブタイトルに対してスタイルを適用していきましょう。
style.css を以下のように編集して下さい。
style.css | ロゴとサブタイトルにスタイルを追加
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
body {
color: #000000;
}
.container {
margin: 0 auto;
width: 500px;
}
img {
width: 100%;
}
/*======================
header
======================*/
header {
background-color: #ebf1ff;
padding: 38px 0 28px;
}
.header-title {
margin: 0 auto 26px;
width: 340px;
}
.header-subtitle {
color: #1551e8;
font-size: 14px;
font-weight: bold;
letter-spacing: 0.1em;
text-align: center;
}
/*=======================
ニュース
====================*/
/*========================
Pikawakaワークショップで学習する内容
========================*/
/*========================
プログラミング言語の特徴
========================*/
/*========================
footer
========================*/
編集が完了したら、「Run」ボタンを押して、プレビューで表示結果を確認してみましょう。
以下のような表示になっていますか？
まずロゴの表示のスタイルについてですが、以下のスタイルを指定することで340pxの幅でロゴの画像を表示しています。
そしてサブタイトルとmarginを空けたいので26pxの外側の余白を指定しています。
1
2
3
4
.header-title {
margin: 0 auto 26px;
width: 340px;
}
以下のようにサブタイトルにはテキストに関するスタイルを適用させ、真ん中寄せで表示しています。
1
2
3
4
5
6
7
.header-subtitle {
color: #1551e8;
font-size: 14px;
font-weight: bold;
letter-spacing: 0.1em;
text-align: center;
}
これでheaderのコーディングは完了なので、続いてメインコンテンツをマークアップしていきましょう。
メインコンテンツを作成しよう
それでは枠線で囲んでいるメインコンテンツを作成していきましょう。
index.html を開いて下さい。メインコンテンツをマークアップするための main タグを追加しましょう。
以下のように編集して下さい。
index.html | mainタグを追加
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
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Pikawakaワークショップ</title>
<meta name="description" content="">
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header class="header">
<div class="container">
<h1 class="header-title">
<img src="img/logo.png" alt="Pikawakaワークショップ">
</h1>
<p class="header-subtitle">
Pikawakaワークショップで勉強する内容
</p>
</div>
</header>
<main></main>
</body>
</html>
mainタグを追加できれば、タグの中身を作成していきましょう。
以下の画像の赤枠線で囲っている箇所を作成していきましょう。
index.html を以下のように編集して下さい。
index.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
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Pikawakaワークショップ</title>
<meta name="description" content="">
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header class="header">
<div class="container">
<h1 class="header-title">
<img src="img/logo.png" alt="Pikawakaワークショップ">
</h1>
<p class="header-subtitle">
Pikawakaワークショップで勉強する内容
</p>
</div>
</header>
<main>
<!-- ニュース -->
<div class="news">
<div class="container">
</div>
</div>
</main>
</body>
</html>
追加した以下のタグは、先ほどの画像の赤枠部分（お知らせ）をコーディングするためのタグになります。
1
2
3
4
5
<!-- ニュース -->
<div class="news">
<div class="container">
</div>
</div>
ニュースに関しても、ヘッダーと同じように幅500px内にコンテンツを表示するために container クラスで囲っています。
それではお知らせ部分の中身を作成していきます。
以下のように index.html を編集して下さい。
index.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
34
35
36
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Pikawakaワークショップ</title>
<meta name="description" content="">
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header class="header">
<div class="container">
<h1 class="header-title">
<img src="img/logo.png" alt="Pikawakaワークショップ">
</h1>
<p class="header-subtitle">
Pikawakaワークショップで勉強する内容
</p>
</div>
</header>
<main>
<!-- ニュース -->
<div class="news">
<div class="container">
<div class="news-item">
<time class="news-data" datetime="2023-08-13">2023/08/13</time>
<span class="news-title">Pikawakaワークショップ開講！</span>
</div>
</div>
</div>
</main>
</body>
</html>
新しく追加したタグは以下になります。追加したタグにスタイルを適用していきましょう。
1
2
3
4
<div class="news-item">
<time class="news-data" datetime="2023-08-13">2023/08/13</time>
<span class="news-title">Pikawakaワークショップ開講！</span>
</div>
style.cssを開いて、以下のように編集して下さい。
style.css | お知らせ部分のスタイルを追加 -->
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
body {
color: #000000;
}
.container {
margin: 0 auto;
width: 500px;
}
img {
width: 100%;
}
/*======================
header
======================*/
header {
background-color: #ebf1ff;
padding: 38px 0 28px;
}
.header-title {
margin: 0 auto 26px;
width: 340px;
}
.header-subtitle {
color: #1551e8;
font-size: 14px;
font-weight: bold;
letter-spacing: 0.1em;
text-align: center;
}
/*=======================
ニュース
====================*/
.news {
margin: 60px 0;
}
.news-item {
border: 1px solid #dee3e7;
padding: 13px;
}
.news-data {
color: #1551e8;
display: inline-block;
font-size: 14px;
font-weight: bold;
letter-spacing: 0.1em;
margin-right: 30px;
}
.news-title {
font-size: 16px;
}
/*========================
Pikawakaワークショップで学習する内容
========================*/
/*========================
プログラミング言語の特徴
========================*/
/*========================
footer
========================*/
お知らせで追加したhtmlとcssを確認していきましょう。
一番外枠の .news セレクタですが、お知らせの次のコンテンツとheaderとの間に60pxのmarginが空いているので、お知らせコンテンツの上下に60pxのマージンを開けています。
1
2
3
.news {
margin: 60px 0;
}
続いてお知らせの中身の部分ですが、お知らせは薄いグレーの枠線で引いてあるので、news-itemに薄いグレーの枠線を引きます。
またお知らせの中身と枠線に13pxの余白があるので、news-itemクラスセレクタに13pxのpaddingを設定します。
1
2
3
4
<div class="news-item">
<time class="news-data" datetime="2023-08-13">2023/08/13</time>
<span class="news-title">Pikawakaワークショップ開講！</span>
</div>
1
2
3
4
.news-item {
border: 1px solid #dee3e7;
padding: 13px;
}
そして、日付には青色の文字色や太文字などテキストに関する装飾と、横並びのコンテンツとmarginを変えるために右側のコンテンツに30pxのmarginを空けています。お知らせの内容に関しては、黒文字で文字色を変更する必要はないので文字サイズのスタイルだけを適用させます。
1
2
3
4
5
6
7
8
9
10
11
12
.news-data {
color: #1551e8;
display: inline-block;
font-size: 14px;
font-weight: bold;
letter-spacing: 0.1em;
margin-right: 30px;
}
.news-title {
font-size: 16px;
}
ここまでスタイルを反映できれば、お知らせ部分が追加されているかプレビューで確認してみましょう。
それでは続いて、以下の画像で赤枠で囲っている「Pikawakaワークショップで学習する内容」を追加していきます。
index.html を開いて下さい。
index.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
34
35
36
37
38
39
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Pikawakaワークショップ</title>
<meta name="description" content="">
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header class="header">
<div class="container">
<h1 class="header-title">
<img src="img/logo.png" alt="Pikawakaワークショップ">
</h1>
<p class="header-subtitle">
Pikawakaワークショップで勉強する内容
</p>
</div>
</header>
<main>
<!-- ニュース -->
<div class="news">
<div class="container">
<div class="news-item">
<time class="news-data" datetime="2023-08-13">2023/08/13</time>
<span class="news-title">Pikawakaワークショップ開講！</span>
</div>
</div>
</div>
<!-- Pikawakaワークショップで学習する内容 -->
<div class="curriculum">
</div>
</main>
</body>
</html>
追加したcurriculumクラスセレクタに「Pikawakaワークショップで学習する内容」のコンテンツを追加していきます。
1
2
3
<!-- Pikawakaワークショップで学習する内容 -->
<div class="curriculum">
</div>
まずタイトルを追加しましょう。index.html を以下のように編集して下さい。
index.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
34
35
36
37
38
39
40
41
42
43
44
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Pikawakaワークショップ</title>
<meta name="description" content="">
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header class="header">
<div class="container">
<h1 class="header-title">
<img src="img/logo.png" alt="Pikawakaワークショップ">
</h1>
<p class="header-subtitle">
Pikawakaワークショップで勉強する内容
</p>
</div>
</header>
<main>
<!-- ニュース -->
<div class="news">
<div class="container">
<div class="news-item">
<time class="news-data" datetime="2023-08-13">2023/08/13</time>
<span class="news-title">Pikawakaワークショップ開講！</span>
</div>
</div>
</div>
<!-- Pikawakaワークショップで学習する内容 -->
<div class="curriculum">
<div class="container">
<h2 class="curriculum-title">
Pikawakaワークショップで学習する内容
</h2>
</div>
</div>
</main>
</body>
</html>
それでは追加したタイトルをスタイリングしていきましょう。
style.css を開いて以下のように編集して下さい。
style.css
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
body {
color: #000000;
}
.container {
margin: 0 auto;
width: 500px;
}
img {
width: 100%;
}
/*======================
header
======================*/
header {
background-color: #ebf1ff;
padding: 38px 0 28px;
}
.header-title {
margin: 0 auto 26px;
width: 340px;
}
.header-subtitle {
color: #1551e8;
font-size: 14px;
font-weight: bold;
letter-spacing: 0.1em;
text-align: center;
}
/*=======================
ニュース
====================*/
.news {
margin: 60px 0;
}
.news-item {
border: 1px solid #dee3e7;
padding: 13px;
}
.news-data {
color: #1551e8;
display: inline-block;
font-size: 14px;
font-weight: bold;
letter-spacing: 0.1em;
margin-right: 30px;
}
.news-title {
font-size: 16px;
}
/*========================
Pikawakaワークショップで学習する内容
========================*/
.curriculum {
margin-bottom: 60px;
}
.curriculum-title {
border-bottom: 1px solid #1551e8;
color: #1551e8;
font-size: 18px;
font-weight: bold;
letter-spacing: 0.1em;
margin-bottom: 28px;
padding-bottom: 16px;
}
/*========================
プログラミング言語の特徴
========================*/
/*========================
footer
========================*/
「Pikawakaワークショップで学習する内容」もの次のコンテンツに60pxのマージンを開けます。
1
2
3
.curriculum {
margin-bottom: 60px;
}
そしてcurriculum-titleクラスセレクタには、目立つようにテキストに関するスタイリングと、言語ごとのロゴ画像と余白を開けるために余白に関するスタイルを定義します。
1
2
3
4
5
6
7
8
9
.curriculum-title {
border-bottom: 1px solid #1551e8;
color: #1551e8;
font-size: 18px;
font-weight: bold;
letter-spacing: 0.1em;
margin-bottom: 28px;
padding-bottom: 16px;
}
ここまで終われば、「Run」を押してプレビューで確認してみましょう。
以下のように表示されていれば大丈夫です。
それでは次に、言語ごとのコンテンツを表示していきましょう。
index.html を開いて、以下のように編集して下さい。
index.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
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
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Pikawakaワークショップ</title>
<meta name="description" content="">
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header class="header">
<div class="container">
<h1 class="header-title">
<img src="img/logo.png" alt="Pikawakaワークショップ">
</h1>
<p class="header-subtitle">
Pikawakaワークショップで勉強する内容
</p>
</div>
</header>
<main>
<!-- ニュース -->
<div class="news">
<div class="container">
<div class="news-item">
<time class="news-data" datetime="2023-08-13">2023/08/13</time>
<span class="news-title">Pikawakaワークショップ開講！</span>
</div>
</div>
</div>
<!-- Pikawakaワークショップで学習する内容 -->
<div class="curriculum">
<div class="container">
<h2 class="curriculum-title">
Pikawakaワークショップで学習する内容
</h2>
<div class="curriculum-items">
<div class="curriculum-item first">
<p class="curriculum-item-title">
HTML
</p>
<div class="curriculum-item-img">
<img src="img/html.png" alt="HTML">
</div>
</div>
<div class="curriculum-item second">
<p class="curriculum-item-title">
CSS
</p>
<div class="curriculum-item-img">
<img src="img/css.png" alt="CSS">
</div>
</div>
<div class="curriculum-item third">
<p class="curriculum-item-title">
Ruby
</p>
<div class="curriculum-item-img">
<img src="img/ruby.png" alt="Ruby">
</div>
</div>
</div>
</div>
</div>
</main>
</body>
</html>
今回新しく追加したタグは以下になります。
divタグで囲っているので、言語ごとのロゴ画像が縦に表示されるはずですが、見本を見てみると横並びになっているので
cssで横並びで表示するように制御していきます。
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
<div class="curriculum-items">
<div class="curriculum-item first">
<p class="curriculum-item-title">
HTML
</p>
<div class="curriculum-item-img">
<img src="img/html.png" alt="HTML">
</div>
</div>
<div class="curriculum-item second">
<p class="curriculum-item-title">
CSS
</p>
<div class="curriculum-item-img">
<img src="img/css.png" alt="CSS">
</div>
</div>
<div class="curriculum-item third">
<p class="curriculum-item-title">
Ruby
</p>
<div class="curriculum-item-img">
<img src="img/ruby.png" alt="Ruby">
</div>
</div>
</div>
style.css を開いて、以下のように編集して下さい。
style.css -->
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
111
112
113
114
115
116
117
118
119
body {
color: #000000;
}
.container {
margin: 0 auto;
width: 500px;
}
img {
width: 100%;
}
/*======================
header
======================*/
header {
background-color: #ebf1ff;
padding: 38px 0 28px;
}
.header-title {
margin: 0 auto 26px;
width: 340px;
}
.header-subtitle {
color: #1551e8;
font-size: 14px;
font-weight: bold;
letter-spacing: 0.1em;
text-align: center;
}
/*=======================
ニュース
====================*/
.news {
margin: 60px 0;
}
.news-item {
border: 1px solid #dee3e7;
padding: 13px;
}
.news-data {
color: #1551e8;
display: inline-block;
font-size: 14px;
font-weight: bold;
letter-spacing: 0.1em;
margin-right: 30px;
}
.news-title {
font-size: 16px;
}
/*========================
Pikawakaワークショップで学習する内容
========================*/
.curriculum {
margin-bottom: 60px;
}
.curriculum-title {
border-bottom: 1px solid #1551e8;
color: #1551e8;
font-size: 18px;
font-weight: bold;
letter-spacing: 0.1em;
margin-bottom: 28px;
padding-bottom: 16px;
}
.curriculum-items {
margin: 0 25px;
}
.curriculum-item {
display: inline-block;
width: 110px;
}
.curriculum-item.first, .curriculum-item.second {
margin-right: 54px;
}
.curriculum-item.first .curriculum-item-title {
color: #f73c00;
}
.curriculum-item.second .curriculum-item-title {
color: #0074bc;
}
.curriculum-item.third .curriculum-item-title {
color: #bc0000;
}
.curriculum-item-title {
font-size: 18px;
margin-bottom: 13px;
text-align: center;
}
/*========================
プログラミング言語の特徴
========================*/
/*========================
footer
========================*/
今回追加したセレクタは、以下になります。
.curriculum-itemクラスセレクタに display: inline-block を書くことにより、各ロゴ画像が110pxの幅で横並びできています。
また margin-right: 54px; を定義することにより、各ロゴ画像の間が54pxの余白があり、均等に並んでいるように見えます。
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
.curriculum-items {
margin: 0 25px;
}
.curriculum-item {
display: inline-block;
width: 110px;
}
.curriculum-item.first, .curriculum-item.second {
margin-right: 54px;
}
.curriculum-item.first .curriculum-item-title {
color: #f73c00;
}
.curriculum-item.second .curriculum-item-title {
color: #0074bc;
}
.curriculum-item.third .curriculum-item-title {
color: #bc0000;
}
スタイルの追加が終わって以下の画像が表示されていれば、大丈夫です。
それでは続いて、「プログラミング言語の特徴」を追加しましょう。
index.html を開いて、以下のように編集して下さい。
index.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
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
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Pikawakaワークショップ</title>
<meta name="description" content="">
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header class="header">
<div class="container">
<h1 class="header-title">
<img src="img/logo.png" alt="Pikawakaワークショップ">
</h1>
<p class="header-subtitle">
Pikawakaワークショップで勉強する内容
</p>
</div>
</header>
<main>
<!-- ニュース -->
<div class="news">
<div class="container">
<div class="news-item">
<time class="news-data" datetime="2023-08-13">2023/08/13</time>
<span class="news-title">Pikawakaワークショップ開講！</span>
</div>
</div>
</div>
<!-- Pikawakaワークショップで学習する内容 -->
<div class="curriculum">
<div class="container">
<h2 class="curriculum-title">
Pikawakaワークショップで学習する内容
</h2>
<div class="curriculum-items">
<div class="curriculum-item first">
<p class="curriculum-item-title">
HTML
</p>
<div class="curriculum-item-img">
<img src="img/html.png" alt="HTML">
</div>
</div>
<div class="curriculum-item second">
<p class="curriculum-item-title">
CSS
</p>
<div class="curriculum-item-img">
<img src="img/css.png" alt="CSS">
</div>
</div>
<div class="curriculum-item third">
<p class="curriculum-item-title">
Ruby
</p>
<div class="curriculum-item-img">
<img src="img/ruby.png" alt="Ruby">
</div>
</div>
</div>
</div>
</div>
<!-- プログラミング言語の特徴 -->
<div class="feature">
<div class="container">
<h2 class="feature-title">
プログラミング言語の特徴
</h2>
</div>
</div>
</main>
</body>
</html>
新しく追加したタグは以下になります。
1
2
3
4
5
6
7
8
<!-- プログラミング言語の特徴 -->
<div class="feature">
<div class="container">
<h2 class="feature-title">
プログラミング言語の特徴
</h2>
</div>
</div>
スタイルは「Pikawakaワークショップで学習する内容」と同じですね。 style.css を開いて編集しましょう。
style.css
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
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
body {
color: #000000;
}
.container {
margin: 0 auto;
width: 500px;
}
img {
width: 100%;
}
/*======================
header
======================*/
header {
background-color: #ebf1ff;
padding: 38px 0 28px;
}
.header-title {
margin: 0 auto 26px;
width: 340px;
}
.header-subtitle {
color: #1551e8;
font-size: 14px;
font-weight: bold;
letter-spacing: 0.1em;
text-align: center;
}
/*=======================
ニュース
====================*/
.news {
margin: 60px 0;
}
.news-item {
border: 1px solid #dee3e7;
padding: 13px;
}
.news-data {
color: #1551e8;
display: inline-block;
font-size: 14px;
font-weight: bold;
letter-spacing: 0.1em;
margin-right: 30px;
}
.news-title {
font-size: 16px;
}
/*========================
Pikawakaワークショップで学習する内容
========================*/
.curriculum {
margin-bottom: 60px;
}
.curriculum-title {
border-bottom: 1px solid #1551e8;
color: #1551e8;
font-size: 18px;
font-weight: bold;
letter-spacing: 0.1em;
margin-bottom: 28px;
padding-bottom: 16px;
}
.curriculum-items {
margin: 0 25px;
}
.curriculum-item {
display: inline-block;
width: 110px;
}
.curriculum-item.first, .curriculum-item.second {
margin-right: 54px;
}
.curriculum-item.first .curriculum-item-title {
color: #f73c00;
}
.curriculum-item.second .curriculum-item-title {
color: #0074bc;
}
.curriculum-item.third .curriculum-item-title {
color: #bc0000;
}
.curriculum-item-title {
font-size: 18px;
margin-bottom: 13px;
text-align: center;
}
/*========================
プログラミング言語の特徴
========================*/
.feature {
margin-bottom: 78px;
}
.feature-title {
border-bottom: 1px solid #1551e8;
color: #1551e8;
font-size: 18px;
font-weight: bold;
letter-spacing: 0.1em;
margin-bottom: 35px;
padding-bottom: 16px;
}
/*========================
footer
========================*/
「プログラミング言語の特徴」のスタイルは完了しました。続いてテーブル部分を作成しましょう。
index.html を開いて、以下のように編集して下さい。
index.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
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
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Pikawakaワークショップ</title>
<meta name="description" content="">
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header class="header">
<div class="container">
<h1 class="header-title">
<img src="img/logo.png" alt="Pikawakaワークショップ">
</h1>
<p class="header-subtitle">
Pikawakaワークショップで勉強する内容
</p>
</div>
</header>
<main>
<!-- ニュース -->
<div class="news">
<div class="container">
<div class="news-item">
<time class="news-data" datetime="2023-08-13">2023/08/13</time>
<span class="news-title">Pikawakaワークショップ開講！</span>
</div>
</div>
</div>
<!-- Pikawakaワークショップで学習する内容 -->
<div class="curriculum">
<div class="container">
<h2 class="curriculum-title">
Pikawakaワークショップで学習する内容
</h2>
<div class="curriculum-items">
<div class="curriculum-item first">
<p class="curriculum-item-title">
HTML
</p>
<div class="curriculum-item-img">
<img src="img/html.png" alt="HTML">
</div>
</div>
<div class="curriculum-item second">
<p class="curriculum-item-title">
CSS
</p>
<div class="curriculum-item-img">
<img src="img/css.png" alt="CSS">
</div>
</div>
<div class="curriculum-item third">
<p class="curriculum-item-title">
Ruby
</p>
<div class="curriculum-item-img">
<img src="img/ruby.png" alt="Ruby">
</div>
</div>
</div>
</div>
</div>
<!-- プログラミング言語の特徴 -->
<div class="feature">
<div class="container">
<h2 class="feature-title">
プログラミング言語の特徴
</h2>
<table class="feature-table">
<tr>
<th>
HTML
</th>
<td>
マークアップ言語
</td>
</tr>
<tr>
<th>
CSS
</th>
<td>
スタイルシート言語
</td>
</tr>
<tr>
<th>
Ruby
</th>
<td>
スクリプト言語
</td>
</tr>
</table>
</div>
</div>
</main>
</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
<table class="feature-table">
<tr>
<th>
HTML
</th>
<td>
マークアップ言語
</td>
</tr>
<tr>
<th>
CSS
</th>
<td>
スタイルシート言語
</td>
</tr>
<tr>
<th>
Ruby
</th>
<td>
スクリプト言語
</td>
</tr>
</table>
表をスタイリングをしていきましょう。
style.css を開いて、以下のように編集して下さい。
style.css -->
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
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
body {
color: #000000;
}
.container {
margin: 0 auto;
width: 500px;
}
img {
width: 100%;
}
/*======================
header
======================*/
header {
background-color: #ebf1ff;
padding: 38px 0 28px;
}
.header-title {
margin: 0 auto 26px;
width: 340px;
}
.header-subtitle {
color: #1551e8;
font-size: 14px;
font-weight: bold;
letter-spacing: 0.1em;
text-align: center;
}
/*=======================
ニュース
====================*/
.news {
margin: 60px 0;
}
.news-item {
border: 1px solid #dee3e7;
padding: 13px;
}
.news-data {
color: #1551e8;
display: inline-block;
font-size: 14px;
font-weight: bold;
letter-spacing: 0.1em;
margin-right: 30px;
}
.news-title {
font-size: 16px;
}
/*========================
Pikawakaワークショップで学習する内容
========================*/
.curriculum {
margin-bottom: 60px;
}
.curriculum-title {
border-bottom: 1px solid #1551e8;
color: #1551e8;
font-size: 18px;
font-weight: bold;
letter-spacing: 0.1em;
margin-bottom: 28px;
padding-bottom: 16px;
}
.curriculum-items {
margin: 0 25px;
}
.curriculum-item {
display: inline-block;
width: 110px;
}
.curriculum-item.first, .curriculum-item.second {
margin-right: 54px;
}
.curriculum-item.first .curriculum-item-title {
color: #f73c00;
}
.curriculum-item.second .curriculum-item-title {
color: #0074bc;
}
.curriculum-item.third .curriculum-item-title {
color: #bc0000;
}
.curriculum-item-title {
font-size: 18px;
margin-bottom: 13px;
text-align: center;
}
/*========================
プログラミング言語の特徴
========================*/
.feature {
margin-bottom: 78px;
}
.feature-title {
border-bottom: 1px solid #1551e8;
color: #1551e8;
font-size: 18px;
font-weight: bold;
letter-spacing: 0.1em;
margin-bottom: 35px;
padding-bottom: 16px;
}
.feature-table {
border-collapse: collapse;
width: 100%;
}
.feature-table th, .feature-table td {
border: 1px solid #a3a3a3;
padding: 10.5px 26px;
text-align: left;
}
.feature-table th {
background-color: #ebf1ff;
color: #1551e8;
font-size: 18px;
font-weight: bold;
letter-spacing: 0.1em;
width: 150px;
}
.feature-table td {
font-size: 14px;
letter-spacing: 0.1em;
}
/*========================
footer
========================*/
新しく追加したスタイルは以下になります。
テーブルの枠線や余白にスタイリングをし、セルの中身のテキストに関しても装飾しました。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
.feature-table {
border-collapse: collapse;
width: 100%;
}
.feature-table th, .feature-table td {
border: 1px solid #a3a3a3;
padding: 10.5px 26px;
text-align: left;
}
.feature-table th {
background-color: #ebf1ff;
color: #1551e8;
font-size: 18px;
font-weight: bold;
letter-spacing: 0.1em;
width: 150px;
}
.feature-table td {
font-size: 14px;
letter-spacing: 0.1em;
}
ここまで入力して以下のように表示されていれば、大丈夫です。
mainコンテンツの記述は終了です。
footerを作成しよう
最後にfooterを作成しましょう。
index.htmlを開いて、以下のように編集して下さい。
index.html | footerの追加
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
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Pikawakaワークショップ</title>
<meta name="description" content="">
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header class="header">
<div class="container">
<h1 class="header-title">
<img src="img/logo.png" alt="Pikawakaワークショップ">
</h1>
<p class="header-subtitle">
Pikawakaワークショップで勉強する内容
</p>
</div>
</header>
<main>
<!-- ニュース -->
<div class="news">
<div class="container">
<div class="news-item">
<time class="news-data" datetime="2023-08-13">2023/08/13</time>
<span class="news-title">Pikawakaワークショップ開講！</span>
</div>
</div>
</div>
<!-- Pikawakaワークショップで学習する内容 -->
<div class="curriculum">
<div class="container">
<h2 class="curriculum-title">
Pikawakaワークショップで学習する内容
</h2>
<div class="curriculum-items">
<div class="curriculum-item first">
<p class="curriculum-item-title">
HTML
</p>
<div class="curriculum-item-img">
<img src="img/html.png" alt="HTML">
</div>
</div>
<div class="curriculum-item second">
<p class="curriculum-item-title">
CSS
</p>
<div class="curriculum-item-img">
<img src="img/css.png" alt="CSS">
</div>
</div>
<div class="curriculum-item third">
<p class="curriculum-item-title">
Ruby
</p>
<div class="curriculum-item-img">
<img src="img/ruby.png" alt="Ruby">
</div>
</div>
</div>
</div>
</div>
<!-- プログラミング言語の特徴 -->
<div class="feature">
<div class="container">
<h2 class="feature-title">
プログラミング言語の特徴
</h2>
<table class="feature-table">
<tr>
<th>
HTML
</th>
<td>
マークアップ言語
</td>
</tr>
<tr>
<th>
CSS
</th>
<td>
スタイルシート言語
</td>
</tr>
<tr>
<th>
Ruby
</th>
<td>
スクリプト言語
</td>
</tr>
</table>
</div>
</div>
</main>
<footer>
<div class="container">
<small class="copyright">© 2022 Pikawaka. All rights reserved.</small>
</div>
</footer>
</body>
</html>
今回新たに追加したタグは以下の内容になります。
© と書くと、©︎マークが表示される特殊文字になります。
こちらは著作権を表す文字になります。
1
2
3
4
5
<footer>
<div class="container">
<small class="copyright">© 2023 Pikawaka. All rights reserved.</small>
</div>
</footer>
それでは、追加したfooterにスタイルを追加しましょう。
style.css を開いて下さい。
style.css -->
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
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
body {
color: #000000;
}
.container {
margin: 0 auto;
width: 500px;
}
img {
width: 100%;
}
/*======================
header
======================*/
header {
background-color: #ebf1ff;
padding: 38px 0 28px;
}
.header-title {
margin: 0 auto 26px;
width: 340px;
}
.header-subtitle {
color: #1551e8;
font-size: 14px;
font-weight: bold;
letter-spacing: 0.1em;
text-align: center;
}
/*=======================
ニュース
====================*/
.news {
margin: 60px 0;
}
.news-item {
border: 1px solid #dee3e7;
padding: 13px;
}
.news-data {
color: #1551e8;
display: inline-block;
font-size: 14px;
font-weight: bold;
letter-spacing: 0.1em;
margin-right: 30px;
}
.news-title {
font-size: 16px;
}
/*========================
Pikawakaワークショップで学習する内容
========================*/
.curriculum {
margin-bottom: 60px;
}
.curriculum-title {
border-bottom: 1px solid #1551e8;
color: #1551e8;
font-size: 18px;
font-weight: bold;
letter-spacing: 0.1em;
margin-bottom: 28px;
padding-bottom: 16px;
}
.curriculum-items {
margin: 0 25px;
}
.curriculum-item {
display: inline-block;
width: 110px;
}
.curriculum-item.first, .curriculum-item.second {
margin-right: 54px;
}
.curriculum-item.first .curriculum-item-title {
color: #f73c00;
}
.curriculum-item.second .curriculum-item-title {
color: #0074bc;
}
.curriculum-item.third .curriculum-item-title {
color: #bc0000;
}
.curriculum-item-title {
font-size: 18px;
margin-bottom: 13px;
text-align: center;
}
/*========================
プログラミング言語の特徴
========================*/
.feature {
margin-bottom: 78px;
}
.feature-title {
border-bottom: 1px solid #1551e8;
color: #1551e8;
font-size: 18px;
font-weight: bold;
letter-spacing: 0.1em;
margin-bottom: 35px;
padding-bottom: 16px;
}
.feature-table {
border-collapse: collapse;
width: 100%;
}
.feature-table th, .feature-table td {
border: 1px solid #a3a3a3;
padding: 10.5px 26px;
text-align: left;
}
.feature-table th {
background-color: #ebf1ff;
color: #1551e8;
font-size: 18px;
font-weight: bold;
letter-spacing: 0.1em;
width: 150px;
}
.feature-table td {
font-size: 14px;
letter-spacing: 0.1em;
}
/*========================
footer
========================*/
footer {
background-color: #1551e8;
padding: 14.5px 0;
}
footer .container {
text-align: center;
}
footer .copyright {
color: #ffffff;
font-size: 14px;
font-weight: bold;
letter-spacing: 0.1em;
text-align: center;
}
今回新たに追加したスタイルは、以下の内容になります。
こちらの記述でfooterの背景色を指定して、文字を中央寄せにしテキストを装飾したら完成です。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
footer {
background-color: #1551e8;
padding: 14.5px 0;
}
footer .container {
text-align: center;
}
footer .copyright {
color: #ffffff;
font-size: 14px;
font-weight: bold;
letter-spacing: 0.1em;
text-align: center;
最後に別タブで完成ページを開き、以下の画像と同じ見た目になりましたら
Webサイト制作は完了です。
お疲れ様でした！
さいごに
下記のリンクからアンケートフォームにご記入お願いします。
役に立ったらSHARE♪
