tumblr

tumblr（タンブラー）は、メディアミックスブログサービス。ブログとミニブログ、そしてソーシャルブックマークを統合したマイクロブログサービスである。アメリカのDavidville.inc（現: Tumblr, Inc.）により2007年3月1日にサービスが開始された。

そろそろしっかりHTML　その4：HTMLの構造-body要素-

HTML

あらすじ
「そろそろしっかり」とか言いながらも普通に3週間くらいHTMLの勉強を怠り全然しっかりしてない感じで毎日呆けて過ごしていたどうしようもないカスの僕。そんなウジ虫野郎のもとにある日仕事が舞い込んできた。それは新規android案件のデザインコンペ用のhtmlをコーディングしろとのものだった。ちょうどhtmlの勉強してたし(してなかったけど)ちょうどいいやと思いきや、蓋を開けてみると、なんかデザイン懲りすぎてて完全にこれhtmlとcssでどうやって組み立てるか考えてないよね、というレベルの非常に無理難題であることが素人でも分かるような代物を押し付けらたのが発覚した！焦る僕。期限は4日。3週間前に、pタグは改行してくれる要素だと思って使ってましたwwwwwwwwうはwwwwwwwwwとか言ってた人間に任せる仕事じゃないってこれ！マジでしっかりしないとやべえ！一切誇張なしの実話だから困っちゃう！弊社android案件の明日はどっちだ！？早く死にたい。


というわけで、泣きながらbody要素についてまとめた。

body要素

文書の本体には、文書の内容が含まれる。この内容のプレゼンテーションには、ユーザエージェントによって様々な方法が取られる。
例えば視覚系ブラウザでは、本体のことを、テキスト、画像、色、図、等の内容物が現れるキャンバスであると考えることができる。
音声ユーザエージェントでは、同じ内容が話されることになる。
現在では、文書のプレゼンテーションを指定する方法としてスタイルシートの使用が望ましいため、BODY要素のプレゼンテーション関連の属性は推奨しないこととなった。
http://www.asahi-net.or.jp/~sd5a-ucd/rec-html401j/struct/global.html

プレゼンテーション関連の属性というのはbackground,text,link,vlink,alinkなど。

id = name [CS]
この属性は、要素に名前を割り当てる。この名前は文書中で一意でなければならない。
class = cdata-list [CS]
この属性は、ある要素に1つのクラス名を割り当てるか、または複数のクラス名を設定する。幾つの要素に対してでも、同じクラス名あるいはクラス名群が割り当てできる。複数のクラス名については、空白文字によって区切らねばならない。

HTMLにおいて、id属性は、次の各々の役割を果たす。
- スタイルシートの選択子。
- ハイパーテキストリンクの目標アンカー。
- スクリプトから特定要素を参照するための手段。
- 宣言されたOBJECT要素の名称。
- ユーザエージェントによる処理一般に用いる。(例えば、HTMLページからデータベースへデータを移植する際にフィールド名を識別するとか、HTML文書を他のフォーマットに変換するなど。)

一方のclass属性は、ある要素について1つ以上のクラス名を割り当て、この要素が当該クラス/クラス群に属することが示され得る。 1つのクラス名は、複数の要素インスタンスの間で共有され得る。 HTMLにおいて、class属性は、次の各々の役割を果たす。
- 著者が要素集合にたいしてスタイル情報を割り当てたいと考えた際の、スタイルシート選択子。
- ユーザエージェントによる処理一般。

ほとんど全てのhtml要素にid属性とclass属性を指定できる。
ID ，CLASS 属性は HTML，HEAD，META，SCRIPT，STYLE，TITLE，BASE を除くすべての要素に指定できる。ただし，HTML 4.0 Transitional で用いる BASEFONT には CLASS 属性を指定できない
http://www.tg.rim.or.jp/~hexane/ach/awht/awht07.htm

斜体のnameとcdata-listはDTDで宣言されている定義。
classについては1つの要素に複数のclassを定義できる（だからcdata-[list]となっている）
タグのclass属性にclass名を半角スペースで区切ると指定できる。下のような感じ。

<h2 class="header fSize14">見出し、その１</h2>


id属性とclass属性はページ内リンク用のアンカーとしても使用できるが、同じ名前空間を使う。要するにid,class各属性で同じ名前を使ってリンク飛ばすことはできない
不正な例:
次の例は、同一文書中で、各属性が同じ名前を重ねて宣言しているので不正なHTMLとなっている。

<A href="#a1">…</A>
…
<H1 id="a1">
…中略…
<A name="a1"></A>

ブロックレベル要素と行内要素

HTMLの要素のうち、BODY要素に出現し得る要素のあるものは「ブロックレベル」と呼ばれ、他のものは「行内」 (これは「テキストレベル」としても知られている)と呼ばれる。
この違いは、幾つかの点から明らかにされる。

内容モデル
一般に、ブロックレベル要素は行内要素及び他のブロックレベル要素を内容に取り得る。
一般に、行内要素は単なるデータ及び他の行内要素を内容に取り得る。
この構造的な性質の違いから、ブロック要素は行内要素よりも「大きい」構造を生成する、と言える。
整形
デフォルトでは、ブロックレベル要素は行内要素とは異なるように整形される。一般に、ブロックレベル要素は新しい行を開始し、行内要素は新しい行を開始しない。
空白、line break、ブロック整形について、より詳しくはテキストの項目を参照されたい。


html要素はhead要素とbody要素(またはframeset要素)から構成される。大元のhtml要素と同じく、body要素はブロック要素とインライン要素から構成される。
親子構造的には、ブロック要素はbody要素の直下におけるが、インライン要素はbody要素の直下に配置することはできない。
また、ブロック要素はインライン要素を含めることができるが、インライン要素はブロック要素を含むことはできない。
ブロック要素は表示領域の幅いっぱいまでを占有し、上下に改行の入る形でレンダリングされる。
ブロック要素とインライン要素の存在意義のような説明としては以下がしっくり来た。

・ブロック要素
それ自体で完結した一塊の思想を示す。
文書全体の構造の基となる要素
・インライン要素
それだけでは完結した思想ではない。
筆者の判断・意図を示す要素。
http://members.jcom.home.ne.jp/pctips/www/bandi.html