これは各種デザインチェックページです。
表示チェック用に書いただけのページなので内容は一切ありません。

もしご自分のサイトのデザイン修正をかける場合は下記のように一つのページにできるだけデザインチェックできるもの(htmlタグ)を仕込んでCSSで修正しながらチェックをすると全体のバランスを見ながらデザインチェックをすることができます。

◆見出しチェック

H1:TEST・テスト

H1見出しデザインと直下の文章の間隔チェック

H2:TEST

H2見出しと直下の文章の間隔チェック

H3の見出し

H3見出しデザインと直下の文章の間隔チェック

H4の見出し

H4見出しデザインと直下の文章の間隔チェック

◆文章チェック

これはpタグ1行の改行なしの文章です。文字間隔、1行の長さ、行間隔を確認してください。そこそこな長さの文章を打ち込んでいますが、1行あたりの文字数は大体35～50文字までが好ましいですね。

上のpタグとのの間隔はこんな感じになります。あまり開けすぎると見栄えが悪いです。

これはpタグ内に改行があった場合の文章です。↓
改行が多すぎるとレスポンシブデザインに影響を起こします。↓
スマホでの文章でデザインが死ぬので気を付けましょう。

◆リストチェック

• ひとつめ
  • ひとつめ－１
  • ふたつめ－２
    • ひとつめ－２－１
    • ふたつめ－２－２
  • みっつめ－３
• ふたつめ
• みっつめ

1. ひとつめ
   1. ひとつめ－１
   2. ふたつめ－２
      1. ひとつめ－２－１
      2. ふたつめ－２－２
   3. みっつめ－３
2. ふたつめ
3. みっつめ

◆引用チェック

はじめまして。昼間はバイク便のメッセンジャーとして働いていますが、俳優志望でもあります。これは僕のブログです。ロサンゼルスに住み、ジャックという名前のかわいい犬を飼っています。好きなものはピニャコラーダ (通り雨に濡れるのも) 。

◆preタグチェック

.post-title {
	margin: 0 0 5px;
	font-weight: bold;
	font-size: 38px;
	line-height: 1.2;
	and here's a line of some really, really, really, really long text, just to see how the PRE tag handles it and to find out how it overflows;
}

◆IMGタグと文章間隔チェック：float:none

画像と直下の文章の間隔チェック

◆IMGタグと文章間隔チェック：float:none (中央)

画像と直下の文章の間隔チェック

◆IMGタグと文章間隔チェック：float:left

この文章はダミーです。
文字の大きさ、量、字間、行間等を確認するために入れています。
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。

この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。

◆IMGタグと文章間隔チェック：float:right

この文章はダミーです。
文字の大きさ、量、字間、行間等を確認するために入れています。
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。

この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。