このページは、このサイトで使うであろう殆どのタグを一覧にしたもので、俗にいう「全部入りページ」です。 表示確認を簡便に行うためのものです。
基本的には、メンテナンスのことも考えると、出来るだけ標準のタグで設計すべきだろうと考えていますが、下記にあるように一部独自クラスも設定しています。このような「コンポーネント」が増えれば、此処にも足して、チェックをして…(以下略)。
- 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 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 ▲
これは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 |
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/パラグラフ要素 ▲

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

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

越す事のならぬ世が住みにくければ、住みにくい所をどれほどか、寛容て、束の間の命を、束の間でも住みよくせねばならぬ。ここに詩人という天職が出来て、ここに画家という使命が降る。あらゆる芸術の士は人の世を長閑にし、人の心を豊かにするが故に尊とい。
ul/リスト要素 ▲
- liリスト要素
- liリスト要素liリスト要素liリスト要素liリスト要素liリスト要素liリスト要素liリスト要素liリスト要素
- liリスト要素
ここからul入れ子開始
- ul-liリスト要素
- ul-liリスト要素
- liリスト要素
ここからol入れ子開始
- ol-liリスト要素
- 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/リスト要素 ▲
- liリスト要素
- liリスト要素liリスト要素liリスト要素liリスト要素liリスト要素liリスト要素liリスト要素liリスト要素
- liリスト要素
ここからul入れ子開始
- ul-liリスト要素
- ul-liリスト要素
- liリスト要素
ここからol入れ子開始
- ol-liリスト要素
- 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
dl/リスト要素 ▲
- dt要素:パラグラフなし
- パラグラフなしパラグラフなしパラグラフなしパラグラフなしパラグラフなしパラグラフなし
- dt要素:パラグラフあり
-
山路を登りながら、こう考えた。
智に働けば角が立つ。情に棹させば流される。意地を通せば窮屈だ。とかくに人の世は住みにくい。
住みにくさが高じると、安い所へ引き越したくなる。どこへ越しても住みにくいと悟った時、詩が生れて、画が出来る。
- ulリストの入れ子
- ここからulリスト
- li要素li要素li要素li要素li要素li要素li要素
- li要素li要素li要素li要素li要素li要素li要素
- olリストの入れ子
- ここからolリスト
- li要素li要素li要素li要素li要素li要素li要素
- 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 / 引用 ▲
![]()
山路を登りながら、こう考えた。
智に働けば角が立つ。情に棹させば流される。意地を通せば窮屈だ。とかくに人の世は住みにくい。
住みにくさが高じると、安い所へ引き越したくなる。どこへ越しても住みにくいと悟った時、詩が生れて、画が出来る。
![]()
人の世を作ったものは神でもなければ鬼でもない。やはり向う三軒両隣りにちらちらするただの人である。ただの人が作った人の世が住みにくいからとて、越す国はあるまい。あれば人でなしの国へ行くばかりだ。人でなしの国は人の世よりもなお住みにくかろう。
![]()
越す事のならぬ世が住みにくければ、住みにくい所をどれほどか、寛容て、束の間の命を、束の間でも住みよくせねばならぬ。ここに詩人という天職が出来て、ここに画家という使命が降る。あらゆる芸術の士は人の世を長閑にし、人の心を豊かにするが故に尊とい。
- 山路を登りながら、こう考えた。
- 智に働けば角が立つ。情に棹させば流される。意地を通せば窮屈だ。とかくに人の世は住みにくい。
- 山路を登りながら、こう考えた。
- 智に働けば角が立つ。情に棹させば流される。意地を通せば窮屈だ。とかくに人の世は住みにくい。
- 山路を登りながら、こう考えた。
- 智に働けば角が立つ。情に棹させば流される。意地を通せば窮屈だ。とかくに人の世は住みにくい。
- 山路を登りながら、こう考えた。
- 智に働けば角が立つ。情に棹させば流される。意地を通せば窮屈だ。とかくに人の世は住みにくい。
- dt要素:パラグラフなし
- パラグラフなしパラグラフなしパラグラフなしパラグラフなしパラグラフなしパラグラフなし
- dt要素:パラグラフあり
山路を登りながら、こう考えた。
智に働けば角が立つ。情に棹させば流される。意地を通せば窮屈だ。とかくに人の世は住みにくい。
住みにくさが高じると、安い所へ引き越したくなる。どこへ越しても住みにくいと悟った時、詩が生れて、画が出来る。
- ulリストの入れ子
- ここからulリスト
- li要素li要素li要素li要素li要素li要素li要素
- li要素li要素li要素li要素li要素li要素li要素
- olリストの入れ子
- ここからolリスト
- li要素li要素li要素li要素li要素li要素li要素
- 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 ▲
recent post w/label ▲
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 ▲