HTML初歩の初歩

〜その1〜
情報発信の技術

このシリーズの詳細目次はこちら

最初の一歩

右クリックから新規作成を呼び出して、テキスト文書を作成して下さい。My Documentsでもデスクトップ上でも、場所はどこでも結構です。こうすると、「新規テキスト文書.txt」という名前が付いた、ノートのような姿をしたアイコンが出来ます。名前はそのままで良いでしょう。それを左ボタンでダブルクリックすると、メモ帳(正式名はNotepad)が開いて、空白のページが画面上に表示されます。ここがスタートラインです。

テキスト・エディターについての解説

HTMLとは

HTMLとはHyper Text Markup Languageの略です。真面目に勉強したい人は、それなりの参考書が巷にありますから、どうぞそれで勉強なさってください。ここでは難しい事は抜きにして、とにかく自力で他人にも見せられる位のページを作るまでを目標に致します。HTMLとは、どのコンピューターでも同じ様に読める共通語、位に考えてもらえばよいと思います。

HTML辞典のような「リファレンス本(参考書)」は、とりあえず一冊買っておいた方が良いでしょう。より正確でかつ通信料だけで入手できる情報は、インターネット上にもありますが、印刷された参照材料があった方が何かと便利です。

私が最初に購入したのは、『カラー版ホームページ辞典』(翔泳社刊1900円)でした。酷い間違いは無かったように思います。この出版社のページからは誤植に関する訂正情報も入手できます。

2001年2月現在、HTML4.01に準拠した新版が出ています。旧版ではJavaScriptとスタイルシートについての解説が付いていましたが、内容が「より」正確になったのと引き換えに新版ではそれらが無くなりました。代わってi-mode向けコンパクトHTMLのページが付け加えられました。

もちろん他にも良い参照本があると思いますが、なかには不正確な酷い本もありますので注意が必要です。また初めから細かな「テクニック」に走る「派手な」見栄えを可能にする事をうたった本は敬遠すべきでしょう。

2000年の1月にW3C(=HTMLなどの「文法」やその他の規格を定める国際機関)から勧告された規格がXHTML1.0です。

このページもそのXHTML1.0に則って書かれています。既に2000年4月にXHTML1.1が「勧告案」として公開され、2001年5月31日に正式の「勧告(Recommendation)」になりました。

簡単に言うと、XHTMLとはXMLという形式でHTMLを定義し直したものです。将来は現在最も広く使われているHTML4.01までの「HTML」は(恐らく)使われなくなり、XHTMLに移行するものと思われます

しかしご安心下さい。XHTML1.0はHTML4.01とほとんど同じなのです。ただ将来の拡張性を留保してある形式、と考えておいて間違いはないでしょう。ですから、「正しい」HTML4.01を書いていれば、XHTML1.0への「移行」は容易です。以下の各ポイントに気を付けた上で「正しい」HTMLを書いておく事を「強くお勧めします」。後程XHTMLへ移行する際の手間が非常に軽減される事を保証いたします。

大枠の設定

先ず第一に、開いた空白のメモ帳に、「HTMLである」という事を書いてあげて、それを読むコンピューターに教える必要があります。「ハイパー・テキストをマークアップする言語」というのは、こうした教えてあげるための「記号」を、マークアップ=記すためのものです。記された「記号」の事を、タグと呼んでいます。このタグは、必ず全て半角の英数文字で書く決まりになっています。そしてタグの初めと終わりには必ず<>が来ます。

さて、HTMLである事を教えるためには、<html>というタグを書いてやればよいのです。当面は大文字でも小文字でも構いませんが、将来的には小文字に移行する方針が示されていますので、これから書く人は全て小文字にしておくと便利でしょう。そしてHTMLのオシマイには</html>と書く事になっています。/は、オシマイのタグに付けられる印です。

本文は<boby>〜</body>の間に書きます。序文というか、本文に関する様々な情報は<head>〜</head>の間に書きますが、タイトル(=<title>〜</title>の間)以外は表示されません。このページですと、<title>HTMLの初歩の初歩</title>と書かれており、ブラウザーの左上に表示されていると思います。

それから大事な事をもう一つ。文章は<p>〜</p>の間に書きます。いきなり書いても多くのブラウザーはちゃんと表示してくれますが、これは文章ですよと教えてあげましょう。

ここまでをおさらいして、メモ帳に書いてみましょう。ここでずるをしてコピーしては勉強になりません。そうした事が出来ないように、わざと<>は全角で打ってあります。
ここではインデントして書きましたが、もちろん左寄せのままで結構です。
<html>
    <head>
<title>
初めの一歩 </title>
    </head>
  <body>

<p>先ずはこんな感じです</p>
  </body>
</html>

これでも一応は立派なHTML、全ての基本となる1ページです。そして出来たら、保存しましょう。メモ帳の左上にある、ファイルというのをクリックすると、「名前を付けて保存」というのがありますから、そこを押して、名前を「半角英数字.htm」として保存します。

.htmというのは、HTMLを表す「拡張子」です。Windowsではこの拡張子が付いているファイルをクリックすると、「関連付け」されたソフトウェアーが自動的に起動します。この場合は標準で関連付けされているInternet Explorerでファイルを開きます。

保存されると、普段使っているブラウザーのアイコンに、形が変わっていると思います。普通にダブルクリックすると、自動的にブラウザーが立ち上がって、作ったページが表示されると思います。真っ白な所に今入れた、「先ずはこんな感じです」と表示されていると思います。

試しに作ったページを表示してみます(注:ここで表示させているのは、正式なヘッダー情報を付加してあります)そのように表示されるはずです。左上の「ページ・タイトル」も、入力したように表示されていますね。ブラウザーの上にあるバーから、表示>ソースというのを押してやると、今入力したタグ群が出てくると思います。コンピューターはこれを読み取って、このように表示した訳です。

編集

ではどのようにして、編集したらよいのでしょうか。アイコンを左クリックするとブラウザーが立ち上がってしまいますから、右クリックして「送る」の中からメモ帳を選んで下さい。もし SEND TO にメモ帳がなければ、メモ帳のショートカットをデスクトップに作って、エクスプローラーで開いたWindowsの下にある SEND TO というフォルダーの中に移動させてください。これで上記の作業が出来ます。

WindowsMeではSEND TOフォルダーは「隠しフォルダー」といって、標準では見えません。My Documentsで、「表示」から「フォルダオプション」そして「表示」の一覧表から「全てのファイルを表示する」にチェックを入れると見えるようになります。

またインターネット・エクスプローラーの場合ですと、ツールバーを右クリックすると、ユーザー設定というのが開けます。左の窓から、編集というのを右に移して、順番を上のほうに移しておいて下さい。Microsoft Office をインストールされている環境では、MS Word が初期設定で開いてしまいますから、ツール、インターネットオプション、プログラム、HTML エディター、と順に開いて、Windows Notepad を選んでおきます。こうしておけば、IE でページを表示させてから、編集ボタンを押すと、メモ帳が立ち上がって編集できます。この方法もお勧めです。編集ボタンを押さなくても、左上隅にあるファイルというボタンを押してメニューから「メモ帳で編集」というのを選んでクリックしても同じです。もちろん編集後は、メモ帳の左上にある、「ファイル」から「上書き保存」を選んでおけば大丈夫です。

編集や小修正の結果を確認したければ、IE のツールバーの「更新」というのを押してください。上手く反映されていれば良し、そうでなかったら、今の作業を繰り返します。その際、メモ帳を画面一杯に広げないで、IEのツールバーが見えるようにしておくと、上書き保存後に一発で結果が確認できます。

ブラウザー(=Browser、ブラウズする、つまりweb上をあちこち拾い読みするための道具。HTMLを見やすく表示してくれるソフトウェアーのこと。)にはインターネット・エクスプローラー(=IE)ネットスケープ・ナビゲーター(=NN)  (もしくはコミュニケーター=NC)をほとんどの人が使っているようです。

最近の調査ではIEとNetscapeの比率は9対1程のようですが、少数派を無視する訳にもゆきません。対象は(サイトの内容からして)中級者以上だと思いますが、『三日坊主の部屋』での統計などが参考になるかも知れません。Macユーザーでも4人に1人しかNetscapeを使っていないようです。どちらか一方のブラウザーでだけ上手に表示されるページ作りは避けた方が良いでしょう。とはいえ私のサイトでは、数箇所でIEに特有のタグを使っています(除去中)。

入力の基本

ここでやたらにいろいろなタグを習うより、とにかく入力してみましょう。何を入力したらよいか分からない?そういう人は、他人のページを見て、ネットサーフィンしてれば良いじゃありませんか。書きたい事がないなら、自分のサイトを作る意味はありません。

文章の入力は<body>〜</body>の間にします。ここでひとかたまりの文章ごとに、<p>〜</p>で囲ってあげます。

これを段落を表す記号と考えて下さい。P はもちろん Paragraph (パラグラフ)の意味です。<p>〜</p>で囲った中は、一段落とみなされて、その前後は1行改行されて表示されます。

パラグラフの前後が改行されると共に広めの行間を取って表示されるいうのは、HTML をブラウザが見やすく表示するためにそうしているだけであって、必ずどのブラウザでも同じように行間が広く取られるわけではありませんし、行の幅は後述するスタイルシートによって、いかようにでも設定変更できるものなのです。自分の常用するブラウザがそうだから、と前提してしまうととんでもない事がどこかで起きているかも知れません。

パラグラフの途中で強制的に改行したい場合には <br> (BReak line かな?)を挿入します。ですからただ改行したいがために<p>〜</p>を多用するのは好ましくないと考えられています。ひどいページになると各行ごとに<p>〜</p>を打っている、見苦しいものもありますが、真似してはなりません。無用なタグの連発は、ファイルのサイズを大きくし過ぎて、読み込みが遅くなるばかりか、プロバイダーから与えられているページの容量限度さえ圧迫します。

意味のあるかたまりを<p>〜</p>で囲うべきであって、見栄えだけで<p>を連発してはなりません。

どうしても各行の間隔を広げたければ、本文冒頭の<body>の代わりに、<body style="line-height : 160%">としておくとかなり読みやすくなります。160%の代わりに、適当な数字を入れ替えて自分で確かめてください。数字が大きくなるほど、行間が開きます。

いまだに文字の大きさ(フォント・サイズといいます)を、ここは8ptとか12ptという風に、絶対指定するページがあとを絶ちません。レイアウトを崩したくないのでしょうが、作者の画面サイズ以外では間の抜けたレイアウトになる事を知らないのでしょうか。こう指定されてしまいますと、こちらが老眼で文字を大きく表示させようとしても簡単には出来ません。なるべく避けたいものです。

160%という数字は全角の文字の高さを基準にしています。全角の文字が大きければ、比例して行間も大きく取られます。こうした指定法を相対指定といいます。これならば、閲覧者の都合で全体を大きなフォントサイズに拡大してやれば、それに応じて文字が大きくなり、行間も開きます。これを指定しないで、べた打ちしますと、非常に見難い表示になってしまいます。そう、丁度メモ帳の表示のように。

私が最悪と考えるのは、背景が黒で文字が白、行間なしのDOS窓表示のようなページです。とにかく読み終わると目がちかちかして普段の何倍も疲れます。

こうした「見栄え」に関する事を、HTMLでやってはならないと規格を作成している団体のW3Cは勧告しています。それらは今述べたCSS(カスケーディング・スタイル・シート)でやってくれとの事です。style以下の記述がスタイルシートの指示です。ブラウザーの違いなどで現状では100%CSSに任せられませんが、行間を広げる位ならCSSでも簡単です。これがNetscape4.xでは上手く行きません。私がNetscapeを使わない最大の理由がこれです。

入力の基本〜その2〜

とにかく入力してみましょう。放って置いても、勝手に画面上では改行してくれます。自分の都合で改行したければ、<br>と打ってください。

他人のページで、長い行が続いて画面に収まりきらなくて「スクロールバー」が画面の下に出てきて、右に続いている画面を見たことのある人もいるでしょう。さて、どうですか?それは見やすかったですか?印刷するとA4からはみ出てしまいませんでしたか?ページを作ったコンピューターの画面が大きいと時として、それより小さな画面で見ている人には、こうした現象が起こるのです。現状では、ノートパソコンや15インチ・ディスプレー使用者が多い事に配慮して、横幅は広げ過ぎない事が肝心です。

それでも、どうしても、改行せずに続けたければ、<nobr>〜</nobr>で囲ってやれば改行しません。くどいですがこれはお勧めしません。「見え具合」の調整はスタイルシートでしましょう。

これは主にポイントとかピクセルといった絶対値で横幅を指定して、表(tableというタグで書きます)や画像(jpg,gif,pngといった形式があります)を挿入する際に起こる現象です。<nobr>〜</nobr>でも同じ症状になります。

絶対値で指定」とは、例えば表の横幅を1200ピクセルに指定するといったものです。当然ながら横幅を800ピクセルで表示させているディスプレーでは画面に収まり切らず、横へのスクロールバーが付いてしまいます。そういったページって結構多いものです。そのまま画面を印刷しようとすると、右端が紙からはみ出してしまいますね。これも困りものです。そのページの制作者は大きなディスプレーとA3まで印刷出来る業務用印刷機を使っているのでしょうか。

15インチのCRTですと、画面幅を800ピクセルにすると高齢者には丁度見やすい大きさになるという事も若者は知っておくべきでしょう。

更にパソコンではなく、最近は携帯端末でページを見ている人も増えてきています。小さな画面で上下左右にスクロールしないと全体が見渡せないページ作りは感心しません。

HTMLでは基本的に「段落を示すために」<br>を使う事は避けた方が良いでしょう。「ひとかたまり」の文章は<p>〜</p>で囲ってあげましょう。

テキスト・エディターについて

ここでは「メモ帳」を使う例を出しましたが、専用のテキスト・エディターがあると便利ではあります。何が便利かといいますと、HTMLのいわゆる「タグ」を色分け表示してくれるので、誤りを発見しやすいからです。最初はWindows付属の「メモ帳」で十分です。しかしサイトのページ数が2桁になってくると、こうした「色分け表示」をやってくれるテキスト・エディターが欲しくなります。多くのエディターはシェア・ウェアー(有料、一定の試用期間後は作者に送金する必要あり)ですが、探せばフリー(著作権は作者が保有しますが、無料で使える)ソフトの中にも設定無しでHTMLタグを色分け表示してくれるものがあります。

今私が使っているのは「Tera Pad」というフリー・ソフトです。作者の寺尾さんのページから最新版が入手出来ます。2002年5月現在、Ver.0.73 (2002年3月公開)を入れています。0.50 の時代から愛用させて頂いていてすっかりファンになっています。雑誌などの付録 CD-ROM などに入っている事もありますし、最近は Vector にも専用コーナーがありますので、関連ソフトも見つけやすくなりました。他にも幾つかのフリーのエディターを試した結果、私としては以下の理由から Tera Pad をお勧めします。(他にも良いフリーのエディターがあるでしょう)

実は私は全て手打ちしていて滅多に使わないのですが、寺尾さん作のToClip Hyper(上記サイトから入手できる)という、タグをワンクリックで挿入できる入力補助ソフトウェアもあります。

TeraPadの検索機能をより強力にしてくれるTpRegExpHIROMIさんによって作られていますので、ご希望に応じてどうぞ。

ページのへッダーなど(具体的には次の項目に挙げてあるDOCTYPEや、META情報)を、XHTML1.1、XHTML1.0三種、XHTML Basic、ISO/IEC 15445、HTML4.01三種、3.2の計10種類の規格を選んでクリップボードにコピーしてくれるHHGeneratorも同一作者により提供されています。

このページの上の方では <html> からページを書くとしましたが、正確には「そのHTMLをweb上で公開する際には」以下のように書いて下さい

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/REC-html4/loose.dtd">
W3CというのはHTMLの標準規格を定めている機関で、World Wide Web Consortium の略。
そこの最新(1999年のクリスマスイブに勧告された)のHTML4.01 Transitionalという規格に従って書きますと宣言します。Strict というヴァージョンもありますが、制約が多く初心者には Transitionalがお勧めです。

厄介かも知れませんが一度書いておいて、後はテンプレートとしてコピー・アンド・ペーストすれば良いからそれほど面倒ではありません。それでも面倒な方は上記 HHGenerator を使いましょう。これを省いても表示はされますが、誤りは誤りです。また最新のUser Agent(IE5.5やN6などの Browser)ではこうした文書型宣言にしたがって表示を変えるようです。

様々な文法がある中で、どの規格に従ってHTMLを書いているかを<html>の前に明示する事が義務付けられています。

様々な規格の一覧

<html lang="ja">
日本語で書いていると宣言します

ここまでがお約束です
<head>
<meta http-equiv="Content-Type" content="text/html;charset=Shift_JIS">

文字コードはシフトJISですと書けば「文字化け」はしません。x-sjisと書く「流儀」もありますが、正式には「Shift_JIS」と大文字・小文字もこのまま書いて下さい。
<title>ページのタイトル</title>
ブラウザーの左上にここに書いたタイトルが表示されます。

詳しくは、head内に書くべき他のものの解説をご覧下さい

</head>
 <body>
<p>ここから本文を書いてゆきます。</p>
<p>書きたい事は山ほどあるでしょう。</p>
<p>どんどん書きましょう。</p>

</body>
</html>


第2回  第3回  第4回  第5回  第6回  第7回  第8回  第9回  第10回  詳細目次  このページの冒頭



saiton.net/easy/html.htm

©SAITO Toshiyuki