質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

Q&A

解決済

4回答

5020閲覧

CSSがブラウザに反映させることができません

rina0366

総合スコア58

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

0グッド

2クリップ

投稿2018/01/11 03:54

こんにちは。
何度の、さまざまなCSSコードを試しても、ブラウザに反応するのはHTMLのコードが反映されたもののみです。
つまりHTMLファイルの方に不手際があることが明白なのですが不明のまま解決ができません。
ご教授のほどよろしくお願いいたします。
CSSのファイルはstyle.cssになります。

<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title></title> <link rel="stylesheet" href="style.css"> </head> <body> <a href="#" class="bt-samp">BUTTON</a> </body> </html>

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

showkit

2018/01/11 04:04

style.css で class bt-samp をどう定義していて、どう反映されないのかを書いていただかないと答えようがありません。
guest

回答4

0

ベストアンサー

インラインに記述して適用されるか↓

html

1<a href="#" style="font-size:20px;">BUTTON</a> <!-- 例 -->

styleタグに書いて適用されるか↓

html

1<head> 2 <style> 3 .bt-samp{ 4 font-size:20px; /* 例 */ 5 } 6 </style> 7</head>

を確認し、外部ファイルにしたときのみ適用されないのであればCSSへのパス指定が間違っているのではないかと思います。

HTMLファイルとCSSファイルは同じ階層内にありますか?
もし以下のような構造の場合、

ルートフォルダ -index.html -cssフォルダ -style.css

CSSの指定は以下のようになります。

html

1<link rel="stylesheet" href="css/style.css">

参考サルワカ-CSSはどこに書く?外部CSSファイルの読み込み方&インラインでの書き方

投稿2018/01/11 04:25

dit.

総合スコア3235

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

rina0366

2018/01/12 21:30

ご丁寧にありがとうございます! 参考にさせて頂きます!
guest

0

もしstyle.cssに下記のように記述をした上でページを再読み込みして
背景色がなにも変わらなかったら、html内に書いてあるcssへのパスが合っていないものと思われます。

css

1body{ 2background-color:#000; 3} 4

※bodyの背景色を黒にする指定。確認できたら削除しておいてください

パスが合っているかどうかの確かめ方は幾つかあります。
・ブラウザのアドレスバーにフルURLを入力してアクセス
・GoogleChromeなどで「ページのソースを表示」すると、cssやjsファイルがリンクテキストになっているので、該当のcssをクリック。そのリンクテキストをクリック(上記のアドレスバーフルURL入力と同じ、別ウィンドウでcssファイルが開きます)

パスが合っていればcssファイルの内容が表示されますし、合っていなければエラーページが表示されます。

投稿2018/01/11 06:45

m.ts10806

総合スコア80765

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

アドバイスされている方とほとんど変わりありませんが、

HTMLとCSSファイルが同じ場所(階層)にあるのであれば、以下の記述でCSSが反映されるはずです。
あとは、CSSファイルのファイル名が間違っているかだと思いますよ。(私もたまにスペルミスして
CSSが反映されないことがあります。。。)

HTML

1<link rel="stylesheet" href="style.css">

投稿2018/01/12 12:23

退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

rina0366

2018/01/12 21:30

ファイル名はあっていました汗 ありがとうございます!
guest

0

質問の意味をまちがえてたらスミマセン。以下をCSSファイルに加えてみてください。

CSS

1.bt-samp a { 2 display:block; 3}

投稿2018/01/11 12:23

yoshinavi

総合スコア3521

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問