みなさんこんにちは！
今日は「Webページを修正するお仕事」を体験します。
昨日はHTMLを使ってシンプルなページを作りました。今日はすでに用意されているHTMLファイルを編集して、カフェの紹介ページを作るという体験をします。
実際のWeb制作のお仕事では「ゼロから作る」ことももちろんありますが、既にあるページを修正したり内容を変更する仕事がとても多いです。例えば「お店の営業時間が変わったので直してほしい」「メニューの写真を新しくしたい」「紹介文を変更したい」といった作業ですね。
今日はそのようなWebサイトの修正・変更作業を実際に体験していきましょう。
今日やること
今日行う作業は次の４つです。
- タイトルを変更する
- お店の説明文を変更する
- メニューを編集する
- リンクを追加する
作業を進めながら「Webページがどのように作られているか」を体験してみましょう。
STEP1：HTMLファイルを開く
まずはWebサイトのデータとなるHTMLファイル index.html を開きましょう。
PCにデータを置いてありますので、指導員の方にエディタ（コードを読み書きするソフト）で開いてもらってください。
エディタで開くと、次のようなコードが表示されます。HTMLファイルには次のようなコードが書かれているはずです。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>カントリーカフェ</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>カントリーカフェ</h1>
<nav>
<a href="index.html">ホーム</a>
<a href="menu.html">メニュー</a>
</nav>
</header>
（・・・以下略・・・）昨日も少しお話したかと思いますが、HTMLのコードはこのように「タグ」と呼ばれる記号を使って書かれています。
たとえばh1はページのタイトルを表しており、<h1>を開始タグ、</h1>を終了タグと呼びます。開始・終了タグの間に表示したい中身を書くのがHTMLのルールです。（一部例外もあります）
h1の他にもたくさんのタグが書かれていますが、今日はひとつひとつタグの意味や書いてあることを覚える必要はありませんのでご安心ください。
まずは昨日メモ帳で作ったページを開いたように、ブラウザでindex.htmlファイルを表示してみましょう。
このようにサイトが表示されていればOKです。
メニューページもありますので、クリックして移動してみましょう。
メニューページも表示されていれば準備完了です。
STEP2 タイトルを変更してみよう
それではまずは、お店のタイトルを変更してみましょう。
今のタイトルは次のようになっているはずです。
<h1>サンプルカフェ</h1>
この部分を自分の好きなお店の名前に変更してみてください。
例
<h1>カントリーカフェ</h1>変更したら 保存（Ctrl + S） をして、ブラウザでページを開いてみましょう。すでに開いている場合はページを更新してください。
ページの一番上のタイトルが変わっていれば成功です。
もし変更が反映されない場合は、ブラウザを 更新（F5） してみてください。
h1タグとは？
h1 はページの一番大きな見出しです。基本的にはそのページのタイトルを書きます。
Webページでは次のように見出しを使い分けます。
- h1 → ページタイトル
- h2 → セクションタイトル
- h3 → 小さな見出し
ブログの記事も同じような構造で作られています。
STEP3 お店の紹介文を変更しよう
次はお店の説明文を変更します。
コードの中に次のような部分があります。
<p>
サンプルカフェは静かな住宅街にある小さなカフェです。
</p>
この文章を、自分のお店の紹介文に変えてみましょう。ゆっくり考えていただいて大丈夫です。
例
<p>
カントリーカフェは駅の近くにある小さなカフェです。コーヒーとケーキが人気のお店です。
</p>もし改行したいときは<br>というタグを改行したい場所に入れてみてください。
<p>
カントリーカフェは駅の近くにある小さなカフェです。<br>コーヒーとケーキが人気のお店です。
</p>先ほどと同じように 保存（Ctrl + S） してブラウザで確認すると、ページの文章が変わります。
pタグとは？
p は文章を書くためのタグです。
段落を作るタグ、と言われていますが、大半の文字に対してpタグを使います。
STEP4 メニューを編集してみよう
次にお店のメニューを変更してみます。メニュー変更は実際のお仕事でもよく登場する修正作業です。
メニューの内容はメニュー用のページに書かれているので menu.html を開いてみましょう。
コードの中に次のような部分があります。
<ul class="menu-list">
<li>コーヒー 500円</li>
<li>カフェラテ 600円</li>
<li>チーズケーキ 550円</li>
<li>チョコケーキ 550円</li>
</ul>この部分は メニューの一覧 を表示しています。
チーズケーキの価格が650円に変更となったため、メニューの内容を修正してみてください。
<ul class="menu-list">
<li>コーヒー 500円</li>
<li>カフェラテ 600円</li>
<li>チーズケーキ 650円</li>
<li>チョコケーキ 550円</li>
</ul>価格を書き換えたら保存してブラウザで確認してみましょう。メニューの内容が変わります。
ulタグとliタグの使い方
ul は箇条書きリストを作るタグです。
li はリストの項目です。
ul でリストの枠組みを作り、liでリストの中身を作ります。この２つはセットになっており、合わせて使う必要があります。
またulタグの中にliタグが入っている構造ですが、コーディングの世界ではこれを入れ子構造と呼びます。
さらにメニューを一つ増やしてみましょう<ul>タグの中に<li>〜</li>の行をひとつ増やして、好きなメニューを入れてみてください。
<ul class="menu-list">
<li>コーヒー 500円</li>
<li>カフェラテ 600円</li>
<li>チーズケーキ 650円</li>
<li>チョコケーキ 550円</li>
<li> 〜好きなメニューを入れる〜 </li>
</ul>メニューを増やしたら保存してブラウザで確認してください。
STEP5 リンクを作ってみよう
Webサイトでは、クリックすると別のページに移動する リンク がしばしば使われます。
HTMLでリンクを作るには a タグを使います。すでにコードの中でもa タグが使われている部分がありますね。
<a href="menu.html">メニュー</a>これはメニューページに移動するリンクを作る書き方です。
今は上部にあるWebサイトメニューにしかリンクがありませんが、おすすめの項目からもメニューページに移動するリンクを作ってみましょう。
ふたたび index.html を開き、おすすめメニューのあたりの内容を見てみましょう。
<section class="recommend">
<h2>おすすめメニュー</h2>
<ul>
<li>
<img src="recommend1.jpg" alt="カフェラテの写真">
<p>カフェラテ</p>
</li>
</ul>
<p>
<!-- ここにメニューページへのリンクを追加 -->
</p>
</section>いろいろと書かれていますが、ひとまずリンクを追加したいので、指示の書かれているpタグの中に aタグを書きましょう。
「<!– ここにメニューページへのリンクを追加 –>」の文字はまるごと消してOKです。消したところに
<a href="menu.html">メニューを見る</a>と書いてみてください。
できたら保存してブラウザで確認してみましょう。
「メニューを見る」の文字をクリックして、メニューページに移動できることを確認してくださいね。
hrefとは
href はリンク先のページを指定する場所です。例えば次のように書きます。
<a href="index.html">トップページ</a>ちなみに index.html というのはトップページを指すファイル名として決められています。Webサイトを作るには必ず index.html が必要です。
Web制作の基本作業
Web制作では次の作業を何度も繰り返します。
- コードを書く
- 保存する
- ブラウザで確認する
この作業を繰り返してページを完成させていきます。
今日のまとめ
今日はHTMLを編集して、Webページの修正・変更作業を体験しました。
- タイトルを変更する
- 文章を変更する
- メニューを編集する
- リンクを作る
これは実際のWeb制作の仕事でもよくある作業です。
Web制作では、ページの内容を修正したり情報を追加する仕事が多くあります。
いきなり新しいものを1から作るのは大変ですが、修正のお仕事も多く、少しずつ経験を積みながらスキルを身につけていくことができます。今日体験したように、文章を変更したりメニューを追加したりする作業も、実際のWeb制作の仕事の一部です。
明日は CSSという言語を使ってページのデザインを変更する体験 をします。色やレイアウトを変更すると、Webサイトの見た目がどのように変わるのか体験してみましょう。
時間があれば…
もしも時間がある場合、次の変更作業にも挑戦してみてください。
おすすめメニューの追加
トップページのおすすめメニューに「チーズケーキ」を増やします。
すでに書かれているおすすめメニューをコピーして、画像とテキストをチーズケーキに差し替えてください。
おすすめセクションに表示する商品も <ul>と<li>タグで作られていますので、<li>〜</li>の内容をまるっとコピーして増やしてみましょう。
画像は imgタグを使って表示しています。 imgタグは少し書いてあることが複雑です。
<img src="recommend1.jpg" alt="カフェラテの写真">src=”recommend1.jpg” というのは画像ファイルの名前を指しています。
alt=”カフェラテの写真” というのは画像の説明です。altで指定されている文字は通常サイトに表示されませんが、画像を見れない場合（ファイルが読み込めないなど）に画像の代わりに表示するためのテキストです。
実はWebサイトのデータの中にrecommend2.jpgというチーズケーキの画像も入れてありますので、HTMLをコピーしたら画像ファイルの名前とaltの内容を書き換えてみましょう。
<img src="recommend2.jpg" alt="チーズケーキの写真"><p>タグに書かれたメニュー名のテキストの変更も忘れず行ってくださいね。
このようにおすすめメニューが増えていればバッチリです！