2023年02月16日

【CSSが効かない?!】reset.css読み込み時はご注意を!

Lesson4

HTML/CSS

webサイト制作時にHTMLファイルにCSSを読み込みます。
その記述、間違っていませんか? 
「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の読み込み順についてです。
基本的に記述したコードは上から順に読み込まれていきます。
そのため、上記の設定では、

  1. 初めに自分で作成したstyle.cssを読み込む
  2. 次にreset.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件)

人気の記事ランキング

【CSSが効かない?!】reset.css読み込み時はご注意を!