ママのスキンケアのお悩みにおすすめアイテム

html5でHTMLソースを記述しています。

時々、font-sizeが効かない事がありますが、どうしてかわかりますでしょうか?

HTML>ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

<div class="mainContents">
<a href="#"><span class="r20 t30 b30 right"><戻る</span></a>
<div class="clear"></div>
</div>

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です。

よろしくお願いいたします。

このQ&Aに関連する最新のQ&A

A 回答 (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 … )]より
 ↑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>
と、文書構造を!!明確!!に書くのが【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)を使うこと
 例)
  <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/h … )
だけ読めばOK

3) 4.01strictの「非推奨」はブラウザが対応すべき要素や属性を含む。著者はstrict以外使えないと読み替える。

4) これはHTML4.01でも書かれているがHTMLは文書構造だけを記述するものを徹底すること
  clas="right red "などは書かないと言うこと

 HTMLやCSSだけ読んでもなにをしたいか、してるかわかるでしょ!!それがHTML5の本当の意味です。


 
    • good
    • 0
この回答へのお礼

大変ためになりました。。。

まだまだ、相当勉強しないと、厳しいですよね。

ありがとうございました。

お礼日時:2011/06/26 22:08

このQ&Aに関連する人気のQ&A

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aを見た人はこんなQ&Aも見ています

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

Qテーブル内の文字サイズを変更したい。

HTMLのテーブル内の文字サイズを変更したいのですが。
イマイチ上手くいかずに悩んでいます。
出来れば全体的に<TABLE></TABLE>のほうでいじれますか?
<TD>タグや<TR>タグのところでいじくるのですか?

Aベストアンサー

いろいろやり方はありますが
文字単位でサイズを変更するには
#2の方法ですね。

テーブルごとやセル(<TD>)ごとにサイズを変更するには
スタイルシート(CSS)を使用します。

テーブルごとにサイズを変更する場合
<TABLE style="font-size : 20px;">

セル(<TD>)ごとにサイズを変更する場合
<TD style="font-size : 20px;">あああ</TD>

#1の方法だとページ内の全てのセル(<TD>)に設定することになります。

スタイルシート(CSS)はこれら以外にも
いろいろな設定方法があります。

QCSSでborderの長さを指定、または可変にしたい。

下記のように指定していますが、これだと横幅いっぱいに下の線が表示されてしまいます。

文字なりの長さ、または指定のピクセル数にしたいのですが、どのようにしたらよいでしょうか。

h3{
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

Aベストアンサー

borderの長さはそのボックスの大きさですから、ボックスの大きさを指定する事になります。
h3{
width:???px;
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

また、文字数(ボックスの内容)に合わせたい場合は、ボックスを浮動化(float)する等の方法もありますが・・・そのボックスの周りへ影響が出たり、ブラウザ毎にバグや実装の違いなどが比較的多く、扱いが面倒になるのであまりおすすめできません。

HTMLの方も修正する方法でもよければ

<h3><span>××○○</span></h3>
のようにspanで囲い、スタイルをspanに対して指定する方法もあります。

h3 span{
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

borderの長さはそのボックスの大きさですから、ボックスの大きさを指定する事になります。
h3{
width:???px;
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

また、文字数(ボックスの内容)に合わせたい場合は、ボックスを浮動化(float)する等の方法もありますが・・・そのボックスの周りへ影響が出たり、ブラウザ毎にバグや実装の違いなどが比較的多く、扱いが面倒になるのであまりおすすめできません。

HTMLの方も修正する方法でもよけ...続きを読む

Qcssで「下よせ」ってどうやっていますか?

フロートのレフト、ライトはいいとして、

あるボックス要素内(A)に異なるボックス要素(B)をいれます。
この(B)を(A)の一番そこにはりつかせたい時にどうすれば
最もよいのでしょうか?

いいアイデアをご教授ください。

Aベストアンサー

こんなのはどうかな?

position: absolute;
bottom: 0px;

Q文字の位置、上下のマージンがずれる

仕事でHTML+CSSでコーディングをされる方、
または精通されている方に質問です。

pタグで2行の段落を続けて配置してみました。
IE6・7、FF、Chrome、Safariではぴったりレイアウトが合うのですが、
IE8・9で確認すると誤差が生じます↓

<p>あああああ</p>
<p>かかかかか</p>

★pに対する指定
font-family: "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","MS Pゴシック","MS PGothic";
font-size: 14px;
line-height: 1;
margin: 0;
padding: 0;

各pタグにわかりやすく背景色をつけて確認してみると・・・

・IE8だと、2段目のテキスト位置が1px上に上がり、pの高さも1px縮む
・IE9だと、1段目と2段目のテキスト位置が1px上に上がり、2段目のpの高さが1px縮む

それぞれのpに高さを決めれば問題はないようですが、
高さを決めずにテキストを配置する場合、
この誤差については対応ができないものなのでしょうか?

pタグに限らず、ul、dlなんかでもずれることが多いです。
テキストをぴったりを合わせる技術ってないのでしょうか?

仕事でHTML+CSSでコーディングをされる方、
または精通されている方に質問です。

pタグで2行の段落を続けて配置してみました。
IE6・7、FF、Chrome、Safariではぴったりレイアウトが合うのですが、
IE8・9で確認すると誤差が生じます↓

<p>あああああ</p>
<p>かかかかか</p>

★pに対する指定
font-family: "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","MS Pゴシック","MS PGothic";
font-size: 14px;
line-height: 1;
margin: 0;
padding: 0;

各pタグにわかりやすく背景色をつけて確認して...続きを読む

Aベストアンサー

まず、line-height:20pxのように、line-heightをpxで指定してみてください。
ブラウザの違いによる縦の誤差はなくなるはずです。

誤差が生じる原因としてはOSやブラウザの違いから、フォントやレンダリングの違いによるものです。
なので、font-size:14px;に指定していても、line-heightをemや%で相対的に指定している場合は、必ず誤差が生じます。

なお、文字列の横をそろえるのほぼ無理と考えてください。

>pタグに限らず、ul、dlなんかでもずれることが多いです。

こちらに関しては、ブラウザ間のデフォルトの差異をなくすため、リセットCSSがよく使われます。
リセットCSS、reset cssなどで検索してみれば色々出てくるでしょう。
最近はHTML5を考慮しているものもたくさんあるので、そちらを使った方が良いでしょう。
しかし、これも完全に誤差をなくせるというわけではありませんが、一度試してみると良いでしょう。

QCSSでボックス幅を文字列に合わせたい

ボックス幅を文字列の幅に合わせるにはどうしたらいいのでしょうか。
テーブルではセルにwidth属性を指定しなくても文字列の幅になりますが、ボックスではwidthプロパティを指定しなかったら領域全体の幅になります。white-spaceプロパティでnowrap指定し、widthプロパティで文字列より小さいサイズに指定するとできるのですが、他に指定する方法があれば教えて下さい。

Aベストアンサー

div等のblock要素ではなくspan等のinline要素によって行う。

<span style="border:solid 1px">文字幅に合わせた枠線</span>

Q一部CSSを無効にする

数ページのテーブルをcssファイルを使って半透明化させ背景が薄く見えるようにしています。
そこでテーブル自体だけでなくテーブル内の画像や文字も半透明化されるのですが、あるページのテーブル内にある数枚の画像のみを半透明化したくない場合、どのように書けば良いですか?
CSSはあまり、というか全く詳しくなくて、idやclassというのも調べてみたのですが、
目的のものに辿りつけず…困っています。宜しくお願いします。

Aベストアンサー

 とりあえず下記サイトは読まれましたか?下記は比較的わかりやすく説明していると思います。

参考URL:http://www.tohoho-web.com/css/basic.htm

Q(スタイルシート)文字サイズ変更ができる、できないの基準

例えば<head>内に
.px10 {font-size: 10px;}
と記述し、
<p class=".px10">10ピクセルの文字</p>

上記のように記述すれば、ブラウザの表示→文字のサイズで文字サイズが変更可能ですが

p{font-size:10px;}

<p>10ピクセルの文字</p>

では文字のサイズがブラウザで変更できないようです。この違いは何でしょうか?<td>タグ内にスタイルシートを記述するかしないか、の違いなんでしょうか?
お分かりになる方がいましたら、ご教授いただけないでしょうか?
よろしくお願いいたします。

Aベストアンサー

どのブラウザでごらんになられたのでしょうか。
ブラウザをいくつも変えて確認されることをオススメします。

.px10 {font-size: 10px;}
と記述した場合、
class指定では
<p class="px10"></p>
と書きます。
書き方が誤っているため、スタイルが適応されていないだけだと思います。

Qtableのcellpadding="0" cellspacing="0"をCSSで

tableのcellpadding="0" cellspacing="0"をCSSで設定する方法を検索したところ、
border-collapse:collapse;
border-spacing:0;
というアドバイスが記載されていました。
実際に使ってみたのですが、
どうしてもセル余白とセル間隔が発生してしまいます。
どうしたらよいですか。

Aベストアンサー

border-spacingはborder-collapseの値がseparateのときしか有効にならないそうです。
http://www.htmq.com/style/border-spacing.shtml

サンプルが
http://www.htmq.com/style/border-collapse.shtml
にあるので参考にしてください。

# それにしてもこんなプロパティがあるとは知らなかった…

参考URL:http://www.htmq.com/style/border-spacing.shtml

Qリンクの下線を消したいのに消せない(CSS)

自分でタグを入力して、XHTMLとCSSでサイトを作っているのですがどうしても解決できない問題があるので質問させていただきます。

サイトの各ページに飛ぶテキストリンクをページの上部に作っていて、そのリンクを

・通常時(a:link)は・・・・・・・・下線なし
・訪問後(a:visited)は・・・・・・・下線なし
・マウスオーバー時(a:hover)は・・・下線あり

というふうにしたいので、CSSに書いたのですがどの場合においても下線が表示されてしまいます。

CSSをどのように書き直せば、上記のように下線が表示されるのでしょうか教えてください。

XHTML:http://love.meganebu.com/~twilight/question/index.html

CSS:http://love.meganebu.com/~twilight/question/mainstyle.css

Aベストアンサー

このあたりのサイトが参考になるかと。
http://www.tagindex.com/stylesheet/link/text_decoration.html

Qテーブルセル余白(例えば左側だけ、上側だけ、など)

こんにちは。
宜しくお願いいたします。

テーブル内のコードに、cellpadding="5" は
セル余白が上下左右のすべて、5ピクセル空きますが、

左側だけ5ピクセル、とか、上側だけ5ピクセル、のように
指定方向のみ、余白を作ることは可能でしょうか。

その場合のHTML記述を教えてください。

また、ここで質問させていただいている「指定方向への余白指定」と
全体余白指定の「cellpadding="XX"」は同時に使って
良いものでしょうか。
素人質問ですみません。
宜しくお願いいたします。

Aベストアンサー

1つのセルだけなら、下記で。
<td style="padding: 5px 10px 20px 30px;">
上の例は、上が 5px。 右が 10px。下が 20px。 左が 30px。
適当に数値変更してください。
cellpadding="5" と style="padding: 5px;"は同じになるはず。
<td style="padding: 5px;">

両方使うとどうなるかは、試して下さい。
cellpadding をここ数年利用していないので・・・

複数個所利用するなら、NO.1さんを参考に HEAD内に下記を入れて試してみましょう。
<style type="text/css">
<!--
td {padding: 5px 10px 20px 30px;}
-->
</style>


このQ&Aを見た人がよく見るQ&A

人気Q&Aランキング