CSS技研:ノート風の罫線にテキストをレイアウトする

エ・ビスコム・テック・ラボ
2009-03-18 10:30:00
  • このエントリーをはてなブックマークに追加

ステップ6 見出しを追加する

 ここで、

以外の要素として見出しを追加してみよう。そこで、

の中に見出しを追加して

でマークアップする。

 また、見出しはブラウザの標準の設定で20ピクセルの大きさで表示するため、font-sizeプロパティを「1.25em」と指定する。表示を確認すると、見出し以下の行が罫線からずれたことがわかる。

見出しを追加したもの(画像をクリックすると拡大します) 見出しを追加したもの(画像をクリックすると拡大します)
h1{
font-size: 1.25em;
}

今日はいい天気

今日はとてもいい天気でした。明日はもっといい天気になるでしょうか。春はもうそこまできています。桜がもうすぐ満開になりそうなので、お花見の準備をしなければいけませんね。とっておきのお花見スポットがあるので、仲良しのお友達を誘って出かけます。ちょっと遠いのが難点なんですが、がんばって行くだけの価値はあります。

…略…
ブラウザで表示を確認する

ステップ7 見出しを追加しても行がずれないようにする

 見出しを追加して行がずれるのは、

の上下にも約20ピクセルの余白が挿入されるためだ。そこで、

と同じように

の余白サイズも35ピクセルに変更する。これで、見出しもテキストも罫線に揃えて表示することができる。

見出しもテキストも罫線に揃えて表示される(画像をクリックすると拡大します) 見出しもテキストも罫線に揃えて表示される(画像をクリックすると拡大します)
h1{
font-size: 1.25em;
margin: 0 0 35px;
}
ブラウザで表示を確認する

ブラウザの文字サイズを変えてみる

 最後に、ブラウザの文字サイズを変えたときの表示を確認しておく。Internet Explorerの文字サイズを「最大」に変更すると次のようになり、カツカツではあるが罫線からずれずに表示されることがわかる。

文字サイズを「最大」にしたもの(画像をクリックすると拡大します) 文字サイズを「最大」にしたもの(画像をクリックすると拡大します)

 Internet Explorerの文字サイズ設定を標準の「中サイズ」から「最大」に変更すると、文字サイズは約1.75倍になる。サンプルでは標準の設定のときに見出しを20ピクセル、テキストを16ピクセルで表示するようにしているので、「最大」に設定したときには見出しが35ピクセル、テキストが28ピクセルになる。行間は35ピクセルに設定しているので、「最大」にしてもテキストの行がずれたり重なったりすることなく表示されるというわけだ。

2009年3月19日 16:30 追記(編集部)

 本記事のコメント欄にもある通り、Safari 3.xとGoogle Chrome 1.xでは文字サイズと行間だけが拡大縮小されるため、背景画像として表示した罫線とずれが生じます。

 Safari 4とGoogle Chrome 2.xでは、背景画像も含めて拡大縮小する「フルページズーム」を行うので、罫線と文字がずれることはありません。

 そのため、拡大縮小しても罫線とずれないブラウザは「フルページズーム」を行うブラウザとInternet Explorerとなります。つまり、対応ブラウザは、

  • Internet Explorer 5以上
  • Safari 4以上
  • Google Chrome 2.x以上
  • Firefox 3以上
  • Opera

 これらになります。

 なお、IEはバージョン8からはフルページズームを行うようになっており、今後はフルページズームが主流になると考えられます。

 現状でSafari 3.xとGoogle Chrome 1.xの問題を回避するには「-webkit-text-size-adjust: none」の設定を追加し、文字サイズを固定してずれを防ぐしかありません。なお、この設定を追加しても他のブラウザの表示には影響しません。

body{
background-image: url(background.gif);
}

div{
width: 480px;
margin: 30px auto;
background-image: url(line.gif);
background-repeat: repeat-y;
line-height: 35px;
}

p{
font-size: 1em;
margin: 0 0 35px;
}

p.date{
text-align: right;
}

h1{
font-size: 1.25em;
margin: 0 0 35px;
}

*{
-webkit-text-size-adjust: none;
}

今日はいい天気

今日はとてもいい天気でした。明日はもっといい天気になるでしょうか。春はもうそこまできています。桜がもうすぐ満開になりそうなので、お花見の準備をしなければいけませんね。とっておきのお花見スポットがあるので、仲良しのお友達を誘って出かけます。ちょっと遠いのが難点なんですが、がんばって行くだけの価値はあります。

さて、今日も日が暮れて真っ暗になりました。そろそろ、晩ご飯の買い出しに行ってきます。

2009年4月1日

ブラウザで表示を確認する
  • コメント(8件)
#1 anonymous   2009-03-18 12:45:11
ほかのブラウザで確認されてますか?
IEでずれないからOKでは、プロとして話になりません。
もうちょっと質の高い記事を書いてください。
#2 えど   2009-03-18 16:00:29
他のブラウザでもずれずに表示されていますが、
Firefox, Google Chrome では文字サイズの拡大を行うとずれが生じますね。
#3 tomita   2009-03-18 17:04:26
編集部の冨田です。いつもご愛読ありがとうございます。

掲載にあたり、編集部では下記の環境とブラウザで全てのサンプルを
検証いたしました。

・Windows XP SP3環境
* Internet Explorer 6
* Firefox 3.0.7
* Safari 4(ベータ版)
* Google Chrome(2.0.170.0)
* Opera 9.64

・Mac OS X環境
* Firefox 3.0.7
* Safari 3.2.1 (5525.27.1)
* Opera 9.64

先ほど再度確認したところ、Mac OS X環境のSafariで文字サイズの
拡大縮小時に、テキストと罫線にズレが発生しました。

現在、回避策を調査中です。アップデートがあり次第、コメント欄
にてご報告いたします。
#4 anonymous   2009-03-18 18:51:41
私の環境ではちゃんと表示されました。

win xp sp3
firefox 3.0.7
IE7
IE6スタンドアロン
safari3.2.2
opera9.6.3

#1様の不具合が発生した環境をお教えいただけますでしょうか。
この記事の情報、私にとっては大変有意義なものですので、事実を把握しておきたいのです。
お手数ですが、ぜひ、お願いいたします。
#5 anonymous   2009-03-18 18:56:28
すみません、#4のものです。
文字サイズ確認をしてませんでした。
確かに#2様の仰るように、「ズーム」でなく「文字サイズのみ」変更するとズレますね。

でもこれはこれで有益な情報でした。
また、対策案がもし見つかったら、ぜひご掲載いただきたいと思います。
#6 anonymous   2009-03-19 14:57:31
私も、IE8,IE7,Firefox 3,Safari3.2 win、Opera 9.5でチェックしましたが、
実用上、この記事の内容で「必要十分」でしょう。

Firefoxの、デフォルトでオフになっている「文字サイズのみ」にチェックを入れる人なんて考えにくいし。

それより、勘違いしたまま逃亡している#1さん、ちゃんとプロらしくテスト環境示してほしいね。
#7 anonymous   2009-03-19 16:40:40
編集部の冨田です。

著者のエ・ビスコム・テック・ラボさんからお返事がありましたので、
今回のまとめと回避策を以下に記載します。

### 今回のまとめ

Safari 3.xとGoogle Chrome 1.xでは文字サイズと行間だけが拡大縮小
されるため、背景画像として表示した罫線とずれが生じます。

Safari 4とGoogle Chrome 2.xでは背景画像も含めて拡大縮小する
「フルページズーム」を行うので、罫線と文字がずれることはありま
せん。

そのため、拡大縮小しても罫線とずれないブラウザは「フルページ
ズーム」を行うブラウザとIEとなります:

* Internet Explorer 5以上
* Safari 4以上
* Google Chrome 2.x以上
* Firefox 3以上
* Opera

なお、IEはバージョン8からはフルページズームを行うようになって
おり、今後はフルページズームが主流になると考えられます。

現状でSafari 3.xとGoogle Chrome 1.xの問題を回避するには
「-webkit-text-size-adjust: none」の設定を追加し、文字サイズを
固定してずれを防ぐしかありません。この設定を追加しても他のブラ
ウザの表示には影響しません。

### 回避策

下記にソースを記載します。また、本記事の最後にも回避策を追記し、
ブラウザで表示を確認できるようにいたしましたので、あわせて
ご覧になってください。
body	{
	background-image: url(background.gif);
	}

div	{
	width: 480px;
	margin: 30px auto;
	background-image: url(line.gif);
	background-repeat: repeat-y;
	line-height: 35px;
	}

p	{
	font-size: 1em;
	margin: 0 0 35px;
	}

p.date	{
	text-align: right;
	}

h1	{
	font-size: 1.25em;
	margin: 0 0 35px;
	}

*	{
	-webkit-text-size-adjust: none;
	}
#8 anonymous   2009-03-21 23:29:16
-webkit-text-size-adjust: none; を使うと「文字が小さいから拡大して見たい」という操作が行えないだけでなく、「ユニバーサルアクセス:○より小さいフォントサイズを使用しない」も無視されます。

ページ作成者の考え方(見せたいもの)は色々なので、この結果を知った上でなおデザイン・レイアウトを優先したいというのならそれもアリでしょう。
ただ、記事においては追記した対策がかなり乱暴な方法である事は明記しておくべきです。

個人的には、Safari で文字を拡大する人は「文字を拡大すると大抵のページでデザインが崩れる」という事は理解していますので、追記の対策を行うよりは「拡大後の表示および、一般的な文字サイズ以上での閲覧の場合は崩れても止むなし」と妥協する方が良い気がします。
このサイトでは、利用状況の把握や広告配信などのために、Cookieなどを使用してアクセスデータを取得・利用しています。 これ以降ページを遷移した場合、Cookieなどの設定や使用に同意したことになります。
Cookieなどの設定や使用の詳細、オプトアウトについては詳細をご覧ください。
[ 閉じる ]