html要素、CSS装飾確認用ページを作ろう！

photo credit: tz1_1zt via photopin cc

突然の思いつきですが、html要素、CSS装飾確認用ページを作りたいと思います！

ブログのテーマを作成するときに、CSSを弄りつつ、見た目を確認しながら作っていくのですが…

いつも「どんな要素があったっけ？」とか思いながら、結構抜けちゃうんです(-ω-；)
後から追加、追加で、ソースもごちゃごちゃに…。

どうにかならないかなぁ、と思っていたのですが、確認用ページを作って記事としてアップしておけば、活用できそう！
…ということで、今日はそんな記事です。

ヘッダー(h＊)要素

まずはヘッダー(h＊)要素の確認。
サブタイトルがh2要素なので、割愛。

h3要素

h3要素はたまーに使います。

h4要素

h4要素以降は全然使ってない(はず)。

h5要素

同上。

h6要素

同上。

ブロック要素

続いてはブロック要素の確認用。

p要素

ここまでの文章でも沢山使ってるけど、p要素。
文章を書くときに使っていて、この文章もp要素内に記述されています。

div要素

この文章は、div要素内に記述しています。

div要素は、普段記事を書くときには使っていませんが、念のため。

blockquote要素

この文章は、blockquote要素内に記述しています。

blockquoteタグは、文章を引用する時に使用しますね。

pre要素

この文章は、pre要素内に記述。
<html&rt;
<head&rt;<title&rt;pre要素内でソース記述</title&rt;
<!html&rt;

pre要素はhtmlソースを記述するのに使用しています。

文字装飾系要素

続いては、文字装飾系要素の確認用。

strong要素

まずはstrong要素。
ここは「装飾確認用ページ」です！
(※「」内、strong要素で記述)

SEO内部対策の本を読んでから、多用しないようになりました。

b要素

b要素は、文字を太字にするために使用。
↑この「b要素」が太字なのも、b要素で囲っているから。

リスト要素

ul,li要素

• ulリスト1
• ulリスト2
• ulリスト3

ul要素はリスト表示する時に使用。
ブラウザ標準の装飾はリセットしてから使うので、CSSでの調整は必須になっています。

li要素は、ul要素無いで使用する要素。

ol,li要素

1. olリスト1
2. olリスト2
3. olリスト3

ol要素は、番号付きリスト。
いまは使ってないのですが、一応確認用に作成しておきました。

テーブル要素

table,th,tr,td要素

table要素は、文字通りテーブルを作成する時に使用。

久しぶりに使ったけど、記述するのが面倒なんですよね(>_<;)

装飾確認用はここまで

ざっくり作ったけど、ぼくが良く使っているのは、こんなものかな？

足りなければ追加していこうと思います(^^)