ブログテンプレートのマークアップ規則

Web サイトや Web 文書にはその目的に応じて固有のマークアップルールがあります。

このルールを正しく反映したマークアップを行うために“デザイナーズ DTD”と仮に呼ぶものを定義します。ルールの決定には Web デザイナーが中心となるため一旦そう呼ぶことにします。また当ブログでは実用上記事本文用のソレだけを定義します。

当ブログの DDTD は以下の通りです。マルチデバイス、マルチメディアでの検証が済んでいると考えます。

パーツの定義

サイトに固有のタグ構造・クラス名や属性と値を組み合わせたものをパーツと呼びます。

PicaThumnail

サムネイル画像にオリジナル画像へのリンクを張ったものです。

<a href="//*.bp.blogspot.com/**/original.jpg"><img src="//*.bp.blogspot.com/**/s200/thumb.jpg"></a>

ObjCap

オブジェクトにキャプションを追加します。img[alt] は alt="" としておきます。

<div class="caption" style="width:200px">
<figure>
img | iframe | object | embed | video | PicaThumbnail
<figcaption>インラインテキスト</figcaption>
</figure>
</div>

Code

Google Code Prettyfy です。

<pre class="prettyprint lang-*"><code>/* code here */
</code></pre>

Links

<div class="links">
<a href=""></a>
</div>

AA

<pre class="aa">A-+-B
  |
  +-C</pre>

MONA

<pre class="mona">明日はがんばろう
　∧＿∧
（ ´・ω・`)　 (○)
,( ヽ∩∩ノ),、ヽ|〃,,,
“““ ““ ““ ““ ““ ““ ““ “``““ ““</pre>

包含要素（と包含パーツ）の定義

1. ArticleBody

a[href], img[src] は picasa の画像についてはプロトコルを省略すること

div class="aBodyRoot"
 - h2-h6, p, hr, ol, ul, dl
 - table(2列以下)
 - blockquote
 - img, video, audio, iframe, object, embed
 - PicaThumbnail
 - Code
 - Box
 - HScroll
 - Links
 - AA
 - MONA

2. blockquote

cite, title 属性の内容は画面に表示されます。

直下に table を含むことはできません。blockquote > HScroll > table とします。

blockquote
 - h2-h6, p, hr, ol, ul, dl
 - img, video, audio, iframe, object, embed
 - PicaThumbnail
 - Code
 - Box
 - HScroll
 - Links
 - AA
 - MONA

3. Box

200px 程度までの複数のサムネイル画像を並べる際に使用します。

ブログ記事の最初の画像は 200 x 200 以上とします。Facebook の OGP のためです。

一つないし2つのサムネイルにテキストを回り込ませる際に使用します。サムネイルが3つ以上の場合はその他の要素を含めないで Box を閉じます。

div class="box"
 - img, video, audio, iframe, object, embed
 - PicaThumbnail
 - ObjCap(2つまで)
 - p, hr, ol, ul, dl

4. Note

補足情報を書くときに使います。

直下に table を含むことはできません。Note > HScroll > table とします。

div class="note"
 - h2-h6, p, hr, ol, ul, dl
 - blockquote
 - img, video, audio, iframe, object, embed
 - Code
 - Box
 - HScroll
 - Links
 - AA
 - MONA

5. HScroll

小さいディスプレイで極端に閲覧性の落ちてしまう要素とパーツを横スクロールにします。3列以上のテーブルは HScroll でラップしましょう。また余白を大きく取る Note, blockquote 下の table は列に関わらず HScroll でラップします。

HScroll
 - table
 - Code

デモ、またはこのブログのオールキャスト

ArticleBody 直下の h3 タグです

ArticleBody 直下のデモです。

直前は hr タグです。

ArticleBody > h4 です

ol li です。
ArticleBody 直下のデモです。

ul li です
1. ul li ol li です
2. ArticleBody 直下のデモです。
ArticleBody 直下のデモです。

ArticleBody > h5 です

ArticleBody > h6 です

dt です: dd です

thaed th[rowspan=2]	thead td
thaed th[rowspan=2]	thead td
thead th のリンク	thead td のリンク
tbody th	blockquote 下に table を配置する際は hscroll で囲みます
tbody th のリンク	tbody td のリンク
tfoot th	tfoot td

ホームへぺったんR | OSDN 2012年5月のクラウド番外地

A-+-B
  |
  +-C

明日はがんばろう
　∧＿∧
（ ´・ω・`)　 (○)
,( ヽ∩∩ノ),、ヽ|〃,,,
“““ ““ ““ ““ ““ ““ ““ “``““ ““

2. blockquote 直下

blockquote > h2 です

blockquote > h3 タグです

blockquote > p です。

直前は hr タグです。
blockquote > h4 タグです

ol li です。
blockquote 直下のデモです。

ul li です

ul li ol li です
blockquote 直下のデモです。

blockquote 直下のデモです。

blockquote > h5 です

blockquote > h6 です

dt です
dd です

blockquote 直下に Box を配置することもできます。

thaed th[rowspan=2] thead td
thead td
thead th のリンク thead td のリンク

tbody th blockquote 下に table を配置する際は hscroll で囲みます
tbody th のリンク tbody td のリンク

tfoot th tfoot td

ホームへぺったんR | OSDN 2012年5月のクラウド番外地
A-+-B
  |
  +-C
明日はがんばろう
　∧＿∧
（ ´・ω・`)　 (○)
,( ヽ∩∩ノ),、ヽ|〃,,,
“““ ““ ““ ““ ““ ““ ““ “``““ ““