( published: Oct. 2, 2003 / updated: Oct. 17, 2003 )
HTML文法ノートの内容があまりにも壮絶だったので、折角だから纏めてみる。
デザイン上の観点
が全て。
<body> こんにちは<br> ホームページを作っています。 </body>本文を書くには、BODY中にそのまま記述してやればOKです。 ただし、改行にはBRタグを利用することになります。
body要素直下にインラインテキストを直接入れるのはstrict的にはinvalid。だが、それが本筋ではない。
以後、「タグ」という用語についての誤用については触れない方向で。
Pタグでくくられた部分はひとつの段落と認識されています。 本文を書く際、ある程度の文章ごとに段落をわけて書くようになっています。 段落を変える際には、自動的に二行分の改行が入ることに注意してください。
別に普通に文章を書く際には段落があろうと無かろうと関係ないのですが、 後々、段落ごとにデザインを変えたりする場合に、段落ごとにわけてあるかどうかで 作業のしやすさが各段に変わってきます。
なお、改行を行いたい際にPタグでも、BRタグでもできることになりますが、 用途によって使い分けた方がいいです。
改行と段落との使い分けが重要らしい。しかもデザイン上の理由で。
デザインの観点から言えば、水平線の画像を使うことは論外だと思います。 理由は、見た目がよくないからです。 もちろん、HRは役に立つ場合も多いのですが、画像で役に立っているのはあまり目にしません。
結局何を言いたいのかさっぱりな文。デザインの観点から
云々はこの後何度も登場するので乞うご期待。
原文では文ごとに改行、かつ行頭に#を入れていたのですが、文章の意図が伝われば良いという理由で、一行にまとめた次第。
なぜこのように二種類のタグが存在するのかというと、 直接文体を指定するタグを使った場合、そのタグがブラウザで対応していなかったら困るからです。
しかし常識的に考えれば、ブラウザの開発者側は、 STRONGタグに対応させる前にBタグに対応させるに決まっています（それほどBタグは基本的なタグです）し、 また、ブラウザが対応していないようなタグは普通私たちも使う機会がないため 結局、これらの差が実感される機会はほとんどないといえます。
デザインの観点から考えれば、 どう表現されるかがわからないSTRONGタグよりもBタグを絶対に使うべきであることを一応追記しておきます。
HTMLをブラウザで表示するための言語と考えるとこういった本末転倒な結論が導き出されるという典型的な例。
画像を入れるには、IMGタグを使います。
URIの概念が曖昧なままでimg要素を教える性根に注目。そもそも何故画像を入れるのかの説明も無いし。
width/height属性は教えるのに、alt属性を教えないというのはまあ良いとして。
さて、文字の色を部分的に変更する方法だが、これは意外と面倒です。 個人的には<red>タグでも用意してくれていればいいなと常々思うのですが、 FONTタグのCOLOR属性を使って色を指定する方法は今後も変わらないでしょう。
面倒なので教えないという考え方は無い様で。
文字のサイズを変更するのにはFONTタグのSIZE属性を利用します。 SIZE属性は、1〜７までの絶対指定か、 今の本文の文字サイズを基準に何段階＋−にするのかという相対指定のどちらかで指定します。 ちなみに、何も指定しないときのサイズは絶対基準の３です。
MozillaのStandardモードの場合、size="4"で地の文と同じ大きさになる模様。まあ本筋ではありませんが。
リンクを貼るには、Aタグを利用します。 そして、どのページへのリンクであるかを明示するためにHREF属性を必ず追加します。 （IMGタグのSRC属性と利用方法は似ています）
アドレスの指定は絶対でも相対でもOKです。
URIについてのちゃんとした説明を飛ばしたまま画像の張り付けとかリンクとかを教えると、どんどん訳が分からなくなるという例。
とりあえずよくわからないという方は、上のソースをそのまま利用してください。 上の例ではShift_JISに文字コードを指定しています。 他に、HTML作成ソフトによってはx-jisなどに指定するものもあるようです。 とりあえず、現在の主流はShift_JISなので、迷ったらこれでいいと思います。
こういう些細なことに拘るのは、この手の入門記事のお約束。しかも肝心な部分の説明はいい加減という。現在の主流はShift_JISなので、迷ったらこれでいいと思います
、って。
まあ「迷ったら何も指定しない」という方向で良いのでは。
サーバやUAが適切に文字コードを処理してくれるようになれば良いのですが。
<body bgcolor="gray" text="white"> <body background="haikei.gif">BODYタグの属性を使うことで、背景に関する設定や、文字色に関する設定を付け加えることができます。
こういうソースを提示されると、body開始タグを複数書くことを覚えてしまいそうです。
色指定が不完全だとか、現在はスタイルシートを使ってこれらを記述することが主流になりつつあり、利用する機会は少なくなりつつあるといえます
、とかいうのはさておき。
DIVタグはある特定の部分をまとめるために利用するタグで、それ自体は特別な働きはしません。 （つまり、どこからどこまでを右に寄せるかのか範囲を特定するためにDIVというタグは使われます）
class属性やid属性付きのdiv要素の使用は当サイトでもやっているので、この項目は興味深い。まあ何故右寄せ/センタリングをするのかには全く触れていないのはいつものことですが。
「align属性よりcenterタグを絶対に使うべきである」という主張に期待していたのですが。
デザイン上の話をしておくと、テーブルを使うとデザインがいとも簡単にくずれるため、 利用する必要性がないのであれば使わない方が無難です。
ただ例外として、スペーサーGIFを併用利用したレイアウトテーブルでのデザインなどがあります。 （主にDreamweaver４での機能です） 細かいデザインの話題については別の機会に取り上げたいと思います。
テーブルレイアウトを薦めないのかと期待していたらこの仕打ちが。
テーブルはレイアウトに使うのが正しい使い方というネタを思い出したり。
ではなぜ複数のページを表示させたいのでしょうか？ その理由は記述の省略です。 複数のページで同じ表示部分がある際には、 それを各ページに書くよりもひとつのページに書いておいて共有した方が サイトを作る上でずっと楽だからですね。
フレーム機能は、メニューバーや、サイトのロゴなどを各ページで表示させる際に非常に威力を発揮します。 その一方で、ページ構成が複雑になったり、デザインが画一的になってしまう可能性があるという弱点も持っています。
メニューバーや、サイトのロゴなどを各ページで表示させる
、という発想自体を否定したいところ。メニューバーをいちいちフレームで提供するよりは、シンプルなサイトナビゲーションを提供した方が、閲覧者にも制作者にもありがたいですし。
あとはURIの説明が最後まで行われていないとか、noframes要素の中身がフレーム機能の無いUAを追い返すものだとか。
<em>強調された文字</em> <strike>消去された文字</strike> <u>下線の引かれた文字</u> <tt>等幅フォント</tt> <big>一段階大きくなる</big> <small>一段階小さくなる</small>
ここへ来て思い出した様に物理スタイルの紹介が。しかも一部論理スタイルの指定も混じっていますし。
EMは、強調を命令する論理的タグです。実際の表示は斜体になります。
早い話、Iタグを使った方がいいと個人的には思います
、というのはいつものことですが。
ちなみにttはTeleTypeの略称だったり。
<style> <!-- p {margin-left:4%} --> </style>スタイルシートの記述方法の基本となるタグの例です。 スタイルシートを利用するにはSTYLEタグを使い、HEAD中に記述してやります。
スタイルシートとは、HTMLタグの表示の方法を細かく指定するための新しい技術です。 いまやホームページはスタイルシート無しではなりたたないくらい密接な関係になってきており、 HTMLを学ぶ上ではスタイルシートについての知識も必要不可欠です。
ブラウザによって見栄えが変わるという理由で全否定、という事態にはなっていない点は評価。というかこんな付け焼き刃のスタイルシートを教えられても。
まあスタイルシートについては出来合のものを借りて使わせ、文書の作成と構造化に専念させた方が近道ではありますが。
<h1>大きな見出し</h1>見出しをつけるタグです。（サイズを大きく、かつ太字にします） サイズの大きい順に、H1からH6まで６種類存在します。
利用価値が全くといっていいほどありません。 その理由として、文字の大きさの細かい制御ができないこと、 また、このタグの下に入ってしまう空白部分が非常に邪魔であることの二点があげられます。
一応、もっとも有名なタグのひとつではあるのですけれども。
「前後で改行されるh1-h6タグより、前後で改行するかどうかをbrタグで選べるfontタグの方が優れている」という、この手の記事のお約束的紹介。
それ以前に作者は「見出しとは何か」ということ自体理解していない様で。
正直なところ、リストの利用価値は私個人はゼロに近いと思います。 理由を多少述べておきます。
- 多少のリストくらいならば、自分でその記号を直接打ちこんだ方が入力はずっと楽です。
- LIタグなどをいれてしまうと、後々文章の構造を修正する際、修正が困難です。
- 勝手に行間などの指定を変えてしまうため、デザインを指定しにくくなります。
- リストを多用すること自体がデザインの画一化をまねき、ページの見た目を悪くします。
以上の理由から、私個人は絶対にリスト関連のタグは使いません。 結果的に扱いが小さくなってしまうのですが、ご容赦ください。
今回一番のヒット。デザインの観点から
リスト要素を全否定という「素晴らしい」文章。
ちなみに本文書では当然の様にul要素に書き換えています。リスト要素の使い方の一番分かりやすい例として。
文字を点滅させるには、BLINKタグを用います。 現在ではNNのみ対応しています。（IEは対応していません）
IEがずっと対応させていないことからもわかるように、 点滅文字は非常に不人気です。 とにかく嫌がられますので、あえて解説自体いたしませんでした。
解説自体いたしませんでした
、といいながら思いっきり解説しているのですが。
marqueeについての記事が無いのが救いといえば救い。
http://ryulife.com/attic/tagnotes.html を XHTML1.0 Transitional としてチェックしました。
28個のエラーがありました。このHTMLは 52点です。タグが 17種類 545組使われています。文字コードは Shift JIS のようです。