実質ガイドライン：全部入りHTMLチェックシート

このページは、このサイトで使うであろう殆どのタグを一覧にしたもので、俗にいう「全部入りページ」です。 表示確認を簡便に行うためのものです。

基本的には、メンテナンスのことも考えると、出来るだけ標準のタグで設計すべきだろうと考えていますが、下記にあるように一部独自クラスも設定しています。このような「コンポーネント」が増えれば、此処にも足して、チェックをして…(以下略)。

• header/ヘッダー要素
• a/リンク線
• text-decoration, font-weight, font-style
• font
• span w/class
• div vs p
• hr線
• table/テーブル要素
• p/パラグラフ要素
• ul/リスト要素
• ol/リスト要素
• dl/リスト要素
• コード表記 / Syntax Highlighter
• カスタマイズしたdl
• キャプチャー（スライド）リスト
• blockquote / 引用
• site list w/Favicon
• Blogger Variable Color
• recent post w/label
• widget：Google News @Yahoo! Pipe
• widget：Amazon

header/ヘッダー要素　　▲

a要素なし

header 1

header 2（見出し）

header 3（小見出し）

header 4（準見出し）

header 5

header 6

header 7

a要素あり(クリックしちゃダメです)

header 1

header 2（見出し）

header 3（小見出し）

header 4（準見出し）

header 5

header 6

header 7

a要素あり：visited(このページ)

header 1

header 2（見出し）

header 3（小見出し）

header 4（準見出し）

header 5

header 6

header 7

a/リンク線　　▲

いろはにをえどちりぬるを

いろはにをえどちりぬるを(リンクあり(クリックしちゃダメです))

いろはにをえどちりぬるを(リンクあり：visited(このページ))

text-decoration, font-weight, font-style　　▲

標準形

下線＝text-decoration: underline;

上線＝text-decoration: overline;

打消し線＝text-decoration: line-through;

ブリンク＝text-decoration: blink;

標準の文字＝font-weight:normal;

太字の文字＝font-weight:bold;

標準の文字＝font-style:normal;

斜体の文字＝font-style:italic;

斜体の文字＝font-style:oblique;

font　　▲

font-size:10px; font-family: 'ＭＳ Ｐゴシック', 'MS PGothic', Sans-Serif; / 山路を登りながら、こう考えた。

font-size:12px; font-family: 'ＭＳ Ｐゴシック', 'MS PGothic', Sans-Serif; / 山路を登りながら、こう考えた。

font-size:14px; font-family: 'ＭＳ Ｐゴシック', 'MS PGothic', Sans-Serif; / 山路を登りながら、こう考えた。

font-size:16px; font-family: 'ＭＳ Ｐゴシック', 'MS PGothic', Sans-Serif; / 山路を登りながら、こう考えた。

---

font-size:10px; font-family:'Palatino Linotype', 'Book Antiqua', Palatino, serif; / 山路を登りながら、こう考えた。

font-size:12px; font-family:'Palatino Linotype', 'Book Antiqua', Palatino, serif; / 山路を登りながら、こう考えた。

font-size:14px; font-family:'Palatino Linotype', 'Book Antiqua', Palatino, serif; / 山路を登りながら、こう考えた。

font-size:16px; font-family:'Palatino Linotype', 'Book Antiqua', Palatino, serif; / 山路を登りながら、こう考えた。

span w/class　　▲

• これは「class="red"」です
• これは「class="turquoise"」です
• これは「class="emerald"」です
• これは「class="peterRiver"」です
• これは「class="amethyst"」です
• これは「class="wetAsphalt"」です
• これは「class="greenSea"」です
• これは「class="nephritis"」です
• これは「class="belizeHole"」です
• これは「class="wisteria"」です
• これは「class="midnightBlue"」です
• これは「class="sunFlower"」です
• これは「class="carrot"」です
• これは「class="alizarin"」です
• これは「class="clouds"」です
• これは「class="concrete"」です
• これは「class="orange"」です
• これは「class="pumpkin"」です
• これは「class="pomegranate"」です
• これは「class="silver"」です
• これは「class="asbestos"」です

div vs p　　▲

これはdivでくくられたエリアです。これはdivでくくられたエリアです。これはdivでくくられたエリアです。これはdivでくくられたエリアです。これはdivでくくられたエリアです。これはdivでくくられたエリアです。

これはpでくくられたエリアです。これはpでくくられたエリアです。これはpでくくられたエリアです。これはpでくくられたエリアです。これはpでくくられたエリアです。これはpでくくられたエリアです。

hr線　　▲

pなし＝<hr/>

---

p付き＝<p><hr/></p>

---

table/テーブル要素　　▲

table（標準）

th001	th002	th003
td:001-001	td:001-002	td:001-003
td:002-001	td:002-002	td:002-003

イメージ	説明／備考
	山路を登りながら、こう考えた。 智に働けば角が立つ。情に棹させば流される。意地を通せば窮屈だ。とかくに人の世は住みにくい。 住みにくさが高じると、安い所へ引き越したくなる。どこへ越しても住みにくいと悟った時、詩が生れて、画が出来る。 ※そのまま
	山路を登りながら、こう考えた。 智に働けば角が立つ。情に棹させば流される。意地を通せば窮屈だ。とかくに人の世は住みにくい。 住みにくさが高じると、安い所へ引き越したくなる。どこへ越しても住みにくいと悟った時、詩が生れて、画が出来る。 ※p形式
	山路を登りながら、こう考えた。 智に働けば角が立つ。情に棹させば流される。意地を通せば窮屈だ。とかくに人の世は住みにくい。 住みにくさが高じると、安い所へ引き越したくなる。どこへ越しても住みにくいと悟った時、詩が生れて、画が出来る。 ※dl形式

table class="noboarder"（枠無し）

th001	th002	th003
td:001-001	td:001-002	td:001-003
td:002-001	td:002-002	td:002-003

イメージ	説明／備考
	山路を登りながら、こう考えた。 智に働けば角が立つ。情に棹させば流される。意地を通せば窮屈だ。とかくに人の世は住みにくい。 住みにくさが高じると、安い所へ引き越したくなる。どこへ越しても住みにくいと悟った時、詩が生れて、画が出来る。 ※そのまま
	山路を登りながら、こう考えた。 智に働けば角が立つ。情に棹させば流される。意地を通せば窮屈だ。とかくに人の世は住みにくい。 住みにくさが高じると、安い所へ引き越したくなる。どこへ越しても住みにくいと悟った時、詩が生れて、画が出来る。 ※p形式
	山路を登りながら、こう考えた。 智に働けば角が立つ。情に棹させば流される。意地を通せば窮屈だ。とかくに人の世は住みにくい。 住みにくさが高じると、安い所へ引き越したくなる。どこへ越しても住みにくいと悟った時、詩が生れて、画が出来る。 ※dl形式

p/パラグラフ要素　　▲

山路を登りながら、こう考えた。

智に働けば角が立つ。情に棹させば流される。意地を通せば窮屈だ。とかくに人の世は住みにくい。

住みにくさが高じると、安い所へ引き越したくなる。どこへ越しても住みにくいと悟った時、詩が生れて、画が出来る。

人の世を作ったものは神でもなければ鬼でもない。やはり向う三軒両隣りにちらちらするただの人である。ただの人が作った人の世が住みにくいからとて、越す国はあるまい。あれば人でなしの国へ行くばかりだ。人でなしの国は人の世よりもなお住みにくかろう。

越す事のならぬ世が住みにくければ、住みにくい所をどれほどか、寛容て、束の間の命を、束の間でも住みよくせねばならぬ。ここに詩人という天職が出来て、ここに画家という使命が降る。あらゆる芸術の士は人の世を長閑にし、人の心を豊かにするが故に尊とい。

ul/リスト要素　　▲

• liリスト要素
• liリスト要素liリスト要素liリスト要素liリスト要素liリスト要素liリスト要素liリスト要素liリスト要素
• liリスト要素

  ここからul入れ子開始

  • ul-liリスト要素
  • ul-liリスト要素
• liリスト要素

  ここからol入れ子開始

  1. ol-liリスト要素
  2. ol-liリスト要素
• liリスト要素

  ここからdl入れ子開始

  dt要素dt要素dt要素

  dd要素dd要素dd要素dd要素dd要素dd要素dd要素dd要素dd要素dd要素dd要素dd要素

  dt要素dt要素dt要素

  dd要素dd要素dd要素dd要素dd要素dd要素dd要素dd要素dd要素dd要素dd要素dd要素

• li要素

  ここからテーブル要素

  th001	th002	th003
  td:001-001	td:001-002	td:001-003
  td:002-001	td:002-002	td:002-003

ol/リスト要素　　▲

1. liリスト要素
2. liリスト要素liリスト要素liリスト要素liリスト要素liリスト要素liリスト要素liリスト要素liリスト要素
3. liリスト要素

   ここからul入れ子開始

   • ul-liリスト要素
   • ul-liリスト要素
4. liリスト要素

   ここからol入れ子開始

   1. ol-liリスト要素
   2. ol-liリスト要素
5. liリスト要素

   ここからdl入れ子開始

   dt要素dt要素dt要素

   dd要素dd要素dd要素dd要素dd要素dd要素dd要素dd要素dd要素dd要素dd要素dd要素

   dt要素dt要素dt要素

   dd要素dd要素dd要素dd要素dd要素dd要素dd要素dd要素dd要素dd要素dd要素dd要素

6. li要素

   ここからテーブル要素

   th001	th002	th003
   td:001-001	td:001-002	td:001-003
   td:002-001	td:002-002	td:002-003

dl/リスト要素　　▲

dt要素：パラグラフなし

パラグラフなしパラグラフなしパラグラフなしパラグラフなしパラグラフなしパラグラフなし

dt要素：パラグラフあり

山路を登りながら、こう考えた。

智に働けば角が立つ。情に棹させば流される。意地を通せば窮屈だ。とかくに人の世は住みにくい。

住みにくさが高じると、安い所へ引き越したくなる。どこへ越しても住みにくいと悟った時、詩が生れて、画が出来る。

ulリストの入れ子

ここからulリスト

• li要素li要素li要素li要素li要素li要素li要素
• li要素li要素li要素li要素li要素li要素li要素

olリストの入れ子

ここからolリスト

1. li要素li要素li要素li要素li要素li要素li要素
2. li要素li要素li要素li要素li要素li要素li要素

dlリストの入れ子

ここからdlリスト

dt要素dt要素dt要素dt要素dt要素dt要素

山路を登りながら、こう考えた。

智に働けば角が立つ。情に棹させば流される。意地を通せば窮屈だ。とかくに人の世は住みにくい。

dt要素dt要素dt要素dt要素dt要素dt要素

住みにくさが高じると、安い所へ引き越したくなる。どこへ越しても住みにくいと悟った時、詩が生れて、画が出来る。

コード表記 / Syntax Highlighter　　▲

Syntax Highlighter用のCSS/JSを追加した場合に正しく見えるかどうかの確認用

htmlの場合：通常の表記(1)＝パラグラフ：p なし

<pre class="brush: html">
（ここにエスケープ処理済みのコードを書く）
</pre>

cssの場合：通常の表記(2)＝パラグラフ：p 付き

<pre class="brush: css">
（ここにエスケープ処理済みのコードを書く）
</pre>

dl内に記述した場合

JavaScriptの場合

<pre class="brush: js">
（ここにエスケープ処理済みのコードを書く）
</pre>

エスエープ処理について

• 手動で直す、頑張って直す
• newbie on xxx(scala,iphone,objective-c,ajax,javascript,html and more...): HTMLメタ文字→エスケープ文字変換javascript

カスタマイズしたdl　　▲

dl class="list"

dtタイトルdtタイトルdtタイトル

ddテキストddテキストddテキストddテキストddテキストddテキストddテキストddテキスト

dtタイトルdtタイトルdtタイトル

ddテキストddテキストddテキストddテキストddテキストddテキストddテキストddテキスト

dl class="dateList"

2012/12/27

ddテキストddテキストddテキストddテキストddテキストddテキストddテキストddテキスト

2012年12月24日

ddテキストddテキストddテキストddテキストddテキストddテキストddテキストddテキストddテキストddテキストddテキストddテキストddテキストddテキストddテキストddテキスト

2012年12月24日

• ddテキストddテキストddテキストddテキストddテキストddテキストddテキストddテキストddテキスト
• ddテキストddテキストddテキストddテキストddテキストddテキストddテキストddテキストddテキスト

キャプチャー（スライド）リスト　　▲

blockquote / 引用　　▲

山路を登りながら、こう考えた。

智に働けば角が立つ。情に棹させば流される。意地を通せば窮屈だ。とかくに人の世は住みにくい。

住みにくさが高じると、安い所へ引き越したくなる。どこへ越しても住みにくいと悟った時、詩が生れて、画が出来る。

人の世を作ったものは神でもなければ鬼でもない。やはり向う三軒両隣りにちらちらするただの人である。ただの人が作った人の世が住みにくいからとて、越す国はあるまい。あれば人でなしの国へ行くばかりだ。人でなしの国は人の世よりもなお住みにくかろう。

越す事のならぬ世が住みにくければ、住みにくい所をどれほどか、寛容て、束の間の命を、束の間でも住みよくせねばならぬ。ここに詩人という天職が出来て、ここに画家という使命が降る。あらゆる芸術の士は人の世を長閑にし、人の心を豊かにするが故に尊とい。

---

• 山路を登りながら、こう考えた。
• 智に働けば角が立つ。情に棹させば流される。意地を通せば窮屈だ。とかくに人の世は住みにくい。
  • 山路を登りながら、こう考えた。
  • 智に働けば角が立つ。情に棹させば流される。意地を通せば窮屈だ。とかくに人の世は住みにくい。

---

1. 山路を登りながら、こう考えた。
2. 智に働けば角が立つ。情に棹させば流される。意地を通せば窮屈だ。とかくに人の世は住みにくい。
   1. 山路を登りながら、こう考えた。
   2. 智に働けば角が立つ。情に棹させば流される。意地を通せば窮屈だ。とかくに人の世は住みにくい。

---

dt要素：パラグラフなし

パラグラフなしパラグラフなしパラグラフなしパラグラフなしパラグラフなしパラグラフなし

dt要素：パラグラフあり

山路を登りながら、こう考えた。

智に働けば角が立つ。情に棹させば流される。意地を通せば窮屈だ。とかくに人の世は住みにくい。

住みにくさが高じると、安い所へ引き越したくなる。どこへ越しても住みにくいと悟った時、詩が生れて、画が出来る。

ulリストの入れ子

ここからulリスト

• li要素li要素li要素li要素li要素li要素li要素
• li要素li要素li要素li要素li要素li要素li要素

olリストの入れ子

ここからolリスト

1. li要素li要素li要素li要素li要素li要素li要素
2. li要素li要素li要素li要素li要素li要素li要素

dlリストの入れ子

ここからdlリスト

dt要素dt要素dt要素dt要素dt要素dt要素

山路を登りながら、こう考えた。

智に働けば角が立つ。情に棹させば流される。意地を通せば窮屈だ。とかくに人の世は住みにくい。

dt要素dt要素dt要素dt要素dt要素dt要素

住みにくさが高じると、安い所へ引き越したくなる。どこへ越しても住みにくいと悟った時、詩が生れて、画が出来る。

---

cssの場合：通常の表記(2)＝パラグラフ：p 付き

<pre class="brush: css">
（ここにエスケープ処理済みのコードを書く）
</pre>

dl内に記述した場合

JavaScriptの場合

<pre class="brush: js">
（ここにエスケープ処理済みのコードを書く）
</pre>

site list w/Favicon　　▲

Dropbox へのご招待です。 - Dropbox

Google ニュース

Google ブログ

Pipes: GoogleニュースRSSジェネレータ

Blogger: Blogger ダッシュボード

Blogger Variable Color　　▲

$(keycolor)

$(body.text.color)

$(body.background.color)

$(content.background.color)

$(header.background.color)

$(link.color)

$(link.visited.color)

$(link.hover.color)

$(header.text.color)

$(description.text.color)

$(tabs.selected.text.color)

$(tabs.background.color)

$(tabs.selected.background.color)

$(date.header.color)

$(date.header.background.color)

$(post.footer.text.color)

$(post.footer.background.color)

$(post.footer.border.color)

$(widget.title.text.color)

$(widget.alternate.text.color)

$(image.background.color)

$(image.border.color)

$(image.text.color)

$(body.rule.color)

$(tabs.border.color)

$(body.border.color)

$(body.border.color.right)

$(body.border.color.deep)

$(body.border.color.hover)

$(mobile.button.color)

recent post w/label　　▲

sample post 001
サンプル投稿 001

code

<p class="labeledPost">
<script src="http://m.gmobb.jp/static/toc/bloggerFeeds.js"></script>
<script src="http://hc-j.blogspot.jp/feeds/posts/summary/-/english?redirect=false&max-results=500&alt=json-in-script&callback=onLoadFeeds&orderby=published"></script>
</p>

generated code

<p class="labeledPost">
<a class="linkHref" href="#none">sample post 001</a>< br />
<a class="linkHref" href="#none">サンプル投稿 001</a>
</p>

widget：Google News @Yahoo! Pipe　　▲

Google News @Yahoo! Pipe

widget：Amazon　　▲