AD | all

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

実質ガイドライン：全部入り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 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="remark00"」です
  • これは「class="remark01"」です
  • これは「class="remark02"」です
  • これは「style="color:#ff0000"」です
▼div vs p ▲
これはdivでくくられたエリアです。これはdivでくくられたエリアです。これはdivでくくられたエリアです。これはdivでくくられたエリアです。これはdivでくくられたエリアです。これはdivでくくられたエリアです。

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

▼hr線 ▲

pなし＝<hr/>

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

 ▼table/テーブル要素 ▲
th001 th002 th003
td:001-001 td:001-002 td:001-003
td:002-001 td:002-002 td:002-003
アイコン 説明／備考
SimpleMind for iPad (mind mapping) xpt Software & Consulting B.V.~~SimpleMind for iPad is a mind mapping tool that turns your iPad into a brainstorming, idea collection and thought structuring device.FEATURES:o Easy to use - drag, arrange and edit topics on the Mind Map page. o Tap or drag Node Well to add new Topics. o Cross Links - use Node Well to add Cross Links between any two topics. o Undo/Redo in the editor - the only edi..
※そのまま

SimpleMind for iPhone (mind mapping)

xpt Software & Consulting B.V.~~SimpleMind is a mind mapping tool that turns your iPhone/iPod into a brainstorming, idea collection and thought structuring device. FEATURES:o Easy to use - drag, arrange and edit topics on the Mind Map page. o Tap or drag Node Well to add new Topics. o Cross Links - use Node Well to add Cross Links between any two topics. o Undo/Redo in the editor - the only edit..
※p形式

SimpleMind+ (mind mapping)
xpt Software & Consulting B.V.~~Mind mapping tool that turns your iPad, iPhone or iPod touch into a brainstorming, idea collection and thought structuring device.FREE FUNCTIONALITYo Easy to use - drag, arrange and edit topics on the Mind Map page.o Tap or drag Node Well to add new Topics.o Undo/Redo in the editor - the only editor with full Undo capabilities making editing and experimenting easy..
※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 name="code" class="html">
（ここにエスケープ処理済みのコードを書く）
</pre>

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

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

dl内に記述した場合

JavaScriptの場合
<pre name="code" class="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テキスト
▼カスタマイズしたtable ▲

table class="bordered"

th要素th要素 th要素th要素 th要素th要素
td要素td要素 td要素td要素 td要素td要素
td要素td要素 td要素td要素 td要素td要素
td要素td要素 td要素td要素 td要素td要素

table class="zebra"

th要素th要素 th要素th要素 th要素th要素
td要素td要素 td要素td要素 td要素td要素
td要素td要素 td要素td要素 td要素td要素
td要素td要素 td要素td要素 td要素td要素
▼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 name="code" class="css">
（ここにエスケープ処理済みのコードを書く）
</pre>

dl内に記述した場合

JavaScriptの場合
<pre name="code" class="js">
（ここにエスケープ処理済みのコードを書く）
</pre>
▼site list w/Favicon ▲
Favicon

Dropbox へのご招待です。 - Dropbox
Favicon

Google ニュース
Favicon

Google ブログ
Favicon

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

Blogger: Blogger ダッシュボード
▼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 ▲

▲