メモ帳でHTML

メモ帳に書き込もう

［スタート］―［プログラム］―［アクセサリ］―「メモ帳」を起動してください（「秀丸エディタ」などでもかまいません）。

さっそく何か打ち込んでみましょう。

山田花子のホームページ

［ファイル］―［名前を付けて保存］で，適当なフォルダを指定し，ホームページ（入り口となるページ）の場合は必ず index.html という名前で保存します。

！	Windows XP などでは文字コードが指定できますが，ANSI を指定します（実際には Shift JIS で保存されます）。

ホームページでない場合は，たとえば test.html のように，直接入力（半角英数）で名前を付けてください。拡張子は html にします。

！	各ディレクトリで最初に表示されるべきページも index.html にします。

サーバに送ろう

メモ帳で書いてハードディスクに保存しても，自分にしか見えません。みんなに見てもらうには，サーバに送らなければなりません。

サーバにファイルを送るためのソフトは，ここでは FFFTP を使います。

さきほど作ったファイルをサーバの public_html というフォルダの中に送ります。

確認しよう

サーバに送られたページを見るには，ブラウザ（Internet Explorer や Mozilla など）を立ち上げ，上の白い横長の欄（「アドレス」欄）に，そのページのアドレス（URL = Uniform Resource Locator）を打ち込みます。個人のホームページのアドレスは通常次のような形をしています。

http://サーバ名/~ユーザ名/

ユーザ名の直前の ~ のような波印は tilde（チルダまたはティルデ）と読みます。この文字を入力するには，通常の Windows パソコンなら，Shift キーを押しながら，BackSpace の二つ左（「へ」のキー）を打ちます。

ホームページ以外の場合は，次の形式で入れます。

http://サーバ名/~ユーザ名/ファイル名

！	ホームページのアドレスは「http://サーバ名/~ユーザ名/」です。この最後の / を略して「http://サーバ名/~ユーザ名」と書く人がいますが，これは間違いです。サーバはエラー（エラーコード301「Moved Permanently」）と正しいURLを返します。一般的なブラウザは正しいURLを読み直しますが，エラーになる場合もあります。

！	ホームページのアドレスを `http://ホスト名/~ユーザ名/index.html` のようにファイル名まで書く人がいます。これは間違いではありませんが，最後の index.html は省略できますし，後でPHPを使う場合は index.php，CGIを使う場合は index.cgi といったファイル名に変更する必要が出るかもしれませんので，ファイル名までアナウンスしないほうがいいでしょう。

タグを覚えよう

1行だけではつまらないので，もう1行書いてみましょう。

山田花子のホームページ
ただいま工事中です。

これを上書き保存して，サーバに送ります。

ブラウザに戻って，「再読み込み」または「更新」と書いたボタンを押すと，「ただいま工事中です」が現れます。

しかし，ちょっと変ですね。メモ帳には2行に分けて書いたのに，画面では1行につながってしまっていました。

2行に分けるには，そのための指定（タグ）を書き込まなければなりません。ここでは段落のタグ <p> を使います。

山田花子のホームページ
<p>ただいま工事中です。

これでちゃんと2行に分かれます。

タグの部分は必ず直接入力（半角文字）で書きましょう。タグの中身は <p> のような小文字でも <P> のような大文字でもかまいません。

！	`<p>` の p は paragraph（段落）の頭文字です。
！	HTML より新しい XHTML では，タグは小文字しか使えません。今のうちにタグを小文字で書く癖をつけましょう。

このようなタグとその意味を定めた約束ごとを HTML（HyperText Markup Language）といいます。

さらにいくつかのタグを覚えましょう。

1行目はタイトルなので大きい文字にしてみましょう。それには次のようにします。

<h1>山田花子のホームページ</h1>
<p>ただいま工事中です。

このように，見出しにする部分を <h1> ... </h1> で囲みます。

！	`<h1>` の h は heading（ヘディング，見出し）の頭文字です。

ブラウザのタイトルバー（頭の紺色の帯の部分）にタイトルをつけてみましょう。それには <title> ... </title> タグを使います。

<title>山田花子のホームページ</title>
<h1>山田花子のホームページ</h1>
<p>ただいま工事中です。

タグのまとめ

上の例で使われたタグ（HTML の命令）の意味は次の通りです。多くの命令が，開始タグ <...> と終了タグ </...> で対になっています。

<title>…</title>
タイトルの始まり・終わり。このタイトルはブラウザのタイトルバー（一番上の紺色の帯）に現れます。
<h1>…</h1>
大見出しの始まり・終わり。大きな文字で独立した行に出力されます。 h は heading（見出し）の意味です。
<p>
段落の始まり。 p は paragraph（段落）の意味です。なお，段落の終わりの命令 </p> は省略できます。

段落の始まりの命令 <p> を入れたところでは必ず改行されますが，それ以外のところでは，エディタで作ったファイルの改行位置とは無関係に，ブラウザが画面の幅に合わせて適当な位置で改行してくれます。

行儀の良いタグの書き方

あとでもっと高度なことをするための準備として，行儀の良いタグの書き方を勉強しましょう。

まず，さきほど作ったものです：

<title>山田花子のホームページ</title>
<h1>山田花子のホームページ</h1>
<p>ただいま工事中です。

これを行儀良くするには，次のようにします。

<html lang="ja">
  <head>
    <title>山田花子のホームページ</title>
  </head>
  <body>
    <h1>山田花子のホームページ</h1>
    <p>ただいま工事中です。
  </body>
</html>

つまり，全体を <html lang="ja"> ... </html> で囲み，さらに <title> ... </title> の部分を <head> ... </head> で囲み，本文を <body> ... </body> で囲むわけです。

lang="ja" は言語（language）が日本語（Japanese）であるということです。英語なら lang="en" にします。こうすることによって，サーチエンジンに言語を間違えられることがなくなります。

上では見やすいように頭を下げましたが，次のように書いてもかまいません。

<html lang="ja">
<head>
<title>山田花子のホームページ</title>
</head>
<body>
<h1>山田花子のホームページ</h1>
<p>ただいま工事中です。
</body>
</html>

さらに，HTML のバージョン（今習っているのは 4.01 です）を表すために，頭に次のように1行加えると，もっと行儀良くなります。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="ja">
<head>
<title>山田花子のホームページ</title>
</head>
<body>
<h1>山田花子のホームページ</h1>
<p>ただいま工事中です。
</body>
</html>

このようなバージョン（DOCTYPE 宣言）を入れると，最新のブラウザ（IE6，Mozilla 等）では表示方法が新しい方式に変わります。

文字化けを防ごう

文字化けを防ぐため，次のように <head> ... </head> の部分で文字コードを指定しておきます。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<title>山田花子のホームページ</title>
</head>
<body>
<h1>山田花子のホームページ</h1>
<p>ただいま工事中です。
</body>
</html>

上の例は文字コードが「シフトJIS」の場合です。 Windowsや旧Mac OSで書いた場合，たいていシフトJISになります。

LinuxなどUNIXの仲間で書いた場合はたいてい EUC-JP になりますので，次のようにします。

<meta http-equiv="Content-Type" content="text/html; charset=EUC-JP">

！	より確実な方法として .htaccess というファイルに AddType "text/html; charset=Shift_JIS" html のように書いておく方法があります [→ charsetパラメタの勧め：HTMLにおける文字符号化スキームの明示方法 (村田真さん他)]。
！	将来的には Shift_JIS や EUC-JP より UTF-8 が推奨されるべきでしょう。ただ，メモ帳で UTF-8 で保存すると EF BB BF という3バイトの BOM (byte order mark) が付いてしまいます。

簡単なスタイル指定

背景に色を付けてみましょう。それには，<body> のところをたとえば次のように変えます。

<body style="background-color: yellow">

色名の表またはもっと詳しい色名の表を参考にしてください。

文章の一部分の色を変えるには <span style="color: 色名"> ... </span> です。たとえば「工事中」という部分だけ赤にしてみましょう。

<p>ただいま <span style="color: red">工事中</span> です。

！	昔は，背景色の指定を `<body bgcolor="色名">`，文字色の指定を `<font color="色名"> ... </font>` と書きましたが，HTML 4 以降ではこのような古い書き方は勧められていません。

ある部分を中央揃えにするには style="text-align: center" とします。

<p style="text-align: center">ただいま工事中です。

同様に，右揃えは style="text-align: right" です。

！	中央揃えを，昔は `<p align="center">`，もっと昔は `<center>` …… `</center>` と書きました。

画像の入れ方

絵は Windows の「ペイント」などで描きます。写真類はスキャナで取り込みます。デジカメ（デジタルカメラ）も便利です。スキャナやデジカメで撮った画像の加工には Photoshop や GIMP などを使います。

画像の形式は JPEG（ジェイペグ）または GIF（ジフ，ギフ）または PNG（ピング）にします。 GIF や PNG はアニメ風の絵，JPEG は写真などのフルカラー画像に向いています。

！	描く前にキャンバスを必要最小限の大きさに縮めておきましょう。
！	ファイル名は直接入力（半角）のローマ字・数字の類に限ってください。ファイル名の最後の部分（拡張子）は，JPEG なら `.jpg` または `.jpeg`，PNG なら `.png`，GIF なら `.gif` にします。
！	PNG 形式は古いブラウザでは表示できません。
！	GIF は Unisys 特許のおかげでフリーソフトでは使えなくなっていましたが，今は特許期間が切れています。

保存した絵はサーバに送ります。

画像は次のようなタグで HTML ファイルに埋め込みます。次の例は abc.jpg というファイルを埋め込む例です。また，それに「山田花子の自画像」というコメントを付けています。

<img src="abc.jpg" alt="山田花子の自画像">

こうすると，abc.jpg というファイルが文書の中に埋め込まれます。「山田花子の自画像」のような alt で指定した説明は，画像を表示しないブラウザや，目の不自由な人が音声で読む場合に使われます。

画像は通常一つの大きな文字として扱われます。画像を独立した行に置きたいときは，画像の前後に段落開始の命令 <p> を入れて，次のようにします。

<p><img src="abc.jpg" alt="山田花子の自画像">
<p>私って美人で困っています。

絵の横幅（width），高さ（height）をドット数で指定できます。こうするとページの表示が高速になります。

<img src="abc.jpg" alt="山田花子の自画像" width="300" height="100">

絵を中央に置きたいときは <p> を <p style="text-align: center"> にします。

絵をたとえば右置きにして文字を回り込ませるには次のようにします。

<img src="abc.jpg" alt="山田花子の自画像" style="float: right">

絵のまわりにたとえば 30 ピクセルのマージン（余白）をとる場合は次のように指定します。

<img src="abc.jpg" alt="山田花子の自画像" style="float: right; margin: 30px">

上・右・下・左のマージンをそれぞれ margin-top，margin-right，margin-bottom，margin-left で別々に指定することもできます。また，margin: 10px 20px 30px 40px のようにして上右下左のマージンを一括指定することもできます。

！	図を本文の右に置く場合，昔は `<img src="..." alt="..." align="right" vspace="20" hspace="30">` のように書きました。マージンは垂直距離（vspace），水平距離（hspace）をドット単位で指定します。今でも Netscape Navigator 4.x などの古いブラウザではこの書き方でないとうまくいきません。

！	`<img>` タグに `alt="..."` で指定した内容は，マウスを近づけると吹き出しに現れることがあります。最近のブラウザは `<img>` に限らずどの要素でも `title="..."` で指定したものが吹き出しになります。

リンクのしかた

もう一つ別のページを作ってみましょう。たとえば自分の趣味を紹介するページにしましょう。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="ja">
<head>
<title>山田花子の趣味の紹介</title>
……

これをたとえば shumi.html という名前で保存します。このように，Webページ（HTML文書）の拡張子は必ず .html にします。

！	Windows では拡張子を3文字しか許していなかった時代があったので，今でも Microsoft は `.html` ではなく `.htm` を標準としているようです。
！	ファイル名は直接入力で打ち込んでください。「趣味.html」のような全角文字のファイル名を使うと，うまくいかないことがあります。

完成したら，ホームページからリンクを張ってみましょう。

index.html を開き，その中の適当なところに次のように書きます。

<p><a href="shumi.html">私の趣味</a>

ブラウザでそのページを見てください。「私の趣味」という部分だけ色が変わって現れますね。そこをクリックしてください。ちゃんと趣味のページに飛ぶことができたでしょうか。

！	`a` は anchor（アンカー，いかり）の意味，`href` は hypertext reference（ハイパーテキスト参照）の意味です。

「私の趣味」のページからトップページに「戻る」リンクを張るには，

<a href="./">戻る</a>

とするのが良い方法です。

<a href="index.html">戻る</a>

でも戻れますが，悪い方法です。もっとも，わざわざ「戻る」リンクを作らなくても，ブラウザの「戻る」ボタンで戻れますね。まぎらわしい「戻る」リンクはやめて，「目次に戻る」「トップページに戻る」といったリンクにしましょう。

自分で作ったページ以外にも，リンクを張ることができます。たとえば Google のページにリンクを張ってみましょう。

私は
<a href="http://www.google.co.jp/">Google</a>
の学生です。

これをブラウザで見れば， Google のように，「Google」の部分だけ色が変わっています。色が変わった部分をクリックすると，Google に飛びます。

友だちのホームページにもリンクを張れます。

<a href="http://サーバ名/~ユーザ名/">山田太郎</a>
は私のいとこです。

もし山田太郎君と山田花子さんが同じサーバでホームページをつくっているなら，サーバ名は省略できます。

<a href="/~ユーザ名/">山田太郎</a>は私のいとこです。

箇条書き

箇条書きのタグは <ul> ... </ul> です。各箇条の頭に <li> を付けます。

<p>私の好きな雑誌：

<ul>
  <li>りぼん
  <li>なかよし
</ul>

上のように書けば，

私の好きな雑誌：

りぼん
なかよし

のような箇条書きになります。

リンクする項目がたくさんになってきたら，箇条書きをうまく使うと便利です。

<p>私の趣味はたくさんあります。

<ul>
  <li><a href="yoasobi.html">夜遊び</a>
  <li><a href="hirune.html">昼寝</a>
  <li><a href="piano.html">ピアノの弾き語り</a>
</ul>

！	`ul` はunordered list（番号の付かない箇条書き），`li` はlist item（箇条書きの項目）の意味です。

その他のタグ

<h2>…</h2> は， <h1>…</h1> より少し小さい見出しです。以下同様に，<h6>…</h6> まであります。
<hr> は画面の幅いっぱいに横線（horizontal rule）を入れます。
<ol>…</ol> は番号付き箇条書き（ordered list）です。各箇条は頭に <li> を付けます。
<em>…</em> で囲んだ部分は 強調表示（emphasis）になります。
<strong>…</strong> で囲んだ部分は 最強調表示（strong emphasis）になります。
<br> は強制改行（break）です。 <p> と似ていますが，通常 <p> 少し余分に行間が空くのに対して，<br> 通常の行間隔のままで改行します。
<pre>…</pre> で囲んだ部分は，ファイルの改行位置と同じところで改行します。つまり，各行の最後に <br> を入れるのと同じことになります。表などを出力するのに便利です。 pre はpreformatted（整形済み）の意味です。
<blockquote>…</blockquote> で囲んだ部分は，その前後で改行され，頭が少し下がります。本文に引用文を挿入するときに使います。
 のように書いた部分は，ブラウザの画面には現れません。注釈を書くのに使います。

HTML では半角の <，>，& は特別な意味をもつので，これらを出力したいときは，次の表の右欄のような & で始まる命令を使います。

`<`	`<`
`>`	`>`
`&`	`&`

これらの命令は大文字・小文字を区別しますので，< を &LT; とは書けません。

！	URL の中に現れる `&` は，そのままでも機能しますが，厳密には `&` とするべきものです。

奥村晴彦

Last modified: 2004-07-27 12:46:02