ホームページ作り方教室　～必要最小限の学習で、法則化論文形式のページをTOSSランドに登録しよう～

TOSSオホーツク・山田正和
作成日：2002年9月24日(火)
更新日：2002年12月26日(木)

課題２０：カテゴリー分類のヘッダを完成させなさい

１："subject19.html"を"Internet Explorer"で表示させなさい。
２：ページ末尾に「↑ページ先頭に戻る」というナビゲーション・リンクがあります。リンク語句ですから、通常の文章の文字とは色が違います。
ですが、ちょっと見づらいとは思いませんか？　文字の大きさや書体、前の段落との改行幅などが通常の段落（<p>～</p>）と全く同じだからです。
３：そこで、ナビゲーション・リンクの「見栄え」を少しずつ変えていくことにします。（趣意説明）
４："subject19.html"のソースを表示させなさい。

５：ナビゲーション・リンクを以下のように書き換えなさい。

<p><a href="#top">↑ページ先頭へ戻る</a></p>

↓

<div><a href="#top">↑ページ先頭へ戻る</a></div>

６："Oedit"を「上書き保存」しなさい。
７："Oedit"の青い「ｅ」をクリックして、"Internet Explorer"の表示を確認しなさい。
８：ナビゲーション・リンクが、左寄せになったはずです。
９：ナビゲーション・リンクは、ホームページを使いやすくするための補助的な部品（？）です。
厳密に考えると、本文（文章の一部）ではありません。
ですから、そもそも段落（<p>～</p>）のタグでくくること自体、間違っているのです。
１０：ナビゲーション・リンクのような補助的な部品をくくるには、<div>～</div>というタグを使います。
div は、英語の"division"を略したものです。
意味は「区切り」「区域」「部分」「部門」となります。

１：<div>～</div>でくくっただけでは、まだ「見栄え」の変化が不十分です。通常の段落（<p>～</p>）との違いがごくわずかしかありません。
ですから「ＣＳＳ」の力を借りて、もっと大きく「見栄え」を変えます。（趣意説明）

２：ナビゲーション・リンクを以下のように書き換えなさい。

<div><a href="#top">↑ページ先頭へ戻る</a></div>

↓

<div class="navi"><a href="#top">↑ページ先頭へ戻る</a></div>

３："Oedit"を「上書き保存」しなさい。
４："Oedit"の青い「ｅ」をクリックして、"Internet Explorer"の表示を確認しなさい。
５：ナビゲーション・リンクの「見栄え」が、大きく変わったはずです。
６：<div>～</div>は、特殊なタグです。そのまま使用しても意味がありません。
<div class="">～</div>のように、必ず「クラス名」を書き添えて使います。
７：本講座では、ナビゲーション・リンクを<div class="navi">～</div>というタグでくくります。
「クラス名」の"navi"は、ナビゲーション（Navigation）の省略形です。

１："subject19.html"のソースの１０～１４行目に、未完成のカテゴリー分類があります。

<div class="category" id="top">
<a href="http://www.tos-land.net/">TOSSランド</a>：
大分類＞中分類＞小分類＞学年＞キーワード<br>
©TWO-WAY
</div>

４：カテゴリー分類表を以下のように書き換えなさい。

<div class="category" id="top">
<a href="http://www.tos-land.net/">TOSSランド</a>：
授業・教科＞国語＞小学校１年生＞作文<br>
©TWO-WAY
</div>

５："Oedit"を「上書き保存」しなさい。
６："Oedit"の青い「ｅ」をクリックして、"Internet Explorer"の表示を確認しなさい。
７：TOSSランド登録用ページには、カテゴリー分類を付けなければなりません。
８：ですが残念ながら、誰でもわかるような、書き方の目安がまだありません。
９：現状では、以下のページが書き方の目安として一番分かりやすいと講師は考えています。
TOSSランド　カテゴリー構造
このページの大分類・中分類・小分類などを参考に、学年とキーワード（任意）を書くと良いでしょう。