ブログテーマやCSSの表示崩れ防止にチェックしたい項目20+1

ブログ表示用のCSSテーマファイルを自作するとき、思わぬ表示崩れを未然に防ぐTipsです。

ブログテーマやCSSの表示崩れ防止にチェックしたい項目20+1

ブログテーマを自作するとき、用意しておくと便利なのが表示確認用のデータ集です。

サイト構築するときはどうしても自分の癖にしたがって作るので、動作チェックしていてもなかなか問題に気付きません。

しかし広く配布するときやクライアントワークの時などは意外な表示崩れが起きたりするのでびっくりすることがあります。タイトルに200文字突っ込んで本文ゼロとか。電子メールでもそういうことするひと定期的に見かけますが。

既存のCSSを改造するときでも、一覧表示されると思わぬ発見があるので折に触れてチェックしましょう。

ブログテーマチェック用のテストページを作ろう

「ブログテーマチェック用のテストページ」とはどういうものかというと。

WordPressなどで自作テーマを作るときに、全部盛りのHTMLを作っておくとCSSによる表示崩れを未然に防ぐことができます。

特に、自分では使わないようなタグや極端な文字長のデータを積極的に入れておきましょう。

自作ブログテーマでチェックしたい項目

01 : <H1>から<H6>まで見出し6種
02 : <H1> および <H2> で長文が入った場合
03 : 文書構造 : <P>タグ（パラグラフ）
04 : 文書構造 : <BLOCKQUOTE>タグ（引用文）
05 : 文書構造 : <INS>タグ（追記文）
06 : 文書構造 : <DEL>タグ（削除文）
07 : テキスト表現 : <STRONG> タグ（太字）
08 : テキスト表現 : <B> タグ（太字）
09 : テキスト表現 : <EM> タグ（強調）
10 : テキスト表現 : <I> タグ（斜体）
11 : テキスト表現 : <DFN> タグ（定義づけ）
12 : テキスト表現 : <S> タグ（訂正文）
13 : テキスト表現 : <A>タグ（アンカーリンク）
14 : テキスト表現 : <RUBY>タグ（ルビ）
15 : リスト : 秩序リスト5＋1種
16 : リスト : 羅列リスト3＋1種
17 : テーブル
18 : <HR>タグ（区切り線）
19 : <CODE>タグ（ソースコード）
20 : <PRE>タグ（整形済テキスト）
+1 : <IMG>タグ（画像）

文書構造を示すタグ

文書を論理的に修飾するタグいろいろです。SEOにもかかわるのでしっかり設定しておきたい項目。

01 : <H1>から<H6>まで見出し6種

ヘッダテキストです。デフォルトでは番号が小さいほど文字が大きくなります。

<H4>が<BODY>で指定された文字のボールドと同等に表示されます。<H4>以降は事実上ほとんど使われませんが、<H6>とプレーンテキストってどっちが強いんでしょうね。

Class および ID の指定があれば別途追記します。

【Hタグ】
<h1>見出し1</h1>
<h2>見出し2</h2>
<h3>見出し3</h3>
<h4>見出し4</h4>
<h5>見出し5</h5>
<h6>見出し6</h6>

02 : <H1> および <H2> で長文が入った場合

記事タイトルの長短は意外と書く人の趣味が出やすいところです。

短いタイトルをつける癖の人がデザインすると、長いタイトル入れたときに思わぬところで崩れがちなので、その確認用です。

■から■までが全角25文字、全体では強制改行無しの50文字が入ります。

【長文見出し】
<h1>■いうえおかきくけこさしすせそたちつてとなにぬねの■いうえおかきくけこさしすせそたちつてとなにぬねの</h1>
 
<h2>■いうえおかきくけこさしすせそたちつてとなにぬねの■いうえおかきくけこさしすせそたちつてとなにぬねの</h2>

03 : 文書構造 : <P>タグ（パラグラフ）

同様に、■から■まで25文字、全体で150文字です。

【Pタグ】
<P>
■いうえおかきくけこさしすせそたちつてとなにぬねの■いうえおかきくけこさしすせそたちつてとなにぬねの■いうえおかきくけこさしすせそたちつてとなにぬねの■いうえおかきくけこさしすせそたちつてとなにぬねの■いうえおかきくけこさしすせそたちつてとなにぬねの■いうえおかきくけこさしすせそたちつてとなにぬねの
</P>

手打ちでPタグ使うことはあまりないでしょうが、CMSなどで自動挿入されることがありますね。

特にWordPressのPタグはちょっと癖があります。空行入れたいけど閉じたくない場合は&nbsp;で埋めたりしてます。

04 : 文書構造 : <BLOCKQUOTE>タグ（引用文）

デフォルトだと少しインデントが入るのみですけど、著作管理の上でも地の文とすぐ区別できるような装飾性をもたせたいです。

ちなみに、blockquoteでざっくり指定するとTwitterを引用したときなどに何度もレンダリングを行うのでclassで呼び分けた方が綺麗です。

【引用タグ】
<blockquote>
■いうえおかきくけこさしすせそたちつてとなにぬねの■いうえおかきくけこさしすせそたちつてとなにぬねの■いうえおかきくけこさしすせそたちつてとなにぬねの■いうえおかきくけこさしすせそたちつてとなにぬねの■いうえおかきくけこさしすせそたちつてとなにぬねの■いうえおかきくけこさしすせそたちつてとなにぬねの
</blockquote>

05 : 文書構造 : <INS>タグ（追記文）

自分は括弧書きや文末を使って適当に追記してしまうので厳密に宣言しながら書いてる人は誠実だなと思います。

【追記文】
<ins datetime="YYYY-MM-DD">
■いうえおかきくけこさしすせそたちつてとなにぬねの■いうえおかきくけこさしすせそたちつてとなにぬねの■いうえおかきくけこさしすせそたちつてとなにぬねの■いうえおかきくけこさしすせそたちつてとなにぬねの■いうえおかきくけこさしすせそたちつてとなにぬねの■いうえおかきくけこさしすせそたちつてとなにぬねの
</ins>

06 : 文書構造 : <DEL>タグ（削除文）

こちらも同様に削除タグです。

【削除文】
<del datetime="YYYY-MM-DD">
■いうえおかきくけこさしすせそたちつてとなにぬねの■いうえおかきくけこさしすせそたちつてとなにぬねの■いうえおかきくけこさしすせそたちつてとなにぬねの■いうえおかきくけこさしすせそたちつてとなにぬねの■いうえおかきくけこさしすせそたちつてとなにぬねの■いうえおかきくけこさしすせそたちつてとなにぬねの
</del>

テキストの論理構造と見た目を整えるタグ

こちらは論理的にも見た目にも装飾を施すタグ。自分で使う分には一定の使い方をすることがほとんどですが、たまにW3Cで規格が変わってたりするのでチェックする必要があります。

07-08 : テキスト表現 : <STRONG> <B> タグ（太字2種）

この辺は廃止されかけたり復活したり、意外と紆余曲折してる部分じゃないでしょうか。

すっかり普及してる表現だけに、今後また非推奨になったとしてもブラウザサイドでは実装され続けると思いますが、規格の策定って大変だと思います。

なお、HTML5では<STRONG>タグの論理強調性が強まり、入れ子にすることが可能です。

【強調文】
<strong>太字です　太字です　太字です　太字です　太字です</strong>
<strong>太字です　<strong>ここ論理的に絶賛強調中</strong></strong>
<B>太字です　太字です　太字です　太字です　太字です</B>

09-11 : テキスト表現 : <EM> <I> <DFN> タグ（その他強調）

<EM> っていつから斜体タグになったんでしょうか？（白目）

<DFN> は、結果として斜体になりがちというだけで論理性の強いタグなので身辺雑記的なサイトで使うことは まずないと思いますが、一応チェック。

【その他強調】
<em>軽い強調です　軽い強調です　軽い強調です　軽い強調です</em>
<i>イタリックです　イタリックです　イタリックです　イタリックです</i>
<dfn>用語の定義です　用語の定義です　用語の定義です　用語の定義です</dfn>

12 : テキスト表現 : <S> タグ（訂正文）

訂正は<DEL>推奨なので、こっちは自分ツッコミ用ですね。

【訂正文】
<s>打ち消し線が引かれます　打ち消し線が引かれます</s>

13 : テキスト表現 : <A>タグ（アンカーリンク）

【アンカータグ】
<a href="#" title="こちらは代替テキスト">リンクテキストです</a>
 
<a href="#" title="長くしてみた">
■いうえおかきくけこさしすせそたちつてとなにぬねの■いうえおかきくけこさしすせそたちつてとなにぬねの■いうえおかきくけこさしすせそたちつてとなにぬねの■いうえおかきくけこさしすせそたちつてとなにぬねの
</a>

14 : テキスト表現 : <RUBY>タグ（ルビ）

例文：「さらば強と敵もよ」と原田知世は似てると思わないか?

【ルビ】
「さらば
<ruby>
強<rt>と</rt>
敵<rt>も</rt>
</ruby>
よ」と原田知世は似てると思わないか?

データ用のタグ

平文以外のデータを扱うときに使われるタグです。

15 : 秩序リスト

【秩序リスト】
<ol>
<li>ナンバリングされるリスト</li>
<li>タイプ属性で表示が選べます</li>
<li>これは デフォルト</li>
<li>長くしてみた(`・ω・´)■いうえおかきくけこさしすせそたちつてとなにぬねの■いうえおかきくけこさしすせそたちつてとなにぬねの</li>
<li>改行してみた(`・ω・´)<br />■いうえおかきくけこさしすせそたちつてとなにぬねの■いうえおかきくけこさしすせそたちつてとなにぬねの</li>
</ol>
 
<ol type="1">
<li>ナンバリングされるリスト</li>
<li>タイプ属性で表示が選べます</li>
<li>これは TYPE="1"</li>
</ol>
 
<ol type="a">
<li>ナンバリングされるリスト</li>
<li>タイプ属性で表示が選べます</li>
<li>これは TYPE="a"</li>
</ol>
 
<ol type="A">
<li>ナンバリングされるリスト</li>
<li>タイプ属性で表示が選べます</li>
<li>これは TYPE="A"</li>
</ol>
 
<ol type="i">
<li>ナンバリングされるリスト</li>
<li>タイプ属性で表示が選べます</li>
<li>これは TYPE="i"</li>
</ol>
 
<ol type="I">
<li>ナンバリングされるリスト</li>
<li>タイプ属性で表示が選べます</li>
<li>これは TYPE="I"</li>
</ol>

16 : 羅列リスト

【羅列リスト】
<ul>
<li>並列表記されるリスト</li>
<li>タイプ属性で表示が選べます</li>
<li>これは デフォルト</li>
</ul>
 
<ul type="disc">
<li>並列表記されるリスト</li>
<li>タイプ属性で表示が選べます</li>
<li>これは type="disc"</li>
</ul>
 
<ul type="circle">
<li>並列表記されるリスト</li>
<li>タイプ属性で表示が選べます</li>
<li>これは type="circle"</li>
</ul>
 
<ul type="square">
<li>並列表記されるリスト</li>
<li>タイプ属性で表示が選べます</li>
<li>これは type="square"</li>
</ul>

17 : テーブル

罫線など表示させるにはBORDER指定が必要です。

【TABLE】
<table>
<tr>
<th>見出し　１行目１列</th>
<th>見出し　１行目２列</th>
<th>見出し　１行目３列</th>
</tr>
<tr>
<td>データ　２行目１列</td>
<td>データ　２行目２列</td>
<td>データ　２行目３列</td>
</tr>
<tr>
<th>少し長い見出し　３行目１列</th>
<td>少し長いデータ　３行目２列</td>
<td>少し長いデータ　３行目３列</td>
</tr>
</table>

18 : <HR>タグ（区切り線）

HTML側のプロパティは全て廃止になったので、成形はCSS側で行って下さい。

このタグは論理性がない上に挙動が不安定なので、使わない方が無難なのですが、空<DIV>で装飾線を引くテクニックがセマンティックでないので悩んだ挙げ句に少しだけ使ってます。

【HRタグ】
<hr></hr>

19 : <CODE>タグ（ソースコード）

<PRE>タグとの使い分けに悩む方がいるようですが、これはテキストに対する意味づけなので基本インライン属性です。

【CODEタグ】
<CODE>
DIV { /* Sample Code */
margin: 0 auto;
width: 600px;
}
</CODE>

20 : <PRE>タグ（整形済テキスト）

<PRE>内部は改行が効くだけに装飾を加える際は少しだけ注意が必要で、マークアップ時点で開始直後に改行を入れるかどうか決めておいた方が良いです。

後は利用するCMSの改行設定やCSSのリセットの影響も受けますけどそもそもこのタグは一部の人しか使わないから釈迦に説法という噂も。

【成形済みテキスト】
<PRE>
DIV { /* Sample Code */
margin: 0 auto;
width: 600px;
}
</PRE>

+1 : <IMG>タグ（画像）

画像
ついでに画像の指定も入れておきます。

枠にしてる<DIV>より大きいデジカメ写真をトリミング無しで貼り付けた場合のカラム崩れを想定。レイアウト重視か画質重視かで設計迷いますよね。

うさぴょん。

【画像】
<img src="" alt="画像" width="100" height="100" />
　
<img src="" alt="画像" width="2000" height="50" />

ここまでで随分細かい項目が続きましたね。あともう少しお付き合い下さい。

CSSチェック用データまとめ

上記載のHTMLコードを全部まとめてみました。

【全部おまとめ】
// 見出し6種
<h1>見出し1</h1>
<h2>見出し2</h2>
<h3>見出し3</h3>
<h4>見出し4</h4>
<h5>見出し5</h5>
<h6>見出し6</h6>

// 見出しに長文が入った場合
<h1>■いうえおかきくけこさしすせそたちつてとなにぬねの■いうえおかきくけこさしすせそたちつてとなにぬねの</h1>

<h2>■いうえおかきくけこさしすせそたちつてとなにぬねの■いうえおかきくけこさしすせそたちつてとなにぬねの</h2>

// 文書構造 : パラグラフ
<P>
■いうえおかきくけこさしすせそたちつてとなにぬねの■いうえおかきくけこさしすせそたちつてとなにぬねの■いうえおかきくけこさしすせそたちつてとなにぬねの■いうえおかきくけこさしすせそたちつてとなにぬねの■いうえおかきくけこさしすせそたちつてとなにぬねの■いうえおかきくけこさしすせそたちつてとなにぬねの
</P>

// 文書構造 : 引用文
<blockquote>
■いうえおかきくけこさしすせそたちつてとなにぬねの■いうえおかきくけこさしすせそたちつてとなにぬねの■いうえおかきくけこさしすせそたちつてとなにぬねの■いうえおかきくけこさしすせそたちつてとなにぬねの■いうえおかきくけこさしすせそたちつてとなにぬねの■いうえおかきくけこさしすせそたちつてとなにぬねの
</blockquote>

// 文書構造 : 追記文
<ins datetime="YYYY-MM-DD">
■いうえおかきくけこさしすせそたちつてとなにぬねの■いうえおかきくけこさしすせそたちつてとなにぬねの■いうえおかきくけこさしすせそたちつてとなにぬねの■いうえおかきくけこさしすせそたちつてとなにぬねの■いうえおかきくけこさしすせそたちつてとなにぬねの■いうえおかきくけこさしすせそたちつてとなにぬねの
</ins>

// 文書構造 : 削除文
<del datetime="YYYY-MM-DD">
■いうえおかきくけこさしすせそたちつてとなにぬねの■いうえおかきくけこさしすせそたちつてとなにぬねの■いうえおかきくけこさしすせそたちつてとなにぬねの■いうえおかきくけこさしすせそたちつてとなにぬねの■いうえおかきくけこさしすせそたちつてとなにぬねの■いうえおかきくけこさしすせそたちつてとなにぬねの
</del>

// テキスト表現 : 太字系2種
<strong>太字です　太字です　太字です　太字です　太字です</strong>
<strong>太字です　<strong>ここんとこ論理的に絶賛強調中</strong></strong>
<B>太字です　太字です　太字です　太字です　太字です</B>

// テキスト表現 : その他強調3種
<em>軽い強調です　軽い強調です　軽い強調です　軽い強調です</em>
<i>イタリックです　イタリックです　イタリックです　イタリックです</i>
<dfn>用語の定義です　用語の定義です　用語の定義です　用語の定義です</dfn>

// テキスト表現 : 訂正文
<s>打ち消し線が引かれます　打ち消し線が引かれます</s>

// テキスト表現 : アンカーリンク
<a href="#" title="こちらは代替テキスト">リンクテキストです</a>

<a href="#" title="長くしてみた">
■いうえおかきくけこさしすせそたちつてとなにぬねの■いうえおかきくけこさしすせそたちつてとなにぬねの■いうえおかきくけこさしすせそたちつてとなにぬねの■いうえおかきくけこさしすせそたちつてとなにぬねの
</a>

// テキスト表現 : ルビ
「さらば
<ruby>
強<rt>と</rt>
敵<rt>も</rt>
</ruby>
よ」と原田知世は似てると思わないか?

// 秩序リスト5＋1種
<ol>
<li>ナンバリングされるリスト</li>
<li>タイプ属性で表示が選べます</li>
<li>これは デフォルト</li>
<li>長くしてみた(`・ω・´)■いうえおかきくけこさしすせそたちつてとなにぬねの■いうえおかきくけこさしすせそたちつてとなにぬねの</li>
<li>改行してみた(`・ω・´)<br />■いうえおかきくけこさしすせそたちつてとなにぬねの■いうえおかきくけこさしすせそたちつてとなにぬねの</li>
</ol>

<ol type="1">
<li>ナンバリングされるリスト</li>
<li>タイプ属性で表示が選べます</li>
<li>これは TYPE="1"</li>
</ol>

<ol type="a">
<li>ナンバリングされるリスト</li>
<li>タイプ属性で表示が選べます</li>
<li>これは TYPE="a"</li>
</ol>

<ol type="A">
<li>ナンバリングされるリスト</li>
<li>タイプ属性で表示が選べます</li>
<li>これは TYPE="A"</li>
</ol>

<ol type="i">
<li>ナンバリングされるリスト</li>
<li>タイプ属性で表示が選べます</li>
<li>これは TYPE="i"</li>
</ol>

<ol type="I">
<li>ナンバリングされるリスト</li>
<li>タイプ属性で表示が選べます</li>
<li>これは TYPE="I"</li>
</ol>

// 羅列リスト3＋1種
<ul>
<li>並列表記されるリスト</li>
<li>タイプ属性で表示が選べます</li>
<li>これは デフォルト</li>
</ul>

<ul type="disc">
<li>並列表記されるリスト</li>
<li>タイプ属性で表示が選べます</li>
<li>これは type="disc"</li>
</ul>

<ul type="circle">
<li>並列表記されるリスト</li>
<li>タイプ属性で表示が選べます</li>
<li>これは type="circle"</li>
</ul>

<ul type="square">
<li>並列表記されるリスト</li>
<li>タイプ属性で表示が選べます</li>
<li>これは type="square"</li>
</ul>

// テーブル
<table>
<tr>
<th>見出し　１行目１列</th>
<th>見出し　１行目２列</th>
<th>見出し　１行目３列</th>
</tr>
<tr>
<td>データ　２行目１列</td>
<td>データ　２行目２列</td>
<td>データ　２行目３列</td>
</tr>
<tr>
<th>少し長い見出し　３行目１列</th>
<td>少し長いデータ　３行目２列</td>
<td>少し長いデータ　３行目３列</td>
</tr>
</table>

// 区切り線
<hr></hr>

// ソースコード
<CODE>
DIV { /* Sample Code */
margin: 0 auto;
width: 600px;
}
</CODE>

// 整形済テキスト
<PRE>
DIV { /* Sample Code */
margin: 0 auto;
width: 600px;
}
</PRE>

// 画像
<img src="" alt="画像" width="100" height="100" />
<img src="" alt="画像" width="2000" height="50" />

おわりに

「これを通せば完璧」というものはないので、自分用に色々書き足したりする必要があると思います。いずれにせよテストページを作っておくと色々発見があるのでオススメです。

こういう感じのまとめを初めて書いたんですが、自分用のメモからキャプション揃えるまでが意外と手間でびっくりしました。有用な記事を何本も書いてる方って、ほんと素晴らしいですね。

ちなみに勘の良い方はお気づきでしょうが(?)、おち研のテーマは Web Design Recipes さんのサンプルテーマをベースにした独自テーマです。
はじめてWordPressのオリジナルテーマを作るときの参考になればと思って書きました

いじってるうちに原形を留めなくなってきたので、少しでも面影が残っているうちにご報告させて頂きます。他にも多くのサイトを参照させて頂きました。多謝。(-人-)

【 更新履歴等 】

2013/05/19 初稿発表
旧題：CSSチェック用に変なHTMLテストページを作っておくと便利
1742 / 旧URL /2013/05/14/css-check-list/