階層構造のこと

PCの中の構造をわかりやすく図示しているのは、
エクスローラです。

「スタート」の上で右クリック
↓
「エクスプローラ」をクリック
↓
「エクスプローラ」の起動

・・・注意・・・
インターネット・エクスプローラとは別物です


階層構造とは、大体次のようなものです。

homepage






・・・image


・・・abc.gif
・・・xyz.jpg
・・・hobby


・・・trip.htm
・・・book.htm
・・・index.htm
・・・123.gif



解説

「homepage」という大きな引き出し(フォルダ）がある
その下に、「image」と「hobby」というフォルダが二つと
「index.htm」と「123.gif」という二つのファイルが入っている
「image」フォルダの中に「abc.gif」と「xyz.jpg」の二つのファイルがある
「hobby」フォルダの中に「trip.htm」と「book.htm」の二つのファイルがある


リンクするときに、注意するポイント！

今書いているソースから見て、
リンクするファイルがどこにあるか？

上の図の場合
  1. 「homepage」フォルダの「index.htm」を書いているとき
・　同じ階層のファイル「123.gif」を表示させるには、
　　<img src="123.gif">　と書く

・　しかし、同じ階層だが、別の「image」フォルダの中の
　　「abc.gif」を表示させたいなら
　　<img src=image/abc.gif>　と書く
  1. 「hobby」フォルダの「trip.htm」を書いているとき
・　上の階層の「image」フォルダ内の「xyz.jpg」を表示させたいなら
　　<img src=../image/xyz.jpg>　と書く



辞書リスト形式

リスト
箇条書き
並列リストと序列リストがある
組み合わせで変化をつけられる
辞書リスト形式
見出しと説明に分けて書ける
変形はできない
上のように書けるのです！

・・・辞書リスト形式のタグ・・・

<dl>・・・</dl>辞書リスト形式で書くものをはさむ
定義型リストタグ
<dt>見出し語句を示すタグ
後ろに改行が入る
<dd>説明文を示すタグ
前にインデント、後ろに改行が入る



作ってみましょう

No.23
<dl>
<dt>diction
<dd>(名詞)
<dd>（書く人の）用語の選択、言葉づかい、語法、言い回し
<dd>発声法、話し方
<dd>[ラテン語「言うこと」の意]
<dt>dictionary
<dd>(名詞)
<dd>辞書、辞典
<dd>[中世ラテン語から（ラテン語dictio「発言」+-ary)]
</dl>

これを保存して、表示すると、次のようになりますね。


diction
(名詞)
（書く人の）用語の選択、言葉づかい、語法、言い回し
発声法、話し方
[ラテン語「言うこと」の意]
dictionary
(名詞)
辞書、辞典
[中世ラテン語から（ラテン語dictio「発言」+-ary)]


・・・注意・・・

リストや辞書リスト形式で、注意することは
センタリングしないこと
センタリングすると、
せっかくのインデントや並び方が崩れてしまう

画面の中央に置きたいときは
リスト全体をテーブルで囲み、テーブルをセンタリングする
テーブルの幅を変えると、画面の少し左寄りにできる
また、テーブルを右寄せにすると、リストも右寄りになる


ためしに、上のリストのテーブルの幅を縮めて右寄せにしてみると


diction
(名詞)
（書く人の）用語の選択、言葉づかい、語法、言い回し
発声法、話し方
[ラテン語「言うこと」の意]
dictionary
(名詞)
辞書、辞典
[中世ラテン語から（ラテン語dictio「発言」+-ary)]

　　　　　　　　こんな風になります　　→→→



そして、テーブルのボーダーをはずして、背景色を指定しないと


diction
(名詞)
（書く人の）用語の選択、言葉づかい、語法、言い回し
発声法、話し方
[ラテン語「言うこと」の意]
dictionary
(名詞)
辞書、辞典
[中世ラテン語から（ラテン語dictio「発言」+-ary)]

　　　　　　　 　こんな風になります　　→→→

今までに覚えたタグをいろいろに組み合わせることにより
思い通りのデザインを表現したり、
また、思いがけないおもしろいデザインができたりします。

おおいに創意工夫してください。
そのために、いろいろ試しては失敗を重ねていくことです。

HP作りでは、「失敗は成功の母」という格言が生きています！


・・・次回はフレームです・・・


制作者のＨＰかぼちゃの旅