Webページの作成、編集（その2）
前ページではテーブルを使用して画像を配置しましたが、その結果、表題の位置が画像にもかかってしまいました。画像は仕上りの画像であって、材料や分量ではありません。情報を的確に表示するという点においてあまり好ましくないと思います。画像にもセルの枠線が表示され、まぎらわしさを生んでいますし、この画像の枠線はちょっとダサイのでなんとかしましょう。
テーブルのネスト
タグのネスト構造がHTMLとXHTMLの特徴ですが、あるタグを同じタグでネストすることもできます。つまり、テーブルならば一つのセルの中にもう一つのテーブルを定義することができます。
この方法を使って、材料、分量と画像の配置を調整してみましょう。
レイアウト用のテーブル
新しく、横方向に2つのセルを持ったレイアウト用のテーブルを作成します。
kuri_gohan.html_7
<?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">
<tr>
<td></td><!--材料、分量用-->
<td></td><!--画像用-->
</tr>
</table>
<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>
材料、分量用のテーブルをカット／ペースト
材料、分量用のセルに前ページで記述したテーブル全体をカット／ペーストで挿入します（材料、分量用の<td>と</td>でネストします）。
kuri_gohan.html_8
<?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">
<tr>
<td><!--材料、分量用（開始タグ）-->
<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>
</td><!--材料、分量用（終了タグ）-->
<td></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>
画像を配置
材料、分量用のセルに記述していた<img>タグの行をカットし、画像用セルにペーストしましょう。不要になった<td>タグ（<td rowspan="3">とその終了タグ）は削除します。
kuri_gohan.html_9
<?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">
<tr>
<td><!--材料、分量用（開始タグ）-->
<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>
</td><!--材料、分量用（終了タグ）-->
<td><img src="images/kuri_gohan.jpg" alt="くりごはん画像" /></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>
縁取りを消去
レイアウト用の縁取りもいらないので、border属性を削除します。また、テーブルのネストの状況が分かるようにインデントして整えておきましょう。
kuri_gohan.html_10
<?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>
<tr>
<td><!--材料、分量用（開始タグ）-->
<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>
</td><!--材料、分量用（終了タグ）-->
<td><img src="images/kuri_gohan.jpg" alt="くりごはん画像" /></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>
作成、編集2
作成、編集
ページの先頭
2024 Webデザインレッスン