カスタム検索

トップページの作成

各レシピのページが完成、あるいは、一区切りついたら、トップページを作成しましょう。

ここでは各レシピのページにリンクする目次のようなものを考え、作成したいと思います。

レイアウト

トップページのレイアウトを考えます。いくらか案を出してみます。

レイアウト案その1 レイアウト案その2 レイアウト案その3
レイアウト案その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>

これで完成です。最終的にずぼら主婦の料理レシピ集と同じになっているはずです。

CopyLeft 2017 Webデザインレッスン プライバシーポリシー サイト管理者に連絡