あひるたん♪ホーム > 第五回  ( 1. 2. 3. 4. 5. 6. )
 

HTMLの書き方講座 第五回

製作日:1999年4月16日

恒例!今日の一言!

うぉー、ポルトガルに何とか勝てたぜー!!!!(私が勝ったわけじゃないけど...)という興奮冷めやらぬまま、夜も寝ないでひたすら愛機オンボロパワーマックに向かい製作するこのページ。回を重ねて円熟味を増した(?)編集長が、ただひたすらストイックに押し進める、無謀とも言えるHTML書き方講座も、はや五回目!あの小松画伯も楽しみにしているという全国700万のファンのあこがれ(意味不明)万全を持してスタートです。これを読めばあなたも家にいながらWebの達人!(だから大袈裟だってば...)

リンク って何?

答え:ホームページ上でマウスカーソルが矢印から手のマークに変わるところです。

うーむ。それじゃ答えになってないから...

ホームページ(インターネット)がこれだけ世の中でフィーバー!!(死語使用につき警告1)した理由の一つにハイパーリンクという機能があります。このページの読者はインターネットに繋ぐ環境にあるわけですから、いまさら言わなくても身体で覚えているでしょうが(何となくHな響き...)、要は他のページなどへジャンプするボタンの様なものを、ホームページ上に簡単に埋め込むことが出来るのです。これによって読者は、関連ページなどへの移動をマウスクリック一つで直感的に行うことが出来るのです。こんなすばらしい機能ですから、これから作るページにも利用することにしましょう。

博士と弟子登場!

ここから具体的にリンクの話を進めるために、今回試験的に「ホームページ博士とその弟子によるホームページ製作」というシチュエーションで進めていこうと思います。

博士:どうじゃ?ページは出来たのか?

弟子:それが博士!リンクの張り方がよく分からないんですが。

博士:何?リンクを張りたい?それなら、まずその張りたい場所に<a href="●●●">と書き込むのじゃ。

弟子:●●●って何ですか?

博士:ばっかもーん!●●●の部分にはリンク先のアドレスを書くのじゃ!!アドレスは分かっておるのじゃろうな?

編集長の豆知識*** アドレスの書き方 ***
リンクしたいのが他人のページの場合、<a href="http://www.○○○・・・・">というお決まりのモノになります。一方、自分の作った他のページに飛ぶ場合、こういう書き方は普通しません。そのディレクトリへのパス(通り道)を書くことになります。
それじゃ分かりませんね。まず、『ディレクトリはフォルダと同じ』と考えましょう。そのうえで、今いるファイル(リンク元)から見てこれから飛ぶ行き先のファイル(リンク先)が何処にあるのか?(何処の何ていうフォルダの中にあるのか?)を書けばいいのです。例を下に書きます。

まず、左の図の様に、今作っているページから、同じフォルダにある別のファイルへとリンクしたい場合は、そのままファイル名を書きましょう。
<a href="○○○.html">となります。

次に、リンク先のファイル(2.html)が、リンク元のファイル(1.html)と同じところにいるフォルダ(myuraフォルダ)の中にいる場合(言葉にすると分かりづらいけど左の図をみて頑張って把握してね)。この場合、
『「myura」というフォルダの中の「2.html」へリンクするよ』という意味で、
<a href="myura/2.html">
となります。

今度は逆パターンで、リンク先のファイル(2.html)が、リンク元のファイル(1.html)の入っているフォルダ(myuraフォルダ)のさらに親フォルダの中にいる場合です。この場合、
『一個上の親フォルダの中の「2.html」へリンクするよ』という意味で、
<a href="../2.html">
となります。
これら三つを組み合わせることによって、リンクするファイルへの道順をブラウザ君に教えることが出来るのです。

なお、画像を表示したい場合もこのルールによって、アドレスを指定します。しかし、これを読んでも、やっぱりまだ分かりづらいでしょうので、後の回で復習をかねて具体例を登場させたいと思います。

弟子:え、(ちょっと焦る)えーと、これです。

博士:(手書きのメモを見ながら)ふむふむ、これか。ならばこのアドレスをリンクさせたいところに打ち込むだけじゃな。ところで、どこにリンクさせるのじゃ?

弟子:い、いやー、全然大したことないんです(意味不明:動揺しまくり)

博士:何を慌てておるのじゃ?怪しいのー?
(博士、そのアドレスのページを実際に見てみるが、そこはアダルトサイト?!)
この、バカ弟子!!!
誰がホームページにアダルトページへのリンクを張れと言った!!!(怒)

弟子:だってーー!好きなんだモンー!(と言いながら逃げ出す)

編集長の豆知識*** アダルトサイト ***
わたくし編集長はよく知らない(うふ)のですが、世の中には想像以上にアダルトモノのページが増殖しています。よく雑誌などで『ホームページアクセス数(そのページを見た人の数)ランキング』なんてモノが行われていますが、これにはアダルトモノは含まれません。もし、全部ひっくるめると、ランキングトップテンはすべてアダルトページになるのが確実です。これは別に私の独断ではなくて、非公式の調査では既にアダルトモノがぶっちぎっているという報告が出ています。しかも、最高アクセス数を誇るYahoo Japanのページでさえも、有力アダルトページとは1桁以上の差が付いています。かつて、ビデオが爆発的に普及したきっかけとしてアダルトビデオが活躍(?)したように、アダルトページがインターネットを引っ張るのでしょうか??

文字の大きさ

さて、ざっとホームページの華「リンク」について説明いたしましたので、次は表現部分の基本ともいえる「文字の大きさ」について説明しましょう。ご案内のページにも書きましたが、HTMLは基本的に構造を表すのが主な機能ですので、きれいに見栄えのいいページを作るのはちょっと苦手です。でも当然ながら出来ないわけではありません。その一番の基本が、文字の大きさです。

文を記述する(なんか偉そうな言葉ですねー)ときには、そのまま打ち込んでももちろんオッケーなのですが、タグ(そんな単語知らない人は第四回へどうぞ)をつける事によって表現の幅が広がります。え?分からない?それでは、タイトル用と本文用のタグを具体的に見ていきましょう。

まず、タイトルにしたい場合、<h●>と</h●>を使います。●の部分は1(一番文字が大きい)から6(一番文字が小さい)の数字が入ります。ちなみに実際の文字はこうなります。

h1はこれくらい

h2はこれくらい

h3はこれくらい

h4はこれくらい

h5はこれくらい

h6はこれくらい

大きさはこの感じをしっかり覚えて使いましょう。<h●>と</h●>は、太字になります。

段落は<p>と</p>を使います。

ちょっと覚えることが続きますが...もう少し我慢して頑張ろう!!

今回最後のタグは<center>と</center>です。このタグに挟まれた要素は、文が真ん中揃え(センターリング)になります。

練習問題!

ではここで、いきなりですが、練習問題です。ここまでのタグを使って下の様なページを作ってみましょう。タイトルはh2で真ん中揃え、リンク先はhttp://www.mufufu.co.jp/(架空のアドレスです)、リンクを張るのは「こちら」の文字、とします。

−−−−−−−−−−−−−−−−−−ここから−−−−−−−−−−−−−−−−−−−−

どきどき日記

今日、きれいなお姉ちゃんに声をかけられてドキドキしちゃった。詳しくはこちらまでどうぞ。

−−−−−−−−−−−−−−−−−−ここまで−−−−−−−−−−−−−−−−−−−−

すぐに答え!

みなさんはこう書けましたか?

<html>
<body>
<h2><center> どきどき日記 </center></h2>
<p>今日、きれいなお姉ちゃんに声をかけられてドキドキしちゃった。詳しくは<a href="http://www.mufufu.co.jp/">こちら</a>までどうぞ。</p>
</body>
</html>

となります。どうですか?簡単でしょ。「こんなしょーもないページを書くために、今まで付き合ってやったんじゃねーんだよ!!!」という読者の恨みが聞こえてきそうですが...
今はまだこんなもんですが、バカにしちゃいけません。すべてのことは基礎が大事。こういう小さな事からコツコツと固めていくことが結局のところ近道になるのです。さぁ、次からさらに美しいページを目指して頑張っていきましょう!!!!

この講座が人々の基礎固めに役立つのかどうか?は、はなはだ疑わしいが....

編集長の豆知識*** 基礎固め ***
言うまでもありません。学問に王道なし!どんなに高度なテクニック思っている人も、天才的な能力の持ち主も、最初は笑っちゃうくらい基礎的なことから始めるのです。そして、凡人との違いは、基礎をどれだけしっかり固めたか?にかかっていると編集長は考えます。それにしても日本人はホントに基礎好きらしく、住所として認められる住居は必ず一定の基礎工事を施さなければならないと法律で決められています。ですからアメリカのようなトレーラーハウスとか東南アジアの船の家などは、日本では家としていっさい認められません。それどころか、役所の言うことを聞かないと、下手すると逮捕されてしまいます。恐いですねー。

さて次回は、究極のレイアウトお助けマン、テーブルについて解説しようと思います。それでは、ばいなら!!!(死語:警告2)

 

トップに戻る

トップに戻る

第六回へ行く

第六回へ行く

あひるたん♪への励まし、愛情、記事のメールは こちら へどうぞ。