![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?5a7ff87)
カテゴリが違ってたらスイマセン。ある文章があって
「index.html」「style.css」をエディタで開き以下の指示に従いなさい。 「style.css」に「green」を追加し、以下の設定を記述しなさいって問題があります。
ソース画面では
〈div class=”green”〉
文章
〈/div〉
で囲って、画面を最小化にして「style.css」を開き、
.green{
color:#000000;
background-color:#ccff66;
テキストでは、こんな感じですが、手順が悪いのか、全く変わりません。どうすればいいでしょうか?
No.4ベストアンサー
- 回答日時:
#1 です。
ソース全体を見てわかりました。
と言うか、#2さんの回答に答えそのものが書いてありますw
<link rel="stylesheet" type="text/css" href="style.css" >
が抜けていますね。
「このHTMLでは同じフォルダにあるstyle.cssをスタイルシートとして使うよ」
と言う意味です。
これが無いと、index.html と style.css を結び付けられません。
index.html と style.css が赤の他人状態なので、どんなに修正しようが、反映されないわけです。
No.5
- 回答日時:
#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)で反映されない場合は、環境の問題が考えられます。
インターネットのセキュリティレベルを少し落としてみるとか、かなぁ?
![「Webの作成について」の回答画像5](http://oshiete.xgoo.jp/_/bucket/oshietegoo/images/media/4/158537_5497f033460c0/M.jpg)
No.3
- 回答日時:
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>
すると,画像のようになる
![「Webの作成について」の回答画像3](http://oshiete.xgoo.jp/_/bucket/oshietegoo/images/media/9/13861817_5497e8b521f01/M.jpg)
No.2
- 回答日時:
回答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 とコンマ付けて。
![「Webの作成について」の回答画像2](http://oshiete.xgoo.jp/_/bucket/oshietegoo/images/media/3/13861817_5497e8b50cdfb/M.jpg)
No.1
- 回答日時:
ソースがすべてこちらに見えているわけではないので、見える範囲、想像できる範囲で箇条書きします。
〈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〉
のような感じです。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS CSSが効かずどのように指定すれば良いか分からないのでアドバイスお願い致します 2 2023/06/07 12:25
- HTML・CSS アコーディオンメニューが思うように動作しません。 1 2023/08/20 16:48
- JavaScript jqueryを使ったスムーススクロールのコードを書いたのですが、HTMLコード内にある、a butt 2 2022/04/14 10:59
- HTML・CSS スクロールすると追従する画像のコードを書いているのですが、追従する画像の大きさの調節が上手くいきませ 2 2022/04/18 12:52
- HTML・CSS <!DOCTYPE html> <html> <head> <meta charset="utf-8 2 2023/01/05 01:04
- HTML・CSS (Javascript)印刷するファイルに応じて印刷プレビュー画面で用紙を自動的に切り替えたい!! 2 2022/04/11 12:04
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
- HTML・CSS HTMLで特定の文字だけ色を変えたいのですが、指定した色と違う色が反映してしまいます。 下記、「前」 5 2023/06/27 12:08
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/30 09:10
- JavaScript vertical sliderをautoplayしたい 2 2022/08/25 14:47
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
cssファイルの名称付け
-
外部CSSの記述方法
-
css の適用について
-
CSSでPC用、他のスマホ用、PC用...
-
PHPでHPを書く際のCSSが適応さ...
-
スタイルシート(CSSスタイル)...
-
styleswitcherについて(ページ...
-
PrettierのHTMLの記述変更 link...
-
HTML内の{}の意味
-
スタイルシートファイルのファ...
-
cssで、ボタンのテキスト部分を...
-
どうすればなるんですか?
-
外部ファイルでのスタイルシー...
-
CSSを勉強したいのですが…
-
CSSのことで教えてください
-
htmlについて
-
h1タグについて教えてください。
-
outlook 文字を揃えたい。tab...
-
マイクロ(μ)の文字を半角で出...
-
教えてください。
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
cssファイルの名称付け
-
jspにcssを反映させるには
-
サイトを作る時のcssファイルは...
-
複数のhtmlで同じcssファイルを...
-
ディレクトリ構成【「common」...
-
範囲指定印刷での位置(css)
-
cssで、ボタンのテキスト部分を...
-
スタイルシート(CSSスタイル)...
-
定数の定義とかはできますか?
-
cssが反映されません
-
エクセルファイルにCSSを読み込...
-
Dreamweaver のテンプレートで...
-
cssファイルを階層の異なるHTML...
-
一部のページにデフォルトCSSを...
-
ブラウザでプレビューでCSSが反...
-
ドキュメントルートより上の階...
-
HTMLの CSSのファイルというの...
-
CSSファイルの分け方皆様はどの...
-
<LINK> の ID の属性値
-
[Dreamweaver8]テンプレートに...
おすすめ情報