- ベストアンサー
クロスブラウザでフォントサイズを統一したい
YUI 2: Fonts CSSを使ってクロスブラウザでフォントサイズを統一しようとしたのですが、うまくいきません。下記のようではいけないのでしょうか？ またＷＥＢ上からダウンロードするのでアップロードしないと適応されないのでしょうか？ それともＷＥＢにつながっていればローカルでも良いのでしょうか？ http://sample1.digi2.jp/kindergarten/plan.html
- CSS
- 回答数5
- ありがとう数6
- みんなの回答 （5）
- 専門家の回答
質問者が選んだベストアンサー
#3 補足URLを読みました。text-align: justify の設定初期値のアルゴリズムはUA依存であり、全ブラウザで同じ表示にする事は出来ません。 http://hp.vector.co.jp/authors/VA022006/css/text.html#text-align http://www.y-adagio.com/public/standards/tr_css2/text.html#alignment-prop UA依存性をなくす為に「CSS Text Module Level 3」で text-justify が定義されていますが、2013/11/17現在の全ブラウザでは使用できません。 http://www.w3.org/TR/css3-text/#text-justify-property また、プロポーショナルフォントの横幅はフォント依存なので全環境で縦の行数を揃える場合は固定幅フォント(等幅フォント)を指定する必要があります。 http://ja.wikipedia.org/wiki/%E3%83%97%E3%83%AD%E3%83%9D%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%8A%E3%83%AB%E3%83%95%E3%82%A9%E3%83%B3%E3%83%88 ブラウザのフォントサイズはユーザCSSによってクライアント側で自由に変更できるのが実情です。 フォントサイズが変更されても正しく見えるように制作するのが現実的だと思います。 http://www.smbc.co.jp/accessibility/guidelines/guideline_18.html
その他の回答 (4)
- 神崎 渉瑠（@taloo）
- ベストアンサー率44% (1016/2280)
>No.3お礼 letter-spacingが原因であって、フォントサイズが原因ではありません。 1px未満の指定はブラウザ依存です。（四捨五入、切り上げ、切り捨て、無視） letter-spacingの場合、IEは0pxまたは0.05pxで表示されているようですし、 Firefoxは1px以上（規定値のnormalが適用されているため、ブラウザのデフォルト値）で表示されているようです。 どういう理屈なのかわかりませんが、emで指定すれば結果的に1px未満になっていてもブラウザごとで同じ結果になるようですので、 letter-spacing: 0.003125em としておけば、Firefox、IEともに0.05px（推定）になるようです。 しかしemで指定しても計算結果が1px未満の指定は環境依存である事は変わりません。 現在は結果的に同じになっていても、将来のバージョンアップで変わる可能性もあります。 なお、font-family（インストール済みフォント）やword-spacing、ブラウザ設定のフォントサイズも影響しますので、環境依存を越えて完全に一致させるのは不可能、または非常に困難です。
お礼
ありがとうございます。お忙しい中大変ありがとうございました。 emだと同じにできる可能性があるのですね。
- 神崎 渉瑠（@taloo）
- ベストアンサー率44% (1016/2280)
SafariとFirefoxでは*{font-size:16px}で"統一"されています。（YUIに関係なくですが） どういう表示になれば「統一」なのかはわかりませんが、 websaitojisakuさんが期待する「統一」というのを、CSSのルールに則って書いてください。
お礼
CSSのルールに則っているかは知りませんが、 例えば、http://sample1.digi2.jp/kindergarten/plan.htmlの仏教精神というところの下の文字が、IEだと５列なのにファイヤーフォックスだと６列になります。 同じフォントサイズなのに列の数がブラウザによって変わっているという事だと仰りたいのですかね。 列の数が違うのでフォントサイズも違うと判断したのですが、それが違っていたということでしょうか？
- 神崎 渉瑠（@taloo）
- ベストアンサー率44% (1016/2280)
>うまくいきません。 うまくいかないのはYUIを読み込んでないからではないですかね。 >またＷＥＢ上からダウンロードするのでアップロードしないと適応されないのでしょうか？ >それともＷＥＢにつながっていればローカルでも良いのでしょうか？ YUIはCDNサービスもあります。 http://developer.yahoo.com/yui/articles/hosting/ 読み込み方法はHTMLのルールに従ってください。
お礼
ありがとうございます。お忙しい中大変ありがとうございました。 http://thinkit.co.jp/article/767/1 上記を参考に下記のようにしたのですがどこか間違っているのでしょうか？ <head> <meta name="robots" content="noindex,noimageindex,nofollow" /><!--サンプルの為--> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title> あ </title> <link rel="stylesheet" href="reset.css" type="text/css" /> <link rel="stylesheet" href="base.css" type="text/css" /> <link rel="stylesheet" href="index.css" type="text/css" /> <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.6.0/build/fonts/fonts-min.css"> </head>
- ORUKA1951
- ベストアンサー率45% (5062/11036)
完全には無理です。 スマホのように高解像度では小さくなりますし・・ ウェブデザインを学ばれているようですが、フォントサイズは、著者側からは指定しないほうが良いです。 せいぜい、%(em)指定しておく程度が良いです。 h1{font-size:160%;} h2{font-size:140%;} div.aside{font-size:95%;} ・・とか ウェブは、「どんな環境からもWebの情報を利用できるようにすべきだという方針の下に開発されている。」のですから、ＯＳもブラウザもフォントも異なり、ユーザーの視力も異なるのですから、「どのようなフォントサイズで見ても、その情報を利用できるようにする!!!」のが基本です。視覚弱者の方がフォントを大きくして閲覧すると崩れるサイトとか、同じような色調、コントラストに低いページなども見かけますが、好ましくありません。 現在のウェブ標準とは、HTML4.01strict,XHTML1.0,XHTML1.1、CSS2.1、WAIなどを言いますが ⇒ウェブ標準 - Wikipedia( http://ja.wikipedia.org/wiki/%E3%82%A6%E3%82%A7%E3%83%96%E6%A8%99%E6%BA%96 ) ⇒Web Content Accessibility Guidelines - Wikipedia( http://ja.wikipedia.org/wiki/Web_Content_Accessibility_Guidelines ) ⇒WCAG 2.0 解説書 [原題：Understanding WCAG 2.0]( http://www.jsa.or.jp/stdz/instac/commitee-acc/W3C-WCAG/WCAG20/UNDERSTANDING-WCAG20/index.html )
お礼
ありがとうございます。お忙しい中大変ありがとうございました。
お礼
フォントの大きさはブラウザ間での統一は不可能ということですね。 ありがとうございます。お忙しい中大変ありがとうございました。 それではリキッドレイアウトで崩れなければ、お客さんなどに理解してもらえば良いということですね。