９．トップページとリンク

　今までの勉強で jinja_sanpai.html は、完成しました。しかし、これは、紀行文の単なる1ページです。これだけでは、ホームページとしては、不十分です。ホームページとしてどうしても必要なものは、トップページです。トップページから jinja_sanpai.html へリンクを張りトップページの画面でリンク文字をクリックすると神社参拝ページが表示されるようにする必要があります。
　トップージは、どのような画面にするかは、非常にむずかしところですが、今回は、リンクを張るのが目的ですから、非常に単純なものにしました。
　サンプルは、ココをクリックしてください。このサンプルは、リンクを張る前の画面です。

　それでは、トップページの制作にとりかかりましょう。

(1) 「Homepage資料」フォルダにあるbase1.htmlをTeraPadで開きます。そして、「ファイル」→「名前を付けて保存」をクリックし、「Homepage」フォルダの中にindex.htmlという名前を付けて保存してください。何故、index.html という名前にするかは、後ほど説明します。

(2) それでは、記述に入ります。
フォントは、メイリオ、行高は、1.5としましょう。
そして、idセレクターのwrapperを作り、見出しを記述します。wrapperの幅は、500pxとします。見出しの文字サイズは、青色の26pxとします。font-familyは、MACユーザも考慮しましょう。html文は、下記となります。

Edgeで表示すると下図です。

(3) 次は、開設日と更新日ですが、これは中央配置です。.nakaというclassセレクタを使って中央配置にします。その下は、画像です。
画像の準備が必要なので、次の操作を行ってください。

  1. 「Homepage」フォルダ内に「images」というフォルダを作成してください。なぜ、このようなものを作るかは、後ほど説明します。
  2. サンプルページを開き、日の出の写真の上で右クリックし「名前を付けて画像を保存」をクリックして、上の i. で作った images フォルダの中に保存してください。
画像も中央配置ですが、画像の幅は、500px、wrapperの幅も500pxですから、そのまま貼り付ければ、中央配置になります。
index.htmlから見ると画像の hinode.jpg は、imagesフォルダに入っているので、画像の指定は、下のようにimagesの後にスラッシュ(/)を付けてhinode.jpgを記述します。これは、imagesフォルダの中にhinode.jpgが入っているという表示になります。

　　　　　　<img src="images/hinode.jpg" alt="" width="" height="">

html文は、下記となります。

Edge表示は、下図です。

(4) 次は、文章の挿入です。その下は、「目次」ですが、見出しですから、<h2> を使い、中央配置にし、文字サイズを18pxにしましょう。そして、その下に文章のタイトルを入れることになります。文章のタイトルは、角のマーク付リストを使用しましょう。html文は、下記となります。

Edge表示は、下図です。

(5) 次は、いよいよリンク張りです。リンクは、<a> タグを使います。具体的には、八槻都都古別神社参拝 を<a href=""> と </a> で囲みます。そして、href="" のダブルクオーテイションの中にリンク先のファイル名 jinja_sanpai.html を入れます。ただし、index.html から見ると jinja_sanpai.html は、jinja_sanpai フォルダの中に入っていますので、"jinja_sanpai/jinja_sanpai.html"と記載します。html 文は、下図を見てください。

Edge表示は、下図です。

リンクを張った文字は、青色に変わりアンダーラインが付いています。これは、Edge が defaultで設定したものですが、スタイルシートで変更することができます。これをクリックすると、八槻都都古別神社参拝の画面が表示されます。

(6) リンクは、文字の他に画像に張ることもできます。張り方は、同じで、画像を<a> タグで挟みます。下の例を見てください。
　　　<a href="****.html"><img src="????.jpg" alt="" width="" height=""></a>

　　　

(7) 以上で index.html 文書は、完成です。
境界線は、最後に消すことにしていましたが、消すと寂しくなるので、この境界線を生かしましょう。現在、境界線は、灰色の#ccc ですが、白と黒の中間#888 にしてみましょう。そして、wrapperに padding : 10px 50px 20px;を指定して境界線を拡げてみましょう。すると、下図になります。上部に10px、左右に50px、下部に20pxの余白が入り何となく感じがよくなりました。

(8) これで今後、文章のタイトルをどんどん追加して行くことになりますが、一つ問題があります。
[重要]
上では、文章のタイトル名と発行年月日の間は、全角スペースを10個使って間隔を空けています。タイトル名がいつでも全角ならば問題ありませんが、アルファベットや半角数値が入っていると年月日の頭が不揃いになり見栄えが非常に悪くなります。これを解決するためには、「１１．節の13. 中途の文字の頭を揃える」を適用する必要があります。そこで、１１．13.の【<span>にinline-blockを適用して頭を揃える】をじっくり勉強してください。理解できたら、上の(4)の画面に　span の CSS 、 <span> と </span> を追加してください。span の width は、文字の10字に空白の10字を加えて20字としました。20字は、20em ですが、px 指定でもOKです。1字は、16pxですから、px 指定だと320pxになります。

これで年月日の頭が揃います。全角スペースを使う必要はありません。「原則として、スペースを使ってレイアウト調整を行ってはならい。」と覚えておいてください。

　この index.html は、リンク説明用のため非常に簡単なものにしました。実際に作るときは、いろいろ考えてもっと豪華なものにしてください。

(9) 少し画面を変えてみましょう。上の画像の上部を見るとEdgeの枠とborder(境界線)の間に8pxの余白があります。これは、<body>の default の margin です。人によっては、この余白がない方がよい人もいます。これをなくすには、CSS の body に margin-top : 0; を追加してください。すると、下図のようになり、8pxの余白がなくなりました。

余白は、消えましたが、線が見えます。これを消すには、margin-top : -1px とマイナスを指定すれば、消えます。下の図を見てください。

(10) もう少し変えてみましょう。枠線だけでは、安っぽいです。枠の外に色を付けてみましょう。ベージュ色にしてみましょう。それには、bodyにベージュ色を指定します。このままでは、すべてがベージュ色になるので、wrapperには、白を指定します。CSSは、下記となります。

Edgeで表示すると下図です。少しは、様になったように見えませんか。皆さん、いろいろ工夫して恰好のよいトップページを作成してくだい。

外部ページへのリンク

外部ページへのリンクについて説明しておきます。これは、簡単です。例えば、「Yahoo!」という文字にリンクを張りたいときは、

<a href="https://www.yahoo.co.jp">Yahoo!</a>

と記述します。要するに、ダブルクオーテイションの中に Yahoo! の URL を入れるだけです。

　ところで、この記述だと自分のページが外部ページと入れ替わりになります。入れ替えしないで、外部ページは、新しいページに表示したいときは、下記のように target="_blank" を追加します。

<a href="http://www.yahoo.co.jp" target="_blank">Yahoo!</a>

blankの前は、アンダーバー(_)ですから気をつけてください。

トップページに index.html というファイル名を付ける理由

現在、Homepageフォルダ内のフォルダとファイルは、完成状態です。これらは、階層になっています。下図をみてください。

imagesフォルダには、1ファイルしかありませんが、通常は、タイトルを画像化したりするので、多数のファイルが存在します。imagesフォルダを作らなかったらindex.htmlファイルと同じ階層に画像ファイルを置くことになりファイルが沢山並び整然としなくなります。故に、imagesフォルダを作ったことがわかったと思います。
　完成後は、サーバにアップロートしますが、Homepageフォルダは、アップロードしないで、Homepageフォルダの中のものをアップロードします。 今、仮にアップロードしたサーバのフォルダが、http://tsukurikata.jp としますと、ブラウザのアドレス欄に http://tsukurikata.jp/index.html と打ち込んでエンターキーを押すとホームページを表示してくれます。
　index.htmlを指定しないで、単に http://tsukurikata.jp/ とフォルダのみを指定すると、ブラウザは、そのフォルダの中に index.html または index.htm があるかどうか探し、index.html または index.htm があれば、それを開いてくれます。そのフォルダ内に index.html も index.htm もないときは、「表示できません。」とアナウンスします。要するに、トップページのファイル名をindex.html または index.htm にしておけば、フォルダ指定のみでトップページを開くようにブラウザはできています。
　以上で index.html というファイル名を付けることがわかったと思います。よって、自分のURLを人に教えるときは、index.html を付ける必要はありません。

紀行文ページからトップページへ戻るには？

下の画像は、サンプル文（jinja_sanpai.html）の下部です。ここに「戻る」という文字を追加して、この文字をクリックすると index.html ページへ戻るようにしましょう。

図１を見てください。index.html は、jinja_sanpai.html から見ると一つ上の階層にあります。階層が一つ上のときは、../ で表示します。記述は、下記となります。jinja_sanpai.html から１階層上のindex.html へ飛ぶということになります。

　<a href="../index.html">戻る</a>

階層が２つ上ならば、../../ と記述し、３つ上ならば、../../../ と記述します。

　上の図では、表のすぐ下に「戻る」を設置しましたが、「戻る」は、本文と関係ないので、表と「戻る」の間に分離のための線を入れたい人がいると思います。
一般に線というと<hr>タグ（まだ出て来ていません、10節の<hr>タグ参照）の挿入を考えますが、ここでは、wrapperの下辺を線表示し、その下に「戻る」を設置しましょう。そのためには、サンプル文を下図のように追加・変更します。

これをEdge表示すると下図となります。線ありなしで随分感じが変わります。

上では、<p class="naka">とclassセレクターを指定したところへ styleでmargin-bottomを追加し、
<p class="naka" style="margin-bottom:50px">としています。これはあまり恰好がよくありません。「戻る」は、ほとんどのページで使いますので、.modoru というclassセレクターを設定しましょう。CSSの記述は、
　　.modoru {
　　　text-align : center;
　　　margin-bottom : 50px;
　　}
　HTMLの記述は、下記となります。
　　<p class="modoru"><a href="../index.html">戻る</a></p>
これだとスッキリし恰好よくなります。

以上で、トップページとリンクの節を終りますが、皆さんの要望が強いので、タグとスタイルシートの一覧表を掲載しておきます。

「タグとスタイルシートまとめ表」

８．画像の準備 へ　　　　目次 へ　　　　１０．地図の挿入 へ