Blog Never Knows

CSS 講座第1回　CSS に必要な XHTML について

やあみんな！はじまるよ！！

ようやく1回目を書いた、うはは。

さておき、CSS の話しをする前に、まずは CSS を用いてデザインするのに必要な XHTML について書いておくことにします。CSS の素晴らしさの一つにデザインと文書の分離というのがあります。分離しておくと文にデザインが左右されないで素敵、とか、後でデザインを変更するときに CSS をいじるだけでいいので楽チン、とか、色々と素晴らしいところがありますが、その素晴らしさの恩恵にあずかるためには、まず文書の方をきっちりと書いておかないと、ぜんぜん楽チンでも素敵でもなくなり、人が書くために作られているとは思えないほど複雑に絡み合う CSS によって行き場のない怒りを余儀なくされます。なのでまずはある程度はしっかりとした XHTML を覚えておかなくてはなりません。ということでいくつか思い出しながら書くのでかなり適当な解説になることが予想されますが、必要と思われる XHTML について説明してきましょう。

XHTML におけるブロック要素とインライン要素

XHTML では文書中に存在する要素を記述するためにタグによってマークアップしますが、その中でかなり重要となってくる要素の大きな分類わけとして「ブロック要素」と「インライン要素」というのがあります。いきなりこの話をして分かってもらえるのだろうか、と今ふと思いましたが、CSS でデザインするのにかなり重要となるので何とか分かってください、2つで十分ですって、分かってくださいよ(ブレードランナー)。

<p>ふとトップの画像をランダム表示にしたいと思い、さっくりと perl でプログラムを書いて設置。これぐらいならとても簡単にできるのでスクリプト言語は<em>すばらしい</em>。</p> <p>スクリプトを置いておくので使いたい人はご自由にどうぞ。</p>

さて上で挙げた例で言うと p タグ(段落要素)はブロック要素で、em タグ(強調要素)はインライン要素になります。この例で言うとブロック要素は文で構成され、インライン要素は文の中に存在するということでしょうか。CSS のことを考えて説明をすると、でっかい四角で囲めるのがブロック要素で、囲めないのがインライン要素ということになります。こういうとインライン要素も囲めるじゃないか、という人もいるかもしれませんが、よく見てください、もし例で言う「すばらしい」と文字列が行末で現れ「ら」のあたりで改行された場合、四角で囲えなくなりますね。厳密に言うとちょっと違うのですが、この四角で囲えるか囲えないかで判別すると大体あってます。

インライン要素

ではまずインライン要素に属している要素について説明していきましょう。

アンカー要素(a)

恐らく最も HTML の特徴となる要素ですね。一番良く使われるのはリンクを貼る際の使われ方で、href 属性にリンクを張りたい uri(Universal(or Uniform) Resource Identifiers、≒ url、オブジェクトの場所を示すための識別子、僕は主に uri と記述します)と共に使われます。

<a href="http://www.seman.cs.uec.ac.jp/~morimoto/blog/">Blog Never Knows</a>

強調要素(em, strong)

強調を示すための要素、強さは em < stong なようです。font タグを使って恥ずかしいほど大きい文字で強調を表現するのはいい加減やめよう。

追加・訂正(ins, del)

変更を敢えて残しておきたい場合に使う要素。

画像要素(img)

画像を入れるための要素。今後 object 要素になるとかあった気もするけれどもまあここではいいか。この要素を使う際には必ず属性として alt、width、height を入れるように、とされています。それぞれ画像の説明、幅、高さ。またこの要素は文や文の一部をマークアップするための要素とは異なり、この要素そのものがオブジェクト指す為に、ほか要素と異なり開始タグと終了タグを書かないと思います。このような要素に対して XHTML では、タグ中の最後に「/」を入れるように決められています。例えばこんな感じ。

<img src="img/hoge.jpg" alt="hoge画像" width="100" height="50" />
	
	

上付き文字・下付き文字要素(sup, sub)

意味はそのまま、上付き文字(sup)と下付き文字(sub)。数学表現の中で XHTML によって定義されているのはこれくらい？　どうせならもう少し対応して欲しいところだけれども、このあたりは MathHTML かなにかで定義していく予定なのだろうか。その辺は良く知らない。

dfn, abbr, code, var, samp, kbp

それぞれ用語の定義、省略語、ソースコード、プログラムの変数・引数、プログラム画面等のサンプル、コンピュータへの入力、を意味する要素。つーかどれも僕は使ったことが無いので、この文書における扱いはぞんざいですね、わはは。コンピュータの入出力はその特徴からマークアップを施して表示形式を決めてあげたいところですが、ここで示した要素を用いてマークアップするとインライン要素になってしまうため、マークアップとしてそぐわしくないとおもってます。どう考えてもブロック要素だと思う。ということでプログラムの入出力に関しては整形済み要素(pre)でマークアップするべきだと思ってます。整形済み要素に関しては後述。

その他定義されていない要素(span)

XHTML は必要最低限と思われる要素しか定義されていません。文書に必要なインライン要素としてマークアップしたいけれども XHTML で定義されていない、というときに使うための要素です。

ブロック要素

インライン要素よりもブロック要素の方が CSS には大きく関係しています。この辺の要素に関してはきっちりと書いたほうが、デザインもしやすくなるし、なによりここ(尾内研 blog)においてはブロック要素をきっちりと書いているとして CSS を記述しているので、尾内研の面々はここで上げる要素に関してはしっかりと書いたほうがいいと思います。

段落要素(p)

文章を書く上で最も多用されるブロック要素だと思います。段落を意識すると日本語も自然としっかりしてくる気がしなくもない。基本的に段落要素の中にはブロック要素を入れることができません。つまりブロック要素においては最も最小の要素になります。

リスト要素(ul, ol, li)

リストをマークアップするための要素。ul は番号なし、ol は番号つきのリストになります。li はリストの各項目。ここで注意すべきことは、li は必ず ul もしくは ol の子要素でなくてはならないということ。また、li 要素は子要素としてリスト要素を持つことができます。これで階層的なリスト構造をマークアップできます。ただしここで気をつけなくてはならないことは、子要素となるリストは li の子要素となるというところ。以下に例を示します。

<ul>
	<li>hoge1</li>
	<li>hoge2</li>
	<li>
		<ul>
			<li>moge1</li>
			<li>moge2</li>
		</ul>
	</li>
	<li>hoge3</li>
</ul>

定義リスト(dl, dt, dd)

用語を定義する際に使う要素。この文書において各要素はこの要素を使って書いてます。この記事の HTML も参照ということで。この要素もリスト要素と同様にまず全体を dl でマークアップしなくてはなりません。つまり dt, dd は dl の子要素でなくてはなりません。dt は用語、dd は用語を定義するための文章、となります。

見出し要素(h1〜h7)

見出しを記述するための要素。数字が小さいほど大きな見出しとなります。ISO HTML によると必ず大きい見出し順に h1 より順々に使っていかなくてはならないと定められていますが、そこまで細かく使う必要は無いとは思います。しかし、文書を書く上でしっかりとその文書に存在する様子を見極めてあげると、だいたい h1 から使うことにはなると思います。h1 はサイト自体のタイトル、h2 はそのサイトにおけるページのタイトル、h3 から文書中における各見出し、というように使うと、文書の構造、ナビゲーション、ページの説明を表記しつつ HTML を作成できる気がするので、僕はそんな感じで記述してます。

引用要素(blockquote)

引用文章をマークアップするための要素。他人の書いた文章と自分の文章を明確に区別するためにもしっかりと記述するべきだと思います。また、日本の法律では文章を引用した場合にはその出典を明記しなくてはならなかったはず。なので cite 属性、もしくは blockquote 中にて cite 要素を用いて引用元を明記すべきだと思います。ちなみに cite 要素はインライン要素の中で挙げませんでしたが、インライン要素として定義されています。もう一つ注意しなくてはならないのが、blockquote 要素において、その子要素は必ずブロック要素にてマークアップされていなくてはなりません。つまり引用文章中に段落としてマークアップ可能な部分がある場合必ず段落要素であるとマークアップしなくてはならないということです。

<blockquote cite="http://www.seman.cs.uec.ac.jp/~shin/blog/archives/000027.html">
	<p>「ギネス公認、世界一の辛さ」な唐辛子を使っているらしい『暴君ハバネロ』なのだが、期待したほど辛くなくてがっかりした。</p>
	<p><cite><a href="http://www.seman.cs.uec.ac.jp/~shin/blog/archives/000027.html">今日の井原: 暴君ハバネロがあんまし辛くなかった</a></cite></p>
</blockquote>

整形済み要素(pre)

テキストとして改行等で既に整形が済んでいる文章を記述したい場合に用いられる要素。例えばプログラムのソースコード等を記述する際に用いるのが適切だと思います。でもなんかそのうち absoluted にされそうな気がしなくも無い、既にされていたりして。この要素をコンピュータの入出力に使うべきだというのは僕の思想が混じりまくってます、笑い。この要素を用いると IE や Mozilla では等幅フォントが使われるようになり、読みやすいように表示されるなど、コンピュータの入出力を意識した、ブラウザへの出力が慣例的ではありますが行われます。他の要素で定義を明確に行うことが困難な現状では、この要素によってマークアップをした方が HTML での通例に合っており、望ましいと思う。さらに何らかの意味を記述したい場合には classs 属性や id 属性(後述します)において記述した方が、現状では理解し易い。

div 要素

定義が既にされている XHTML 要素以外のタグで意味を記述したい場合の要素。XHTML が文書中に存在する大半の要素に対応しきれていない現状では、この要素を使いまくってなるべく細かくマークアップしてあげると、コンピュータから理解もしやすく、また、あとあとデザインをする際に非常に有効です。デザインのためだけに文章を区切ってあげたい場合にもかなり有効に使える要素です。細かくこの要素を使ってマークアップをしてあげる例としては、見出しと段落を組にしてあげてサブセクションという要素をマークアップしてあげると、とてもいい感じです。

<div class="subsection">
	<h3>about hoge</h3>
	<p>hogehogemoge...</p>
</div>

一般的には class 属性と id 属性を用いることで細かく意味をつけてあげると、デザインをする際にも非常に扱い易くなります。

class 属性と id 属性

属性に関して何の説明もなしに文章を進めてきてしまいましたが、属性とはタグ中において何らかの意味を記述するために用いられます。具体的には「<」で始まるタグにおいて、定義された記述しにイコール記号と引用符を用いて記述するものです。うわ、分かりにくい説明。例えばこんな感じ。

<p class="hoge">mogemoge</p>

ここでは「class="hoge"」が属性となります。

さて class 属性と id 属性ですが、これは XHTML で定義されていない意味をマークアップするために使われます。例えば、ここはメニューであるとした場合には

<ul id="menu">
	<li>item1</ul>
	<li>item2</ul>
	<li>item3</ul>
</ul>

なんていう感じになります。メニューという様なそのページにおいてユニークであるもの、唯一であるものに関しては id 属性を用います。つまり例えば id 属性「hoge」を一度使ったら、他の要素の id 属性に「hoge」は使えません。「hoge」はそのページにおいて1個しか存在してはいけません。ちなみに id 属性は uri を表記する際に # を用いて直接ジャンプできます。

<a href="hoge/hoge.html#hoge">hoge<>

このようにアンカーによってリンクを貼った場合、目的のページで id 属性を記述した要素に一発で飛べます。

class 属性は、id 属性に対して、1ページに複数置くことができます。前節で挙げた subsection というような記述は、1ページに複数置くことができるものなので class 属性を用いる事になります。

この二つの属性は CSS におけるデザインをする際に、最も重要となります。この文章を読んだ段階ではいまいちぴんと来ないかもしれませんが、なるべく意識して連載を読んでもらえると分かってくるかもしれません。

この章のまとめ、っぽい非まとめ

すいません、1回目から酔っ払って書いているので分かりづらいかもしれません。コメント書いてください、フォローします。つか1つのエントリーとしては異様に長いですね、うはは。繰り返しになりますが、ある程度しっかりとした XHTML で書くことは CSS の恩恵を受けるためにも非常に重要となってきます。覚えなければいけないことですし非常に面倒くさいことですが、なるべく意識して表記することをお勧めします。MovableType では HTML によるマークアップをしなくても自動である程度の段落要素を挿入してくれますが、なるべくならば、自動タグ挿入をオフにして、自分で valid な XHTML を記述した方が僕が書いた尾内研用 CSS においても綺麗に表示されます。

参考文献に挙げた神崎氏の本は非常に面白く読め分かり易く、XHTML に興味のある人は必読であると思います。ただ、現状の XHTML がそれを使う人の要望に適してきるかという観点において XHMTL、CSS 共に疑問が残らないとはいえないので、一つの知識として読んだ方がいい本ではあります。

つか、まとまりのない文章ですいません、精進します。

参考文献

• ユニバーサル HTML/XHTML, 著・神崎正英
• Extensible HTML version 1.0 Strict DTD