はじめてのWebサイト

Sushi

Webページの編集
Card 1 of 10

I’m Learning: HTML/CSS

これから新しいWebページを作ります！今回は本のリストを作りますが、HTMLを使えば何でも好きなWebページが作れます！
まず、「http://coderdojo-hiroshima.com/My-First-Website-ja.zip」
1 からHTMLのソースファイルをダウンロードします。
my-first-websiteのフォルダに移動して、 about-me.htmlのファイルを開きます。webページがブラウザで表示されます。

このファイルを開く

2 次に、同じファイルをテキストエディタで開きます。

ブラウザ

テキストエディタSushi

Webページの編集
Card 1 of 10

I’m Learning: HTML/CSS

3 パソコンの画面上で、ブラウザとテキストエディタを横に並べます。

ブラウザ

テキストエディタ

4 テキストエディタで、自分の自己紹介になるように変更します。

5 変更したらテキストを保存します。（ファイル > 保存）
保存したら、F5を押してブラウザの画面を再読み込みします。

再読み込み 何が起きましたか？
ボタン

6

新しい段落を追加してみましょう。段落は<p> と </p> で囲みます。例えば、<p>私はWebページの作り方を勉強しています。</p>のように使います。<p>は段落の始まりのタグで、</p> は終わりのタグです。

7

変更したらもう一度保存して再読み込みします。
このように、Webページはテキストで作られています。テキストの表示方
法はタグでコントロールされています。
pの代わりにh1やh2のタグで囲んだらどうなりますか？
次のようにstrongで囲んだらどうなりますか？:<p>私の名前は<strong>Ling Ling</strong>です。</p>はじめてのWebサイト
新しいWebページ

Sushi

Card 2of 10

I’m Learning: HTML/CSS

1 my-first-websiteのフォルダに移動してblank.htmlのファイルをコピーします。
コピーするには、 CTRL とCを同時に押します。

2 コピーしたファイルを同じフォルダに貼り付けます。
ファイルを貼り付けるには、CTRLとVを同時に押します。

ファイルを貼り付けると、以下のようになります。

blank.htmlのコピーは、blank - コピー.htmlというファイル名になります。コピーされたファイルを使って、好きな本を紹介するWebページを作りましょう。
3 ファイルを選択して F2 を押します。 blank - コピーのファイル名がハイライトされます。
4 ファイル名をbooks.htmlに変更します。

books.htmlに変更

Sushi

新しいWebページ
Card 2of 10

I’m Learning: HTML/CSS

ファイル名を変更すると以下のようになります。

これでbooks.html.のWebページができました。この時点では、中身はblank.htmlと同じです。
5 Webページで好きな本を紹介できるように、books.htmlを変更しましょう。以下の例を参考にして、テキストを編集します。画像をダウンロードしてWebページに貼り付ける方法はわかりますか？

↻変更を反映したいときは必ず保存します。保存するには、 CTRL と Sを同時に押します。こまめに保存することで、パソコンが突然落ちても途中から続けることができます。
保存した内容を反映するためには、更新ボタンを押してブラウザを更新します。
リストの作り方はわかりましたか？
リストはul要素の中にliタグで記述します。
ulの代わりにolを使うとどうなりますか？

はじめてのWebサイト

Sushi
1

ホームページ
Card 3of 10

I’m Learning: HTML/CSS

my-first-websiteのフォルダに移動して、もう一度blank.htmlをコピーして、ファイル名をindex.htmlにします。index.htmlが最初に開くページ（ホームページ）になります。
ホームページのファイル名には、index.htmlという名前がよく使われます。
ファイルのコピーはCard2で説明しています！
コピーしてファイル名を変更すると以下のようになります。

2 以下を参考にして、index.htmlを変更します。"Ling Ling"のところは自分の名前に変えてください。

ホームページ

Sushi

Card 3of 10

I’m Learning: HTML/CSS

index.htmlのページには２つのリンクがあります。リンクをクリックすると、先ほど作ったページに移動するようにします。
<a href="books.html">私の好きな本</a>

移動したいページのファイル名<a href="books.html">好きな本</a>

Webページに表示するテキスト
文字の打ち間違いに気をつけましょう。書き方を少しでも間違えると、コンピュータは正しく理解してくれなくなります。
aタグで囲みます: <a href="ファイル名">テキスト</a>hrefを書きます: <a href="ファイル名">テキスト</a>
ファイル名を書きます: <a href="ファイル名">テキスト</a>
リンクのテキストを書きます: <a href="ファイル名">テキスト</a>hrefの要素はダブルクォーテーション" "で囲うことに注意してください。ダブ
ルクォーテーションはaタグの中に入れます。

やってみよう！
以下の例を参考に、ページを３つ増やしてみましょう。.
例に無いページを作っても構いません。
（例）
ファイル名
タイトル
Q.

What happens?

私の家族
私のペット
好きな音楽
好きな映画
趣味
尊敬する人

family.html
pets.html
songs.html
movies.html
hobbies.html
heroes.html
tags instead of p?

はじめてのWebサイト

Sushi

スタイルの追加
Card 4of 10

I’m Learning: HTML/CSS

index.htmlのページが少しシンプルです。CSSを使って見た目を変えてみよう！

このページが・・・

CSSを使うとこうなります！

CSSファイルは、Webページの見た目に関する情報が書かれています。HTML
ファイルとは別になっていて、次のようにHTMLファイルにリンクされています。
<link type="text/css" rel="stylesheet" href="css/home.css" />1 index.htmlをテキストエディタで開くと、5行目にCSSのリンクが書かれています。これはcssフォルダのhome.cssによってページの見た目がコントロールされていることを表しています。

2 cssのフォルダに移動すると、home.cssが置いてあります。

Sushi

スタイルの追加
Card 4of 10

I’m Learning: HTML/CSS

3 index.htmlをブラウザで開いて、home.cssをテキストエディタで開き、２つを横に並べます。
home.cssのファイルの中には次のように書かれています。
body {
font-family: sans-serif;}

これは、HTMLファイルのbody要素をどのように修飾するかを指示しています。ここでは、「全てのbody要素のフォントをsans-serifにしなさい」と言っています。

4body要素に背景画像を追加します。また、h1要素にも新しい見た目のルールを追加します。home.cssの中身が以下のようになるように修正してください。
body {
font-family: sans-serif;
background-image: url('../images/ling-ling.png');}h1 {padding: 12px;
background-color: black;color: white;border-radius: 10px;}

5 ルールを一つ追加するごとにファイルを保存してください。追加したルー
ルがどのように見た目を変えるのか分かるように、ルールを追加する度にブラウザを更新してみましょう。
一つの要素が複数のルールを持っていることに注意してください。
ルールは全て、プロパティ(例えばcolorなど)、コロン (:)、値(例えばwhiteなど)の順で書かれて、最後にセミコロン (;) で終わります。
ルールはカッコ({ と })で囲まれていることにも注意してください。.

はじめてのWebサイト
ページのリンク

Sushi

Card 5of 10

I’m Learning: HTML/CSS

全てのページにリンクを貼り付けてみましょう。 そうすることで、Webサイトのどのページにいても、好きなページに移動できるようになります。現時点では、リンクはindex.htmlにだけ書かれています。
index.htmlを開いて、リンクのHTMLのコードをコピーし、他のページ (aboutme.html, books.html, family.htmlなど)に貼り付けます。ホームページへ戻る
リンクも追加します。

1 index.htmlを開いて、リンクのHTMLコードを選択します。

コードを選択するには、始めのulタタグの前をクリックします。
マウスをクリックしたまま、選択したいところまでドラッグします。
終わりのulボボタンまでドラッグしたら、クリックボタンの指を放します。

2

選択したときに、すべてのul要素を選択できているか確認してください。
以下の２つの例を確認してみましょう。

うまく選択できてない!
OK!
CTRLとCを押してコピーします。

ページのリンク

Sushi

Card 5of 10

I’m Learning: HTML/CSS

4 これまで作ったWebページをどれか一つ開いてください。ここでは自己紹介のページ (about-me.html)を使って説明します。
5 h1タグの前をクリックして、CTRLVで貼り付けます。

ここをクリック
貼り付けたら以下のようになります。
リンクのコードがどこに貼り付けられたか分かりますか？
コードが見づらかったら、 リターンキー↵を押してh1タグの前で改行す
るとコードが見やすくなります。 (コードを改行してもブラウザには反映されません！)
6

Sを押して保存して、ブラウザで開いてみます。そうすると、h1要素の上にリンクが縦に並んでいるのが確認できます。
次回はリンクをメニューバーのように表示する方法を勉強します。
事前にやっておくことabout-meのリンクの上にホームページへのリンクを追加します。そのあと、他のページにも同じリンクを貼り付けます。
他のページも、h1の前にリンクを貼り付けるようにしてください。
CTRL

追加したリンクはじめてのWebサイト

Sushi
この状態からトップメニュー
Card 6of 10

I’m Learning: HTML/CSS

こうなる

CSS使用後simple.cssを編集します。
CSSの働きが分かるように、ワンステップずつ保存してブラウザで確認してください。

1

1ピクセルの太さの外枠の線を追加します。

2

リストの項目を、1ピクセルの赤い線で囲みます。
3

黒丸を消去します。（デフォルトの状態
では、リストは黒丸が表示されます。）

body {
font-family: sans-serif;}ul {border-style: solid;
border-width: 1px;}
ul {border-style: solid;
border-width: 1px;}
ul li {
border-style: solid;
border-width: 1px;
border-color: red;}ul li {
border-style: solid;
border-width: 1px;
border-color: red;
list-style-type: none;}Sushi4

リストアイテムが横に並ぶようにします。
デフォルトの状態では、リストはブロック要素（改行されて表示される要素）です。
5
リスト全体の上下左右に10ピクセルの隙間をあけます。
6
リストアイテムの左右に10ピクセルの間隔をあけます。

7
border-radiusを使って、リストの外枠の角を丸くします。
背景色を黒色にします。

8

赤い枠を削除して、文字を白色にします。

トップメニュー
Card 6of 10

I’m Learning: HTML/CSS
ul li {
border-style: solid;
border-width: 1px;
border-color: red;
list-style-type: none;
display: inline;}ul {border-style: solid;
border-width: 1px;
padding: 10px;}
ul li {
border-style: solid;
border-width: 1px;
border-color: red;
list-style-type: none;
display: inline;
margin-right: 10px;margin-left: 10px;}
ul {border-style: solid;
border-width: 1px;
padding: 10px;
border-radius: 10px;
background-color: black;}ul li {
border-style: solid;
border-width: 1px;
border-color: red;
list-style-type: none;
display: inline;
margin-right: 10px;
margin-left: 10px;}
ul li a {color: white;}はじめてのWebサイト
メニューリンク

Sushi

Card 7of 10

I’m Learning: HTML/CSS

アンダーラインを消す
マウスオーバーしたとき、青文字にしてアンダーラインをつける
表示しているページを黄色にする
クリックできないようにする
上の図のように変更するには、HTMLとCSSのファイルを書き換えます。

1 HTMLファイルで、同じページのリンクのaタグを削除します。
例えば、about-me.htmlでは<a href="about-me.html">を、books.htmlでは<a href="books.html">を削除します。
変更前
ファイル
about-me.html <ul>

変更後

<ul>
<li><a href="about-me.html"> <li>自己紹介</li><li><a href="books.html">好自己紹介</a></li><li><a href="books.html">好き きな本</a></li><li><a href="family.html">私な本</a></li><li><a href="family.html">私の の家族</a></li><li><a href="pets.html">私の家族</a></li><li><a href="pets.html">私のペ ペット</a></li></ul>
ット</a></li></ul>books.html<li><a href="books.html">好きな本</a></li><li>好きな本</li>他のページでも同じ変更をします。 (例えばfamily.html や pets.html など)。
aタグを削除したリンクはクリックできなくなります。

メニューリンク

Sushi

Card 7of 10

I’m Learning: HTML/CSS

2 リンクを削除したliタグに、selectedのクラスを追加します。
ファイル
about-me.html

変更前

変更後

<ul>
<li>自己紹介</li><li><ahref="books.html">好きな本</a></li><li><ahref="family.html">私の家族</a></li><li><a href="pets.html">
私のペット</a></li>
</ul>

<ul>
<li class="selected">自己紹介</li><li><a href="books.html">好きな本</a></li><li><a href="family.html">私の家族</a></li><li><a href="pets.html">私のペット</a></li></ul>selectedを書いただけでは見た目に何も影響しません（ブラウザを更新しても何も変わっていません）。しかし、こうすることでCSSで識別できるよ
うになり、次のように変更することでリンクを黄色にできます。
ファイル
simple.css

変更前
（無）

ul li.selected {color: yellow;}3

ブラウザを更新するとリンクが黄色になります。li要素のselectedクラスに新しいルールを追加したためです。liではなくli.selectedとすることで、特定のli要素を指定することができます。

4

メニューのリンクのアンダーラインを削除します。
ファイル
変更前
simple.css ul li a {color: white;}

5変更後

マウスオーバーしたときにリンクが青色になりアンダーラインが表示されるようにします。 #99DDFFは16進数で青色を表しています。

変更後
ul li a {color: white;text-decoration: none;}
ul li a:hover {color: #99DDFF;
text-decoration:underline;}はじめてのWebサイト

Sushi

メニューの識別
Card 8of 10

I’m Learning: HTML/CSS

ページにもう一つリストを追加したとき、特に何も区別しなければ、メニューと同じ見た目になってしまいます。
以下の例では、もう一つのリストがメニューと同じ見た目になっています。
ul要素のルール

ulululSushi

メニューの識別
Card 8of 10

I’m Learning: HTML/CSS

見た目が同じになることを避けるために、クラスで識別する必要があります。
<ul class="menu"> ... </ul>

HTMLが修正できたらCSSも修正します。menuクラスのulにだけメニューの見た目が反映されるように変更しましょう。

ul.menu

ulul.menuに反映されるルール

ul.menuulはじめてのWebサイト

Sushi

レスポンシブデザイン
Card 9of 10

I’m Learning: HTML/CSS

レスポンシブデザインは、デスクトップPC、ノートパソコン、タブレット、スマートフ
ォンのどのデバイスでもきれいに表示できるデザインです。表示画面の幅に合わせて、コンテンツのサイズや配置を最適化します。Webサイトをレスポンシブデザインにするため、今回はfloatプロパティを勉強します。
まず、ペットのページで、ペットを飼うコツのリストを追加します。情報はasideタグに入れてください。また、買っているペットの情報はarticleタグに入れてください。

Sushi

レスポンシブデザイン
Card 9of 10

I’m Learning: HTML/CSS

CSSファイルに次のコードを追加します。
article {float: left;border-style: solid;
border-width: 1px;margin-right: 1em;
margin-bottom: 1em;
padding: 1em;}
aside {
float: left;border-style: solid;
border-width: 1px;
padding: 1em;
border-radius: 1em;
background-color: #FFFFC0;}

幅を広くしたとき

やってみよう！
CSSを修正して以下のような見た目にしてください。

幅を狭くしたとき

ヒント
box-shadow: 10px 10px 5px gray;color: #2F5670;
list-style-type: square;
font-size: 14px;

他のプロパティも試してみよう
opacity: 0.5;transform: rotate(30deg);
aside:hover {transition:1s ease-in-out;}border-style:dotted;

はじめてのWebサイト

テーブル

Sushi

Card 10 of 10I’m Learning: HTML/CSS

好きな本のページで、本を5冊紹介して、それぞれの本に10点満点の点数をつけます。今回はテーブルタグを使ってリストにします。

1 simple.css のファイルに以下のコードを追加します。
table, th, td {border: 1px solid white;border-collapse:collapse;}tr {background-color:silver;}th, td {vertical-align: top;
padding: 0.5em;
text-align: left;}

2 books.htmlのページにテーブルタグを追加します。
以下の例を参考にしてください。:<h2>トップ３</h2><table><tr><th>ランキング</th><th>タイトル</th><th>点数</th>
</tr>
<tr>
<td>1</td><td>ハリーポッター</td><td>9/10</td></tr>[ここに残りの行を書きます]</table>tr,th,tdの意味
tr はテーブルの行
th はヘッダーの行
td はテーブルのデータ残りのコードは書けましたか？
余裕があればさらに3行以上追加してみてください。

Sushiテーブル
Card 10 of 10

I’m Learning: HTML/CSS

やってみよう！
1 本の画像を表示する列を追加します。
画像は次のURLからダウンロードできます: www.googlejunior.com
2 本の名前に、購入サイトのリンクを追加します。

One more tag!
marqueeタグを使うと文字が画面を横切るようになります。
<marquee>一番好きな本</marquee>

おめでとう！はじめてのWebサイトが完成しました！