1ページで騙(かた)るホームページ作成

口の悪い、毒入りページです。慣れてない方はご注意!

  1. 用意するもの
  2. 準備
  3. 骨格
  4. 基本構造
  5. 入れ子
  6. ブロックとインラインレベル
  7. 要素・属性
  8. 表示がヘン
  9. URL
  10. 最後に

用意するもの

準備

骨格

以下を何も言わずにコピー。理屈を覚える必要はない
<?xml version="1.0" encoding="Shift_JIS"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=Shift_JIS" />
<title></title>
</head>
<body>

</body>
</html>

<title>と</title>の間に、そのページのタイトルを書く。必須だから、絶対に忘れるな。大抵、タイトルバーと呼ばれるウィンドウ左上の領域に表示される。

以降に述べる内容は、<body>と</body>の間に書き込んでいく。

基本構造

HTMLの基本構造は、以下。

<と>で囲まれた部分がタグ。<要素名〜>となっているほうが開始タグ、</要素名>となっているほうが終了タグ。終了タグは省略するな。したらどつく要素名は絶対に小文字

表示されるのは、主に「内容」部分。それに対してタグ付けしていく形式を採る。

内容が常に存在しないタイプの要素の場合、以下のように書く。

最後のスラッシュに注意。これが終了タグを省略できる秘密だ。このような要素を空要素と言う。

属性は、XHTML1.0Strictで定義されているものに限り、重複しないように幾つでも指定できる。必須の属性というのもある。従って属性はオプションとは意訳できない。

要素名は、<のすぐ後ろ。間には何も挟むな。要素と属性、属性と属性の間には、空白類を最低1つ詰めろ。空白類ってのは、半角スペースとタブと改行のことだと思え。それ以上は知らなくていい。通常は半角スペース、状況に応じて改行。

属性は、イコール(=)を挟んで属性名属性値に分かれる。属性名は絶対に小文字。属性名を省略するな属性値は必ず引用符(""か'')で囲え

入れ子

HTMLは、すべて入れ子(ネスト)の構造。既にテンプレートの時点で、入れ子は発生している。headとbodyはhtmlに入れ子になっているし、titleとmetaはheadに入れ子になっている。こうやって要素の中に要素を入れていくことを、入れ子(ネスト)と言う。従って、終了タグが、入れ子レベルが同じかそれ以下の要素にまたがることは無い入れ子レベルとは、一番外側の要素から見て何重に入れ子になっているかということ。

入れ子レベルに於いて、現在のレベルよりも大きいものを「下」、小さいものを「上」、1だけ大きいものを「直下」などと呼ぶ。つまり、ある要素Aに入れ子になっている要素Bは、Aから見て「下」であり、「中」でもある。

ブロックとインラインレベル

本文部分に記述できる要素は、大半はブロック要素インラインレベル要素に大分される。前者は前後に改行が入るもの、後者はそれがないもの。

法則は簡単だ。以下の呪文(じゅもん)を3回唱えろ。

要素・属性

ここで言うインラインには普通のテキスト(文字列)も含まれる。ここで説明するすべての要素には、共通でidとtitleという属性を使える。titleは補足説明用などに使用。idはいわゆる「ページ内リンク」としての役割が大きいが、説明を省く。

まずブロック要素。12種類。

  1. p
    段落(Paragraph)。中にはインラインしか置けない
    通常、普通の文はこれで囲っていく。
  2. h1,h2,h3,h4,h5,h6
    見出し(Heading)。中にはインラインしか置けない
    h1から使う必要はないが、例えばh2の次にh4と、見出しレベルが跳ばないように
  3. address
    中にはインラインしか置けない。そのページに関する問い合わせ先などを書く。
  4. ol
    番号付きリスト(Ordered List)。直下に置けるのはliのみ
  5. ul
    番号無しリスト(Unrdered List)。直下に置けるのはliのみ
  6. li
    リスト項目(List Item)。olulと組み合わせて、リストを作る。
  7. dl
    定義リスト(Definition List)。直下に置けるのはdtddのみ。最低1つ入れろ。
  8. dt
    定義語(Definition Term)。中にはインラインしか置けない
  9. dd
    定義の説明(Definition Description)。
  10. hr
    水平方向のけい線(Horizontal Rule)。空要素。ゆえに<hr />として使用。
    大きな区切りに。
  11. pre
    整形済みテキスト(PREformatted text)。改行、空白などをそのままの状態で表示したい場合に使用する。
    中にはimg、sub、supを除くインラインしか置けない
  12. blockquote
    引用した文であることを示す。直下に置けるのはブロックのみ。最低1つ入れろ。
    大きめの引用文にはこの要素、小さめの引用文にはqを使え。ただし現状では、このままでは引用であることの証明にはならない可能性がある。

以下、インライン要素。14種類。

  1. a
    アンカー。大体に於いて、リンクを作る。リンクを作る場合、href属性の値にURLを指定。URLの書き方は、後述する。
  2. br
    改行(BReak)。HTMLではソース上で改行しても表示上は改行されない為。
    空要素。ゆえに<br />として使用。
  3. img
    画像(IMaGe)の挿入。空要素。最低限、以下の属性を使用。今すぐ辞書に登録しろ
    <img src="画像のURL" width="画像の幅" height="画像の高さ" alt="画像の代わりとなり得る文字列" />
    幅、高さはピクセル単位。URLについては、後ほど説明する。
  4. em
    強調(EMphasis)。
  5. strong
    より強い強調。
  6. acronym
    略語であることを示す。一般に、titleに展開された語を示す。
  7. q
    引用(Quotation)。
    大きめの引用文にはblockquote、小さめの引用文にはこの要素を使え。ただし現状では、このままでは引用であることの証明にはならない可能性がある。
  8. sup
    上付きの(SUPerscript)。上付き文字にする。
    UA<sup>※1</sup>
    などとして、脚注を示すのに使用されることがある。
  9. sub
    下付きの(SUBscript)。下付き文字にする。
  10. dfn
    定義(DeFiNition)。用語の説明など。
  11. code
    プログラムのコード。
  12. samp
    プログラムからの出力サンプル。
  13. kbd
    キーボード(KeyBorD)。キーボードから入力した文字列。
  14. var
    変数(VARiable)。

以下の2つは、ブロックにもインラインにもなれる、特殊な要素。

  1. ins
    挿入された内容であることを示す。
    一般にdatetime属性を併用する。この属性の値はフォーマットがうっとうしいので、詳細は飛ばす。サンプルは以下。
    2003-10-09T13:15:30+09:00
  2. del
    削除された内容であることを示す。大抵は抹消線を引かれる。
    一般にdatetime属性を併用する。この属性の値はフォーマットがうっとうしいので、詳細は飛ばす。サンプルは以下。
    2003-10-09T13:15:30+09:00

以上、よく使用する要素。

font? center? CSS使え。
div? span? table? 10年早え
frame? frameset? 100年早え
form? 1000年早え。そもそもCGIやスクリプト言語、まともに使えんのか?
bgsound? embed? 他の宇宙空間へ行ってこい。そこにはステキな小技のパラダイスが待っているから。

表示がヘン

仮に以上を守ったとしても謎文字が表示される場合、テンプレート中、1行目と5行目の「Shift_JIS」を以下の順で変更してみろ。まともに読めるようになったら、取り敢えずそれで良し。識者諸君は、突っ込まないように。なぜならこのページは、ホームページの作成を騙(かた)っているに過ぎないのだから。

  1. euc-jp
  2. iso-2022-jp
  3. utf-8
  4. utf-16

単に表示順序などがヘンという場合は、Another HTML Lintでも行って来い。場所は検索しろ。

URL

以下、状況によってディレクトリという言葉はフォルダと読み替えよ。

面倒なら、すべての関係のファイルを同じディレクトリに置け。そうすれば、ファイル名を指定するだけで、互いのファイルのURLとなる。非表示の拡張子に気を付けろ。

他人のページへリンクする時は、例えばInternetExplorerなどであれば、相手ページを表示した時に「アドレス」欄に表示されているものが、そのままURLとなる。右クリックでコピー。

そのディレクトリの中に、別のディレクトリを作り、その作ったディレクトリの中のファイルを見たいとする。そのURLは、「ディレクトリ名/ファイル名」となる。例えば、images/collect.gif

そのディレクトリの上のディレクトリのファイルを見たい場合、上がる階層分、..を指定する。例えば1階層上がる場合は../hogehoge.html、2階層上がる場合は../../mogemoge.html

では、問題。親の名前がkeisukeであるいとこ、satokoの持つファイルdog.jpgを見に行くには、どのようなURLにするか?

最後に

このページは口が悪く作ってありますが、それは

という2点に拠ります。

このページでは、端的に、そして極端な形で

  1. (本来の)HTMLがいかに(最近の謎のオーサリング・ツールの使用方法を覚えるより)簡単なものか
  2. HTMLがいかに表現能力に乏しいか(XML、CSSの重要性)

を述べています。それなりの知識をお持ちの方ならば、実はこのページがそれなりにまじめに書かれたものであることは、お分かり頂けると思います。最近、私自身も、ここで紹介されている要素とフォーム関連、div、span、表関連、link、meta、script、styleくらいしか使用しません。

このサイトのスタイルシートは、少しの皮肉を込めて、不完全且つ色調の調和がとれていない、かつての行き過ぎ strict (自称含む)サイトのデザインに合わせています。
ひっくり返せば、その手のサイトと思われない為には、この手のデザインは避けるべきだと言うことですね。

画像、スタイルシートはすべて、私のオリジナルなので、一応著作権は私に帰属します。どこかにありそうなものばかりですけどね。まぁそれを狙って作ったわけですが。

最後に、こんなところまで読んでくれたあなたに、私からの愛をプレゼント。要らないよね(笑


最終更新日:2006年04月04日
Copyright © 2001-2006 ばあど All Rights Reserved.