2023年02月16日
【CSSが効かない?!】reset.css読み込み時はご注意を！
Lesson4
HTML/CSS
webサイト制作時にHTMLファイルにCSSを読み込みます。
その記述、間違っていませんか？
「CSSが効かない」とお困りの方は、一度確認してみてくださいね。
【HTML内コード一部抜粋】
その記述、間違っていませんか？
「CSSが効かない」とお困りの方は、一度確認してみてくださいね。
【HTML内コード一部抜粋】
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Beans coffee</title>
<link rel="stylesheet" href="./css/style.css">
<link rel="stylesheet" href="./css/reset.css">
</head>
======================
ここで注目していただきたいのは、style.cssとreset.cssの読み込み順についてです。
基本的に記述したコードは上から順に読み込まれていきます。
そのため、上記の設定では、
ここで注目していただきたいのは、style.cssとreset.cssの読み込み順についてです。
基本的に記述したコードは上から順に読み込まれていきます。
そのため、上記の設定では、
- 初めに自分で作成したstyle.cssを読み込む
- 次にreset.cssを読み込み、全てのCSSをリセット
となってしまいます。
自分で設定したcssが効かないのは、リセットされているからなんですね。
このようなことにならないよう、
CSSが効かない場合は、一度読み込み順を見直してみましょう！
【正】
自分で設定したcssが効かないのは、リセットされているからなんですね。
このようなことにならないよう、
CSSが効かない場合は、一度読み込み順を見直してみましょう！
【正】
<link rel="stylesheet" href="./css/reset.css">
<link rel="stylesheet" href="./css/style.css">
【誤】
<link rel="stylesheet" href="./css/style.css">
<link rel="stylesheet" href="./css/reset.css">
スマブレ
コメントする
コメント（全0件）