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

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

ステップ1 罫線の画像を用意する

 まずは罫線の画像を用意する。このとき、背景のテクスチャと罫線の画像は別々に用意する。テクスチャと罫線を1枚の画像にしてしまうと、レイアウトの自由度が低くなってしまうためだ。

罫線の画像 罫線の画像
ブラウザで表示を確認する
テクスチャの画像 テクスチャの画像
ブラウザで表示を確認する

 なお、罫線の画像は最終的なテキストの横幅や行間に合わせて作成する。サンプルでは1行の横幅を480ピクセル、行間を35ピクセルにするため、画像は480×35ピクセルで作成する。また、罫線の絵は画像の下側に配置して、罫線のまわりの白色の部分は透過して保存する。

罫線の画像の構成 罫線の画像の構成

ステップ2 テキストを用意する

 次に、HTML/XHTMLでテキストを用意する。テキストは段落ごとに

でマークアップして、全体を
でグループ化しておく。

 また、この段階で基本的なデザインを設定しておく。サンプルでは次のように指定している。なお、見出しは後から追加する。

  • ページの背景にテクスチャ画像(background.gif)を表示
  • テキストの横幅を480ピクセルに設定して画面の中央に配置
  • テキストの文字サイズを「1em」と指定。ブラウザの標準の設定では16ピクセルで表示されるようにした
用意したテキスト(画像をクリックすると拡大します) 用意したテキスト(画像をクリックすると拡大します)
body{
background-image: url(background.gif);
}

div{
width: 480px;
margin: 30px auto;
}

p{
font-size: 1em;
}

p.date{
text-align: right;
}

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

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

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などの設定や使用の詳細、オプトアウトについては詳細をご覧ください。
[ 閉じる ]