トップページの作成
各レシピのページが完成、あるいは、一区切りついたら、トップページを作成しましょう。
ここでは各レシピのページにリンクする目次のようなものを考え、作成したいと思います。
レイアウト
トップページのレイアウトを考えます。いくらか案を出してみます。
レイアウト案その1 |
レイアウト案その2 |
レイアウト案その3 |
|
|
|
その1とその2の案はテーブルを使って実現できそうです。その3の案は見出しとリスト形式を使用すれば良さそうです。ここではまだレシピの数も少ないので、その3の案にしてみましょう。
トップページのファイルの作成
これまでに作成したレシピのページがテンプレートとして使用できそうなので、最上位のディレクトリ階層にコピーし、ファイル名をindex.htmlに変更します。ここでは、「くりごはん」のページをコピーして使用します。
その後、<body>要素の内容を大見出し(<h1>)のみ残して全て削除します。
index.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>
<title>ずぼら主婦のくりごはんレシピ</title>
<meta name="description" content="ずぼらな主婦のレシピ集。くりごはんレシピのページです。" />
<meta name="keywords" content="くりごはんレシピ,くりの料理,くりの調理,栗料理,栗の調理,くりごはん,くり,ごはん" />
</head>
<body><!--ここから本文-->
<h1>くりごはん</h1>
<!--ここにあった内容を消去します-->
</body><!--本文ここまで-->
</html>
内容の記述
見出し(<h1>や<h2>)の内容を変更/追加し、<p>を使用してサイトやページの説明などを記述します。
その後、<h3>で見出し(料理のカテゴリ名)を記述し、<ul>と<li>を使用して料理名をリストアップします。料理名には<a>タグを使用して各レシピのページにリンクさせます。
index.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>
<title>ずぼら主婦のくりごはんレシピ</title>
<meta name="description" content="ずぼらな主婦のレシピ集。くりごはんレシピのページです。" />
<meta name="keywords" content="くりごはんレシピ,くりの料理,くりの調理,栗料理,栗の調理,くりごはん,くり,ごはん" />
</head>
<body><!--ここから本文-->
<h1>ずぼら主婦の料理レシピ集トップページ</h1>
<p>毎日、献立に悩むのと、作り方をすぐに忘れてしまうので、まとめています。
</p>
<P>今後、レシピは増やしていく予定です。
</p>
<h2>レシピ集</h2>
<p>紹介しているレシピの一覧。
</p>
<h3>ごはんもの</h3>
<ul>
<li><a href="gohanmono/kuri_gohan/kuri_gohan.html">くりごはん</a></li>
<li><a href="gohanmono/takenoko_gohan/takenoko_gohan.html">たけのこごはん</a></li>
</ul>
<h3>煮もの</h3>
<ul>
<li><a href="nimono/butaniku_piman/butaniku_piman.html">豚肉とピーマンのうま煮</a></li>
<li><a href="nimono/atuage_hasamini/atuage_hasamini.html">厚揚げのはさみ煮</a></li>
</ul>
<h3>炒めもの</h3>
<ul>
<li><a href="itamemono/siromizakana/siromizakana.html">白身魚と野菜の甘酢炒め</a></li>
<li><a href="itamemono/tamago_butaniku/tamago_butaniku.html">卵と豚肉の炒めもの</a></li>
</ul>
<h3>鍋ものなど</h3>
<ul>
<li><a href="nabemono/yanagawanabe/yanagawanabe.html">柳川鍋</a></li>
<li><a href="nabemono/butaniku_orositaki/butaniku_orositaki.html">豚肉のおろし炊き</a></li>
</ul>
</body><!--本文ここまで-->
</html>
<head>要素の編集
<head>要素内の<meta>と<title>の内容を変更します。
index.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>
<title>ずぼら主婦の料理レシピ集トップページ</title>
<meta name="description" content="ずぼらな主婦のレシピ集トップページ。毎日の献立に悩んでいる方必見!" />
<meta name="keywords" content="料理レシピ集,献立,料理の作り方,おかず,ごはん" />
</head>
<body><!--ここから本文-->
<h1>ずぼら主婦の料理レシピ集トップページ</h1>
<p>毎日、献立に悩むのと、作り方をすぐに忘れてしまうので、まとめています。
</p>
<P>今後、レシピは増やしていく予定です。
</p>
<h2>レシピ集</h2>
<p>紹介しているレシピの一覧。
</p>
<h3>ごはんもの</h3>
<ul>
<li><a href="gohanmono/kuri_gohan/kuri_gohan.html">くりごはん</a></li>
<li><a href="gohanmono/takenoko_gohan/takenoko_gohan.html">たけのこごはん</a></li>
</ul>
<h3>煮もの</h3>
<ul>
<li><a href="nimono/butaniku_piman/butaniku_piman.html">豚肉とピーマンのうま煮</a></li>
<li><a href="nimono/atuage_hasamini/atuage_hasamini.html">厚揚げのはさみ煮</a></li>
</ul>
<h3>炒めもの</h3>
<ul>
<li><a href="itamemono/siromizakana/siromizakana.html">白身魚と野菜の甘酢炒め</a></li>
<li><a href="itamemono/tamago_butaniku/tamago_butaniku.html">卵と豚肉の炒めもの</a></li>
</ul>
<h3>鍋ものなど</h3>
<ul>
<li><a href="nabemono/yanagawanabe/yanagawanabe.html">柳川鍋</a></li>
<li><a href="nabemono/butaniku_orositaki/butaniku_orositaki.html">豚肉のおろし炊き</a></li>
</ul>
</body><!--本文ここまで-->
</html>
これで完成です。最終的にずぼら主婦の料理レシピ集と同じになっているはずです。