CSSで文字サイズを固定する方法

このQ&Aのポイント
  • ホームページ作成中のページレイアウトで、文字サイズを固定したい場合はCSSを使用します。
  • しかし、CSSで文字サイズを指定してもブラウザによっては変化してしまうことがあります。
  • この問題を解決するためには、適切なCSSの指定方法を行う必要があります。
回答を見る
  • ベストアンサー

CSSで文字サイズを固定

ホームページ作成中です。 ページレイアウトを誰でも同じように見せたいため文字サイズを固定しようと思います。 でも、うまく出来ません。 CSSファイルを別に準備する方法でやっています。 ---------- BODY { color : #666666; font-size: 12px; background-image : url(img/bg.gif); } ---------- こうしてみたのですが、ブラウザで大とか小とかにすると変化してしまいます。 CSSを読み込んでないのかな?と思ってカラーを書き換えてみたのですが、こちらはちゃんと変化します。 何が間違っているのでしょう?

  • CSS
  • 回答数3
  • ありがとう数2

質問者が選んだベストアンサー

  • ベストアンサー
  • sun-ward
  • ベストアンサー率54% (86/159)
回答No.1

ソースは間違っていません。 ただ、固定させたい文字が、例えば<TD>タグなどの中にないでしょうか。 この場合、文字サイズに関しては<TD>タグに指定されたスタイル(現在指定なし)が優先されるので サイズが大小してしまうのだと思います。 TD { font-size: 12px; } などと付け加えれば問題ないと思います。

master-3rd
質問者

お礼

ありがとうございます。 これを入れた後も動くのでおかしいな?と思ってたら、動く場所にsize=-1を入れてました。 削除したら、無事スタイルシートのサイズが反映されました。

その他の回答 (2)

  • ao_
  • ベストアンサー率33% (15/45)
回答No.3

WinのIEだけなら#1さんのおっしゃるように、要素の直近のタグにスタイルで絶対値(pxとかpt)を指定すれば固定できます。 ただし、WinIE以外のブラウザやMacでは全てのブラウザで絶対的なフォントの指定は無効になります。 ユーザービリティ的に考えてもフォントサイズは可変の状態にした方が良いと思いますよ。フォントサイズが大きくなり改行されてもちゃんと情報が伝わるようなデザインにした方が良いと思います。

noname#83116
noname#83116
回答No.2

#1さんのような方法を用いても、IE 以外のブラウザでは簡単に文字サイズの変更をされてしまいますよ。 つまり、どのような環境においても文字サイズの変更を禁止する方法は存在しません。

関連するQ&A

  • cssでbodyタグのtopマージを0にしているのですがスペースが。。。

    cssでbodyタグのtopマージを0にしているのですがスペースが空いてしまいます。 下記がCSSです。 /* body */ body,td,th { color: #000000; } body { background-color: #FFFFFF; margin-left: 0px; margin-top: 0px; background-image: url(share_img/bg_back.gif); } CSSを外部ファイルにする前は、TOPは空くことは無かったのですが、 CSSを外部ファイルにした途端、空いてしまうようになってしまいました。 どうしても方法がわからなくて困ってます。 どなたかご教授お願いします。

    • ベストアンサー
    • HTML
  • CSSでIE6だけ出る隙間をなくしたい

    お世話になります。 CSSとtableを組み合わせてレイアウトをしています。 WindowsのIE7やSafari、Netscapeでは正常に表示されるのですが、 IE6では<div>と<div>の間に1、2pxの白い隙間が出てしまいます。 htmlは下記にアップしています。 http://www.couleurcafe.jp/08/ ホーム、メニューといったメインメニューの行と、 赤地に白文字のヘッダーメニューの行の間に隙間が出てしまいます。 CSSは以下の通りです。 @charset "Shift_JIS"; body { margin: 0; padding: 0; background-image: url(img/bodybg.gif); } #wrapper { width: 780px; margin-right: auto; margin-left: auto; margin-top: 0px; margin-bottom: 0px; text-align: left; background-color: #FFFFFF; } #mainmenu { background-image: url(img/menubarbg.gif); background-repeat: repeat-x; width: 766px; height:29px; margin-left: 14px; margin-bottom:0px; padding-top:1px; } #menublock { background-image: url(img/menubg.gif); background-repeat: no-repeat; width: 88px; height:29px; font-size: 12px; color: #000000; text-align: center; height: 16px; padding-top: 12px; } #menublock_over { background-image: url(img/menubg_over.gif); background-repeat: no-repeat; width: 88px; height:29px; font-size: 12px; color: #FFFFFF; text-align: center; height: 20px; padding-top: 8px; } #headermenu { background-color: #E10C0A; width: 772px; height: 12px; font-size: 11px; color: #FFFFFF; text-align: right; padding: 4px; } この隙間をなくす方法はないでしょうか。 CSSのおかしいところがあればご指摘をお願いいたします。 どうぞよろしくお願いいたします。

    • ベストアンサー
    • HTML
  • CSSのpositonでフッタを下部に固定したのですがIE6でズレてしまう原因が分からないので教えてください

    こんばんは、CSSのpositionで下部にフッタを固定する為に設定したらwinIE6で見るとフッタだけ右にずれてしまいます。 当方Mac、osXで主にドリームウィーバーに手打ちです。safari、frefoxではずれませんでした。ソースを省略すると原因が分からないのでCSSを全部載せます。 アドバイスいただけると大変うれしいです。お願いいたします。 html,body{ text-align:center; margin: 0px; background:#FFFFFF; height:100%; } #countainer{ position: relative; height: 100%; min-height:100%; } #contents { padding-bottom:50px; } #header{ height:106px; background-image: url(img/headbg.gif); background-repeat: repeat-x; } #logo { width: 800px; height: 96px; text-align: left; padding: 10px 0 0 0; margin: auto; background-image: url(img/bg_navi.gif); background-repeat: no-repeat; background-position: 100% 100%; } #logo img{ float: left; } #navi{ width: 600px; float: right; } #navi ul{ margin:75px 11px 0 0; padding:0; } #navi li{ width: 100px; height: 21px; float: right; margin:0; padding:0; list-style-type:none; text-align: center; font-family: Geneva, Arial, Helvetica, sans-serif; font-size: 14px; font-weight: bold; line-height: 100%; background-image: url(img/bg_navi.gif); background-repeat: no-repeat; background-position: 0% 100%; } #navi a:link,#navi a:visited{ color:#635142; padding: 0 0 0 12px; } #navi a:hover{ color:#FF6633; text-decoration:none; } #navi a.s:link,#navi a.s:visited{ color:#B59980; } #main{ width: 800px; margin: auto; text-align:left; font-size:80%; } #main .topimg{ width:500px; float:left; text-align: center; } #main .news{ width:300px; height:300px; float:right; background:url(images/bg_news.gif) no-repeat 0px 20px; } #main .news p{ margin:50px 40px 0px; color: #5D4F41; line-height: 150%; font-size: 12px; } #main .body{ width:550px; float:left; clear:both; } #main .body p{ margin:10px 5px; } #main .menu{ width:183px; float:left; font-size:12px; } #main .tabmenu{ width:250px; float:right; } #main h1 span.jp{ font-size: 12px; letter-spacing: normal; font-family:"MS Pゴシック","Osaka","ヒラギノ角ゴPro"; } #main h2{ margin: 30px 0 5px 0; padding:3px; border-bottom: 4px double #83684F; font-size:180%; color: #333333; clear: both; } #main h3{ margin: 30px 0 5px 0; padding:3px; background-color: #83684F; font-size:120%; color: #FFFFFF; clear: both; } #main th{ padding: 3px 5px; background-color: #F3EBDC; border-bottom:1px solid #83684F; text-align:left; font-weight: normal; color:#A07D5E; } #main a.mail{ padding:5px 0 5px 30px; background:url(images/btn_mail.gif) no-repeat 0px 0px; color: #FF0000; } #main a.mail:hover{ background:url(images/btn_ov_mail.gif) no-repeat 0px 0px; } #main .box{ width:183px; float:left; } #main .box img{ margin:0 8px; filter:chroma(color=#FFFFFF); } #main .box h3{ margin: 0 10px; padding: 3px; font-size:100%; color:#A07D5E; position: relative; top: -10px; background-color: #F3EBDC; } #main .box p{ margin: 0 10px; padding: 0; font-size:10px; top: -5px; position: relative; } #footer{ clear:both; color:#666; font-family: Arial, Helvetica, sans-serif; border-top-width: 3px; border-top-style: solid; border-top-color: #D8D8D8; position: absolute; bottom: 0px; margin:auto; text-align: center; font-size: 75%; height: 30px; width: 100%; } #main .body #mn6 { margin-top: 20px; } /*----------------------------span-*/ span.tel{ font-size:24px; font-family:Arial, Helvetica, sans-serif; font-weight:bold; color:#424242; line-height: 24px; } /*-------------------------------------for any--*/ .clear{ clear:both; line-height:1px; } #main .body p { margin-left: 15px; } #main .topimg { margin-top: 20px; }

    • ベストアンサー
    • Mac
  • CSSでの影の付け方

    http://radiocaroline.jp/ 上記のサイトのようにコンテンツ表示領域と 背景領域の間のグラデーション部分はどのように 設定すればいいのでしょうか? 現在真ん中780px固定で左右を背景画像にしてます。 <style type="text/css"> <!-- body { background: #000000; margin: 0px; padding: 0px; text-align: center; color: #ffffff; background-color: #000000; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 100%; background-image: url(images/bg.gif); background-repeat: repeat; } .oneColFixCtrHdr #container { width: 780px; background: #000000; margin: 0px auto; text-align: left; } .oneColFixCtrHdr #header { padding: 0px; background-color: #000000; } .oneColFixCtrHdr #header h1 { margin: 0px; padding: 0px 0px; } .oneColFixCtrHdr #mainContent { padding: 0px; background-color: #000000; } .oneColFixCtrHdr #footer { padding: 0px; background-color: #000000; } .oneColFixCtrHdr #footer p { margin: 0px; padding: 5px 0px; } #left { background-color:#000000; width:530px; float:left; } #right { background-color:#000000; width:250px; float:left; } .style2 { color: #FFFFFF; font-size: 80%; } .style1 {font-size: 60%; color: #CCCCCC; } .style6 {color: #CCCCCC} .style7 {font-size: 70%} --> </style>

  • cssで指定した文字の大きさがIE6とIE7で違う

    cssでレイアウトを指定したサイトを作りました。 IE6、Opera9、Firefox2でうまく表示ができました(微妙にFirefoxだけ文字の大きさが小さいですが、ほぼレイアウトにあっています)。 が、先日IE7で確認するとフォントサイズが大きくなっていました。 cssではfont-sizeを、bodyが12px、各id、classはそれぞれ11px、10pxとしました。 IE7だと13pxくらいに見えてしまい、レイアウトをはみ出て表示されています。 IE7をIE6と同じフォントサイズにするにはどのように指定すればよいのでしょうか? ちなみに文字の大きさは固定でブラウザで大きさを変更できないようにしたいのです。 すみませんがよろしくお願いします。

  • CSS 文字サイズ変更

    ホームページでよく見かける 文字サイズの「大」「中」「小」ボタンをクリックすると 閲覧中のページのフォントサイズが変わるという物を作成しています。 (※ブラウザの設定ではありません。) スタイルシートを切り替える方法で実現できました。 小:12px ← デフォルトに設定 中:14px 大:16px 「大」「中」「小」ボタンをクリックした段階でフォントサイズも変わりますが、 現在選択されているサイズがわかるように、 ボタンも反転して色を変えています。 ここまではうまく行っているのですが、 別のページに移動した時に先程選択したフォントサイズ+ボタンの反転が引き継がれず、 デフォルトの12pxに戻ってしまいます。 引き継がれるようにしたいのですがどのようにすればよいのか 色々試行錯誤してはみたものの解決しません。 参考になるような解説サイトがありましたら教えていただけませんか?

  • CSSについて教えて下さい

    ホームページビルダーでの経験しかない初心者です。CSSに挑戦していますが不明な点ばかりです。 無料テンプレートを加工していますが下記の内容を教えて頂けませんか。 topとtop2の左側(上下位置は中間)に私が追加したtop3の画像を 表示させたいのですがうまくできません。宜しくお願いいたします。 CSS #bodyid{ background:#eafefe url('img/bg.png'); padding:0; margin:0; text-align:center; } #bg{ width:706px; background:#fff; margin:0 auo; } #top{ width:400px; height:80px; background:url('img/title1.gif') no-repeat center top; text-align:left; } #top2{ width:400px; height:60px; background:url('img/title2.gif') no-repeat center top; text-align:left; } #top3{ position:absolute; left 120px; top 30px; width:100px; height:80px; background:url('img/image555.gif') no-repeat center top; } html <body id="bodyid"> <DIV id="bg"> <div id="top"></div> <div id="top3"></div> <div id="top2"></div>

  • IE,Firefoxでbodyの背景画像が表示されません。

    IE8とFirefox3.0で、 cssでbodyに入れている background-image、background-colorがどちらも適用されません。 Sleipnir2.8.5ではきちんと表示されます。 ですので、htmlはあっているかと思います。 一通り、タグぬけがないかとかも、調べてみましたが、 特にないようです。 いろいろ調べてみましたが、わかりません。 hasLayout対策とかも試してみました。 (width や position をいれるなど) 下記がbodyのcssです。 body { color: #333; text-align: center; font-family: "MS Pゴシック", Osaka, "ヒラギノ角ゴ Pro W3"; font-size: 14px; background-color: #FFFF66; background-image: url("img/bg.jpg"); background-position: center top; background-repeat: repeat-y; margin: 0px; } 教えていただけると、 大変助かります。 よろしくお願いいたします。

  • css 各divの内容を上に揃えたいです。

    こんにちは、初心者です。宜しくお願いします。 <main>の右は<side2>ですが、mainの画像BBBの真横に、side2の内容が表示されず、真横ではなくて、BBBのやや斜め右下に表示されるんです。 全体を中央揃えにしてから、このような問題にぶつかりました。 mainとside2の内容を上先頭で揃え、ブラウザの大きさを変えても中央を基準に内容も動くようにしたいです。 ご教授のほど、よろしくお願い致します。 ---------------------------------------------- <html> <head> <title>○○</title> <link href="design/shop_index02.css" rel="stylesheet" type="text/css"> </head> <body> <div class="contents"> <div class="top"> <h1>○○</h1> <h2> ○○</h2> </div> <div class="middle"> <a href="○○"> <img src="../img/logo.gif"></a> </div> <div class="main"> <a href="●●"> <img src="BBB"></a> </div> <div class="side2"> <a href="●●"> <img src="●●.gif"></a> <h3>●●</h3> <p>●●</p> </div> </div> </body> </html> ---------------------------------------------- /*ページのレイアウト用css*/ body{ margin:0px; padding:0px; background-color:#BDB76B; text-align:center; } body a img{ border: none; } .contents{ width:900px; height : 2700px; background-image:url(○○); margin:auto; text-align:left; clear:both; } h1{ color:#c0c0c0; font-size:12px; text-align:center; font-family:"MS 明朝"; } h2{ font-size:10px; font-family:"MS P明朝","細明朝",serif; color:#c0c0c0; margin-left:8px; } h2 a{ font-family:"MS ゴシック","osaka,sans-serif"; font-size:10px; color:#CC6600; } h3{ font-size:13px; font-family:"MS P明朝","細明朝",serif; color:#669900; } h3 img{ margin-left:720px; } .top{ width:900px; height:170px; margin-left:80px; } .middle{ width:900px; height:170px; margin-left:100px; color:#999999; margin-top:40px; } .main { width:700px; margin-top:60px; margin-left:80px; float:left; } .side2{ width:200px; margin-top:60px; margin-left:700px; } .side2 p{ color: #999999; font-family:"MS P明朝","細明朝",serif; font-size:10px; width:160px; text-align:left; } .side2 a{ color:#CC6600; text-decoration:none; }

    • ベストアンサー
    • HTML
  • CSS floatについて教えて下さい。

    【html】 <div id="wrapper"> <div id="top"></div> <div id="middle"> <div id="a"></div> <div id="b"></div> </div> </div> 【css】 * { margin:0; padding:0; } body { background:url(../img/common/bg.gif) repeat} #wrapper { width:800px; margin:0 auto;} #top { background:url(../img/common/contents-flame-top.gif) no-repeat; height:30px;} #middle { background-color:#FFF; padding:0 50px 100px 50px;} #a { float:left; width:360px; height:100px; background-color:#009966;} #b { float:left; width:340px; height:150px; background-color:#CC0033;} ------------------------------------- 上記でdivのaとbにfloatの設定をしないと#middleの中にaとbが入るのですが、floatの設定を入れると#middleの外にaとbが出てしまいます。 どこが間違っているのか教えて頂けますか?初心者ですので、よろしくお願い致します。

    • ベストアンサー
    • HTML

専門家に質問してみよう