webページ制作講座〜基本編、HTML編
メールでの質問を受け付けています。
最も簡単なホームページの作り方
−本を読んで挫折した人へ−
これを読むのも面倒な人へ
タダという訳にはいきませんが、ホームページの作成を代行します。詳しくはインフォメーションをご覧下さい。
また、掲示板で質問に答えています。もちろん、こちらは無料ですので、どんどんご活用下さい。
わからなければ読み飛ばして結構です。わかる所だけでも読んで下さい。「ここがわかりづらい」というメールも歓迎です。
HTMLをやっつける前に
HTMLとは何ぞや?
HTMLとは、Hyper Text Markup Languageの略です。訳すと、すんげえ文章書き上げ語。こう書けば親しみもわくでしょ？ 実際、そんなに難しいものではありません。私でさえ理解できたんですから。
その昔、「どんなワープロでも使えるフォーマットを」という要求から、SGML (Standard Generized Markup Language) というものが生まれました。HTMLは、SGMLを簡単にし、インターネット用の機能を拡張したものです。
HTMLエディタは必要?
ショップに行くと、あまたのHTMLエディタが並んでいるだけでなく、HTML変換機能を持ったワープロ等もたくさん売っています。もちろん、それを使える環境にあり、なおかつ不満がない人はそれで構いません。しかし、「NTTが私の口座から泥棒していくから、そんなもの買う金はない」って人（切実…）は、ネット上からフリーのHTMLエディタをとって来るか、ここを読んで自分でHTMLを書きましょう。WWWで情報を発信する時、アクセスカウンタが回らないのを道具のせいにしてはいけません（例外＝異様に遅いプロバイダの場合は、あなたの資金力を嘆いて下さい）。
ここでは、ごく普通のテキストエディタ、極論すればsimpletextでページを作ることを前提に話を進めます。「HTMLエディタはあるけど、思った通りに作ってくれない」という人が手書きする際にも使えるようにしてありますので、できればご一読を。
インターネットでは使用禁止の文字
HTMLは「どんな機種でも読める文書」です。逆に言えば、様々な機種で読むことを前提としているので、特定の機種でしか使えない文字は使ってはいけないのです。
以下の文字は使わないようにしましょう。
- 半角カナ
- 丸囲み数字、アラビア数字などの修飾文字
- Tel記号などの絵文字、(株)などの省略文字
逆に、以下の文字は使用可能です。
- α、βなどのギリシャ文字
- ≧、∵などの数学記号
- カナを除く半角文字
文字化けのあるページは見苦しいものです。ホームページで最もよく起こる問題だけに、注意が必要です。
上の規則は、メールを書く時にも当てはまります。注意しましょう。
タグ編
一度読んだら二度と読まなくてすむ、タグの書き方
HTMLタグは、命令名を不等号で囲んだ <command> の形で記述します。基本的に、 <command> から </command> までの間にあるものが、指定したcommandの有効範囲になります。タグを書く時は、半角にするのをお忘れなく。
普通の文字<b>ボールド</b>普通<i>イタリック</i>
複数のタグを同時に使いたい時は…？ 構うことはありません、両方指定しちゃえばいいのです。ただ、閉じる順番を間違えないように注意しましょう。間違えると、予期しない表示になることがあります。
<b><i>ボールドで、かつイタリック</i></b>
また、オプションが指定できるタグもあります。この場合、命令とオプションをスペースで区切り、 <command option="xx"> と記述します。オプションを複数指定することもできます。
<font size="+1">1段階大きい文字</font>
<font size="+2" color="navy">2段階大きく、紺色の文字</font>
タグの決まりごとはこれだけです。あとは使える命令を10も覚えれば、ページなんて簡単に作れます。
HTMLタグを覚えるには、実物を見るのが一番。そこで、××でもわかる使用例一覧を載せます。はじめのうちは、オプションも無視して結構です。
注意：以下の表を正しく見るには、Netscape Navigator 3.01以上が必要です。
もし正しく表示されていない場合、そのタグは自分では確認できないので、友人知人に確認してもらうか、使用をあきらめるかしましょう。
補足＝上の表を見て「あれ？」と思った人はいないでしょうか。普通なら、半角の < と > はタグと見なされて、表示出来ないはずですよね。実は、<は<、>は>、と記述するのです。またこの都合上、&も&と書く場合があります。
上で<img src="images/****.***">と表記されている画像は、http://www.kinet.or.jp/h_ijuin/images/****.***にあります。
比較的すぐ使いたくなるであろうタグ
| 記述するタグ | オプション | その結果の表示 |
|---|
| <b>ボールド</b> | ボールド（太文字） |
| <i>イタリック</i> | イタリック（斜体） |
| <strike>消 去 線</strike> | 消 去 線 |
| <!--隠しコメント--> |
（コメントは表示されませんが、ソースを見ると読めます） |
| <big>大きく<big>もっと大きく</big>ひとつ戻る</big>元に戻る | 大きくもっと大きくひとつ戻る元に戻る |
| <small<小さく<small>もっと小さく</small>ひとつ戻る</small>元に戻る | 小さくもっと小さくひとつ戻る元に戻る |
| <font> | （文字に関するタグ。必ずオプションと一緒に指定）
※このタグは、HTML4.0で「将来廃止するタグ」とされています。 |
| size=-2 | （文字を2段階小さく） |
| size=+2 | （文字を2段階大きく） |
| color="maroon" | 文字の色を茶色に（<body>タグ同様、色名で16色、16進数で16,777,216色が指定可） |
| face="細明朝体,標準明朝" | （指定したフォントがマシンに入っていれば、それで表示。カンマで区切ることにより複数を指定可能で、先に書いたものが優先。使うなら、Mac用とWin用の各1つは、最低でも書いておきましょう） |
| <nobr>改行禁止</nobr> | 改行禁止
（このタグの間は一切改行されません。但し<br>、<wbr>タグは有効です）
※これはNN拡張タグです。 |
| 長い文章を<wbr>折り返す | 長い文章を折り返す
（主に<nobr>タグ中で使用。強制改行の<br>と違い任意改行のため、ウインドウ幅に余裕があれば改行されません） |
| <blink>点滅</blink> |
（多用すると見づらくなるので注意しましょう）
※これはNN拡張タグです。 |
テーブル関係のタグ
| 記述するタグ | オプション | その結果の表示 |
|---|
| <table> | （テーブルここから） |
| border="5" | |
| cellspacing="5" | |
| cellpadding="10" | |
| width="xx" height="yy" | （<img>タグ同様、表全体の大きさを指定できます。％でも指定可） |
| bgcolor="yellow" | | 背景を黄色に | | （<body>タグ同様、背景色を色名で16色、16進数で16,777,216色指定できます） |
|
| background="images/bg2.gif" | |
| <caption>キャプション</caption> | キャプション
（表の上にキャプションがつきます。省略可） |
| align="bottom" | （キャプションが表の下につきます） |
| <tr> | （テーブル1行目ここから） |
| align="center" | その行のセルは全て中央寄せ
（段落<p>タグ同様、右寄せも可能） |
|
valign="bottom"
| その行のセルは全て下寄せ |
|
valign="top"
| その行のセルは全て上寄せ |
<th>見出しセル</th>
<td>データセル</td> | |
| align="center" | そのセルに限り中央寄せ
（<tr>タグ同様右寄せも可能） |
|
valign="bottom"
| そのセルに限り下寄せ
（<tr>タグ同様上寄せも可能） |
| colspan="3" | （一番左のセルで指定） |
| rowspan="3" | （一番上のセルで指定。colspanと併用可能） |
| nowrap | 改行禁止
（<nobr>と同様、<br>や<wbr>タグは有効）
※このオプションはHTML4.0で「将来廃止するタグオプション」とされています。 |
| bgcolor="yellow" | | このセルに限り背景を黄色に | | （<body>タグ同様、背景色を色名で16色、16進数で16,777,216色指定できます） | | （他のセルには色がつきません） |
|
| background="images/bg2.gif" | | このセルのみの背景に貼る画像を指定 | | （他のセルには貼られません） |
|
<td>セル</td>
<td></td>
<td> </td> | （中身のないセルは表示されません） |
| </tr> | （テーブル1行目ここまで） |
<tr><td>1行目の1</td><td>1行目の2</td></tr>
<tr><td>2行目の1</td><td>2行目の2</td></tr> | |
| </table> | （テーブルここまで） |
特別付録：色名で指定できる色
| white | red | lime | blue |
| silver | maroon | green | navy |
| gray | olive | teal | purple |
| black | yellow | aqua | fuchsia |
今度はスタイルシートについて説明したいと思います。次回の更新をお待ち下さい。
ここまで理解できたようなら、「いいな」と思ったページのソースを見てみるといいでしょう。「これはこうやっているのか」という発見があると思います。
画像編
素材は借り物で十分
ボタンや背景などを、意地でも自分で作ろうとする人、いませんか? はっきり言いましょう。時間の無駄です。背景やワンポイントの画像なんて、借り物でいいんです。私もそうです。素材集のCD-ROMを買ってきてもいいですし、ネット上には無料で素材を提供してくれるページがたくさんあります。その中のどれを使うかで、あなたの個性は十分表現できます。「どうしても固有名詞の入ったボタンが欲しい」とか、「私のセンスに合った素材が見つからない」となった時は……さすがに自作するしかありませんが、バナーに文字を乗せるだけとかだったら、下地だけ借りてくることもできます。はっきり言って、作るより更新する方が面倒です。そして、たくさんの人に見てもらうには更新こそが重要です。今から手を抜くことを考えておきましょう。
画像は出来るだけ軽く
どんなにいいページを作っても、画像の読み込みに時間がかかってしまうようでは、読者は「読み込み中止」ボタンを押してしまいます。例えば、自分の顔写真。あなたがよっぽどの美形でない限り、「高画質で見たい」人よりも「多少荒れててもいいから、素早く見たい」人の方が多いはずです。以下に、TheJPEGによって作ったJPEGファイルと、そのファイルサイズを載せておきますので参考にして下さい。
画質100（最高）＝46,245Bytes。普通ならこんな重い画像は載せませんが、基準にするためにやむなく掲載します。ちなみに、全く同じ画像をPhotoshop形式で保存した場合は199,798Bytesになります。
画質80＝12,396Bytes。画質はほとんど変わりませんが、ファイルサイズは約27%です。Photoshop形式と比較すると、わずか6.2%。JPEGの本領発揮といったところですね。
画質50＝7,844Bytes。画質の劣化が目立たないのはこの程度までです。
画質40＝6,967Bytes。ある程度のクオリティを残したいならこの程度でしょうか。
画質30＝5,985Bytes。大抵の写真はこの程度で十分だと思います。
画質20＝4,776Bytes。かなりノイズが目立ちますが、何が写っているかがわかれば事足りるような時はこれでもいいでしょう。
画質10＝3,194Bytes。ここまで来ると、誰が写っているのかもわかりません。
画質0（最低）＝1,490Bytes。画像ファイルとは思えないファイルサイズですが、画像とは思えない画質でもあります。うまく使えば、「ヒントでピント」ができそうですね。
<!--実はこの画像、無許可掲載です。その筋には通報しないで下さい-->
上は極端な例ですが、圧縮率を設定できるソフトを使っているのであれば、一度いろいろ試してみることをおすすめします。
見かけだけでも画像を軽くする
<img>タグにwidth指定、height指定をしておきましょう。そうするとブラウザは、画像を読み込まなくてもレイアウトを完了して文字データを表示できるため、見る側は軽く感じられます。さらにalt指定もしておくと、指定した画像名が表示されるため、「読み込み中止」をしてもどのような画像かが判断できます。画像の自動読み込みをしない設定にしている人や、テキストブラウザ（文字しか表示出来ないブラウザ）で接続している人のことも考えて、最低限リンクボタンにはalt指定をしておきましょう。
つまり、<img src="gifimage.gif">というタグを、<img src="gifimage.gif" width="64" height="32" alt="GIF画像">にする訳です。
上級編
※教えられるほどのものはありませんが……。
基本はまめな更新
ページにカウンタをつけた人にとって、カウンタがどれだけ回るかはかなり気になるところです。まさか自分で何度もリロードする人はいないでしょうが、少しでも多い方がいいと思うのは当然でしょう。では、どうすればお客さんは来るでしょうか。
JavaやShockwaveを積んだページ? 読み込みに時間がかかり過ぎますし、読む相手によってはそれらが動きません。サーチエンジンへの登録? それもある程度は効果があるでしょう。しかし、そこから来た人たちは一度しか来ない場合が大部分です。
では、どうすればいいのでしょうか。答えは簡単です。一度来た人に、何度も来たいと思わせればいいのです。「それが難しいんだよ」。その通り。私も苦労しています。もちろん、コンテンツが充実していればそれだけで何度でも来てくれるでしょう。しかし、それは簡単なことではありません。では、そこそこの内容でも繰り返し来てもらうにはどうすればいいのでしょうか。それには、更新しかありません。とにかく更新しまくるのです。来るたびに何かしら新しくなっていれば、また来ようという気になるものです。
それも面倒な、ものぐさのあなた。掲示板やチャットなど、インタラクティブなものを設置するといいでしょう。つまり、読者に更新させるのです。これなら一石二鳥。ただし、それに頼り過ぎると、読者は掲示板なりチャットなりに直接ブックマークしてしまい、結局indexのカウンタは回らなくなるので注意しましょう。CGIが使えない人は…無料で貸してくれるページがあるので、それを使えばいいでしょう。
ページ毎にメリハリをつけよう
「画像を出来るだけ軽く」「読み手を選ぶ機能は出来るだけ使わない」というのは、ページを作るに当たって当然の心構えです。ですが、つまらないページだと思われたり、自分の技術力をみくびられたりする可能性もあります。また、時には大きな画像や新しい技術を使いたい、あるいは使わざるを得ない場合もあります。そのような場合は、別にページを作って「重い（＊＊＊を使った）ページです」と断った上でリンクを張っておくのです。そうすれば、それを読み込むかどうかは読者が選択できます。軽さや汎用性と面白さを両立するには、ちょっとした工夫が必要です。
なお、私のindexページにはJavaScript（Javaとは異なる）を使用しています。使用していることは特に表示していませんが、内容は隠しフィーチャー程度に留め、JavaScriptが動作しないブラウザでも問題がないようにしています。わずか952バイト（実際にはそれ以下）なので、重さも全く問題ありません。
標題とは矛盾しますが…
私が利用している本とサイトを紹介しておきます。
HTML関連＝新・HTML＆CGI入門（エーアイ出版）私はPageMillの生成するソースを見てHTMLを覚えましたが、PageMillが対応していないタグはこれで覚えました。「あれがやりたい」と思った時、目次を見てそこを読むだけで、使用例を見ながらすぐに使える作りが便利です。
JavaScript関連＝JavaScriptサンプル集（秀和システム）サンプルスクリプトを多数収録しているので、初心者もコピー＆ペーストするだけでJavaScriptを使えます。他の本を見て「文法から説明されてもわかんねーよ(:_;)」と泣いた私にとって、HTMLの時同様「実物を見て覚える」この本はありがたいものでした。クイックリファレンスもついているので、私のように「本格的にやる気はないけど、ちょっと使いたい」人にはいいでしょう。
スタイルシート関連＝最新HTMLタグマスター（JUSTSYSTEM）ソースのサンプルとその表示結果が1対1で図示されているので、「こう指定するとこう表示される」というのが非常にわかりやすくなっています。上記2冊と同様、「あれ？」と思った時にすぐ読んで確認するのに便利です。
CGI関連＝web裏技（http://www2r.biglobe.or.jp/~rescue/）perlはさっぱりわからない私。ここに行けば一通りのアイテムが揃っているので、コピーするだけ。いじる所はわずかです。皆さん重宝していらっしゃるようで、重いのが玉に傷。
素材関連＝Internetホームページ用素材集／同クール＆ビジネス編（インプレス）素材集も数多く出回っていますが、イラストや写真を必要としない私にとって、背景画像とボタン素材が充実しているこれは便利です。
ホームページに戻る
（指定した画像が表示されます）