font-familyで書式が指定しても変化しない

このQ&Aのポイント
  • cssで指定した書式が適用されない原因について
  • エディタの選択によって書式が適用されない可能性がある
  • htmlファイルの設定に誤りがある場合にも書式が変化しない
回答を見る
  • ベストアンサー

font-familyで書式が指定しても変化しない

cssでfont-familyを指定しているのですが、 デフォルト書式のまま変化しません。 原因が分からないのですが、可能性として どんなことが考えられますか? ちなみにエディタはTeraPadです。 html <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <meta http-equiv="content-style-type" content="text/css; charset=utf-8" /> <link href="css/base.css" rel="stylesheet" type="text/css"> <head> <body> <p>テスト</p> </body> </head> css p{ font-family:MS明朝; }

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

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

  • ベストアンサー
  • ORUKA1951
  • ベストアンサー率45% (5062/11036)
回答No.2

font-familyは、【正確に!!】そして、総称ファミリー名以外は、引用符で囲むべきです。 【引用】____________ここから <family-name> The name of a font family of choice. In the previous example, "Baskerville", "Heisi Mincho W3", and "Symbol" are font families. Font family names containing whitespace should be quoted. If quoting is omitted, any whitespace characters before and after the font name are ignored and any sequence of whitespace characters inside the font name is converted to a single space.  ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ここまで[Fonts( http://www.w3.org/TR/1998/REC-CSS2-19980512/fonts.html#font-family-prop )]より  厳密には、空白を含まないascii文字だけのとき(IDに使用可能な文字)は、囲まなくてもよいですが・・  また、必ず総称ファミリ名を書くことが求められています。 すなわち p{ font-family:"MS 明朝","細明朝体",monospace; } Windows用、Mac用、総称名 Windows用の等幅でひげのある(serif)フォントが"MS 明朝"なのですが、これに当てはまる総称名はないので、「等幅を優先して」ゴシック体であるmonospaceを最後に書いておきます。 [CSS2の邦訳] フォント ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/fonts.html#font-family-prop ) [CSS2.1}英文--CSS2.1が現在最も認められているCSSですが、邦訳は知らない Fonts ( http://www.w3.org/TR/CSS2/fonts.html ) ★CSS書いたら W3C CSS 検証サービス ( http://jigsaw.w3.org/css-validator/#validate_by_input ) でチェックすること。どこにエラーがあるか教えてくれる。

sasaki027
質問者

お礼

総称名が必要だということを知りませんでした。 css検証サービスも役立ちそうです。 大変勉強になる回答ありがとうございました。

その他の回答 (3)

  • naokita
  • ベストアンサー率57% (1008/1745)
回答No.4

#1回答者です。やはり指摘するべきか。  font-family云々以前に、 <head> <body> <p>テスト</p> </body> </head> これは可笑しいでしょう・・・ <html> <head> <meta /> <link /> </head> <body> <div> <p>テスト</p> </div> </body> </html>

  • ORUKA1951
  • ベストアンサー率45% (5062/11036)
回答No.3

追記)  フォント一覧からフォント名をコピーするソフトもありますが、簡単なのはメモ帳を開いて、[書式]→[フォント]で選択した後、フォント名欄をコピーする。

  • naokita
  • ベストアンサー率57% (1008/1745)
回答No.1

p{ font-family: 'MS 明朝', serif; }

sasaki027
質問者

お礼

参考になりました。 回答ありがとうございます。

関連するQ&A

  • フォントの指定ができない。

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> をいれると、フォントの指定ができないです。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> </head> <body> <a href="http://www.yahoo.co.jp/" style="color:red;text-decoration:none"> <div STYLE="font-size:800%;font-family:HGP創英角ポップ体;">test</div></a> </body> </html> とすると、リンクを付けて文字を大きくしてHGP創英角ポップ体で表示できるのですが <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> </head> にすると、リンクを付けて文字を大きくまでは出来るのですが、フォント名が設定できません。 どうしてでしょうか? <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">をなくすしかないですか?

    • ベストアンサー
    • HTML
  • CSSでフォントが適用されない

    CSSでレイアウトを作成しました。 フォントはMS Pゴシックを指定しています。 CSSを外部にしましたらフォントがMS Pゴシックではなく、明朝っぽくなっています。他のCSSは適用されているのにフォントだけが適用されていません。 ※外部CSSにする前はMS Pゴシックになっています。 html ------------------------------------------------- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <link href="style/style.css" rel="stylesheet" type="text/css" media="all"> <title>無題ドキュメント</title> ------------------------------------------------- 外部CSS ------------------------------------------------- @charset "utf-8"; html { height: 100%; } body { font-family:"MS Pゴシック", "Hiragino Kaku Gothic Pro W3", "ヒラギノ角ゴ Pro W3", "Osaka"; padding: 0px; margin: 0px; font-size: 0.8em; } ------------------------------------------------- どこが間違っておりますでしょうか? 宜しくお願いします。

    • ベストアンサー
    • HTML
  • 使用環境:WINVISTA、IE8

    使用環境:WINVISTA、IE8 ホームページ作成にあたり、CSSを使用しています。 使用フォントをメイリオにしたいので下記のように指定しています。 body { font-family: "メイリオ", Osaka, "MS Pゴシック", sans-serif; } また、HTMLファイルのheadタグには下記のように指定しています。 <head> <META http-equiv="Content-Type" content="text/html; charset=UTF-8"> <META http-equiv="Content-Style-Type" content="text/css"> <title>○○○○○○○<title> <link href="design/style.css" rel="stylesheet" type="text/css" /> </head> 指定方法は間違ってはないと思うのですが、フォントが変わってくれません。 試しにfont-weight:bold; を指定すると太字にはなるのでパスの指定などは問題ないと思います。 何か考えられる原因・対処法はございますでしょうか。 よろしくお願い致します。

    • ベストアンサー
    • HTML
  • H1タグの色を変えたい。

    H1タグの色をCSSで変更したいのですが、上手くいきません。 どこの設定を間違えているのでしょうか? 大変申し訳ございません。ご教授よろしくお願いいたします。 以下にソースを記述します。 /*--- HTMLソース ---*/ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta http-equiv="Content-Style-Type" content="text/css"> <link rel="stylesheet" href="index.css" type="text/css"> <title>H1タグ色変更</title> </head> <body> <h1>大見出し</h1> </body> </html> /*--- CSSソース(外部ファイル:index.cssとする) ---*/ @charset "utf-8" h1 {color: #0000ff;}

    • ベストアンサー
    • CSS
  • 下記のタグの中で必要ないのはありますか?

    (1) <?xml version="1.0" encoding="UTF-8"?> (2) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> (3) <html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja"> (4) <head> (5) <title>●●●●●●●●</title> (6) <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> (7) <meta http-equiv="Content-Style-Type" content="text/css" /> (8) <meta name="robots" content="INDEX,FOLLOW"> (9) <meta name="description" content="●●●●●●●●"> (10) <meta name="keywords" content="●●●●●●●●"> (11) <meta name="content="●●●●●●●●" /> (12) <meta http-equiv="Content-Script-Type" content="text/javascript"> (13) <meta http-equiv="Content-Style-Type" content="text/css"> (14) <link href="css/A1.css" rel="stylesheet" type="text/css" /> (15) <META http-equiv="Content-Type" content="text/html; charset=Shift_JIS">

  • ホームページのヘッダ部分について

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <HTML LANG="JA"> <HEAD> <META HTTP-EQUIV="CONTENT-TYPE" CONTENT="text/html; charset=Shift_JIS"> <META HTTP-EQUIV="CONTENT-STYLE-TYPE" CONTENT="text/css"> <META HTTP-EQUIV="CONTENT-SCRIPT-TYPE" CONTENT="text/javascript"> <TITLE>○○○○</TITLE> <LINK REL="STYLESHEET" TYPE="text/css" HREF="css1.css"> <meta name="keywords" content="△,△,△,△,,△,△,"> <meta name="description" content="●●●●●"> </HEAD> <BODY> … となっているのですが、無駄な部分はありますか? 順番などは合ってますか? また、こうしたほうがいい、などとアドバイスがあればぜひよろしくお願いいたします。

  • 印刷曜CSSがどこかおかしい・・・非常に困っています。。。

    <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> <title></title> <link rel="stylesheet" type="text/css" media="print" href="print.css"> <style type="text/css"> <!-- .style1 { font-family: "MS Pゴシック"; font-size: 12px;} --> <style type="text/css" media="print"> .print { display: "none" } </style> </style> </head> <body> <span class="style1"><p class="print"><p class="print2"><a onclick="window.print();return false;" href="#" >おおお</a></p></p></span> とソースに記載すると、「おおお」が印刷されないと思うのですが、なぜか、「おおお」が印刷されてしまいます。 どうすれば、「おおお」を印刷されなくなるのでしょうか?

    • ベストアンサー
    • HTML
  • メモ帳を使ったホームページ作りについてです。

    ホームページをメモ帳で作っている最中の者です。 外部cssをメモ帳で作っているのですが、製作中のホームページのほうに全く反映されていないです。 htmlの<head>付近は、 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <title>記事一覧</title> <link rel="stylesheet" href="homepage/style.css" type="text/css"> </head> <body bgcolor="#00a1e9"> <div align=center> です。css全文は、 @charset "shift-jis"; .p{ font-family: sans-serif; font-size: 90%; } h2{ font-size: 130%; font-family: sans-serif; } a:hover { color: #fcc800; text-decoration: none; } だけです。  同じフォルダー内に入れ、拡張子にも注意しましたした。html全文もhttp://www.htmllint.net/さんのほうでチェックさせてもらって、51点のふつうの評価をもらっています。また、<body>のほうで,フォントの色や形の指定はしていません。 どなたかご教示お願いします。

  • これは何を意味しますか?

    <HTML> <HEAD> <META http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <META http-equiv="Content-Style-Type" content="text/css"> <TITLE></TITLE> </HEAD> <BODY> <img src="./image/2151.jpg"> </BODY> </HTML>

    • ベストアンサー
    • HTML
  • フォントと文字サイズの指定方法

    HTML初心者です。 どなたか助言ください。 以下のソースのようなテンプレHTMLを変更しないといけなくなりました。 以下のソース部分のフォントと文字サイズを指定するにはどのようにすればよろしいでしょうか? <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="X-UA-Compatible" content="IE=7" /> <title><?=$item_title?></title> </head> <body> <div style="width:100%;text-align:center"> <div id="wrapper" style="margin:0px auto;font-family:Arial, Helvetica, sans-serif;font-size:20px;color:#000;text-align:left;"> %IMAGES% <div class="sub_tit" style="padding-left:5px;height:25px;line-height:25px;border-left:solid 20px;color:#2214ff;font-size:25px;font-weight:bold;"> PRODUCT DETAILS </div>   ****以下で出力される文字のフォントと文字サイズを指定したい。 <p class="sub_text" style="padding-left:10px;padding-right:20px;"> %DESCRIPTION% </p>   **** ......同じような内容が続く </body> </html> よろしくお願いいたします。

    • ベストアンサー
    • HTML

専門家に質問してみよう