HTML初歩の初歩～その4～

<a href="リンク先のアドレス">～</a>で指定して、～の部分が画面上に「リンクのためのボタン」として下線付きで表示されます。

このシリーズの初回にジャンプさせたければ、<a href="html.htm">初回へどうぞ</a>と打ってやります。

戻る時はブラウザーの「戻る」ボタンで帰ってきてください。インターネット・エクスプローラーでは「Shift」を押しながらクリックしてやると、別Windowが開くようになります。

リンクにも幾つかバリエーションがあって、よく見かけるのは、今の画面はそのままにしておいて、新しいウインドウを開いて表示させる方法です。それには<a href="html.htm" target="_blank">もう一つの画面へどうぞ</a>と打ってやります。blankの前には「_」（アンダースコアー、ひらがなのろの所を半角でシフトして打ちます）を一つ打ちます。

なお、このページでリンクの「下線」が表示されないのは、私の好みでそう設定しているからです。また、マウスをリンクの上にもって来ると、色が変わるのも私の好みです。他人には押し付けませんので、普通にやってください。

ここで、気になってらっしゃる方もあろうかと思う、著作権の話。あちこちで、私のページにリンクするなら、「連絡を下さい」といった話を目にしますが、そんなもの、する必要はありません。あなたが論文を書いていて、参照した文献を挙げるのに、一々著者に断りを入れますか？参考文献に挙げてもらって、喜ぶ人はいますが、怒る人なんていません。他人の参考文献一覧に何度登場したかで、その論文の影響力の高さを測る調査もある位です。誤解された引用？誤解しない引用なんてありません。悪意ある引用？憎まれるうちが華です。「リンクしたら連絡下さい」？したい人はどうぞご自由に。連絡がきっかけで、話が弾むかもしれませんし、世界が広がるかもしれません。ただ、義務はないという事です。

ただ気を付けなければならないのは、自分のページ内の一部として他人のページを取り込んで表示させると、裁判で負けることもあるようです。引用と剽窃の境目はリンクと取り込みのようです。要するに、あたかもあなたのページの一部かのように思わせて、他人のページを第三者に見せてはいけないという事です。

それでも気になる方は社団法人著作権情報センターのQ&Aで、マルチメディアの著作権についての解説等を参照して下さい。

またリンク先の希望で、このバナーを使えというのも、あなたのページ内ですからそれを使うか使わないかはあなたの考え方次第と思われます。個人的には、例えばYahoo Japanのバナーなど、配色が悪くて使いたくありません。他の検索サイトのものでも、使って欲しかったら使って頂ける方に気に入ってもらえるような、更にデザインも幾種類かから選べるようにして欲しいものです。

ページ内リンク

リンクは他のページへばかり飛ばすものではありません。長文になると読みたい箇所を探すのが結構大変になります。そこでページの冒頭に目次を配置しておいて、そこから該当箇所へジャンプさせると読みやすくなる事もあります。<a href="#ch.one">第1章</a>と打ってやって、行きたい先には<a name="ch.one">～</a>と書いておきます。同じ手を使って各章末に目次へ戻るページ内リンクを張っておけばなお良いでしょう。注意点が三つあります。一つはリンク元の方には指定場所の前に＃を打っておく事。指定場所の名前は半角のローマ字で空白はいけない事。もう一つはリンク先の<a name="ch.one"></a>間に何らかの文字を入れる事です。二つを直に並べてしまうのはいけません。IEなどの賢いブラウザーはそれでもちゃんとリンクしてくれますが、文法上の誤りではあります。

別のページの指定場所へと一気にリンクしたければ、<a href="baikereki.htm#ch.one">バイク歴の第1章</a>と打ってやれば良いのです。

絶対アドレスと相対アドレス指定

リンクのアドレスを指定するには絶対アドレス（絶対URI）を指定する方法と、相対アドレス（相対URI）を指定する方法とがあります。絶対アドレスとは、このページですと
"http://www.onyx.dti.ne.jp/~saitone/easy/html4.htm"のように省略しないで全アドレスを記述する方法です。他人のページをリンクしたければ、この方法でアドレスを記述します。

しかし、例えばこのページから次のページである
"http://www.onyx.dti.ne.jp/~saitone/easy/html5.htm"へリンクしたければ、html5.htmより前の部分は同一ですから重なっている部分を省略して構いません。こうした指定方法を相対アドレス指定と言います。

この方法でリンクを張ると、<a href="html5.htm">～</a>と書きます。通常自分のサイト内のリンクは相対アドレス指定で行います。

注下記訂正参照しかし依然として正しいのは「相対URL」であるのには変わりはありません

ここで問題になるのが、サイト内にフォルダー（昔のWindowsではディレクトリーと呼んでいました）がある場合です。実はフォルダーをサイト内に置いてファイルを分類しておく事は、サイト管理上からも非常に大切です。ページ数が20から30を超えてくると、大抵の人は混乱してきて、リンク切れや参照に齟齬をきたしたりしてきます。

同一フォルダー内にあるファイルを参照（リンク）する場合、先の例ですと、正式には"./html5.htm"と書きますが、./は省略可能なので上記のようになります。

一つ上の階層のフォルダー（自分から見た場合の「親」に当たるファルダー）にあるファイルを参照する場合には、../を付けて、例えばこのページのスタイルシートですと、../nissi.cssと書きます。

同じ階層にある、別のフォルダー内のファイル（「おい・めい」に当たるファイルですね）ですと、例えば./wall/haikei.gif（同じく./は省略可）と単にフォルダー名を書いてやればよろしい。

一つ上の階層内の別フォルダーにある（「いとこ」関係にある）ファイルの場合は、../ethics/ethics.cssと書きます。

要するに、階層を一段階登る際には../を付けてやれば良いのです。ですから、二段階上のフォルダーにあるファイルでしたら、../../を付けてやれば良い訳です。

注・訂正・対処

悲しい事ですが、世に普及しているNetscape4.xはスタイルシートでの相対アドレス指定を誤解します。スタイルシートからの相対アドレスを、読み込んだHTMLファイルからの相対アドレスに解釈してしまうのです。

また背景に画像を指定した場合に、その上に配置された画像の背景を「透明」に指定しても変に解されます。既にお気付きのように「見出し」H3をL字型に修飾している本ページではその背景がNetscapeでは「ブラックアウト」していました（下記方法で修正済み）。どうぞIEかN6に移行されます事を強くお勧めします。

お馬鹿なNetscape4のための妥協策としては、絶対URLを使って背景などの画像をスタイルシートで指定するのが一つ。これは「許されてはいるようです」（上記の記述は訂正します）。

もう一つの妥協策の方をお勧めします。それはフォルダー内にもう一つ、画像のURLを相対指定したCSSファイルを置いてカスケードさせることです。こっちの方がスマートな解消策でしょう。本来のCSSより下の行に同一フォルダー内のCSSへのリンクを書いてやればカスケードされて、異なっている部分だけ適用されます。

まとめ

大切な補足を一つ。タグを打つ際には「入れ子」構造にしなければなりません。正しい例と、誤った例を示します。

誤った例

正しい例

画像をクリックしてリンクするには

ここまで来れば、自分のページができると思います。えっ、画像の入れ方や動きのあるページにする方法？先ずは内容を整えてから、そんな事はやればよいのです。そのうち分かります。

と言うのも無責任ですから、よく使われる画像をクリックするとリンク先へジャンプする方法を示しておきます。先に述べた<a href="リンク先のアドレス">～</a>の～の部分に画像を置けば良いのです。画像は<img>（img＝イメージ）というタグで指定します。

<img>の後に希望の画像の所在地（＝アドレス）をsrc="birds.file/swan.jpg"等と指定してやります。birds.fileの中にあるswan.jpgが表示され、その画像上でクリックするとジャンプします。

全てを続けて書けば、<a href="photo.htm"><img src="birds.file/swan.jpg"></a>となります。しかしこのままでは画像の周囲に（初期設定では）青い枠線が表示されてしまいます。これが嫌なら画像のアドレスの後に半角の空白を入れてからborder="0"と打てば枠が無くなります。

これも「見栄え」に関わる事ですから、スタイルシートのお出ましです。しかし手許のNetscape4.7は「リンク付き画像の枠線消し」というスタイルシートの指定を理解しません。正しいHTMLで書かれたページを、Netscape4.7は醜く表示します。

ここで例を一つ出しておきます。そのソースは以下の通りです。このようにmailto:の後にメールアドレスを打てば、メールを出すことも出来ます。IEでマウスを画像の上に少しかかげておくと、alt（＝代替文字）に打っておいたメッセージがポップアップして表示されるようになります。これを添えることは、画像を表示しない（出来ない）ブラウザーで見ている人のために義務付けられています。また縦・横のピクセル数を入れたのは、大きな画像の場合に表示が速くなるためだそうですので、習慣にしておきましょう。縦横のサイズは、素のままの画像の上で右クリックして、プロパティーで見られます。

メールソフトが起動すると、上記アドレスが宛先に書き込まれた状態になっていると思います。さらに件名（タイトル）まで書き込まれた状態にしたければ、上記メールアドレスの直後に?subject=希望のタイトルと打ち込んで、"で閉じてやれば良いのです。

さらにおせっかいにも、本文まで指定したければその後に続けて&body=希望の本文とすれば良いのです。例を示せば、こうなります。

<a href="mailto:webmaster@saiton.net?subject=HTMLのページへの感想&body=お名前、連絡先を明記の上、感想・要望をこの後にご記入ください。">適当な文字か画像</a>

画像に関する補足

１
画像を表示させるには、当のHTMLファイルと同じフォルダーに画像を置かなければならない訳でもありません（上記の場合ですとback.filesというフォルダーの中）。例えばW3Cという団体のロゴなどは、彼らの指定するアドレスを指定してやれば、あなたのページを開く途中でW3Cのサイトにその画像を読みに行き、そこからデータを取ってきてあなたのページに表示してくれます。

同様の方法はYahooなどのポータルサイト（ページ検索サイト）のリンクをあなたのページ内に張る場合でも使えます。ただしこの方法では、画像表示に時間がかかってしまう事もあるので、それを心配する人は表示させたい画像をいったんダウンロードして自分のフォルダーにアップロードしてやりましょう。

２
Web上に置く画像は、何らかの圧縮を行ったものを用いるべきです。無圧縮である画像には「拡張子」にBMPが付いているのでお分かりでしょう。手許にある小型30万画素デジタルカメラでは、USBケーブル経由でパソコンに撮影画像を取り込むと、BMPで保存されます。サイズは30万画素なのに約300KBもあります。これをアナログ回線で取り込むと、例えば私の環境では、毎秒4KBとして300/4＝1分15秒もかかってしまいます。

Officeの導入された環境には、PHOTO EDITORというソフトウェアーがインストールされていますが、それでBMPをJPEGに変換して保存できます。20KB程度に圧縮してもなんとか見られる質でしょう。これならダウンロードに5秒ほどしかかかりませんので許容範囲です。優れたデジタルカメラではこの変換を自動的にやってくれるものもありますので、お手持ちの画像取り込み装置を確認してください。

３
こうして取り込んだ画像を、表示させる際の実際のサイズは、例えば上記のようにwidth="107" height="35"と指定します。数字の単位はピクセル（=ドット）です。元の画像がどんな大きさでも、この指定に従って表示されます。たとえ元の画像がJPEGで20KB程の大さでも、画面一杯に表示させる事もできる訳です。もちろんその際には画像のアラが目立ってしまいます。

現在のパソコンの画面はディスプレーや設定によりますが、横縦が640×480のVGA、800×600のSVGA、1024×768のXGA、1280×1024のSXGAが大多数を占めています。しかし手許の環境がSXGAだからといって画像の横幅を1200ドットに指定してやるとSVGAどころかXGA規格のディスプレーでも横にスクロールさせないと全体が見えません。

横スクロールは縦のスクロールとは異なり、非常に見難いものです。何せ縦スクロールは、ホイール付きマウスでは簡単に操作できますし、Page DownやPage Upキーが付いていますから問題はあまりありません。

ですから現状では横のサイズは余裕を持って790ドット以内（すなわちSVGAでも確実に収まる）にすべきでしょう。これでもお気に入りや履歴のエクスプローラーバーを出していると横スクロール・バーが出ますから、そこまで気を使うのでしたら500から600ドット以内が安全ラインかも知れません。

４
画像が表示される位置は、スタイルシートで決めます。無指定ですと左端に表示されます。スタイルシートについてはその５とその６をご覧下さい。その５にある{margin:25pt}などを使って左からのマージンを決めます。ただしこのままでは上下左右のマージンが25ポイントになりますから、左だけ25ポイントにしたければ、{margin:0 0 0 25pt}と書きます。4つの数字は時計回りに上、右、下、左のマージンを指します。

５
HTML4.0以降では、画像には必ずalt（＝代替文字）を添える事が義務付けられました。Windowsでは画像の上にカーソルを置くと、文字がポップアップして表示されます。

このポップアップは他の方法でも表示させられます。画像以外にも例えば<a href="***.htm" title="***">と、リンクタグにタイトルを添える事によって実現できます。このタイトルはほとんどの要素に適用可能です。ここや下の「～」の上にカーソルを置いてみて下さい。

ポップアップする文章は適当に改行されますが、レイアウト上の要求で好みに応じて改行を入れたければ、「
」と入れることによって改行します。

若干のリンク

ここでMicrosoft (US)の無料素材集を紹介しておきます。著作権も大丈夫です。その他、検索サイト（ポータル・サイトというんでしょうかYahooとかInfoseekです）で素材とキーワードを入れると嫌という程出てくると思います。

また「まっとうな入門ページ」をご希望の向きには、以下のサイトを参考に挙げておきます。
最初のものはMicrosoft (US)のサイトで、もちろん英語で少々古いのですが、この類のものの中では一番良く出来ていると私は思います。またこのページの一番下のリンクから、今挙げたmsdn online Web Workshopにも行けますし、w3cにも行けます。

日本語では二行目の『30分間HTML入門』は中・上級者向けのサイトにありますが、その名の通りやさしく書いてありお勧めします。私のこのページを見終わった後で見ると、大変良く分かると思います。

携帯電話でインターネット？

iモード向けのページを造りたければ

iモードは2001年1月にには加入者が1700万人を超え、今年中にも2000万人を突破すると言われている。そのためiモード用のホームページを立ち上げる人も増えてきた。

携帯電話市場は全体で6,300万台を超え、NTTドコモのiモード端末の契約数は32,000台/日のスピードで増加しているそうだ。

Compact HTML自体はHTML4.0のサブセット（簡易化した版）ですが、標準規格としてRecommendationになっている訳ではなく、上記の通りNoteに過ぎません。とは言え一定の目安にはなるのでしょう。それを独自拡張したのが、ドコモの規格です。従って他社製の携帯電話からは、一部製作者の意図通りには見ることが出来ない事もあるようです。（画像はGIFだけなのですが、最新機種の一部にはJPEGも表示可能のものもあるようです。）

しかしそれは余りにも馬鹿げています。携帯電話に限らずこれからは様々な携帯端末で情報を取り出す事が求められるというのに、特定の会社の特定の機種しか使えない事で得をするのは、その電話会社と端末を作っている会社だけです。使用者不在のまま規格を独自拡張して、他社製品の参入を排除する事を阻止するためには、統一規格の早期制定が求められます。

エディターだけでももちろん作れます

下記のサービスやソフトを利用しなくても、もちろん携帯端末用のページは作れます。そもそも携帯電話の画面サイズ、特に縦横の文字数は日進月歩で変化していますし、PC以上に買い替えが日常的になっていますから、現状に合わせたページが時代遅れになるのは目に見えています。ですからどの携帯でも見えるページとして、XHTML-Basicで書いておく方が良いというのが、私の個人的想いです。

DoCoMoのページを先ず確認。i-modeのHTMLタグの解説もあります。
NTT 作ろうiモードホームページ

パソコンでi-modeの画面を確認するソフトもあるようです（なかなか良く出来ているが、画像が表示できない）
iModeSS ver0.03

またヴェクターにも作成用ソフトが幾つかあるようです
Vector/htmledit/mobile

作成サービスのページというものもあります（ただしここのソースを覗いてみると、凄まじいものがあります）
魔法のiらんど

決定版は無償でダウンロード出来る『Pixo インターネットマイクロブラウザー』でしょうか。
PIXO

J-SKYのためには

EZ-webのためには

スタイル・シート

本格的にwebデザインをやろうとすると、CSS(Cascading Style Sheets)を用いる事になります。

～その4～ リンク・まとめ