- ベストアンサー
スタイルシートが効かない
bodyに以下のスタイルを適用しています。 body { margin-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; font-family: 'Arial', 'ＭＳ Ｐゴシック', sans-serif; font-size:12px; line-height:150%; color:#333333; } フォントサイズを12にしているのですが 別のフォントサイズとしてクラスで10pxを指定しても WindowsIEだと、10pxに表示されません。 また、bodyの12pxの指定をはずしても 10pxの指定が反映されませんでした。 ただし、16pxなど他のクラスだと反映されます。 10pxが反映されない理由が分かりません。 どなたかお分かりになる方 いらっしゃいましたら、ご教授願います。 よろしくお願いします。
- eanak---
- お礼率80% (66/82)
- その他(業務ソフトウェア)
- 回答数3
- ありがとう数3
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
その他の回答 (2)
- shinkun0114
- ベストアンサー率44% (1553/3474)
文字サイズ指定にはpxも使えます。 試しに以下のソースを作ってIEで表示してみましたが、ちゃんと反映されますよ？ bodyのスタイルシート指定は、質問者さんのものをそのまま貼りました。 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Style-Type" content="text/css"> <STYLE type="text/css"> <!-- body { margin-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; font-family: 'Arial', 'ＭＳ Ｐゴシック', sans-serif; font-size:12px; line-height:150%; color:#333333; } --> </style> </head> <body> <span style="font-size:10px">10px</span><BR> 12px<BR> <span style="font-size:14px">14px</span><BR> <span style="font-size:16px">16px</span><BR> </body> </html>
お礼
ご回答いただきありがとうございます。 Dreamweaverで試したところ、 操作画面では反映されているのですが、 プレビューすると12pxと10pxが同じフォントサイズになっています。 これは私のブラウザの問題なのでしょうか？ お分かりになりましたら、教えていただけると助かります。 よろしくお願いします。
- raven497
- ベストアンサー率26% (4/15)
fontの場合はpxではなくptだと思います。 16で有効というのが気になりますが。
お礼
ご回答いただきありがとうございます。 いままで、pxで指定できていたので困惑しています。 では、pxで指定したい場合はどのように書けばよろしいのでしょうか？ 教えていただけますでしょうか？
関連するQ&A
- divにも同じフォントスタイルを適用したい
現在 p { color : #222222;} p { font-family: Arial, Helvetica, sans-serif;} p{ margin: 1px 0px 1em 0px; font-size:95%; line-height:103%; } このような指定をしてあります。 しかしセンタリングなどに <div style="text-align:center;">のタグを使用するとセンタリングはされますけれど、上記CSSが反映されませんよね。 あちこちのHPを参考に色々試行錯誤をしていますけれど上手く反映されません。 div { color : #222222;} div { font-family: Arial, Helvetica, sans-serif;} 以下略 div.test 等に変えても同じです。 どこがダメなのでしょうか？
- ベストアンサー
- HTML
- スタイルシート font-familyについて
ブログのスタイルシートをいじっているのですが、ブログの記事名、ブログ本文のフォントをComic Sans MSにしたいと思っています。 それでフォント名をComic Sans MSに指定するのですが、反映されません。 また、試しにHGP行書体にすると、きちんと反映されました。 他の「カテゴリー」「コメント」等、サイドメニューの書体はちゃんとComic Sans MSに変わります。 どうすれば、Comic Sans MSになるのでしょうか。 初心者なので、どこが間違っているのかが分かりません。 下は私の作っているスタイルシートです。 div.article_subject { color: #000000; font-size: 22px; font-weight: bold; font-family: Comic Sans MS,"ＭＳ Ｐゴシック",Arial,Helvetica,sans-serif; } よろしくお願いいたします。
- ベストアンサー
- CSS
- fc2ブログのスタイルシートについて
h1～h6タグの文字の大きさ＆改行（しない）を変更したいのですが、 fc2ブログのスタイルシートのどこに書き込めばいいのか分からない状態です。 色々調べてみたのですが、どうしても分からないので、分かる方がいましたら、教えて下さい。 よろしくお願いします。 ソースは、こちらになります。 （文字数が足りないので数ヵ所省きました）↓ body{ font-family: "Verdana","ＭＳ Ｐゴシック", "MS UI Gothic","Arial","Osaka"; margin:0px; margin-left:auto; margin-rught:auto; padding:0px; background-color: #FFFFFF; color:#666666; text-align:center; letter-spacing:1px; word-break: break-all; } #container{ width:840px; margin-right:auto; margin-left:auto; padding:0px 0px; background-color: #FFFFFF; border-left:1px solid #DECE21; border-right:1px solid #DECE21; } /* ### 共通のタグ ### */ blockquote{ font-family: "MS UI Gothic","Verdana","ＭＳ Ｐゴシック", "Arial","Osaka"; margin:15px 0px; padding:10px; background-color:; border:1px dashed #996600; font-size:12px; line-height:150%; width:90%; voice-family:"\"}\""; voice-family:inherit; width:90%; } html>body blockquote{ width:90%; } blockquote p{ margin:0px 0px; padding:0px; line-height:150%; } h1.blogtitle{ position:absolute; width:820px; font-family: "Century Gothic","MS UI Gothic","ＭＳ Ｐゴシック", "Arial","Osaka"; padding:0px; margin:0px; top:3px; left:20px; color:#333333; font-size:24px; font-weight:normal; z-index:1; } h1.blogtitle_back{ position:absolute; width:818px; font-family: "Century Gothic","MS UI Gothic","ＭＳ Ｐゴシック", "Arial","Osaka"; padding:0px; margin:0px 0px 0px 1px; top:4px; left:21px; color : #CCCCCC; font-size:24px; font-weight:normal; z-index:0; } /* ### メイン部（左側） ### */ #main{ width:590px; float:left; margin:0px; padding:0px; } #contents{ margin:0px 20px 0px 20px; padding:0px; text-align:left; width:590px; voice-family:"\"}\""; voice-family:inherit; width:550px; } html>body #contents{ width:550px; } /* ### エントリー（記事） ### */ .e_title{ font-family: "MS UI Gothic", "Verdana","ＭＳ Ｐゴシック", "Arial","Osaka"; height:20px; text-indent:60px; margin: 0px 0px 0px 0px; padding: 10px 0px 0px 0px; color:#967B3F; font-size:14px; font-weight:bold; letter-spacing:1px; } .e_date{ font-family: "Verdana","ＭＳ Ｐゴシック", "MS UI Gothic", "Arial","Osaka"; margin:0px 0px 30px 60px; text-align:left; color:#999999; font-size:10px; line-height:150%; letter-spacing:1px; } .e_body{ font-family: "MS UI Gothic","Verdana","ＭＳ Ｐゴシック", "Arial","Osaka"; margin:0px 0px 15px 0px; margin-bottom:25px; padding:0px ; color:#444444; font-size:12px; line-height:155%; letter-spacing:1px; } .e_body img, .e_body a img{ margin:2px; border:0px; } .e_body_w{ margin:0px; padding:5px 15px 5px 15px; background-attachment: scroll; background-image: url(http://blog-imgs-41.fc2.com/a/w/i/awitchsally/aws_np03_point.gif); background-repeat: no-repeat; background-position: 0% 0%; border:1px solid #E9F3E9; } .e_more{ margin:30px 0px 15px 0px; padding:0px; text-align:left; color:#333333; font-size:10px; font-weight:bold; letter-spacing:1px; } .e_state{ font-family: "Verdana","ＭＳ Ｐゴシック","MS UI Gothic", "Arial","Osaka"; margin:5px 0px; text-align:left; color#967B3F; font-size:10px; letter-spacing:1px; line-height:150%; font-weight:bold; }
- ベストアンサー
- HTML
- CSSでbodyに入ってるこの意味は何でしょうか？
あるサイトのCSSのbodyのfont sizeに 12px/1.22 "Osaka", "ＭＳ Ｐゴシック", Arial, sans-serif と、記述していましたが /1.22とは何を意味してるのでしょうか？
- ベストアンサー
- HTML
- Firefoxで文字がimgの裏側に入ってしまう
CSSでHPを作成しています、 ie6・7・8では下記ソースheader部分にimgを入れて<p>・・・</p>で 文字を上に表示しています、 ie6・7・8では思い通り表示されますがFirefoxでは<p>・・・</p>の文字が表示されません、imgの下側（裏側）になっているのか？ 下記にソースとCSS記述を書きましたので解決方法を教えてください。 ソース記述 <body><!-- Container --> <div id="container"><!-- Header --> <div id="header"><img src="img/logotop.gif" width="800" height="143" /> <h1>ブルベリーパン</h1> <p>ブルベリーパンを作って39年、厳選された素材と<br /> 熟成されたパン生地が生み出す匠の味、1日限定350個<br /> </p> <dl> <dd>：：：：：：：：：：：：：<br /> ・・・・・・・・・・・・・・・・・<br /> ・・・・・・・・・・・・・・・・・<br /> <dd> </dl> </div> CSS記述 #header{ margin-bottom : 0px; } #header h1{ font-size : 8px; color : #4a7aab; font-weight : 100; margin-top : -144px; margin-left : 0px; margin-right : 0px; margin-bottom : 0px; } #header p{ font-size : 13px; color : #000000; margin-top : 4px; padding-left : 3px; line-height : 1.6; margin-left : 10px; padding-top : 65px; font-family: Arial,"ＭＳ Ｐゴシック","MS UI Gothic",Osaka,Sans-Serif; width : 500px; float : left; } #header dd{ font-size : 13px; color : #4a7aab; margin-top : 0px; line-height : 1.4; font-family: Arial,"ＭＳ Ｐゴシック","MS UI Gothic",Osaka,Sans-Serif; }
- 締切済み
- HTML
- CSSでエラーが出ました
CSS初心者です、宜しくお願いします。 CSS Validatorで検証した結果 文法解析エラーが発生しましたtext04 p・・・ @layout-grid-line : 1.8; text04 p・・・Parse error - Unrecognized } と結果が出ました、 以下CSS記述 .text04{ font-size : 16px; font-family: Arial,"ＭＳ Ｐゴシック","MS UI Gothic",Osaka,Sans-Serif; line-height : 1.8; color : #666666; background-color : #ffffff; margin-left : 0px; width : 662px; padding-left : 10px; } .text04 p{ font-size : 14px; font-family: Arial,"ＭＳ Ｐゴシック","MS UI Gothic",Osaka,Sans-Serif; line-height : 1.8; color : #666666; background-color : #ffffff; margin-left : 0px; layout-grid-line : 1.8; } どなたかご指導ください、お願いします。
- ベストアンサー
- HTML
- CSS ブログ本文とサイドバーのバランス
質問させてください！ weeblyの2カラム標準テンプレートを使用しweb siteを運営しているのですが、 両端の空白をもう少し縮め、本文とサイドバーをその分広げたいと思い、CSSを 調整しようと調べながら各数値を変更してみたのですがうまくいきません。 どの数値を変更するべきなのか教えていただけたらと思います。 理想のサイトのリンク先も貼付けておきます。 http://www.fecalface.com/ body { background-color:#fff; font-family:"helvetica",arial,sans-serif; font-size:62.5%; color:#777; margin:0; padding:0; } acronym { cursor:help; border-bottom:1px dotted #ddd; } #container { font-size:1.2em; width:800px; margin:0 auto; } #header { color:#444; margin:0; padding:0px; background:#fff url(%%HEADERIMG%%) no-repeat bottom right; } #header h1 { font-family:"helvetica",arial,sans-serif; font-size:2em; color:#333; margin:30px 0 0 0; font-weight:normal; line-height:1.5; } #header h1 strong { color:#c00; } #header h2 { margin:1000px 0 0 0; font-size:1em; font-weight:normal; color:#999; } #navigation { text-align:right; margin:10px 10px 10px auto; } #navigation { margin:0 10px 0 0; padding:0; } #navigation li { margin:0; padding:0; list-style:none; display:inline; } #navigation li a { padding:5px 6px 2px 4px; margin:0 2px 0 0px; color:#000000; text-decoration:none; font-weight:helvetica; border-bottom:1px solid #ddd; } #navigation li a:hover { color:#C00; border-bottom:1px solid #c00; } #active a:link { color:#C00; border-bottom:1px solid #c00; } #active a:hover { color:#C00; border-bottom:1px solid #c00; } #active a:visited { color:#C00; border-bottom:1px solid #c00; } #content { margin:20px 0 20px 10px; padding:0; } #content p { padding:2px; text-align:justify; line-height:1.5; } #content h1 { display:block; margin:50px 0 0 10px; padding:0; font-family:"helvetica",arial,sans-serif; font-size:1.8em; color:#c00; border-color:#ddd; border-style:solid; border-width:0 0 1px 0; } #content h2 { display:block; margin:40px 40px 0 0px; padding:0 長くなってしまいましたがよろしくお願いします！
- ベストアンサー
- HTML
- 一部のパソコンでスタイルシートが読み込まない
こんにちわ 以下のスタイルシートを使っていますが一部のパソコンで読み込みにいかないような現象が起こっています。 相手のブラウザーはインターネットエクスプローラの６でOSはXPです。 サイトフォルダ内にCSSフォルダーを設けてその中のスタイルシートをいれています。 HTMLソース <LINK rel="stylesheet" href="css/body.css" type="text/css"> スタイルシート↓ h1 { font-size:12px; font-weight:100; margin:0px; padding:00px 0px 0px 00px; color:#FFFFFF; } h2 { font-size:12px; font-weight:100; margin:0px; padding:00px 0px 0px 00px; } h3 { font-size:12px; font-weight:100; margin:0px; padding:00px 0px 0px 00px; } h4 { font-size:12px; font-weight:100; margin:0px; padding:00px 0px 0px 00px; } STRONG { font-size:12px; font-weight:100; margin:0px; padding:00px 0px 0px 00px; } em {font-size:12px;line-height:12px;font-weight : normal;normal;margin:0px;} .t0 {font-size:10px;} .t0h12 {font-size:10px;line-height:12px;} .t0h14 {font-size:10px;line-height:14px;} .t0h16 {font-size:10px;line-height:16px;} .t1 {font-size:12px;} .t1h14 {font-size:12px;line-height:14px;} .t1h16 {font-size:12px;line-height:16px;} .t1h18 {font-size:12px;line-height:18px;} .t2 {font-size:14px;} .t2h16 {font-size:14px;line-height:16px;} .t2h18 {font-size:14px;line-height:18px;} .t2h20 {font-size:14px;line-height:20px;}
- ベストアンサー
- HTML
- MacIEで、floatが効かない
MacのIEで、テキストとテキスト内に配置した画像を表示させるため、 floatの指定をしていますが、 どうしても、画像の周りにテキストが回りこみません。 これは何か原因があるのでしょうか？ ちなみに、指定しているスタイルは以下の通りです。 .colum{ clear: both; width:280px; padding:0px; margin:20px 0px 20px 20px; text-align:left; font-size:small; line-height:160%; color:#333333; font-family: Arial, Helvetica, "ＭＳ Ｐゴシック",Osaka, sans-serif; } お分かりになる方、ご教授いただけると幸いです。 よろしくお願いします。
- 締切済み
- その他(業務ソフトウェア)
- リンク文字を好きな位置に表示したい
お忙しいところすいません。 ホームページ（トップページ）上において、リンク文字を好きな位置に表示したいのですがどのようにしたらうまく表示できますか？。 現在、以下のように記述していますが、これだと改行して表示するだけなので、ランダム配置させたいと思っています。 これは可能でしょうか？。 また、そのようなサンプルサイトがあれば教えていただきますでしょうか？。 よろしくお願いいたします。 ＜html記述＞ <div id="menu"> <a href="test1.html" title="トップ" class="moji1">トップ</a> <a href="test2.html" title="テスト" class="moji2">テスト</a> </div> ＜css記述＞ .moji1{ margin : 100px 10px 50px 60px; font-family : Arial,'ＭＳ Ｐゴシック',sans-serif; font-weight : bold; font-size : 48px; } .moji2{ margin : 50px 10px 80px 260px; font-family : Arial,'ＭＳ Ｐゴシック,sans-serif; font-weight : bold; font-size : 48px; }
- ベストアンサー
- HTML
お礼
ありがとうございます！ 順番を入れ替えて、見事成功しました！！ こういうことなんですね。 勉強になります。 改めて、ありがとうございました。