divにも同じフォントスタイルを適用したい

このQ&Aのポイント
  • div要素にフォントスタイルを適用する方法
  • センタリングした場合にCSSが反映されない問題への対処方法
  • 他の要素名を使用してもフォントスタイルが反映されない問題への対処方法
回答を見る
  • ベストアンサー

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 等に変えても同じです。 どこがダメなのでしょうか?

noname#226929
noname#226929
  • HTML
  • 回答数2
  • ありがとう数3

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

  • ベストアンサー
  • 0wl
  • ベストアンサー率43% (10/23)
回答No.2

div,p {              /* div,を増やしました。 */     color : #222222;       /* p要素の指定をまとめました。 */ font-family: Arial, Helvetica, sans-serif;} body { background-color:#e0ffe0;} a:link { color : #0000ff; } a:visited { color : #003333; } a:hover { color : #660000; } a:active { color:#660066;} p{ margin: 1px 0px 1em 0px; font-size:95%; line-height:103%; } ではどうでしょう? pは段落というブロック要素、divは特定の意味のないときにつける、ブロック要素。 「p」も「div」もセレクタになれるが、別のものなのでpにした設定(プロパティと値のセット)をdivにも効かせたいなら、「,」で区切り同時に指定するか、p{}の中に改めて入れなくてはなりません。 ちなみに、div.testならhtml側で<div class="test">とdivの中でもクラスを指定するといいです。 そして、cssだけ出されてもhtmlが分からないので問題が細かくなってくると想像の範囲を超えていきますので、次回からcssの質問をされるときは、html側のソースもアップされると、回答がつきやすくなると思います。

noname#226929
質問者

お礼

ありがとうございます! 出来ました。 本当にありがとうございます。

その他の回答 (1)

  • notnot
  • ベストアンサー率47% (4847/10258)
回答No.1

p要素の中に、div要素を入れているのでしょうか?p要素の中にはインライン要素しか入れてはいけません。 <p> <div>~~</div> </p> と書くと、 <p></p>・・・・・自動的に</p>が補われる <div>~~</div> </p>・・・・無効な閉じタグ と見なされます。 スタイルで、 div { color: #222222; } と書いて、 <div style="text-align: center">~~</div> と書くと、両方効くはずですが、もしそうならないなら、そうならないコード全体を書いて下さい。

noname#226929
質問者

お礼

インライン要素とブロック要素というものがあるんですね。 ありがとうございます! もう少し悪戦苦闘してみます!

noname#226929
質問者

補足

<p>~</p>の間には入れていません。 @charset "UTF-8"; p { color : #222222;} p { font-family: Arial, Helvetica, sans-serif;} body { background-color:#e0ffe0;} a:link { color : #0000ff; } a:visited { color : #003333; } a:hover { color : #660000; } a:active { color:#660066;} p{ margin: 1px 0px 1em 0px; font-size:95%; line-height:103%; } CSSはこれです。

関連するQ&A

  • CSS2.1とCSS3の違いを教えて下さい。

    HTMLの勉強中の作家です。 色々悩んだ末にサイトをHTML5に移行作業中です。 テキストを読んでもCSS3の書式がイマイチよく分かりません。 (CSS2.1の)指定は背景色、文字色(1部文字色変更含む)、フォントの種類、背景色etcetc…と言った至ってシンプルな文字のみのサイトです。 あちこちのサイトを見ながら悪戦苦闘をしていますが、CSSのチェックをかけるとエラーが出ます。 CSS2.1を3にするためにはどこをどう変えれば良いのでしょうか? ちなみに @charset "UTF-8"; .ryoko { color : #407133;} .kazumi { color : #336070;} div,p { color : #222222;} p { font-family: Arial, Helvetica, sans-serif;} body { background-color:#e0ffe0;} a:link { color : #0000ff;} a:visited { color : #003333;} a:hover { color : #660000;} a:active { color:#660066;} p{ margin: 1px 0px 1em 0px; font-size:95%; line-height:103%;} div { color : #222222;} div { font-family: Arial, Helvetica, sans-serif;} div{ margin: 1px 0px 1em 0px; font-size:95%; line-height:103%;} .akeru{ line-height:1em; } ↑これです。テキストとCSS3について説明されているHPと各マチマチなもので戸惑っています。

    • ベストアンサー
    • 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,"MS Pゴシック",Arial,Helvetica,sans-serif; } よろしくお願いいたします。

    • ベストアンサー
    • CSS
  • スタイルシートが効かない

    bodyに以下のスタイルを適用しています。 body { margin-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; font-family: 'Arial', 'MS Pゴシック', sans-serif; font-size:12px; line-height:150%; color:#333333; } フォントサイズを12にしているのですが 別のフォントサイズとしてクラスで10pxを指定しても WindowsIEだと、10pxに表示されません。 また、bodyの12pxの指定をはずしても 10pxの指定が反映されませんでした。 ただし、16pxなど他のクラスだと反映されます。 10pxが反映されない理由が分かりません。 どなたかお分かりになる方 いらっしゃいましたら、ご教授願います。 よろしくお願いします。

  • ブログのTOP画像表示方法(悩んでます)

    どこをどう変えればTOPに画像をつけるコトが出来るのでしょうか?? ホントに悩んでます。 検索してもよくわからなくて・・・ body { font-family: Arial, Helvetica, sans-serif; background-color:#ffffff; background-image:url(http://269g.jp/img/bg/nail_style_1/bg.gif); background-repeat:repeat-y; margin:0px; padding:0px; text-align:center; } #container{ text-align:right; margin:0px auto 0px auto; width:906px; height:596px; background-image:url(http://269g.jp/img/bg/nail_style_1/top.jpg); background-repeat:no-repeat; background-position:center top; background-color:#ffffff; } h1 { text-align:left; margin:0px 0px 0px 0px; padding-top:225px; font-weight:bolder; font-family:sans-serif; font-size:19px; } h1 a{ color:#58B29A; text-decoration: none; font-family:sans-serif; font-weight:bolder; } h2 { padding: 0px; font-weight:bold; font-size:14px; text-align:left; font-family:arial, Helvetica; } h3 { padding: 5px 0px 10px 3px; font-size:14px; font-weight:bolder; font-family:arial, Helvetica; } H3 a{ text-decoration: none; }

  • 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
  • floatしたdiv内の要素について

    下記のようなHTML、CSSで、 floatしたdiv「leftside」内にp要素を配置すると p要素の上下に空間が発生します。 このp要素の上下の空間はなんでしょうか? どうすれば消えますか? ちなみに、スタイルシートから「leftside」の「float: left;」を削除するとp要素の上下空間はなくなります。 または、pタグで囲まなくても空間は消えます。 よろしくお願いいたします。 ■Html <!DOCTYPE html> <html> <head> <title></title> <link rel="stylesheet" type="text/css" href="test_style.css" media="all"> </head> <body> <div id="warapper"> <!-- ヘッダ --> <div id="head"> </div> <!-- 左サイト --> <div id="leftside"> <p class="test">leftside</p> </div> <!-- コンテンツ --> <div id="contents"> contents </div> <!-- フッター --> <div id="footer"> <p>fotter</p> </div> </div> </body> </html> ■Css @charset "utf-8"; body{ /*font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "MS Pゴシック", "MS PGothic", sans-serif;*/ font-family: "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; font-size: 90%; text-align:center; padding: 0; margin: 0; background-color: #fff; } #warapper{ text-align: left; width: 800px; margin:0 auto; /*ページ全体をセンタリングする指定*/ padding: 0; background-color: #ffffcc; } #head{ background-color: #000; height: 160px; margin: 0 0 20px 0; padding: 0; position: relative; /*ロゴ画像を右下に配置するため*/ } #topbar{ background-color: #dcdcdc; height: 50px; margin: 0 0 20px 0; padding: 0; } #leftside{ background-color: #ccc; width: 180px; float: left; padding: 0; margin: 0 0 20px 0; /*下方向に余白を設ける*/ overflow:hidden; } #contents{ background-color: pink; width:600px; float: right; padding: 0; margin: 0 0 20px 0; /*下方向に余白を設ける*/ } #contents_all{ background-color: pink; margin: 0 0 20px 0; /*下方向に余白を設ける*/ padding: 0 0 0 0; } #footer{ background-color:#666; text-align: center; clear: both; margin: 0; padding: 0.5em 0; } .test { background-color: red; }

    • 締切済み
    • CSS
  • HTML5の構文チェックとCSS3について

    HTMLの勉強中の作家です。 新規ページからHTML5にしようと思っています。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <meta name="robots" content="noindex,nofollow,noarchive"> <link rel="stylesheet" href="style.css" type="text/css"> <style type="text/css"> <!-- --> </style> <title>私小説</title> </head> ソースはこれで合っていますか? W3Cの検証サイトにてチェックをしたところ「Passed, 1 warning」と出ました。 CSSは2.1のままです。 CSS3のテキストを読んでいますけれど、文字のみのサイトなため、細かい(背景などの)指定は要らないです。 英語が達者と言うわけでもないため「 1 warning」の指摘らしき文章を翻訳サイトにて翻訳してみました(市松模様だとか意味不明な日本語に翻訳さましたけれども・笑)。どうやらCSSに原因がある…ぽいです(ハッキリとはしていませんけれど)。 現行のCSS2.1をどう書き換えればCSS3になるのか?(CSS2.1はW3Cのサイトで合格しました) テキストを読んでいるのですが、イマイチよく分かりません。 @charset "UTF-8"; .ryoko { color : #407133;} .kazumi { color : #336070;} div,p { color : #222222;} p { font-family: Arial, Helvetica, sans-serif;} body { background-color:#e0ffe0;} a:link { color : #0000ff;} a:visited { color : #003333;} a:hover { color : #660000;} a:active { color:#660066;} p{ margin: 1px 0px 1em 0px; font-size:95%; line-height:103%;} div { color : #222222;} div { font-family: Arial, Helvetica, sans-serif;} div{ margin: 1px 0px 1em 0px; font-size:95%; line-height:103%;} .akeru{ line-height:1em; } .akeru2{ margin-top:2em; } .akeru3{ margin-top:3em; } ↑これをCSS3にするためにはどうすれば良いのでしょうか?(テキストの記述例には@や#が付いていましたけれど、テキストに書かれているほど凝るつもりは今のところ予定はないです)。

    • ベストアンサー
    • HTML
  • 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
  • スタイルシート ページ左右の余白幅 設定

    Seesaaブログを利用しています。 テンプレート「ガーベラ」のページ左右の余白幅を狭くしたいと思っています。 やりたい事は、例えばWord文書の左右余白は規定値で35mmになっているが20mmに変更したい という感じです。 初心者なので少し調べましたが スタイルシートのpadding、marginの設定を変更する必要がありそうな事しか分かりませんでした。 以下、スタイルシートの一部をコピーしたものです。 具体的に、どの部分を変更すればいいのか教えて下さい。 body { font-family: Arial, Helvetica, sans-serif; margin:0px; padding:0px; text-align:center; background-color:#FFF; color:#666666; } #container{ text-align:center; margin: 10px auto 0px auto; padding:0px; width:769px; } a{ text-decoration: underline; color:#87B400; } #banner{ font-family:arial, Helvetica; height:275px; margin:0px; padding:0px 0px 0px 160px; text-align:left; background-image:url(http://blog.seesaa.jp/img/bg/gerbera/header.jpg); background-repeat:no-repeat; }

  • style.css 反映されない

    WORDPRESSを使ってホームページを作成中です。 使っているPCはMAC OS 10.5.8です。 素人のためwordpressレッスンブックという本を読みながら進めています。 index.phpとstyle.cssでHPを作成しています。 index.phpで記入したものは、サイトを表示すると反映されているのですが、style.cssで指定、または記入したものが急に反映されなくなりました。 今まではそんなことはなく、順調にすすんでいたんですが、今日の作業中に突然style.cssで記入したものが反映されなくなりました。 (例1) *RSSフィードへのリンクの文字のデザインを指定する。 *画像の中央に文字をそろえて表示する。 *RSSフィードへのリンクを枠で囲んで表示する。 ↑ これらを実行したくて、 style.cssに下記のように入力しましました。 /* フィード */ p.feed {font-size: 0.75em; font-family: Verdana, Helvetica, sans-serif; border: solid 1px #8cc63f; padding: 5px; margin: 25px 0} p.feed a {color: #444444; text-decoration: none} p.feed img {vertical-align: middle; margin-right: 8px} しかし、全く反応しませんでした。 どうしたらよいですか? 教えてください。

専門家に質問してみよう