- 締切済み
フォント変更がどうしてもできません
こんにちは。 お世話になります。 フォントをメイリオに変更しようと思い、デフォルトシートに、テキストを参照しながら タグを入力しましたがうまくいきませんでした。 okwaveで、親切な方にお教え頂いたタグを入力しましても、反映してくれません。 デフォルトシートに入力したタグは、以下になります。 body {font-family:'メイリオ',"ＭＳ Ｐゴシック",'hiragino kaku gothic pro',sans-serif;} その他の情報は、ちゃんと反映されていますが、もしかしたら、初心者ですので、 他のタグの入力が間違えているかもしれませんので、下記に記載いたします。 [デフォルトシート上のタグ] body {font-family:'メイリオ',"ＭＳ Ｐゴシック",'hiragino kaku gothic pro',sans-serif;} h1 {font-size: 38px} p {line-height:1.5} [ホームページ本体のソース] <html> <head> <meta charset="UTF-8"> <title>真夏のひまわり畑-forest studio</title> <link rel="stylesheet" href="style.css"> </head> <body> <h1>真夏のひまわり畑</h1> <p>森の工房の隣にある畑は、毎年夏になると満開のひまわりの 花で黄色く染まります。ひまわりは「日輪草」とも呼ばれ、 太陽に向かって花を咲かせます。大きなひまわりは背丈が2 メートルを超え、見ごたえも十分です。畑の周囲は約5キロ の散策コースになっていますので、花を見ながら散歩をする のもおすすめです。</p> <p>太陽の光をいっぱいに浴びたひまわりの種は、冬の間の野鳥 たちの餌になります。また、ひまわり油も抽出し、料理屋やお 菓子作りに活用しています。ひまわりの種を香ばしくロース トしたクッキーも人気商品です。</p> </body> </html> また、あわせて教えていただきたいのですが、テキストには「'」「"」の区別はない、 と記載されていました。 ということは、一つのタグの中に両者を混ぜて使用しても、正常にデータとして 反映される、ということでよろしいいのでしょうか？ テキストの説明を見ましても、いまいち、よくわかりません。 どなたか、お力を貸してはいただけないでしょうか？ よろしくお願いいたします。
- みんなの回答 （3）
- 専門家の回答
みんなの回答
- ORUKA1951
- ベストアンサー率45% (5062/11036)
No.2です。 ＞この情報は、古いのでしょうか？それとも。誤植なのでしょうか？ いえ、単純にご存知無いだけかと。(^^) HTMLを読み込んだブラウザは、そのページを表示するために更なるデータが欲しい場合--画像を読み込むとか--は、改めてサーバーにデータを要求します。スタイルシートやjavascriptの場合も、もしcharsetの指定がない場合は、本体のHTMLと同じであろうと推測して受け取ったデータを解釈します。 すなわち、<link rel="stylesheet" href="" media="screen">にも、スタイルシートに@charset{}にも指定がない場合、本体HTMLがutf-8だとutef-8と解釈します。ブラウザによって多少動作が異なる場合もありますし、そのような解釈をしないブラウザの場合、どちらも同じ文字コードなのに読み込めない場合もあります。また、サーバーがHTTP応答ヘッダで、異なった文字コードを付与してくる場合もあります。 それらの理由から、必ずスタイルシートに@charsetを付くことが推奨されています。 【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから ・HTTPヘッダにあるContent-Typeフィールドのcharsetパラメータ ・@charsetによる指定 ・参照元文書の構造化言語による指定（たとえばHTMLならLINK要素のcharset属性） ￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［CSS2の構文と基本データ型( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/syndata.html#q23 )］より その著者はこのことを知らないと考えるのが率直なところです。(それか、あなたが読み飛ばしている) 以前の質問(タグが反映してくれません - Webデザイン・CSS - 教えて！goo( http://okwave.jp/qa/q8269715.html ))で、スタイルシートを body {font-family:`メイリオ`,`hiragino kaku gothic pro`} と書かれていましたが、これもfamily名の最後に総称ファミリ名を書くことが推奨されています。 ⇒フォント( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/fonts.html#font-family-prop ) 参考書として記述するのでしたら、これらは正確に記述するべきだと思います。 ただ、私も関わったことがあるのでわかりますが、書籍と言うものは自分自身が、その対象に対して無知なときでないと書けないのです。(^^)なぜなら、公開されている仕様書には、すべて正確に漏れなく記述されているのですから、仕様書の存在を知っていたら、本なんて書きません。「そちらをお読みください」でおしまいです。 本と言うものは、--知らないのですから---嘘とは言いませんが、相当割り引いて読まないとだめです。 そもそも、デフォルトスタイルシートという考え方自体望ましくはありません。それをすることによって、ユーザーエージェントが持つすべてのスタイルを上書きしてしまいますから、改めて再設定しなければなりません。煩雑になるし・・
- ORUKA1951
- ベストアンサー率45% (5062/11036)
最も考えられるのは、文字コードです。 HTMLが文字コードutf-8でしたら、<link>で指定した外部ファイルも同じ文字コードとして判断します。そのため、あなたの場合スタイルシートをShift_JISで記述していたら読めないことになります。 そのトラブルを防止するため、スタイルシートに@charset "[文字コード]"を記述する必要があります。 ・utf-8で書かれた場合は特になくても適用されるはずです。 ・<link rel="stylesheet" charset="Shift_JIS"***>でも良いです。 ちゃんとした形に書き直します。DOCTYPEはHTML4.01strictです。スタイルシートはCSS2.1 ・・現時点でのウェブ標準です・・・ ★タブは＿に置換してあるので戻す。 ★Another HTML-lint 5( http://www.htmllint.net/ ) のDATA入力でチェック済み!! 必ずチェックするようにしましょう。 ★W3C CSS 検証サービス( http://jigsaw.w3.org/css-validator/#validate_by_input ) もチェック済み [HTML] <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> ＿<meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> ＿<title>サンプル</title> ＿<meta name="author" content="ORUKA1951"> ＿<meta http-equiv="Content-Style-Type" content="text/css"> ＿<link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" > ＿<link rel="START" href="../index.html"> ＿<link rel="stylesheet" type="text/css" media="screen" href="./style.css"> ＿<style type="text/css"> <!-- --> ＿</style> </head> <body> ＿<div class="header"> ＿＿<h1>真夏のひまわり畑</h1> ＿＿<p>このページでは・・・・</p> ＿</div> ＿<div class="section"> ＿＿<h2>見出し</h2> ＿＿<p ＿＿＿>森の工房の隣にある畑は、毎年夏になると満開のひまわりの花で黄色く染まります。ひまわりは「日輪草」とも呼ばれ、太陽に向かって花を咲かせます。大きなひまわりは背丈が2メートルを超え、見ごたえも十分です。畑の周囲は約5キロの散策コースになっていますので、花を見ながら散歩をするのもおすすめです。 ＿＿</p> ＿＿<p> ＿＿＿太陽の光をいっぱいに浴びたひまわりの種は、冬の間の野鳥たちの餌になります。また、ひまわり油も抽出し、料理屋やお菓子作りに活用しています。ひまわりの種を香ばしくローストしたクッキーも人気商品です。 ＿＿</p> ＿</div> ＿<div class="footer"> ＿＿<h2>文書情報</h2> ＿＿<dl class="documentHistry"> ＿＿＿<dt id="FIRST-PUBLISHED">First Published</dt> ＿＿＿<dd>2012-08-10</dd> ＿＿＿<dt id="LAST-MODIFIED">Last Modified</dt> ＿＿＿<dd>2012-08-10 12:00:00 (JST)</dd> ＿＿</dl> ＿＿<address>© ORUKA1951 2012 - 2016 All Rights Reserved mailto:*****</address> ＿</div> </body> </html> [CSS]style.css @charset "utf-8"; html,body{margin:0;padding:0;} body{ font-family:'メイリオ',"ＭＳ Ｐゴシック",'hiragino kaku gothic pro',sans-serif; background-color:gray; } p{ line-height:1.5em; text-indent:1em; margin:0; } h1{font-size: 2em;} div.header,div.section,div.footer{ width:80%;min-width:480px;max-width:900px; margin:0 auto; background-color:white; padding:5px 10px; }
- play_with_you
- ベストアンサー率37% (112/301)
「デフォルトシート」とかのオレオレ用語はともかくとして。 いろいろやってもだめだそうですが、そもそもメイリオはインストールされてますか？ あたりまえですが、「PCにインストールされていないフォント」で表示することはできません。(だからfont-familyで複数指定するんです) あ、ちなみに、CSSは「タグ」じゃないんで以後お間違いなきよう。 ＞また、あわせて教えていただきたいのですが、テキストには「'」「"」の区別はない、 ＞と記載されていました。 ＞ということは、一つのタグの中に両者を混ぜて使用しても、正常にデータとして ＞反映される、ということでよろしいいのでしょうか？ 別件の質問はなるべく「あわせ」ないで別投稿にしましょうね。 シングルクォートとダブルクォートはどちらも文字列をくくるための記号で、同じもので挟む限り、どちらでも問題ありません。 差が出てしまうのはプログラミング言語の場合なので、HTMLやCSSでは影響ありません。 ただし、なるべく統一はしましょう。見苦しくなってしまいますから。
お礼
丁寧かつ、詳細なご説明、ありがとうございます、 大変勉強になりました。 実は、どのフォントを入力しても、反映してくれないのです。 なので、元から備わっている、と言いましょうか、その フォントになってしますのです。 デフォルトシートは、スタイルシートの間違いでした。 お恥ずかしい限りです。
お礼
誠に丁寧かつ詳細なご説明、ありがとうございます。 大変勉強になりました。 大変申し訳ございません、私、ホームページ作成するのが 初めてで分からないことだらけなのですが、 スタイルシートに「@charset "utf-8";」を追加 し、HTML本体（？）のソース上のデータと対応させれば よろしいのでしょうか？ ソース上のデータに<link rel="stylesheet" charset="utf-8">と入力する、ということなのでしょうか？ 理解力がなく、申し訳ございません。 テキストには、<meta charset="utf-8"> <link rel="stylesheet" href="style.css"> とソース上に入力し、スタイルシートに body {font-family:'メイリオ',"ＭＳ Ｐゴシック",'hiragino kaku gothic pro',sans-serif} と入力しろ、としか書いてありません。 この情報は、古いのでしょうか？ それとも。誤植なのでしょうか？ 大変混乱しております。