いろいろな雑記を蓄えるコラムサイトです。

最終更新日：2006-03-30

初めての人にも出来るHTMLの書き方基礎

最近はホームページを見ていると、いろいろな凝ったデザインのHPを見ることができます。これらは、ホームページ作成ソフトを使用して作られていることが多いです。現に私も、このホームページは、Microsoft® FrontPageを使用していました。そして現在でも一部のコンテンツを使用する際はよく利用します。しかし、やはりこれらのホームページ作成ソフトは、必ずしも良い記述ではないソースが生成されることも良くあります

「綺麗なホームページだな」と思っても他のブラウザではうまく表示できなかったり、無駄に重たいページになっていることもしばしばあります。「今はブロードバンドの時代。重たいページを作成してもいいんでは？」と言われるかもしれませんが、まだまだナローバンドの方(たとえば携帯電話のフルブラウザから見たり)もいますし、少しでも軽く、どのブラウザでも同じように見えるサイトを作れる方がいいはずです。

この内容はkixさんがサイト管理するにあたり基礎部分を書いたものです。

HTML

Hyper Text Markup Languageの略で、通常のホームページはこの言語で記述されています。 HTMLは「タグ」という、文章の性質などを記述したプログラムのようなもので記述されます。

昔はブラウザ独自のHTMLで記述されていることが多く、ブラウザによってはうまく表示されなかったり、デザインが全く変わるなどいろいろと支障があり、また今もその名残は残っています。現在、W3C (World Wide Web Consotium)が定めたHTML言語を使って記述することにより、ほとんどのブラウザで同じ表示結果が得られるようになってきています。

HTMLの文章構造

HTMLの骨組み

<html>　</html>

これがHTMLの始まりと終わり。これを文章の最初と最後に記述します。これにより、HTML文章であることを明記します。

<head>　</head>　<body>　</body>

これがそれぞれ頭・体であり、先ほどの<html>　</html>の間(中)に書きます。

頭<head>　</head>には

<title>タイトル</title>などこのページの内容や要素を説明する記述を入れます。

体<body>　</body>には

<h1>見出し</h1>　<p>文</p>などを使用してページに表示される文章の内容を記述します。

こういう形で記述していきます。これが基本の書き方です。

これを見てわかるように、タグというのは開始タグと終了タグの間にそのタグの内容を書くことになっています

DOCTYPE宣言

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

こんなものが、<HTML>の前に書いてあるの見たことがある方もいると思います。これはW3Cにより定義されたHTMLのバージョン4.01で書いてますよってことをあらわしています。

確かに普通この記述がなくても表示はされます。それはブラウザがどう言う書き方をしているかを自分自身(独自)で判断するからです。しかし、ブラウザで勝手な判断をしているということは、間違った判断をしていることもあり、うまく表示させられないかもしれないといことになります。

現在の4.01ではStrict・Transitional・FramesetというDTDが定義されています。

ここでは簡単に基礎の部分を書くことにしていますので、今回は一番標準的で簡単なTransitional DTDで書いておき、これ以上の難しいことは考えないことにしましょうｗフレームなどを用いてHTMLを書かない場合、基本的に
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
を表示しておけばよいでしょう。

詳しく知りたい人はもっと詳しく書かれているページがありますので、そちらをご覧になられたほうがいいかもしれませんｗ(投

HEAD/METAタグ

DOCTYPE宣言よりも記述しておかなければならないのが、文字コードというMETAになります。

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

これは、この文章がどういう文字コードで書かれているかを示すものです。

一般的に日本語を書く場合ShiftJISで記述していけばよいかと思います。

文字コード以外にはCSSを用いる場合

<meta http-equiv="Content-Style-Type" content="text/css">

という記述を書いておくことでCSSを使用したページだと言うことを示します。

この文字コードの記述は<head>　</head>に記述します。

昔はYahoo！はよく文字化けを起こしていたのは、ブラウザで標準で読み込むのがShiftJISというコードなのですが、 EUCコードを使用しているので、ページの移動の際に正確な文字コードを読み込めずに文字化けが起きていました。
(現在でもYahoo！ではEUCコードを使用していますが、現在はほとんどのブラウザバージョンで文字化けが起こることはありません。)
Yahoo！が使用しているEUCの場合は charset=euc-jpという記述になります。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>

  <head>
    <meta http-equiv="Content-Type" content="text/html;charset=shift_jis">
    <meta http-equiv="Content-Style-Type" content="text/css">
  </head>

  <body>
  </body>

</html>

内容の記述

BODY/見出し<h1>

　→

見出し1

のように見出しを作成します。
見出しにはレベルがあり、それぞれ<H1><H2>・・<H6>まで使用できます。
それぞれ表示される大きさが違うようです。

BODY/本文(段落)<p>

　→

見出し1

本文

<p>と</p>の間に文を書けばいいだけです。
これは通常のHTML作成ソフトではEnterでできます。(*ホームページビルダー系では、Shift+Enter)
<p>は、段落をつけるための記述であり、文章の1つの塊に1つの<P>を使用します。
しかし、これを改行の記述だと思い込んで書いている人などが結構いるようですが、これは、1つの文章ごと、段落ごとに使う記述なので、改行に使うのは誤りです。
（一行空き改行であるとか書いてある解説本があるらしいですが、それは真っ赤なうそですので気をつけましょう。）

BODY/本文(改行)<br>

　→

本文
本文

<p>と</p>本文の途中改行する場所で<br>を使うと、文章の改行が出来ます。
これはShift+Enterでできます。(*ホームページビルダー系では、Enter)

ちなみにスタイルシートにより<p>の始まりに一文字分のスペースが開いています。

BODY/水平罫線<hr>

　→

本文

見たままですが、平の罫線が引けます。
注意として、文中(<p>と</p>の間)には書けません。

BODY/センタリング<center>

　→

本文

これも見たままですが、文などのセンタリングが行えます。
廃れつつあり、基本的に<div align="center">文</div>で代替できます。しかしながら、<center>でなくてはうまくセンタリングされない場合などがあります。

<div style="text-align:center">～<div>

基本的に文のセンタリングであれば上記などのCSSを使用するように薦められています。

BODY/意味を持たない要素<div><span>

<div style="text-align:center">～<div>

基本的に文のセンタリングであれば上記などのCSSを使用するように薦められています。

BODY/本文(ハイパーリンク)<a>

ページからページへ移動する場合、ハイパーリンクというものを使用します。

<a href="移動先URL">移動する説明</a>

と記述すれば、<a>と</a>の間をクリックすることでページ移動が可能になります。

BODY/本文(画像)<img>

<img src="画像場所">

画像を表示。URLに表示したい画像の場所を指定します。

画像の場合は</img>などの終了タグはなくてよいとされています。

(XHTMLなどHTML4.01以降は空要素タグ<img>や<br>、<hr>は<br />もしくは<br></br> と書くように薦められるように替わってますが、ここではあくまでもHTMLの書き方なので・・)

応用として、テキストの替わりに画像をクリックで移動するには、

<a href="URL"><img src="画像"></a>

と記述すれば、画像をクリックするとそのページへ移動できます。

BODY/表の書き方

表は、

<table>
<tr>
<th>表の見出し</th>
<td> </td>
</tr>
</table>

と記述していきます。

表は簡単にこれぐらいにしておきます。

まぁ表は、１から記述するのはしんどいですから、おかしなところがあったら直す程度でいいでしょう。

その他

文章中に記述することで、ページには表示されないコメントとして HTML自体の整理などに使うことができます。

入れ子

<b><i><u>内容</b></i></u>

このように一つの内容にいくつもタグを使う場合、入れ子に記述することはできません。

<b><i><u>内容</u></i></b>

このように記述する必要があります。

HTML中にそのまま使用できない記号

HTMLのタグで使用している記号や、特殊記号は基本的にHTML中に書くことができない。

ブラウザが前後混同したり、読めなくなってしまうため、 HTMLの中では書きのようになる

<→<
>→>
"→"
&→&

その他/URLの記述の仕方

通常URLの記述の仕方は

"～.拡張子"、"フォルダ/～.拡張子"、"../～.拡張子"

で始まる相対パスという書き方や、

"/～.拡張子"、"/フォルダ/～.拡張子"

で始まる絶対パスというものでも記述ができます。

/htdocs
┣index.html
┃
┗/style
    ┗/media
      ┣cd.html
      ┗html.html

-絶対パス- "/style/media/html.html"

たとえばこのサイトamrstation.comでは、
http://www.amrstation.com/の場所をルートディレクトリといい、そこを基点に指定して行くのが絶対パスという記述の仕方です。書き方はこのページなら"/style/media/html.html"となります。この時基点となるページ、ルートディレクトリを/で表しその後にフォルダを書いていきます。
ルートディレクトリはフォルダの名前はhtdocsやpublic_htmlなどどこがルートディレクトリなのか、サーバーによってわかりにくい場合が多いため、一般的には使いにくいかもしれませんが、書き方としては最も単純なため階層が深くなってもわかりにくくはならないのが利点です。

-絶対パス2- "http://www.amrstation.com/style/media/html.html"

絶対パスでも先ほどのルートディレクトリ基点の記述の場合、他のサーバーにある内容への移動や呼び出しは行うことができません。
他のサーバーを指定したり、ルートディレクトリがわからない場合、 URLから直接指定する方法があります。サイトによっては指定先が長くなるため、同じサイト内での移動などには使いません。

-相対パス- "style/media/html.html""./html.html""html.html"

相対パスでは基点となる部分がそのページ自身(このページ)になります。は同じディレクトリ内にあるぺーじや、このページ自身の指定にはページの名前だけの指定、 "html.html"や"./html.html"となります。
このページよりも深い階層なら"この階層にあるフォルダ名/ファイル名" という形で書いて行き、このページより浅い階層の場合、 "../"で一つ浅い階層へ戻ることができます。このページからトップのhttp://www.amrstation.com/index.htmlに移動する場合、 "../../../index.html"となります。

その他/文字の装飾

BODY/本文(装飾)

強調する記述にはいくつか種類があります

<b></b>

文字を太くする記述。

<i></i>

(イタリック)斜体にする記述。

<u></u>

で文字に下線をひく記述。

これらは、掲示板やチャットでタグを使う人なら使ったことがあるかもしれません。

しかしこれらの記述は、物理的タグと呼ばれ、

<b></b>は、<strong></strong>

<i></i>は、<em></em>

という論理的タグに置き換えて記述する方が薦められています。

この<STRONG><EM>などの論理タグと呼ばれるものは、文字の強調を表す意味しか持っていない為、正確には<B><I>とは異なってきます。
(現在のほとんどのブラウザでは<STRONG>は文字が太くなり、<EM>はイタリックに表示されます。意味としては<STRONG>は強い強調、<EM>は弱い強調をさしています。)

この物理タグを使用せずに論理タグを使用するように薦められているのは、物理タグは文字をどう装飾するかを指定するタグになり、 HTMLは装飾という作業をするものではないとされているため、強調を斜体にしたり太字にするのはCSSなどを用いて装飾することが薦められているのです。

BODY/本文(装飾-フォント)

本文中の文章は基本的には先ほど記述した通り、装飾はCSSですることが望ましいのですが、 <font>を使用して装飾することが可能です。
この場合fontの後に属性というものを加えます。

<font color="色">文字色</font>

フォントの色を指定したり、

<font size="大きさ">文字サイズ</font>

フォントのサイズを指定したりすることができます。

<font color="色"><font size="大きさ">内容</font></font>

こういう風にfontの続きの属性を複数使用したい場合、

<font color="色" size="大きさ">文字色とサイズ</font>

こういう形で、ひとつのfont記述の中に複数の属性を入れることができます。

サイズの指定は12ptなど、ワードとかで使う大きさの単位や、最初に見出しの部分で書いたような数字で指定することができます。

その他/ユーザビリティなど

リンクについて

file://localhost/c:/style/html.html

c:/style/html.html

c:\style\html.html (\or¥)

当たり前ですが、ローカルファイル(自分のページ)はWeb上から他の人がアクセスできるわけありませんので、わけのわからないURLは指定しないでください。

画像について

<img src="画像.jpg" alt="テスト画像">

のように画像を表示しないブラウザなどのために、などと、alt後に画像のちょっとした説明(代替テキスト)を付け加えると、画像を表示していない場合も、なにか画像があるということがわかるだけでなく、文字ブラウザや音声読み上げブラウザなどを使用している人にとっても親切です。

記述の診断

自分の記述したHTMLタグを診断してほしい場合
http://openlab.ring.gr.jp/k16/htmllint/htmllintl.htmlへ
「非営利目的ならば無断で再利用再掲載して構いません。」と書かれているのでリンクさせていただいています。

初めての人にも出来るHTMLの書き方基礎

HTML

HTMLの文章構造

HTMLの骨組み

<html> </html>

<head> </head> <body> </body>

頭<head> </head>には

体<body> </body>には

DOCTYPE宣言

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

HEAD/METAタグ

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

<meta http-equiv="Content-Style-Type" content="text/css">

内容の記述

BODY/見出し<h1>

見出し1

BODY/本文(段落)<p>

見出し1

BODY/本文(改行)<br>

BODY/水平罫線<hr>

BODY/センタリング<center>

<div style="text-align:center">～<div>

BODY/意味を持たない要素<div><span>

<div style="text-align:center">～<div>

BODY/本文(ハイパーリンク)<a>

<a href="移動先URL">移動する説明</a>

BODY/本文(画像)<img>

<img src="画像場所">

<a href="URL"><img src="画像"></a>

BODY/表の書き方

その他

コメント

入れ子

<b><i><u>内容</b></i></u>

<b><i><u>内容</u></i></b>

HTML中にそのまま使用できない記号

その他/URLの記述の仕方

"～.拡張子"、"フォルダ/～.拡張子"、"../～.拡張子"

"/～.拡張子"、"/フォルダ/～.拡張子"

-絶対パス- "/style/media/html.html"

-絶対パス2- "http://www.amrstation.com/style/media/html.html"

-相対パス- "style/media/html.html""./html.html""html.html"

その他/文字の装飾

BODY/本文(装飾)

<b></b>

<i></i>

<u></u>

<b></b>は、<strong></strong>

<i></i>は、<em></em>

BODY/本文(装飾-フォント)

<font color="色">文字色</font>

<font size="大きさ">文字サイズ</font>

<font color="色"><font size="大きさ">内容</font></font>

<font color="色" size="大きさ">文字色とサイズ</font>

その他/ユーザビリティなど

リンクについて

file://localhost/c:/style/html.html

c:/style/html.html

c:\style\html.html (\or¥)

画像について

<img src="画像.jpg" alt="テスト画像">

記述の診断

<html>　</html>

<head>　</head>　<body>　</body>

頭<head>　</head>には

体<body>　</body>には