こんばんは。趣味のブログをやりながら、HTML や CSS を勉強しています。
手元の本やネット上には、「IE6 で文字の大きさを変えられるから、フォントサイズは『%』がオススメ」とあります。いっぽうでアクセス解析を見ても、IE6 の人は一人もいません。また、最近のブラウザ(IE9 や Firefox など)であれば、《CTRL + マウスホイール》で画面の大きさを変えられると思います。
個人的に px のほうが計算しやすいので、できれば《font-size: 16px;》のように指定したいのですが、やっぱり%のほうがいいですか?
No.3ベストアンサー
- 回答日時:
IE6へきちんと対応する事を考えるなら、%以外の選択肢はありません。
emも相対指定で%よりもわかりやすいですが、IE6ではバグがあります。
ただ、プロでもない限りそこまでIE6や文字サイズの可変性にこだわる必要は無いと思います。
IE6の為に%指定をしても、そもそも素人の方ではIE6でずれないようにcssでレイアウトする事が出来ないと思います。
最近のブラウザだけで考えるなら、ほとんどのブラウザは初期設定時には
「文字サイズだけ」でなく「画面全体」を大きくする設定になっていますので、
pxで指定していても、大きくすることは可能です。
職業に、と考えないならpxで特に問題ないと思います。
ただ、文字サイズだけを大きくするように設定を変えているユーザーにまで対応したいなら、
やはり%での指定が適当かと思います。
様々なブラウザに対応した%の数値をまとめたサイトがあるので、%指定をするなら参考にしてください。
http://webtech-walker.com/archive/2008/05/160324 …
ブラウザの初期設定は16pxなので、
例えば全体を12pxにまとめるならbodyに75%を指定し、
さらに部分的に14pxにするなら117%、10pxにするなら84%、という感じの見方です。
ご回答ありがとうございます。
いままで Opera⇒Firefox⇒Chrome⇒IE8 の順で確認していましたが、ご回答が気になり、IETester というソフトで調べてみました。IE6 では、画像の max-width が効かないらしくフロート三段組がずれていたほか、png の透過部分も白くなっていました。また、IE7 にも変な隙間があったものの、これは何とか直せました。
おかげさまで、%の数値をまとめたサイトの見方もわかりました。いろいろな単位が混ざっても、これで何とかなりそうです。趣味のブログとはいえ、上を目指してがんばりたいと思います。
No.5
- 回答日時:
現代のPC用ブラウザはfont-size:medium;を指定すればほとんどが16pxで表示されます。
私はhtmlにその指定をして基準を作っておき、それから子要素に対して%を指定して調整してますね。
html {
font-size:medium !important;
font-size:small; /* この指定は古いIE用です */
}
/* フォントサイズ%指定用
10px 62.50%
11px 68.75%
12px 75.00%
13px 81.25%
14px 87.50%
15px 93.75%
16px 100.01%
17px 106.25%
18px 112.50%
19px 118.75%
20px 125.00%
21px 131.25%
22px 137.50%
23px 143.75%
24px 150.00%
25px 156.25%
26px 162.50%
27px 168.75%
28px 175.00%
29px 181.25%
30px 187.50%
31px 193.75%
32px 200.00%
*/
ご回答ありがとうございます。
実験用のサイトで medium を指定してみたら、IE でもフォントサイズが変えられました。IE 対応を考えるなら、親も子も相対単位でなければいけないようですね。
No.4
- 回答日時:
emは相対サイズと呼ばれる方法で、pxは絶対サイズです。
(pxを相対サイズと思っている人がいますが・・・)スタイルシートのサイズは・・
相対サイズ
・em
・ex
絶対サイズ
・in: inches — 1in is equal to 2.54cm.
・cm: centimeters
・mm: millimeters
・pt: points — the points used by CSS are equal to 1/72nd of 1in.
・pc: picas — 1pc is equal to 12pt.
・px: pixel units — 1px is equal to 0.75pt.
約0.26mm
パーセント
・%
あります。
⇒4.3.2 Lengths( http://www.w3.org/TR/CSS2/syndata.html#length-un … )
⇒4.3.3 Percentages( http://www.w3.org/TR/CSS2/syndata.html#percentag … )
>個人的に px のほうが計算しやすいので、
計算しやすいのは、cmやmmでしょう。
>IE6 の人は一人もいません。
IE6・・・さすがに、もう考慮する必要はないでしょう。
>個人的に px のほうが計算しやすいので、できれば《font-size: 16px;》のように指定したいのですが、やっぱり%のほうがいいですか?
サイズは、様々な場面で登場しますから一概には言えないでしょう。
font-sizeに限れば、これは継承されるプロパティなので、media=screenでは、最初/最も親要素で、pxで指定しておいて、以降はemで指定することが多いです。
[例]
body{font-size:14px;}
h1,h2,h3,h4,h5,h6,p{line-height:1.6em;margin:0;}
p{text-indent:1em;}
h1{font-size:1.8em;}
h2{font-size:1.4em;}
h3{font-size:1.3em;}
h4{font-size:1.1em;}
h5,h6{font-size:1.0em;}
あとは、
div.section div.aside,div.section div.figure{font-size:0.9em;}
これで、本文中の補足記事(aside)や挿絵的な記事(figure)は、その子要素のフォントサイズは一回り小さくなりますね。
このように最初に絶対サイズで指定した後、emやexの相対サイズ、パーセントを組み合わせていくほうが良いでしょう。
また、印刷用のスタイルシートでは、最初の指定をptやpcを使い、位置決めはmmで行います。
★ただ、昨今は、スマホや超幅広ディスプレイなど様々なデバイスが存在するため、最初の絶対サイズでの指定自体をしないこともあります。
font-sizeに関しては、%指定はしていません。ボックスのサイズとかと紛らわしいので・・%指定はぼボックスサイズに限定して使用しています。
div.header,div.section,div.footer{width:90%;min-width:480px;max-width:900px;margin:0 auto;}
div.section div.section{margin:0 20%;min-width:0;}
とか・・
ご回答ありがとうございます。
紙媒体なら級数(mm)だと思いますが、画面上では px のほうが計算しやすいと考えました。とはいえ、mm でフォントサイズ一覧表をつくっておいて、そのフォントとおなじ大きさになる px や % の一覧表もつくっておけば、いろいろな単位でも自由に行き来できるのではと。ご回答を読んで、このことに気づきました。
なお、現状は幅 1000px の固定幅レイアウトが精一杯なので、印刷用やスマホ用は将来的な目標にとどめておきます。
No.2
- 回答日時:
一般的には、em(1文字の大きさに対する相対的なサイズ)で表現した方がいいのでは?・・・
基準となる文字サイズを、12pxとすると、1em=12px・1.5em=18pxになります。
%とあまり変わらないが、1文字の大きさを最初に、決めておけばいいので、多少便利かも?・・・
default font-size:12px;で宣言していた場合:font-size:1.5;line-height:1.5;
という方法を、とられてはいかがでしょうか?・・・
ご回答ありがとうございます。
いろいろな単位があるほか、親要素の影響も受けるのでフォントサイズは難しいなぁ……と感じています。基準の絶対サイズを決めて、その子要素に相対サイズを持ってくるのがコツなんですね。
em は行間やインデントの設定に使っていますが、フォントサイズにも応用してみたいと思います。
No.1
- 回答日時:
IE7は? 過去モードは?
色々な環境があるので、%の方が無難だけど、
それは製作者の自由であって、IE6を排除するのも自由。
IE6ユーザーがそういうサイトに腹を立てて嫌うのも勝手だし、バージョンアップしないのも自由。
それらのメリット・デメリットを製作者の観点で考慮すればよいです。
ちなみに、CSSでフォント計算表のようにあらかじめ%で計算して入れておくと、計算する必要はないでしょう。
ご回答ありがとうございます。
<!DOCTYPE>が標準モードなので、互換モードは考えていません。けれどもアクセス解析を見直したら、月に IE6 が数人、IE7 が数十人いました。IE6 はともかく、7は無視できないようです。
もちろん趣味のブログとはいえ、ある程度は上を目指したいと思っています。おっしゃるようにフォント計算表をつくって、%で指定したほうがよさそうですね。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS CSSでサイトの背景に画像を組み込みたいのですが反映されません 2 2022/11/22 16:21
- HTML・CSS CSS上での計算を行うためのルールについて教えてください。 3 2022/08/15 14:43
- HTML・CSS 検索窓とcssハックについて 3 2022/04/22 12:21
- HTML・CSS CSSがなぜかfont-sizeだけ効かない...記述がまちがっているんでしょうか 5 2022/04/09 17:52
- PHP アンドロイドスマホでのphp echoの文字サイズ 1 2023/05/13 15:15
- ビジネスマナー・ビジネス文書 私の所属する公的機関の文書はとても読みにくく、おそらく、以下が原因のように思われます。 フォントはゴ 1 2022/12/01 07:35
- HTML・CSS Web font 会社のホームページを作成についてですが、webフォントを使用することを検討しており 4 2022/11/04 10:36
- HTML・CSS スクロールすると追従する画像のコードを書いているのですが、追従する画像の大きさの調節が上手くいきませ 2 2022/04/18 12:52
- Outlook(アウトルック) Outlook 受信メールの文字サイズ変更 2 2022/10/14 14:41
- 政治 私の発明した「二階建て漢字」は使えるでしょうか? 3 2023/02/08 16:40
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
htmlの文字が縦書きになる
-
border-style:solidで文字がずれる
-
widthやheightの数値に単位(px...
-
インラインフレーム内の表示位...
-
CSS、width100%でもできる余白
-
CSS:animation開始位置の設定
-
Media Queries 4 で 非推奨とな...
-
CSS テキストフィールドの文字...
-
余分な縦スクロールバーが出て...
-
div要素の左寄せ、中央寄せ、右...
-
スタイルシートで背景の繰り返...
-
safariだけ、cssが効きません!
-
CSS3で角丸写真にシャドーを付...
-
CSSで3分割した背景画像を配置...
-
マウスオーバー時に画像と一緒...
-
初心者html・CSS ウィンドウを...
-
スクロールボックスを中央に配...
-
ライトボックスでスクロールバー
-
CSS(0の単位)について
-
divで囲まれたpaddingの指定を...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
htmlの文字が縦書きになる
-
widthやheightの数値に単位(px...
-
画像イメージの上下左右、欲し...
-
css初心者 フレックスボックス...
-
表示倍率を変えるとレイアウト...
-
CSSがなぜかfont-sizeだけ効か...
-
CSS、width100%でもできる余白
-
W3Cのソースコードの検証サービ...
-
CSS:animation開始位置の設定
-
CSSで指定した背景画像にリンク...
-
<div>と<div>の間の10px程の...
-
余分な縦スクロールバーが出て...
-
CSSでボックスのheightが0になる
-
【CSS】ヘッダーの高さが不明の...
-
スクロールボックスを中央に配...
-
li 黒丸含んで移動する方法
-
border-style:solidで文字がずれる
-
【HTML&CSS】フッター下部の余...
-
Media Queries 4 で 非推奨とな...
-
初心者html・CSS ウィンドウを...
おすすめ情報