質問: font-sizeが効かない html5でhtmlソースを記述しています。 時々、font-sizeが効かない事がありますが、どうしてかわかりますでしょうか? html>ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー <戻る css>ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー .right { float:right; } .r20 { margin-right:20px; } .t30 { margin-top:30px; } .b30 { margin-bottom:30px; } .maincontents { width:320px; background-color:#fff; font-family:"ヒラギノ角ゴ pro w6", "hiragino kaku gothic pro", "メイリオ", meiryo, osaka, "ms pゴシック", "ms pgothic", sans-serif; font-size:12px; } 確認ブラウザは、safariとfirefoxです。 よろしくお願いいたします。
回答: fon-sizeの指定方法はあってますから、その前(font-familyなど)の記述にエラーがあるとか、文字コードがあってないとかだと思います。プロパティの宣言の順番を変えて確認してみる。 html5だと <戻る でなきゃ変ですね。なんて、tableを使うのと同じ穴の狢(ムジナ)のマークアップへの反省から改定されるのがhtml5ですから。なんて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;} でよい。 <戻る と、文書構造を!!明確!!に書くのが【html5】の基本中の基本、そのために多くの構造化要素やセマンティク要素が追加された!!! よってスタイルシートは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)を使うこと 例) ・・・・・・・・・ class名にrightとかleft、あるいはr20なんて意味のないものは使わない。セマンティック(意味のある一般的なもの)を使うこと。「がだめならを使う」はだめ・・というのと同じです。 すくなくとも上記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/ ) だけ読めばok 3) 4.01strictの「非推奨」はブラウザが対応すべき要素や属性を含む。著者はstrict以外使えないと読み替える。 4) これはhtml4.01でも書かれているがhtmlは文書構造だけを記述するものを徹底すること clas="right red "などは書かないと言うこと htmlやcssだけ読んでもなにをしたいか、してるかわかるでしょ!!それがhtml5の本当の意味です。