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

エ・ビスコム・テック・ラボ
2009-03-18 10:30:00
今回はCSSを利用してノート風の罫線にテキストをレイアウトしてみよう。テキストの分量や文字サイズの変化にも柔軟に対応できるようにするのがポイントだ。
最新特集【一覧】

防水スピーカーをワイヤレス化、お風呂でのんびり音楽を楽しむ

自作バーコードで音楽CDを管理する

Perfumeが公開したダンスのモーションデータをChromeで扱う

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

　ノート風の罫線に揃えてテキストをレイアウトしようとする場合、一昔前であれば各行をでマークアップしたり、テーブルを利用するなどしていた。

　しかし現在は、CSSを駆使することで

や

でシンプルにマークアップしてテキストをレイアウトすることができる。そのため、ブログの記事のデザインなどにも有効に活用することが可能だ。

　今回のサンプルは、次の4点をポイントにして作成した。

  • テキストの各行を罫線に揃えてレイアウトする
  • テキストの分量に合わせて罫線を過不足なく表示する
  • 見出しや段落を追加しても行がずれないようにする
  • ブラウザの文字サイズの設定を変えても行がずれないようにする
サンプル完成図（画像をクリックすると拡大します） サンプル完成図（画像をクリックすると拡大します）
Internet Explorerの表示文字サイズを「最大」にしたときの表示（画像をクリックすると拡大します） Internet Explorerの表示文字サイズを「最大」にしたときの表示（画像をクリックすると拡大します） 
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;
}



今日はいい天気



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



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



2009年４月１日
※ブラウザで表示を確認する

　なお、サンプルの表示にはInternet Explorer 5以上と、その他の主要ブラウザ（Firefox、Safari、Opera）が対応している。

　それでは、テキストのレイアウト手順を見ていこう。

  • コメント（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 で文字を拡大する人は「文字を拡大すると大抵のページでデザインが崩れる」という事は理解していますので、追記の対策を行うよりは「拡大後の表示および、一般的な文字サイズ以上での閲覧の場合は崩れても止むなし」と妥協する方が良い気がします。
  • 新着記事
  • 特集
  • ブログ