プログラミング言語/HTMLとCSS の履歴(No.7) - プログラミングスレまとめ in VIP

HTML†

HTMLとは†

HTMLはHyper Text Markup Languageの略で、マークアップによってドキュメント構造を表現するものであり、プログラミング言語ではありません。ですが、Webページを作る際必要不可欠なものであり、CGIで掲示板などを作る際に必要になるため勉強して損はないでしょう。

現在W3CというHTMLの規格を決めている団体が勧告している最新のHTML規格はHTML4.01です。ただし、XMLというメタ言語（言語を定義する言語）のアプリケーションである"XHTML"をW3Cは推奨しており、XMLが業界における主要なデータフォーマットとしてほぼ認知された今日においてはXHTMLおよび関連知識としてのXMLに関しても学ぶことをお勧めします。

しかし、それとは裏腹にW3Cは、XML的要素が強くなってきた最近のXHTMLの系列とは別に旧来のHTMLの考え方を踏襲した"HTML5.0"の定義を進めています。

↑

何のためにHTMLは存在するのか？†

常識的に考えるだけだと、文書といった場合に重視されるのは「どんな文が書いてあるか」が最大の要素だと思ってしまいがちです。もちろんその文書をわれわれ人間が読むにあたっては当然そのとおりと言えるでしょう。しかしこれを計算機でデータとして扱うに当たって重要なのは、たとえば文章全体の中でどこがタイトルで、どこが要約で、どこが筆者の名前でどこが日付なのか。第一に自然言語を理解できず、第二に処理に厳密性が要求されるコンピュータにとっては、本文よりもこれら「どの文がどういう意味を持つか」ということが重要になってくるのです。

そのような、文章の特定部分に対して意味づけを行う言語のことを、Markup Language(マークアップ言語)と言うのです。「こういう手続きでデータを扱いたい」ということをコンピュータに伝えるのがプログラミング言語なら、「このデータはこういう意味や形をしている」ということをコンピュータに伝えるのがマークアップ言語というわけです。ちなみに頭についているHyper Textとは、われわれが日に5万回はクリックするといわれる「リンク」機能によってつながれた文書のことを言います。結局、HTMLとはウェブ上の文書ファイルに意味や構造の情報を与える手段である、とまとめることができます。

この後の項目で誰かが詳しく説明してくれる予定になっていますが、具体的には

文書がどういった書式で書かれているかを教えてやる
文書のどの部分がリンクを意味しているのかを教えてやる
文書のどの部分が著作者を意味しているのかを教えてやる

などなどの構文があり、これらのおかげでわれわれが愛するFirefox君は文書をわかりやすく表示してくれているというわけです。まあ純粋に意味構造だけじゃ使いづらいので、その特性上ブラウザに処理の指示を与えるとか、文字の色やカタチを指定するとかそういう文もありますので、あんまり硬くなる必要も無いんですけどね。ちなみにOperaを愛しているwiki編集者もここにいます。Operaの速度とレンダリングの忠実さは神に最も近いブラウザを名乗るにふさわしいと思います。Lynxで表示を確認する変人もいます。色んな人がいるので色んな環境で綺麗に見られるHTMLを書きましょう。lolifoxも好きです。

↑

DTD宣言†

世の中のWebサイトの多くはHTMLで書かれていますが、かなりの割合がHTMLっぽいだけで規格から外れています。一番多い間違いはこのDocument Type Definition宣言を書いていないというものでしょう。HTMLを分かったつもりでいる人はほぼ例外なくこれを書き忘れています

DTD宣言は3種類あります。これはこのHTML文書がどのような文書型定義に従って書かれているかという宣言です。文書型定義に関しては次に説明しますが、HTMLの記述ルールとでも思ってください

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

↑

DTD(Document Type Definition)†

DTDは和訳すると文書型定義であり、このHTMLをどのようなルールに従って書くかというそのルールのことです。3種類あります

↑

Strict DTD†

最も厳しいルール。物理表現は一切許さない仁義無き文書型定義（実際にはbなどの一部の要素は非推奨で許されてはいるが）
これの狂信者集団はキモく、この規格に従っていたとしても妙な記述を見つければ情け容赦なく叩きのめす
でも、これに従って書くとCSSを入れ換えるだけでサイトデザインを一気に変更できてしまう、大抵の環境では問題なくページを読むことができるなどのメリットがあるため基本的にはこれを使用するのが良いと思う

↑

Transitional DTD†

移行型のDTD。W3Cは物理表現をなるべく排除したHTMLに向かいたいのでそういう意味で移行型。Strict DTDよりもかなりぬるく、文字の大きさや色を設定するfont要素などの物理表現要素が許されている
Strict DTDを守れている物は例外なくTransitional DTDも守れている。掲示板などで記事の文字色を指定するなどのアクセントを付けたい場合はStrict DTDをベースとしたソースにfont要素を加えてTransitional DTDを宣言するのが良いかもしれない。（文字色を指定する以上fontを使わずCSSにする必要性は薄い）

↑

Frameset DTD†

Transitional DTDにフレーム関連の定義を加えた物。フレームが扱えるのはこれのFrameset DTDのみ
フレームを使うか使わないかは好みだが、画面が小さい、ケータイで見られない、などの理由からフレームを嫌う人も少なくないので注意。使うにしてもノーフレームのページは用意しよう

↑

要素とタグ†

HTMLを分かったつもりでいる人は要素とタグの区別がついていません、というか要素という言葉を知りません
要素とは文書の構造を成す塊、タグはその記述手段、といってもよくわからないので例を挙げましょう

<p>これは段落です。</p>

p>からまでをP要素と呼びます。は開始タグ、は終了タグと呼びます。その間に挟まれているのが内容と呼ばれる物です。
P要素は段落を意味するもので、この場合"これは段落です。"が1つの段落を成していることを意味します
要素は入れ子式に配置されます。が、どの要素にどの要素が入って良いかのルールがあり、それを守らなくては成りません。例えば
段落の中に
 段落があってはいけません

は誤りです。P要素の内容にP要素が含まれてはいけないのです（段落の中に段落は通常ありませんしね）
要素によっては終了タグや開始タグ、内容を省略できる物、省略しなくてはいけない物、省略してはいけない物があります。
実はP要素は終了タグが省略できますので先ほどの例は、"段落の中に"が1つの段落として認識され、"段落があってはいけません"が2つめの段落となり、最後に余計なが存在すると考えられます
要素名は大文字で書いても小文字で書いても構いません。HTML4.01では要素名は大文字、属性名は小文字で書くことが推奨されていますが、XHTMLのことを考えて要素名を小文字で書くのも良いでしょう。

↑

属性とは†

属性とは要素に付与される関連特性のことであり、要素ごとにどのような属性が付けられるかは異なる。

<img src="./sample.gif">

これはIMG要素といってHTML文書中に画像リソースの所在を指定するもので、多くのブラウザの場合画像が文書中に表示される形となる。
画像の所在位置を指定しているのがsrc="./sample.gif"の部分であり、これはIMG要素の属性である。srcを属性名、"./sample.gif"の部分を属性値と呼び、属性は属性名=属性値という形式で成り立っている。（属性値を省略できる属性もあるが、省略しない方が良い）

↑

頻出要素一覧†

細かい説明は基本的にStrict DTDに従ったものを書いています

HTML: 必ずDTD宣言の次に1つのみ存在する。開始タグと終了タグが省略できるが通常省略しない。内容としてはHEADとBODYをこの順に1つずつ持つ
HEAD: HTMLの内容として必ず初めに1つだけ存在する。開始タグと終了タグを省略できるが通常省略しない。内容としては必ずTITLEを1つ、BASEを1つ以下持つ他、METAなどを持つことができる
TITLE: HTML文書の中で唯一開始タグも終了タグも内容もその存在自体も省略できない凄い奴。文書のタイトルを内容に記述する。内容には如何なる要素も含まれてはならない。大抵のブラウザではタイトルバーにここの内容が表示される
BODY: HTMLの内容として必ず2番目に1つだけ存在する。開始タグと終了タグを省略できるが通常省略しない。内容としてはPなどのブロック要素、INS、DEL、SCRIPTを持つことができる。内容は最低でもブロック要素かSCRIPTが1つ以上なくてはならない。大抵のブラウザに表示されるのはこの部分だけである
P: 段落。終了タグのみ省略できるが段落の終わりを明確にするためには省略しない方が良い。内容として持てる要素はインライン要素のみである。当然Pをネストしてはいけない
HR: 水平線。内容が空でなくてはならず、終了タグを省略するのが普通である
UL: 順序無しリスト。タグは省略できず、内容にはLIのみを1つ以上持たなくてはならない。
OL: 順序付きリスト。リストの項目に順序（通常正整数番号が1から順に降られる）がある点を除けばULと同様である。
LI: リストの項目。OLかULの内容にのみ現れる。終了タグを省略できるが、どこまでが項目かを明確にするためには省略しない方が良い。内容にはブロックレベル要素とインライン要素の両方を持つことができる
EM: 強調。インライン要素であり、内容として書かれたものを強調する。タグは省略できない。あくまで強調であり、それが太字として表示されるか、斜体として表示されるか、もっと別な形で表示されるかはブラウザ次第である。
STRONG: EMよりも強い強調。DTD内で%phraseにより展開されるものは全て形式としてはEMと同様のルールを持っており、意味付けのみが異なる。正直一般にはBやIの方がよく使われるが、これらは物理表現要素であり仕様に含まれているものの非推奨であるため、EMとSTRONGを紹介した。
BR: (強制)改行。内容は空でなくてはならず、終了タグは省略できる。あまり乱用すべきものでは無いが、掲示板を作る上ではほぼ必須か。
IMG: 画像リソースの指定。<img src="URI" alt="代替テキスト" width="画像の幅" height="画像の高さ">と言った形式で用いられることが多い。src属性の値には画像リソースの所在、平たくいえば画像までの絶対パスか相対パスを書かなくてはならない。この属性は必ず記述しなくてはならない。alt属性の値には代替テキストを記述する。代替テキストは画像が表示できない（もしくはしないように設定されている）環境で、画像の代わりに使われるテキスト。だいたいそんな感じ。これは盲目のユーザや何らかの事情で画像が表示できない、あるいはされない場合に対処するための物であり、この属性もsrc属性同様必須である。widthとheightは必須では無いが大抵のブラウザでは画像は埋め込まれる形式で表示されるので幅と高さを指定するのはマナーである。

↑

CSS†

↑

CSSとは何か†

CSSとはCascading Style Sheetの略で、無理矢理和訳すると「重ね合わせ可能な表現形式の一覧」ということになります。「重ね合わせ可能」という部分はCSSについて学ばないと分からないので、当面は「表現形式の一覧」、つまりスタイルシートという部分を意識していただければ理解には差し支えありません。スタイルシートっていったい何でしょうか？

HTMLの項目を見ていただいたとき、「HTMLは文書の構造を示すべきであって、デザインを表現すべきではない」という内容の文があったかと思います（なくてもそのうち誰かが書くに決まってます）。HTMLがコンピュータに意味情報を与える物だという話を理解していただければそれは当然のことで、人が主観で感じる色やカタチの情報をコンピュータに与えるべきではないからです。「そんなん人が読むから関係ないし」とか言う方には、具体例としてよく挙げられるのが検索エンジンです。Googleを筆頭に、今現在活躍している「ロボット型」と呼ばれる検索エンジンは、プログラムが自動的にHTML文書を解釈することで検索用のデータベースを作成しています。そのため、解釈しにくいデータの入り交じったHTMLでは、正常に検索結果に反映されないという事態もあり得ます。また、製作過程としても「デザインする」という作業と「文書構造を分析する」という作業がほとんど違う物であるということは直感的にも理解いただけることでしょう。

さてここで生じる疑問は、「じゃあどうやってデザインしろっつーんだよｗｗｗｗｗバーロｗｗｗｗｗ」という一言に他ならないでしょう。その手段として現在一般的なのが、スタイルシートなのです。スタイルシートには、「この種類のタグにはこういう色や形を付けておいて」という情報を羅列したテキストのことで、これをHTMLとは別に用意してつなぎ合わせてやることで、「文書構造」と「デザイン」をほぼ完全に分離することができるのです。

具体的にCSSを使うことで得られるメリットは、

ぶっちゃけHTMLが読みやすくなる
単一のCSSファイルを使い回し、デザインを気にせずに複数のHTML文書を記述できる
複数のCSSファイルを使って、気分次第や閲覧者の必要に応じて簡単にデザインを差し替えることができる
同じ原理で、印刷スタイルとブラウザスタイルを別にすることができる
通常のHTMLでは表現できないデザインが可能である
ユーザースタイルシートが使用でき、アクセシビリティに配慮されたサイトを作れる

などなどそれなりにありますので、是非ともHTML+CSSで素敵なウェブアプリケーションを構築してください。

↑

雑学†

↑

URI†

URIという記述を見かけたことがあるかもしれませんが、これはURLの誤りではありません。URIはインターネット上のリソースの位置を示すもので、URLはその一部なのです。もともとURL、Uniform Resource Locatorは「モノの場所を示す方式」と和訳することができ、その名のとおりHTML文書の存在場所を示すものとして規定されました。しかし場所だけでなく、あらゆる「モノの識別のための共通方式」にまで拡張してやろう、として出てきた考え方がURI、Uniform Resource Identifierなのです。これは和訳すれば「モノの識別をする方式」となり、概念的により広いものになっていることがわかると思います。

さて、こういうRFCを書くお偉方は、上記のような抽象的かつ難解な表現が大好きですが、別に難しい話ではありません。「スキーム:識別子」つー書き方を標準にしようぜ、っていうそんだけの宣言です。スキームというのは、「何の識別子」かを意味する英数字で、このスキームの種類によって識別子の書き方は変わって来ます。たとえばHTML文書を示すためのhttpスキームでは、//をルートとしてサーバー名、ポート番号、ファイル名などを記述することが許可されています。

↑

スキーム†

よくhttp://～とかftp://～とか書かれていますが、このhttpの部分はプロトコルではなくスキームと呼びます
勿論httpの意味している所はHyper Text Transfer Protocolですが、この部分にかかれていること=使用プロトコル、という意味ではありません
よくこの反例として挙げられるのがmailto:です。これはスキームですがプロトコルではありませんね

↑

SGML†

HTMLはSGMLのアプリケーションです。SGMLはマークアップ言語を定義するためのメタ言語です（wikipediaより）この場合のアプリケーションはアプリケーションソフトという意味ではなく、適用という意味です。

↑

スタイルシート†

CSSはスタイルシートの一種であり、CSS=スタイルシートではありません。CSS以外のスタイルシートを扱うブラウザが皆無に等しいだけなのです

↑

環境†

↑

ブラウザ†

CSSを紹介していて残念ですが、CSSではデザインを統一することができません。それはバグや==意図的に==仕様を無視するブラウザが存在するためです。ですから表示の確認にはできるだけ多くのブラウザを使うことが望ましいです。

InternetExploler (Mac OS向けの配布は終了。Windowsは最初から入ってるでしょ)
FireFox (http://www.mozilla-japan.org/products/firefox/ よりダウンロード。エンジンはMozilla系)
Opera (http://jp.opera.com/ よりダウンロード。独自エンジンのIE拡張に一部対応)
Safari (http://www.apple.com/jp/safari/ よりダウンロード。WebKit系エンジン)
Konqueror (WebKit系エンジンのベースとなったKHTMLエンジン)
Lynx (テキストブラウザ)
家庭用ゲーム機

エンジンでブラウザの特徴がでますです。

しかしすべての環境を再現するのは難しいでしょう。とくにMacとか。ですのでbrowsershotsをおすすめします。このサイトは各環境のSSをとってくれる便利なやつです。ただしいつも夏休みのディズニーランドくらい行列ができています。気長に待ちましょう。使い方はGIGAZINEを参照のこと。

↑

確認環境†

いきなりですがブラウザの仕様の忠実度は

Opera>>>Firefox(Gecko)>>>>Safari>>IE>>Mac IE

くらいになってます。超適当（Safariとかよくわかんね）なので確認にはOperaやFirefoxなどが望ましい気がします。普通ならシェアの大きいIEにしたいところですがあまりにもバグが多く結局IE専用のCSSを書くハメになるのだからいきなり相手しても無駄な気がするのです。最終的にはどのブラウザで見てもそれなりに綺麗に見えるようにするのがベストですけどね。

補記: SafariはCSSに強いかと思う( Safariの仕様に関するQ&A )。FireFoxよりは忠実に感じる。JavaScriptはFireFoxよりは弱いかも。Safariが対応してるCSS

プログラマーにとってベストな相手はFirefoxだと勝手に思っています。それは豊富なプラグインにあります。

Firebug: Ajaxデバッグツール
Web Developer: 制作補助ツール
HTML VALIDATOR: 文法チェック使えばわかるこの便利さ。Firebugはつい先日日本語版もでました。

↑

編集環境†

PerlやPHPで扱う場合にはそれ用のエディタを使って編集してください。HTML文書を単独で扱う場合は適当なテキストエディタがあると良いでしょう。エディタ開発者がHTML分かってない場合もあるので注意。

Mac OS Xの場合、無料で付いてくるXcode(Apple謹製)だとか、Coda(シェアウェア)とか便利。

↑

アクセシビリティ†

Accessibilityとは近づきやすさという意味の単語です。webの世界では情報へのアクセスのしやすさを言います。現在のネットはコンピュータおたくの為の物ではなくなってしまいました。ネットには可愛らしい幼女から老人まで多種多様な人がアクセスしています。中には色弱の方もいるでしょう。もしかしたらマウスは使えないかもしれません。携帯端末でJavascriptは動作しないかも知れません。それらの人にもきちんと情報を伝えられるように考える、それがアクセシビリティの考え方です。

目に優しい背景色: たまに黄色背景のページに出会うことがあります。何考えてるのかわかりませんが、もう二度とお客さんは来てくれないでしょう。彩度の高い背景色は大方目に悪いのです。
色弱の人に優しい背景色: 色弱の人はある種の色が区別できません。それがどのような色なのかは様々ですが、日本には赤色が見えにくい人が多いですね。グレースケール化しても読めるように文字と背景のコントラストを上げておくのが良いでしょう。
ハイパーリンクはわかりやすく: ハイパーリンクの基本は青文字、下線です。デザインを変えることもありですが、リンクであることがわかるようにアイコンを付けたりわかりやすくする必要があります。またリンクはこことかではなく2chのようにリンクしましょう。
Javascriptは動作しない時のことも考える: たまにJs切っていると真っ白なページに出会うことがあります。Jsは意図して切っている人も多いので切っていても最低限の情報は伝えられるようにしておきましょう。

強制をするつもりはありませんが、オナニーで満足していては上にはいけないと思います。~

　　　　　　／＼
　　　　　／　　　＼
　　　　　￣|　　|￣
　　　　＿__|　　|＿＿
　　／　⌒　　　⌒ ::: ＼　　|＼
　　|　（●）,　、（●）、　￣￣　＼
　　|　　,,ノ(、_, )ヽ、,, 　　左を見ろ>　　　　　　　　　　　　　　　　こっちは右だバカ！
　　|　　｀ﾄｪｪｪｪｲ' 　 .:::::＿＿　 .／
　　　＼　｀ニニ´　 .:::／　　 |／
　l_!!! ,､ ,..-ヽｰ'',,.. ' ノ｀丶--'ー--､ -―--､　+　+　　　+
　| ! !_!|i::::::::::｀´ｰ''´:::::::::::::::::::|:::::::::::::::::::::,..､::｀ヽ　　+　　　　　+
　.! ',　,|!::::::::::::::::::::::::::::::::::::::::::ヽ／---‐'´｀＼::::＼　　　+
　　!､_,ｲ:::ヽ::::::::::::::::::::::├┤:::／::|　　　　　　＼:::ヽ､_
　　',::::::',::::::|ヽ::::::::::::::::::::::::::::/:::::::l　　　　　　　　ヽ'　　ヽ
　　 ',:::::::',::::!　ヽ:::::::::::::::::::::::::::::::::,!　　　　　　　　ヽ __ノ
　　　',:::::::::::|　　 ',::::::::::::::::::::::::::::/|
　　　ヽ_ ノ　　　ヽ::::::::::::::::::::::::::::::
これも大変悪い例と言えるでしょう。

↑

吉野家のHTML†

そんな事より１よ、ちょいと聞いてくれよ。Wikiとあんま関係ないけどさ。
このあいだ、Webサイト見たんです。Webサイト。
そしたらなんかレイアウトがめちゃくちゃで見られないんです。
で、よく見たらなんかtableがあって、margin=0、とか書いてあるんです。
もうね、アホかと。馬鹿かと。
お前らな、tableレイアウト如きで普段書かないカラム書いてんじゃねーよ、ボケが。
tableだよ、table。
なんかfontとかもあるし。物理表現要素でHTMLか。おめでてーな。
よーし文字が目立っちゃうぞー、とか言ってるの。もう見てらんない。
お前らな、css教えてやるからそのサイト閉鎖しろと。
HTMLってのはな、もっと殺伐としてるべきなんだよ。
要素をタグと間違った奴といつ喧嘩が始まってもおかしくない、
刺すか刺されるか、そんな雰囲気がいいんじゃねーか。Tranditionalは、すっこんでろ。
で、やっと座れたかと思ったら、隣の奴が、ホームページビルダー、とか言ってるんです。
そこでまたぶち切れですよ。
あのな、ホームページビルダーなんてきょうび流行んねーんだよ。ボケが。得意げな顔して何が、ホームページビルダー、だ。
お前は本当にホームページビルダーを使いたいのかと問いたい。問い詰めたい。小１時間問い詰めたい。
お前、ホームページって言いたいだけちゃうんかと。
HTML通の俺から言わせてもらえば今、HTML通の間での最新流行はやっぱり、メモ帳、これだね。
スタート->アクセサリ->メモ帳。これが通の使い方。
メモ帳ってのはUTF-8も読み込める。そん代わり改行コードLFがだめ。これ。
で、それにLynx。これ最強。
しかしこれを使うと次からCtrl+Zで1個しか戻れないという危険も伴う、諸刃の剣。
素人にはお薦め出来ない。
まあお前、１は、DreamWeaverでも使ってなさいってこった。

↑

参考リンク†

W3C Technical Reports and Publications: W3Cの仕様書
W3C - W3Cの仕様書等の文書の日本語訳集: 邦訳集
Web標準導入キット - maccaws.org: サイトを持つなら知っておくべきWeb標準の知識：Web標準手引き
脱初心者をめざす人のためのホームページ作成講座: 初心者向け解説
ウェブページ制作関連リンク -- 脱初心者をめざす人のためのホームページ作成講座: 参考リンク：リファレンス、解説サイト、ツール類
附録：ウェブデザイン關聯リンク集 - HTML覺書とCSS2リファレンス: ウェブ技術を学習する人に参考にして貰いたい，良質なリソースの紹介
Web系メモ: 参考リンク：リファレンス、解説サイト、ツール類、Script各種
HTML5.JP - 次世代HTML標準 HTML5情報サイト: HTML5の仕様に関するトピックを紹介。注意：HTML5はまだW3CやWHATWGで策定中。