1. 【テキストにノートの様な罫線を引いてみる】
一般的なノートには文字を書きやすいように 罫線がひかれてますが
Webサイトで 同じように表現したいときは その要素の背景に画像を用意し 繰り返し表示すれば
罫線が付きのテキストを表現できます
サンプル：http://bit.ly/aNYBmg
使用している背景画像
ポイント
- 背景画像の高さと line-hegihtの値を 同じpxで指定する
(emや%だと 文字サイズの変更や 画面の拡大縮小によって背景画像がずれます) - 上下のpaddingの指定は避ける(0にしておく)
※ブラウザの設定で 文字サイズを変更している場合 テキストと背景がずれることがありますが タグの付け方や 文字サイズ指定単位に気をつかえば それほどレイアウトは崩れなくて済みます |
2. 【ブラウザごとの文字サイズの変更の仕方】
IE6
ブラウザのツールバーから 表示 > 文字サイズ で変更可能です(初期設定は中)
ただし Ctrl + マウスホール で 画面の拡大縮小をすると テキストと背景がずれます
※行間(line-height)の指定が小さすぎると 文字サイズを最大にしたとき 文字同士が重なることがあります
IE7 IE8
IE6と同様 ブラウザのツールバーの 表示 > 文字サイズ から 文字のサイズ変更ができます
画面全体の拡大縮小では テキストと背景画像のずれは起きないのですが
IE7 IE8の場合 文字サイズの変更によるテキストと背景画像のずれと
画面の拡大縮小(Ctrl++,Ctrl+-)による テキストと背景画像のずれも生じませんでした
Firefox(3.5 3.6)
ツールバーから 表示 > ズーム で変更できます
初期設定では 文字サイズのみの変更はできず
Ctrl + +(プラスキー)で 画面全体が拡大
Ctrl + -(マイナスキー)で 画面全体が縮小します文字サイズのみ拡大縮小したいときは
ツールバーの 表示 > ズーム から 文字サイズだけ変更 にチェックを入れてください
(初期設定ではチェックされてません)
画面の拡大縮小では テキストと画像のずれは生じませんが
文字サイズだけ変更にチェックを入れた状態で 文字サイズを拡大縮小すると
背景とテキストがずれてしまいます
Safari(3.0)
ブラウザのツールバーの 表示 から 文字を拡大 文字を縮小が可能です
Safari3の場合は 画面全体の拡大縮小の機能がないのかな
文字を拡大・縮小すると テキストと背景はずれが生じました
Safari(4.0)
ブラウザ右上の アイコン（現在のページのメニューを表示します）をクリックし拡大/縮小 から 画面の拡大縮小が可能です
Firefoxと同様に
初期設定では 文字サイズのみの変更はできず
Ctrl + +(プラスキー)で 画面全体が拡大
Ctrl + -(マイナスキー)で 画面全体が縮小します文字サイズのみ拡大縮小したいときは
テキストのみ拡大/縮小 にチェックを入れてください
(初期設定ではチェックされてません)画面全体の拡大縮小では テキストと背景画像のずれは起きないのですが
テキストのみ拡大/縮小 にチェックを入れた状態で 文字サイズを変更するとずれます
Google chrome(5.0 6.0)
ブラウザの右上のアイコンをクリックし
オプションをクリック >高度な設定タブを選択 > フォントや言語を変更をクリック
フォントのタイプ(系統)ごとに スタイルとサイズを細かく設定できます
Google chromeでは 画面の拡大縮小や文字サイズの変更による
○ : テキストと背景がずれない
× : テキストと背景がずれることがある
ブラウザのシェアを考えると 8割がた 文字サイズの変更による テキストと背景のずれは起きないので
テキストと背景画像のずれは起きませんでした
まとめ
まとめ
テキストと背景画像のずれが起きるかどうか
| ブラウザ | 文字サイズの変更 | 画面全体の拡大縮小 |
| IE 6 | ○ | × |
| IE 7 | ○ | ○ |
| IE 8 | ○ | ○ |
| Firefox 3.5 | × (文字サイズだけ変更にチェックした場合) | ○ |
| Firefox 3.6 | × (文字サイズだけ変更にチェックした場合) | ○ |
| Safari 3 | × | - 変更できない |
| Safari 4 | × (テキストのみ拡大/縮小にチェックした場合) | ○ |
| Google Chrome 5.0 | ○ | ○ |
| Google Chrome 6.0 | ○ | ○ |
× : テキストと背景がずれることがある
ブラウザのシェアを考えると 8割がた 文字サイズの変更による テキストと背景のずれは起きないので
サンプルのように テキストに背景をつけて 罫線や画像のラインを設定するデザインは
場合によっては 使ってもいいと思います
0 件のコメント:
コメントを投稿