| 作者 | 大藤 幹 | 状態 | 完成 | ||
|---|---|---|---|---|---|
| カテゴリー | ビジネス・教育・社会 （テクノロジー） | 価格 | 350円（税込） | ページ数 | 138ページ （Web閲覧） 278ページ （PDF） |
| タグ |
|
||||
| 評判 |
|
ブクログ | みんなのレビューをみる | ||
| ダウンロード |
PDF（8.9MB） ePub（7.8MB） 3 ダウンロード(ePub) |
||||
| 外部連携 | |||||
| ブログパーツ | この本をブログで紹介する | ギフト | |||
※この本をパブーで電子書籍化する過程を紹介した『絶版の本をパブーで電子書籍化してみた by 大藤 幹』もリリースしました！
しおりをつけるはじめに
※以下の文章は、本書の初版発行時（2002年）に掲載されていたものです。
ホームページの作り方には、大きく２通りあります。１つは表を作るためのタグなどを利用してHTMLだけでレイアウトをする方法で、もう１つはHTMLでは構造だけを示してレイアウトにはスタイルシートを使うという標準的な方法です。これらには、それぞれメリットとデメリットがあり、現状では状況に応じて使い分ける必要があります。
しかし、本来の標準的な方法を知った上で必要に応じてHTMLをレイアウトに使うのと、はじめからHTMLをレイアウトのためのものと考えて作成するのとでは、結果に大きな違いが生じます。わかりやすく言えば、しっかりとした土台を作った上で見た目もキレイにするのか、土台は無視して表面だけをキレイにしておくのか、という違いです。HTMLでは「土台=文書構造」ということになりますが、この部分を適切に作っておくことによって、そのページを利用できるユーザーの幅が驚くほど広がってくるのです。
本書では、W3Cの仕様に準拠した標準的なHTMLの使い方を中心に解説しています。内容は必要十分なものを厳選し、これからHTMLを覚えようという人が遠回りをすることなくHTMLの正しい知識を身につけられるように配慮しました。サンプルのソースは、部分的なものではなく、基本的には全体を掲載しています。また、当然のことではありますが、サンプルとして掲載したソースは、W3Cの検証サービスで文法に間違いがないことも確認済みです。さらに、本書ではHTMLと関係の深いスタイルシート（CSS）についても解説し、代わりにスタイルシートを使用すべきタグについては、具体的にどのような指定をすればよいのかも示しました。
本書が、より多くの人が利用できる優れたホームページを作成するための一助となれば幸いです。
2002年7月 大藤 幹
HTMLってどんなモノ？
HTMLのファイルは、テキストファイルです。つまり、Windowsであれば「メモ帳」、Macであれば「SimpleText」などのテキスト形式で保存のできるソフトで作成できます。一言でいえば、ある文章が書かれたテキスト形式のファイルがあったとすると、その内容にしたがって <○○○> のようなタグをつけて保存し、拡張子を「.html」に変更すればHTMLファイルになるのです。
ここで、どのようにタグをつけていくのかを簡単に紹介しましょう。たとえば、以下のような文章があったとします。
海の生き物を飼ってみよう
海の生き物を飼うのは難しいと思っている人も多いと思います。たしかにその通りでもあるのですが、磯で採集した生き物などを水槽で長期間飼育することも無理ではありません。
この例では、まず「海の生き物を飼ってみよう」という見出しがあって、そのあとに段落が１つあることがわかると思います。そこで、見出しには見出しのタグを、段落には段落のタグをつけます。見出し（Heading）のタグは<h1>、段落（Paragraph）のタグは<p>なので、それぞれ該当する範囲を次のように囲います。この時、後ろのタグには < の後に / をいれます。また、見やすいようにタグの前後に改行を入れることもできます。
<h1>海の生き物を飼ってみよう</h1>
<p>
海の生き物を飼うのは難しいと思っている人も多いと思います。たしかにその通りでもあるのですが、磯で採集した生き物などを水槽で長期間飼育することも無理ではありません。
</p>
HTMLでタグをつけることは、このような作業になります。もちろん、このほかにHTMLの全体構造を示すための基本的なタグも入れる必要はありますが、基本的にはそれぞれの部分が文書の構成要素としてどのような役割や意味を持っているかによって、既にあるタグの中からふさわしいものを当てはめていけばいいのです。
ここで、「あれっ？」と思った人もいるかもしれません。これでは、カッコいいレイアウトのホームページにはなりません。ブラウザの表示の仕方にまかせたそっけないホームページになります。しかし、HTMLでは表示方法を指定しない利点もあるのです。
たとえば、そのページを別ファイルに用意したスタイルシートでレイアウトしたとします。HTML文書には、それを読み込むためのタグを１行追加するだけです。あとは、スタイルシートを変更するだけで、HTML文書には手を加えずに自由にレイアウトを変更できるようになります。逆にHTML側に文章を追加する場合には、レイアウトを気にせずに内容を追加できるようにもなります。また、一度に大量のページのレイアウトを変更することも可能になります。もし、100ページで共通して１つのスタイルシートを読み込んで利用していたとすると、１つのスタイルシートを変更するだけで、100ページのレイアウトが変更できるのです。また、表示方法の指定を各HTMLに埋め込むのではなく１ヵ所にまとめることで、全体の容量も驚くほど少なくなります。
ほかに、もっといいこともあります。HTMLで表示方法を指定せずに、文書中の各構成要素の役割や意味に従って適切にタグ付けされていると、通常のパソコン環境以外の様々な環境でも利用できるページになります。表示方法が指定されていないので、それぞれの環境に合わせて表示することはもちろん、音声や点字でも利用できるようになるのです。逆にHTMLで表示方法だけを指定していると、その通りに表示できない環境ではうまく処理できなくなるのは当然です。HTMLでは表示方法を指定しないということは、ホームページのユニバーサルデザインにもつながるのです。
このように、現在の標準的な方法でホームページを作成すると、作る側も楽ができますし、そのホームページを利用できるユーザーの幅もぐんと広がります。ただし、問題がないわけではありません。最新のブラウザでは、ほぼ問題はないのですが、古いブラウザの中にはスタイルシートに部分的にしか対応していないものがあります。そればかりか、ブラウザによっては表示がおかしくなって内容が読めなくなることもあります。そのような問題を避けるためには、部分的にHTMLで表示方法を指定してもかまわないでしょう。
本書では、基本的にはHTMLでは役割や意味を示し、表示方法についてはスタイルシートで指定するといった標準的な方法で作成することを前提として解説しています。そのため、スタイルシートで指定すべき部分にはその旨を明記し、代わりに使うべきスタイルシートを示すようにしました。ただし、スタイルシートについては、よく使われる部分の解説にとどめていますので、詳細はスタイルシートの専門書などを参考にしてください。
タグと要素・属性
HTMLでは、文書の構成要素をタグで囲って示しますが、その範囲全体やタグの各部分などにはそれぞれ呼び名があります。以下に、テキストをリンクさせる場合のソースを例にとってHTMLの用語を示しますので、どの部分を何と呼ぶのかを覚えてください。
タグと要素
開始タグと終了タグで囲った範囲全体を要素といいます。開始タグは基本的に<要素名>、終了タグは</要素名>のように要素名の前に「/」をつけて示します。これらは必ず半角で入力してください。HTML4.01では、要素名は大文字で書いても小文字で書いてもよいことになっています。しかし、HTML4.01以降に出されたXHTMLでは、すべてを小文字で書く決まりになっていますので、現在ではHTML4.01を書く場合にも小文字で書かれることが多いようです（本書では、小文字で統一しています）。
また、要素には内容を持たないものもあります。たとえば、画像を表示するためのimg要素や、改行のためのbr要素などがそれにあたります。これらの要素は空要素と呼ばれ、開始タグだけを使います。終了タグは必要ありませんので、書かないようにしてください。
属性
属性は、要素の開始タグの中に指定して、その要素の性質や特性を示すために使います。基本的には「属性名="属性値"」の形式で指定しますが、「属性名」だけで指定するものもあります。属性の属性値以外の部分は必ず半角で入力してください。また、２つ以上の属性を指定する場合は、半角スペースで区切ります。属性を指定する順序に決まりはありませんので、好きな順に指定してかまいません。属性は、要素名と同様に大文字で書いても小文字で書いてもよいことになっていますが、一般的には小文字が使われています。また、属性値を囲う引用符（"）は、条件によっては省略することができますが、基本的には常に引用符をつけるようにしてください。なお、引用符には「"」だけでなく「'」も使うことができますが、必ず同じ種類でペアにする必要があります。
半角スペースや改行の扱い
HTMLのソースに改行や半角スペースを入れても、基本的には表示に影響しません。したがって、自分でソースが見やすいようにタグの前後で改行したり、半角スペースやタブでインデントしておくことができます。ただし、ブラウザの種類によっては、それらを入れる位置によって半角スペースが入ってしまう場合がありますので注意してください。
汎用属性
以下に示す属性は、ほとんどの要素に対して指定することができます。
id="ＩＤ名"
id属性は、要素に固有の名前をつけるための属性です。同じページの中では、複数の箇所で同じ名前を指定することはできませんので注意してください。この属性は、その要素をスタイルシートの適用対象として指定したい場合などに利用されます。id属性の値は、大文字と小文字は別の文字として扱われますので注意してください。また、id属性の値は必ず先頭をアルファベットで開始する必要があります。先頭以外にはアルファベットと数字を組み合わせて使うことができます（実際には「-」や「_」なども含むことができるのですが、古いブラウザの中には問題が発生するものもあります）。
class="クラス名"
class属性は、その要素の種類を示す属性です。id属性とは異なり、同じページの中で複数の要素が同じクラス名を持つことができます。この属性は、その要素をスタイルシートの適用対象として指定したい場合などに利用されます。class属性の値は、大文字と小文字は別の文字として扱われますので注意してください。仕様上は、class属性の値には特別な文字を含む通常のテキストを入れられることになっていますが、ブラウザの中には問題が発生するものがあります。id属性の場合と同様にアルファベットと数字を組み合わせて指定しておけば問題ありません。
title="補足情報"
title属性は、要素に対して補足的な情報を与えるための属性です。ここで与えられた情報は、その環境やブラウザなどによって様々な形で表現されますが、一般的なブラウザでは指定した要素の上にマウスカーソルを合わせるとポップアップして表示されます。
lang="言語コード"
lang属性は、要素の内容やそれに関連する属性値などの言語の種類を示す属性です。たとえば、日本語の場合は「ja」、英語の場合は「en」のように指定します。この属性は、指定された言語の慣習に従って、内容をより正しく表現するために利用されます。
HTMLのバージョンを示す
<!DOCTYPE HTML PUBLIC "バージョン" "URL">
バージョン → HTMLのバージョンや種類を示す情報
URL → HTMLを定義したファイル(DTD：文書型定義)のURL
HTMLにはいくつかのバージョンがあり、同じバージョンでもいくつかの種類に分かれているものがあります。そして、そのバージョンや種類によって、使うことのできるタグなどの決まり(DTD：文書型定義)が異なります。上の書式は、そのHTML文書がどのバージョン（種類）の決まりに従って書かれているかを示すものです。バージョンや種類によって、それぞれ決まった書き方がありますので、そのままHTML文書の先頭に書き込んでください。
【サンプル】
▽HTML4.01 Strict（非推奨の書き方を含まない場合）
<!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
▽HTML4.01 Transitional（非推奨の書き方を含む場合）
<!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
▽HTML4.01 Frameset（フレームを使う場合）
<!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
