AD | all

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

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

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

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 Pゴシック', 'MS PGothic', Sans-Serif; / 山路を登りながら、こう考えた。

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

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

font-size:16px; font-family: 'MS Pゴシック', '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(標準)

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

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

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

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


※p形式
山路を登りながら、こう考えた。

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

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


※dl形式

table class="noboarder"(枠無し)

th001th002th003
td:001-001td:001-002td:001-003
td:002-001td:002-002td: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要素

    ここからテーブル要素

    th001th002th003
    td:001-001td:001-002td:001-003
    td:002-001td:002-002td: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要素

    ここからテーブル要素

    th001th002th003
    td:001-001td:001-002td:001-003
    td:002-001td:002-002td: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>
エスエープ処理について

カスタマイズした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  

Favicon

Dropbox へのご招待です。 - Dropbox

Favicon

Google ニュース

Favicon

Google ブログ

Favicon

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

Favicon

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)
$(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