- ベストアンサー
なぜfont-sizeが効かないのか？
- HTML5で記述されたソースコードの中で、font-sizeが効かない現象が時折発生します。この問題の解決策について知りたいです。
- 確認ブラウザはSafariとFireFoxであり、指定したfont-sizeが反映されない現象に遭遇しています。この問題の原因と解決方法を教えてください。
- HTML5のソースコードで適用されたfont-sizeが正しく表示されない問題が発生しています。この問題に対する解決策を教えてください。
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
fon-sizeの指定方法はあってますから、その前(font-familyなど)の記述にエラーがあるとか、文字コードがあってないとかだと思います。プロパティの宣言の順番を変えて確認してみる。 HTML5だと <section> <nav> <p><a href="#">＜戻る</a></p> </nav> <section> <h1></h1> </section> </section> でなきゃ変ですね。<div class="main"><div class="clear">なんて、TABLEを使うのと同じ穴の狢(ムジナ)のマークアップへの反省から改定されるのがHTML5ですから。<div class="clear">なんてHTML5を否定している。ましてやclass="right"なんて酷すぎます。 基本的にdivは使わないと考えたらよいです。 .rightなんて書き方は、CSS1への後方互換で、本来は単純セレクタ(全称セレクタとタイプセレクタ)につなげて書く。 【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから 全称セレクタが単純セレクタの唯一の構成条件ではない時、アスタリスクを省略することができる。 ￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［セレクタ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/selector.html#universal-selector )］より ↑CSS1との後方互換のために設けられたルール 当然、 .right {float:right;} .r20 {margin-right:20px;} .t30 {margin-top:30px;} .b30 {margin-bottom:30px;} な書き方はしない このマークアップのままだと div.mainContens a span.right.r20.30.b30 {float:right;margin:30px 20px 30px 0;} でよい。 <section> <nav> <p><a href="#">＜戻る</a></p> </nav> <section> <h1></h1> </section> </section> と、文書構造を!!明確!!に書くのが【ＨＴＭＬ５】の基本中の基本、そのために多くの構造化要素やセマンティク要素が追加された!!! よってスタイルシートはCSS2で書けば section nav {width:100px;float:right;margin:20px 30px 30px 0;clear:right;} section section{width:100%;} body section{font-family:・・・・;font-size:12px;width:320px;} /* 下のように書くと section section{width:100%;}は要らない */ body>section{font-family:・・・・;font-size:12px;width:320px;} ★HTML5は、まだドラフトの段階です。HTML4と違い、ブラウザの対応が完了してから勧告となるのでまだしばらくは使えない。まだまだ頻繁に変更されている。 その前に、資料の豊富なHTML4.01strictとCSS2を徹底的に身に着けること。そのときに注意するのは、 1) divのclass名はHTML5で採用される構造化要素名やセマンティック要素名(header,footer,section,article,hgroup,nav,figure,aside)を使うこと 例) <body> <div class="header" id="TOP"> <h1></h1> <div class="nav"> <p><a href=""></a></p> <div class="article summary"> </div> </div> <div class="section"> ・・・・・・・・・ class名にrightとかleft、あるいはr20なんて意味のないものは使わない。セマンティック(意味のある一般的なもの)を使うこと。「<FONT COLOR="red">がだめなら<span style="color:red">を使う」はだめ・・というのと同じです。 すくなくとも上記calss名は検索エンジンは理解している。 2) HTML4.01【strict】を身に着けておくと(HTML5は4.01strictの改訂版) HTML5 differences from HTML4 ( http://www.w3.org/TR/2011/WD-html5-diff-20110525/ ) (邦訳)HTML5 における HTML4 からの変更点 ( http://standards.mitsue.co.jp/resources/w3c/TR/html5-diff/ ) だけ読めばＯＫ 3) 4.01strictの「非推奨」はブラウザが対応すべき要素や属性を含む。著者はstrict以外使えないと読み替える。 4) これはHTML4.01でも書かれているがHTMLは文書構造だけを記述するものを徹底すること clas="right red "などは書かないと言うこと HTMLやCSSだけ読んでもなにをしたいか、してるかわかるでしょ!!それがHTML5の本当の意味です。
お礼
大変ためになりました。。。 まだまだ、相当勉強しないと、厳しいですよね。 ありがとうございました。