ブログを書き始める前にデザインの確認をしたかったのでタグの羅列をしたページ

edartleahcimです。えだと呼んでください！
このページは、本格的に記事を書く前に、準備としてHTMLタグのデザインを確認するために作りました。
こんなアナログなやり方をweb上でやる人もいるんだな、ぐらいに捉えてください。

このテーマは、どんなデザインなんだろう？

初めてワードプレスを触るのに、何もデザインしていないのに、テーマを入れたらブログが完成しているってすごいですよね。
でも、どんなデザインのブログなのか、書き始める前に知っておきたいと思いませんか？
少なくとも私はそうでした。

私は仕事でサイト作りに関わっていました。最初にデザインを作り、そこを目指してコーディングする日々。
しかし今回はワードプレスに既に出来上がっているテーマを入れたので、自分でデザインを作る必要もないし、CSSをいじらずともきれいなサイトが完成しています。
色も所定の場所で入れたらちょちょいと変えられちゃう。
簡単！便利！らくちん！やったー！
しかし私がぶちあたってしまった問題があります。

それぞれのタグがどんなデザインなのかわからない！

自分で作ったサイトであればデザインやらタグ名を覚えていたりするものですが、今回はゼロからのスタート。
ありがたいことにデモサイトでデザインを確認できますが、どの装飾にどのタグが使われているのかの紐づけはソース画面を出して確認するしかありません。

とはいえ、公開前に変更を確認できるプレビューボタンがあるから、「これはなんだ？」と思ったらタグ入れて確認すれば良いんですが・・・

ずぼらな私にはハードルが高い！

というわけでこんなページを作りました。一括でデザインを全部見るためのページです。
本来ならローカルに隠しておくべきページでしょうが、こんな風にやる人もいるんだなぁという感じで見ていただくことにしました。
CSSいじりたいときもここで確認すれば一目瞭然だし。あとレスポンシブデザインなのでスマホでどんな風に表示されるかも見たい。

本職の人すみません。こんなやり方するなって思われるかもしれないけれど、

自分にとってわかりやすいインデックスがほしい！

もうただひたすらその一心で作りました。

ということでここからはひたすらタグの羅列です。
私はわかりやすいようにタグの名前をそのままタグにはさんで表示させています。
このページでそれぞれのタグのデザインを確認してようやく、私のなかでのブログ準備が終了します。

h2

h3

h4

h5

b

i

b-quote

del

ins

ul

ol
1. li

code

赤

青

緑

マーカー1

マーカー2

横並びボタン1横並びボタン2

ボタン1

ボタン2

カスタムボタン1

カスタムボタン2

ランキング１位

ここに広告タグ（300 x 250）をコピペ

ここに説明文を入力してください。ここに説明文を入力してください。

詳細ページ公式ページ

ランキング２位

ここに広告タグ（300 x 250）をコピペ

ここに説明文を入力してください。ここに説明文を入力してください。

詳細ページ公式ページ

ランキング３位

ここに広告タグ（300 x 250）をコピペ

ここに説明文を入力してください。ここに説明文を入力してください。

詳細ページ公式ページ

以上！