勉強不足は承知ですが、もうどうにもお手上げ状態です。
質問させてください。
CSSを勉強しているのですが、反映されません
(本や、サイトのサンプルとおり記述しても、です)
(タグ、スペルの間違いがないかは10回以上確かめています)
(CSSサイトのサンプルをクリックすると、それは表示されます)
●ヘッダー内に指定すると、反映されない
○例
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML4.01 Transitional//EN">
<HTML>
<HEAD>
<meta http-equiv="Content-Type" content="text/html;charaset=shift_JIS">
<meta http-equiv="Content-Type" content="tet/css">
<style type="text/css">
<!--
p.ehon{
font-size:100px;
color:red;
}
-->
</HEAD>
<BODY>
<p.ehon>
「絵本」の色は赤色です
</p>
</BODY>
</HTML>
・・・結果・・・
ブラウザには標準フォント(色、サイズ)で
”「絵本」の色は赤色です”
と表示される
文字色は
font-color:red
font-color:#rbg番号
などしてみても、黒のまま
文字サイズも30px、50px、100pxとしてみているが、結果は同じ文字サイズ
(標準)になる
○<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML4.01 Transitional//EN">
<HTML>
<HEAD>
<meta http-equiv="Content-Type" content="text/html;charaset=shift_JIS">
<meta http-equiv="Content-Type" content="tet/css">
<style type="text/css">
<!--
body{color:#CCFFCC}
h1{color:#996633}
-->
</HEAD>
<BODY>
<h1>
絵本の色は赤色です
</h1>
</BODY>
</HTML>
・・・結果・・・
ブラウザになにも表示されない
●BODY内指定
○例
<div style="color:red">
絵本の色は赤色です
</div>
・・・結果・・・
フォントサイズ標準で、文字色赤で表示されました
○例
<div style="color:red;font-size:50px;">
絵本の色は赤色です
</div>
・・・結果・・・
ブラウザに何も表示されませんでした
○2回目
<div style="color:red;font-size:50px;">
絵本の色は赤色です
</div>
・・・結果・・・
フォントサイズそれなりの大きさに。文字色は赤で表示されました
○3回目
全く同じタグでブラウザには何も表示されず・・・・
/////////////////////////////////////////////////////////////
いったい何が問題なのでしょうか。
こんなところで足止めされているのが悲しいです・・・
No.3ベストアンサー
- 回答日時:
No.2の者です。
ミスや説明の足りない部分があったので補足しておきます。
●3. が2つあるのは単なるミスです(笑)
<html lang="ja">としてしまったのは私のクセです。
<html>で特に問題はないでしょう。
(例えば「p.ehon」は<p>タグのみに適用され、<div>タグには適用されません。)
↓
「p.ehon」は、<p class="ehon">のみに適用されます。
<div class="ehon">としても、要素が<p>ではないため適用されません。
些細なことですが誤解を招きそうだったので一応補足させていただきました。
r-y-u-k-iさん。
2度も回答、アドバイスありがとうございました。
ソースをコピペして、参考にさせていただきました。
おかげさまで、ヘッダー内に記述したものを反映させることができるようになりました。
自分で、何度も確認していても、スペルミスとかあるんですね・・・
(^^;)自力で・・・と思っていたのですが、質問してみてよかったです。
No.2
- 回答日時:
回答になっていないかもしれませんが、ひとつのアドバイスとして。
私も独学で趣味の範囲の知識しかありませんので、違っていることもあるかもしれません。
まず、いくつか訂正箇所などがあるのでそれらをひとつずつあげていきます。
●1. <style>タグが閉じられていない。
<style type="text/css">
<!--
(省略)
}
-->
</style>
↑これ(最後の</style>)が必要です。
「ブラウザに何も表示されない」という問題はおそらくこれが原因でしょう。
タグの閉じ忘れには注意しましょう。
●2. 何箇所か記述ミスがある。
例)
×
<meta http-equiv="Content-Type" content="text/html;charaset=shift_JIS">
<meta http-equiv="Content-Type" content="tet/css">
○
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<meta http-equiv="Content-Style-Type" content="text/css">
1行目「charset」が「charaset」となってしまっています。
2行目「text/css」も「tet/css」となってしまっていますね。
cssに関するmetaタグは「Content-Style-Type」とした方が良いかもしれないです。
この辺は私も勉強不足なので、"とりあえず今はこんな感じに"程度として捉えて下さい。
●3. クラスの使い方の間違い。
一番最初に使っている方法(<p.ehon>)は私も正しいのかすらよく分かりません。
が、少なくとも<p.ehon>という使い方はまずしないと思われます。
クラスについては下記でもう少し詳しく説明しますので、そちらを参考に。
最初に使っている方法がうまく表示できないのはこのためかもしれません。
●3. タグは小文字が好ましい。
好みにもよると思いますが、<HTML>よりも<html>の方が良いということです。
HTMLの仕様上はどちらでも構わないのですが、XHTMLでは小文字でないといけないため、
小文字で書くクセをつけてしまうのがベストかと思われます(個人的にですが)。
以上を踏まえて、以下のソースを参考に書いてみてはいかがでしょうか。
解決にはなっていないかもしれませんが、これが分かるようになれば応用が利くと思われます。
--------------------
<!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">
<style type="text/css">
<!--
.ehon {
color: #FF0000;
font-size: 12px;
}
-->
</style>
</head>
<body>
<div class="ehon">絵本の色は赤色です</div>
</body>
</html>
--------------------
簡単に説明いたしますと・・・。
スタイルシートにはクラスという便利なものがあるので、それを使ってみましょう。
まず、<style>タグ内でクラスについていろいろと記述します。
(外部ファイルから読み込む方法などもありますが、今回はhtml内に書きます。)
ここでは「ehon」という名前のクラスについて書きました。
クラスについて書く際は、必ずクラス名の前にピリオド"."を付けて書きます。
.ehon {
color: #FF0000;
font-size: 12px;
}
という感じになります。
Liko_Kaoruさんの一番最初の方法で「p.ehon」と書かれていたのもクラスです。
あのように「要素.クラス」という書き方をする場合、その要素でのみ適用されます。
(例えば「p.ehon」は<p>タグのみに適用され、<div>タグには適用されません。)
次に、そのようにして書いたものを実際に使って見ます。
<p.ehon>という方法ではなく、<p class="ehon">が正しい使い方です。
つまり、htmlのタグに「class="クラス名"」と追加してあげるだけで、
<style>タグ内に書いたスタイルシートが適用される、ということになります。
詳しくはスタイルシートの「クラス」について調べてみると良いかもしれません。
人に説明したことがないので、分かりにくくてすみませんでした。
他にもスタイルシートには便利なものがたくさんあります。
それでは、がんばって下さい。
No.1
- 回答日時:
<p.ehon>
↓
<p class="ehon">
CSSの参考書・サイトをもういっぺん見てみましょう
ブラウザにななにも表示されないケースは</style>が抜けている。
目で見てもチェックしきれないのでキカイにチェックしてもらうといいです。
http://openlab.ring.gr.jp/k16/htmllint/htmllint. …
↑HTMLの文法チェック
http://www.google.com/search?q=css+validator
↑CSSの文法チェック(なんかサイトに繋がらなかったので検索URL)
また、FirefoxのエラーコンソールでもCSSのエラーが確認できます。
この回答への補足
試してみた結果です
ヘッダー内に記述した物が、反映されないようです。
○例
<head>
<meta htttp-equiv="content-style-type" content="text/css">
<content="text/css">
<!--
p.ehon{font-size:30px;color:#006666;text:align;}
-->
</head>
<body>
<p class="ehon">
絵本の色は濃い青緑です
</p>
・・・結果・・・
標準フォント(サイズ)文字色黒で、「絵本の色は~」と表示。
BODY内に直接記述したら、それは反映されました
○例
<div style="font-size:30px;color:#006666;text:align;">
この文字は30pxです
</div>
・・・結果・・・
濃い青緑の文字で、画面の横中央に「この文字は~」と表示されます
●色々試してみたのですが、BODY内に直接記述した場合、反映されるが、ヘッダー内や、外部シートの場合は反映されないようです
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS アコーディオンメニューが思うように動作しません。 1 2023/08/20 16:48
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
- HTML・CSS cssの display: flex;で横並びにならずに困ってます 1 2022/12/04 13:18
- HTML・CSS html cssのmargin 5 2022/12/03 11:04
- HTML・CSS cssが効かなくて困ってます 1 2023/01/01 23:57
- HTML・CSS html/cssで要素が出てこなくて困ってます 1 2022/12/31 16:59
- HTML・CSS <!DOCTYPE html> <html> <head> <meta charset="utf-8 2 2023/01/05 01:04
- HTML・CSS CSS のみのタブ切り替えについて 1 2023/01/11 16:47
- JavaScript jqueryを使ったスムーススクロールのコードを書いたのですが、HTMLコード内にある、a butt 2 2022/04/14 10:59
- HTML・CSS スクロールすると追従する画像のコードを書いているのですが、追従する画像の大きさの調節が上手くいきませ 2 2022/04/18 12:52
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
3COINSのスマートウォッチを使...
-
相手型にQRコードを写真にて送...
-
急に非通知着信がめちゃくちゃ...
-
オープンリールからCD-Rへ のダ...
-
スマホかえとくプログラムでま...
-
タイトルで分からないのがあり...
-
カーナビの電源コードが壊れま...
-
「PC Helpsoft Driver Updated...
-
エクセルで以下の条件の時、関...
-
悪質・携帯メール対策(教えて...
-
このスマホは何という機種ですか❓
-
パソコンに入力したIDは、どこ...
-
ワイヤレスイヤホンを買ったん...
-
アイコンの意味
-
Androidスマホ(Miracast機能が...
-
メルカリの一つのアカウントで ...
-
iqoo neo 9と言うスマホがある...
-
PCで困った時
-
パソコンの同期について
-
ブラウザで開くと画像のような4...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
ASP.NET Ajaxタブのフォントサ...
-
○秒後にページ移動させるには?
-
outlook 文字を揃えたい。tab...
-
マイクロ(μ)の文字を半角で出...
-
教えてください。
-
入力規則のリストの文字の大き...
-
テーブル内の文字サイズを変更...
-
PDFファイルを開かずに印刷...
-
ペイント3Dのテキストサイズ変更
-
Illustratorで作成、pngで保存...
-
cssファイルの名称付け
-
EXCEL VBA 印刷プレビューダイ...
-
Excel:一部のフォントでセルの...
-
ユーザーフォーム スクロール...
-
テキストエディタmiの表示文字...
-
MsgBoxについて
-
Excel VBAで文字列の可視長を得...
-
CSS、Bootstrapについて contai...
-
CSSについて教えてください。 ...
-
alertで表示させる文字サイズは...
おすすめ情報