
CSS技研:ノート風の罫線にテキストをレイアウトする
エ・ビスコム・テック・ラボ
2009-03-18 10:30:00
ノート風の罫線にテキストをレイアウトする
ノート風の罫線に揃えてテキストをレイアウトしようとする場合、一昔前であれば各行を<span>でマークアップしたり、テーブルを利用するなどしていた。
しかし現在は、CSSを駆使することで<p>や<div>でシンプルにマークアップしてテキストをレイアウトすることができる。そのため、ブログの記事のデザインなどにも有効に活用することが可能だ。
今回のサンプルは、次の4点をポイントにして作成した。
- テキストの各行を罫線に揃えてレイアウトする
- テキストの分量に合わせて罫線を過不足なく表示する
- 見出しや段落を追加しても行がずれないようにする
- ブラウザの文字サイズの設定を変えても行がずれないようにする
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年4月1日
※ブラウザで表示を確認する
なお、サンプルの表示にはInternet Explorer 5以上と、その他の主要ブラウザ(Firefox、Safari、Opera)が対応している。
それでは、テキストのレイアウト手順を見ていこう。
- コメント(8件)
#1
anonymous
2009-03-18 12:45:11
#2
えど
2009-03-18 16:00:29
他のブラウザでもずれずに表示されていますが、
Firefox, Google Chrome では文字サイズの拡大を行うとずれが生じますね。
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で文字サイズの
拡大縮小時に、テキストと罫線にズレが発生しました。
現在、回避策を調査中です。アップデートがあり次第、コメント欄
にてご報告いたします。
掲載にあたり、編集部では下記の環境とブラウザで全てのサンプルを
検証いたしました。
・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様の不具合が発生した環境をお教えいただけますでしょうか。
この記事の情報、私にとっては大変有意義なものですので、事実を把握しておきたいのです。
お手数ですが、ぜひ、お願いいたします。
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様の仰るように、「ズーム」でなく「文字サイズのみ」変更するとズレますね。
でもこれはこれで有益な情報でした。
また、対策案がもし見つかったら、ぜひご掲載いただきたいと思います。
文字サイズ確認をしてませんでした。
確かに#2様の仰るように、「ズーム」でなく「文字サイズのみ」変更するとズレますね。
でもこれはこれで有益な情報でした。
また、対策案がもし見つかったら、ぜひご掲載いただきたいと思います。
#6
anonymous
2009-03-19 14:57:31
私も、IE8,IE7,Firefox 3,Safari3.2 win、Opera 9.5でチェックしましたが、
実用上、この記事の内容で「必要十分」でしょう。
Firefoxの、デフォルトでオフになっている「文字サイズのみ」にチェックを入れる人なんて考えにくいし。
それより、勘違いしたまま逃亡している#1さん、ちゃんとプロらしくテスト環境示してほしいね。
実用上、この記事の内容で「必要十分」でしょう。
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」の設定を追加し、文字サイズを
固定してずれを防ぐしかありません。この設定を追加しても他のブラ
ウザの表示には影響しません。
### 回避策
下記にソースを記載します。また、本記事の最後にも回避策を追記し、
ブラウザで表示を確認できるようにいたしましたので、あわせて
ご覧になってください。
著者のエ・ビスコム・テック・ラボさんからお返事がありましたので、
今回のまとめと回避策を以下に記載します。
### 今回のまとめ
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 で文字を拡大する人は「文字を拡大すると大抵のページでデザインが崩れる」という事は理解していますので、追記の対策を行うよりは「拡大後の表示および、一般的な文字サイズ以上での閲覧の場合は崩れても止むなし」と妥協する方が良い気がします。
ページ作成者の考え方(見せたいもの)は色々なので、この結果を知った上でなおデザイン・レイアウトを優先したいというのならそれもアリでしょう。
ただ、記事においては追記した対策がかなり乱暴な方法である事は明記しておくべきです。
個人的には、Safari で文字を拡大する人は「文字を拡大すると大抵のページでデザインが崩れる」という事は理解していますので、追記の対策を行うよりは「拡大後の表示および、一般的な文字サイズ以上での閲覧の場合は崩れても止むなし」と妥協する方が良い気がします。
folllow builer on
twitter
- 新着記事
- 特集
- ブログ
- 企画特集
-
ビジネスの大きな転換点で勝者に!
-
ビジネス成功の砦はここにあり!
-
下した決断は「ハイブリッドへ」
-
特集:ポスト2020時代のCX再考
-
ウルトラ帳票文化を乗り越える!
-
どこまで可能?企業を究極の自動化
-
2020年代を勝ち抜くインフラ
-
働き方、生産性を根底から底上げ!
-
クラウドバックアップお悩み相談室
-
特集:ビジネスを止めるな!
-
働き方改革にモニターが有効なワケ
-
隗より始めよ
-
変化への対応はリアルタイム経営で
-
講演レポ:ポスト2020時代の基盤
-
レガシーなインフラ設計を見直す
-
働き方改革は身近な「改善」から
-
分析されたデータを活用できるか?
-
AI活用が激変する新たなインフラ
-
Why ワークプレース?
-
明治創業の鉄道企業がAWSに挑戦
-
ITシステムは永久のβ版思考で
-
データ活用を加速するエコシステム
-
攻めと守りのクラウド活用とは!?
-
意識してますか?PCの「信頼性」
-
サブスクモデルのSaaSで業務改善
-
RPAがニガテなExcelをどう使う
-
「データ」こそDXの主役
IEでずれないからOKでは、プロとして話になりません。
もうちょっと質の高い記事を書いてください。