Webページの作成、編集
それでは、Webページを作成、編集しましょう。ここでは、「くりごはん」のページを作成していきます。
主にタグを入力していく作業になりますが、ここでもう一度レイアウトのページでスケッチしたレイアウトを確認してください。ここからはこのレイアウトをタグを使って実現していく作業です。
必ず記述されるタグとDTD宣言の記述
まずは、必ず記述される<html>、<head>、<body>タグとDTD宣言を記述しましょう。ここでのDTD宣言はXHTML TransitionalのDTD宣言を記述してみます。最初の行のencodingの値は自分の環境に合わせて適宜変更してください。
kuri_gohan.html_1
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
</head>
<body><!--ここから本文-->
</body><!--本文ここまで-->
</html>
ページの大見出しの定義
<h1>タグを記述して、大見出しを定義します。内容は「くりごはん」で良いでしょう。
kuri_gohan.html_2
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
</head>
<body><!--ここから本文-->
<h1>くりごはん</h1>
</body><!--本文ここまで-->
</html>
材料、分量の表示
まず、<h2>タグで、「材料、分量」と見出しを定義します。
材料と分量は、リスト形式で表現しても良さそうですが、材料と分量はそれぞれ対応するものなので、テーブルを使用してみます。表題（<caption>）に、「材料、分量リスト」と記述し、項目名となる材料、分量を<th>で、実際の材料と分量は、<td>で記述します。
kuri_gohan.html_3
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
</head>
<body><!--ここから本文-->
<h1>くりごはん</h1>
<h2>材料、分量</h2>
<table border="1">
<caption>材料、分量リスト</caption>
<tr>
<th>材料</th>
<th>分量</th>
</tr>
<tr>
<td>米</td>
<td>2.5カップ</td>
</tr>
<tr>
<td>くり</td>
<td>500g</td>
</tr>
</table>
</body><!--本文ここまで-->
</html>
画像の配置
スケッチしたレイアウトでは、材料、分量の右横に画像を配置することになっています。新しい行に<img>タグを使用して画像を配置しても、右横ではなく、下に配置されてしまいます。ここでは、テーブルにセルを追加して、そのセルに画像を配置しましょう。
分量のセルの右側に、新しく<td>でセルを追加します。左側のセルをまたぐことになるので、rowspan属性を記述して、結合するセルの数を値に指定します。その追加したセルに<img>タグで画像を配置します。
kuri_gohan.html_4
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
</head>
<body><!--ここから本文-->
<h1>くりごはん</h1>
<h2>材料、分量</h2>
<table border="1">
<caption>材料、分量リスト</caption>
<tr>
<th>材料</th>
<th>分量</th>
<td rowspan="3"><img src="images/kuri_gohan.jpg" alt="くりごはん画像" /></td>
</tr>
<tr>
<td>米</td>
<td>2.5カップ</td>
</tr>
<tr>
<td>くり</td>
<td>500g</td>
</tr>
</table>
</body><!--本文ここまで-->
</html>
作り方のリストと備考
作り方のリストを表示する前に、まず、<h2>タグで見出しを定義します。
料理の作り方には手順があるので番号付きリストを使用するのがベストです。<ul>と<li>タグを使用すれば簡単に実現できます。
備考は1つのセクションと考えられるので、<div>を使用しておきましょう。
kuri_gohan.html_5
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
</head>
<body><!--ここから本文-->
<h1>くりごはん</h1>
<h2>材料、分量</h2>
<table border="1">
<caption>材料、分量リスト</caption>
<tr>
<th>材料</th>
<th>分量</th>
<td rowspan="3"><img src="images/kuri_gohan.jpg" alt="くりごはん画像" /></td>
</tr>
<tr>
<td>米</td>
<td>2.5カップ</td>
</tr>
<tr>
<td>くり</td>
<td>500g</td>
</tr>
</table>
<h2>作り方</h2>
<ol>
<li>くりは沸騰したお湯に入れてすぐに火を止め、包丁でくりの下側を切り、包丁の刃を立てるようにして鬼皮と渋皮をきれいにむく</li>
<li>そのくりを大粒なら2つに割って、薄い塩水につけ、途中で水を1度とりかえ、30分くらいおいてアク抜きをする</li>
<li>米は、炊く1時間以上前に洗って、ざるに上げておく</li>
<li>酒大さじ1.5、しょうゆ小さじ2、塩小さじ2分の1強に水を加えて3カップにする</li>
<li>厚鍋に3の米と4を入れ、水気をきったくりを加え、軽くまぜて強火にかける</li>
<li>沸騰したら弱火で12から13分炊き、水が引いたら1度火を強めてすぐに火を止め、15分ぐらい蒸らしてから、まぜる</li>
</ol>
<div>
<p>くりは、鬼皮を少しむいてから、網で皮に焦げ目がつく程度に焼いて皮をむいたものを炊き込んだら、香ばしくておいしい。
</p>
<p>炊き込みごはんは、炊飯器だと焦げやすいので、厚手鍋を使うと良い。
</p>
</div>
</body><!--本文ここまで-->
</html>
トップページへのリンク
最後にトップページへリンクしている箇所を作成しましょう。この段階ではまだトップページを作成していませんが、仮にあるものとしてリンクしておきます。
ここでのリンクしている箇所もページの内容とは独立（分割）させたい部分となるので、<div>タグを使用しておきましょう。
kuri_gohan.html_6
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
</head>
<body><!--ここから本文-->
<h1>くりごはん</h1>
<h2>材料、分量</h2>
<table border="1">
<caption>材料、分量リスト</caption>
<tr>
<th>材料</th>
<th>分量</th>
<td rowspan="3"><img src="images/kuri_gohan.jpg" alt="くりごはん画像" /></td>
</tr>
<tr>
<td>米</td>
<td>2.5カップ</td>
</tr>
<tr>
<td>くり</td>
<td>500g</td>
</tr>
</table>
<h2>作り方</h2>
<ol>
<li>くりは沸騰したお湯に入れてすぐに火を止め、包丁でくりの下側を切り、包丁の刃を立てるようにして鬼皮と渋皮をきれいにむく</li>
<li>そのくりを大粒なら2つに割って、薄い塩水につけ、途中で水を1度とりかえ、30分くらいおいてアク抜きをする</li>
<li>米は、炊く1時間以上前に洗って、ざるに上げておく</li>
<li>酒大さじ1.5、しょうゆ小さじ2、塩小さじ2分の1強に水を加えて3カップにする</li>
<li>厚鍋に3の米と4を入れ、水気をきったくりを加え、軽くまぜて強火にかける</li>
<li>沸騰したら弱火で12から13分炊き、水が引いたら1度火を強めてすぐに火を止め、15分ぐらい蒸らしてから、まぜる</li>
</ol>
<div>
<p>くりは、鬼皮を少しむいてから、網で皮に焦げ目がつく程度に焼いて皮をむいたものを炊き込んだら、香ばしくておいしい。
</p>
<p>炊き込みごはんは、炊飯器だと焦げやすいので、厚手鍋を使うと良い。
</p>
</div>
<div>
<p><a href="../../index.html">トップページへ</a>
</p>
</div>
</body><!--本文ここまで-->
</html>
作成、編集
ディレクトリ構造
ページの先頭
2024 Webデザインレッスン