- ベストアンサー
Webの作成について
- ある文章があって「index.html」「style.css」をエディタで開き、指示に従って「style.css」に「green」を追加し、設定を記述する問題があります。
- 手順に従ってdivタグにclass名「green」を追加することが求められていますが、実施しても画面が変わらない問題が発生しています。
- どのようにすれば指定された条件を満たすようにWebの作成を進めることができるでしょうか。
- みんなの回答 （5）
- 専門家の回答
質問者が選んだベストアンサー
#1 です。 ソース全体を見てわかりました。 と言うか、#2さんの回答に答えそのものが書いてありますｗ <link rel="stylesheet" type="text/css" href="style.css" > が抜けていますね。 「このHTMLでは同じフォルダにあるstyle.cssをスタイルシートとして使うよ」 と言う意味です。 これが無いと、index.html と style.css を結び付けられません。 index.html と style.css が赤の他人状態なので、どんなに修正しようが、反映されないわけです。
その他の回答 (4)
- utakataXEX
- ベストアンサー率69% (711/1018)
#1、4 です。 ＞問題16の上には、既に ＞〈link～.css〉 ＞は入っています。 うーん、私の環境でも #2、3の回答者さんと同様、普通に緑色が反映されています。 と言う事は、回答者2人と質問者様の間に何らかの差異（「手順の漏れ」「環境の違い」etc.）がある、と言う事です。 現在作成されているソースはひとまず置いて、以下の手順でやってみてもダメでしょうか？ (0) 拡張子の確認 そもそもブラウザで表示されているのか、どうかも質問には書かれていないので、一応確認です。 実はindex.html.txtやstyle.css.txtになっていたりしていないか確認してください。 拡張子の表示は以下参照。 ↓ ファイルの拡張子を表示するには? http://support.microsoft.com/kb/978449/ja (1) C:ドライブ直下にtestフォルダ作成 (2) 以下の index.htmlを「そのまま」testフォルダに <!-- index.html --> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Style-Type" content="text/css"> <link rel="stylesheet" type="text/css" href="style.css" > <title>問題16</title> </head> <body> <h1>明太子スパゲティ</h1> <div class="green"> <h2>材料（2人分）</h2> 本分省略 </div> </body> </html> (3) 以下の style.css を「そのまま」testフォルダに /* style.css */ .green{ color:#000000; background-color:#ccff66; } (4) C:\test\index.html をダブルクリック これで、回答者2人と同様に緑が反映されたとしたら、現在作成されているソースに「余計な部分」「足りない部分」があると言う事です。 (5) 問題のソースを C:\test\index.html C:\test\style.css に反映 testフォルダの方のソースに問題16のソースを「『少しずつ』追記して確認」を繰り返してみてください。 その中のどこかで緑が反映されなくなる箇所があるはず、原因はそこにあります。 (4)で反映されない場合は、環境の問題が考えられます。 インターネットのセキュリティレベルを少し落としてみるとか、かなぁ？
- 井口 豊（@Iguchi_Y）
- ベストアンサー率68% (157/228)
No1へのお礼に書いたプログラムで <title>問題16</title> の上に， <link rel="stylesheet" type="text/css" href="style.css" > を入れて <link rel="stylesheet" type="text/css" href="style.css" > <title>問題16</title> すると，画像のようになる
- 井口 豊（@Iguchi_Y）
- ベストアンサー率68% (157/228)
回答No1 の言うように，全体像がはっきりしないので， 自分で，それを作ってみました。 添付した画像のように見せるんでしょうか？ index.html は以下のとおり <html> <head> <link rel="stylesheet" type="text/css" href="style.css" > </head> <body> <div class="green"> 文章 </div> </body> </html> style.css は以下のとおり .green{ color:#000000; background-color:#ccff66; } 注意点 No1で述べられたように， 全て半角で。特に，コピペすると全角になってたりするので，要注意。 greenの閉じカッコが必要。 style.cssのファイルで，.(コンマ）green とコンマ付けて。
お礼
一応 indexとstyleには 文章の文字色、背景色の入力は終わりました。 それからが分かりません。
- utakataXEX
- ベストアンサー率69% (711/1018)
ソースがすべてこちらに見えているわけではないので、見える範囲、想像できる範囲で箇条書きします。 〈div class=”green”〉 文章 〈/div〉 ↓ タグは〈〉 ではなく、半角の <> です。 cssの中も同様です。 記号は半角で書いてください。 ｛→{ ：→: ＃→# ；→; greenクラスの閉じカッコがないかも。 以下は、それ以外の想像。 ブラウザの再読み込みをしていない。 または、ローカルで作業していて、まだサーバーにアップロードしていないのに、http://で見ている。
お礼
一応、全て半角で入力してます。 ソースの内容は 〈html lang＝”ja”〉 〈head〉 〈meta http-equiv＝”Content-Type” content＝”text/html； charset＝Shift_JIS”〉 〈meta http-equiv＝”Content-Style-Type” content＝”text/css”〉 〈title〉問題16〈/title〉 〈/head〉 〈body〉 〈h1〉明太子スパゲティ〈/h1〉 〈div class＝”green”〉 〈h2〉材料（2人分）〈/h2〉 本分省略 〈/div〉 〈/body〉 〈/html〉 のような感じです。
お礼
問題16の上には、既に 〈link～.css〉 は入っています。