いるみおロゴ
About Blog & Me

当ブログ『いるみお』は管理人の日常の出来事を中心に、
Mac/iPhoneのことブログのこと美味しかった食べ物
子育ての話など、自由気ままに書いています!

管理人『とろあ』。平日は普通のサラリーマン。
通勤時間など時間を見つけてブログ更新中(不規則)。
ブログを中心に色々と勉強中。
2013年にパパになったので、子育ても奮闘中XD

author-icon

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要素

ヘッダー1 ヘッダー2 ヘッダー3
データ1-1 データ2-1 データ3-1
データ1-2 データ2-2 データ3-2

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

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

装飾確認用はここまで

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

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

当ブログが気になったら…是非RSSにご登録ください。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です