CSSはどこに書くのが最適なのか

CSSはどこに書くのが最適なのか
この記事は約3分で読めます。
広告

CSSの書くところは大きく分けて3つある。

インラインで書く

HTMLファイルに直接記述する。
インラインで書く場合、なるべく「head」内にスタイルを記述。
「head」内に書かなくてもスタイリングできるけど、コードが読み辛くなるのでなるべくね。
インラインの良い所は、ページを読み込む時に別ファイルを読み込まないので表示速度が速いと言われている。
インラインの悪い所は、ページが複数あるサイトの場合メンテナンスがし辛くなる。

<head>
<style>
p {
 font-size: 24px;
 color: gray;
}
</style>
</head>
<body>
 <p>テキスト</p>
</body>

HTMLタグに直接書く

HTMLファイルに直接記述する。
タグに直接書く場合、タグの中に「style」で記述する必要がある。
ウェブの標準化を目指す団体のバリデーションサービスでは、タグに直接スタイルを記述することを認めていない。
タグに直接書く良い所は、・・・あまりない。
悪い所は、HTMLコードが長くなるのでメンテナンスが手間になり、HTMLを読みづらくさせる。
さらにタグに直接スタイルを書くと優先順位がかなり上になるため、普通にインラインや別ファイルでスタイリングしても、タグに直接書いたCSSの効き目には勝てない。

<p style="font-size: 24px;color: gray;">
 テキスト
</p>

別ファイルに書く

HTMLファイルとCSSファイルを別に用意する。
最も一般的なやり方で、管理しやすい方法。
別ファイルにCSSを記述する場合、「head」内にリンクでCSSファイル(style.css)を呼び出す。
悪い所は、インラインで記述するより読み込み速度が遅い(コンマ何秒の遅延)と言われているが体感で遅いと感じることはほとんどない。
良い所は、HTMLファイルとは別になるため、どのページからも呼び出せて、複数ページのスタイルも記述することができるためメンテナンス性に優れているし最も一般的な方法なので、
CSSを書く時はどんな場合であっても別ファイルに記述した方がイイと思います。

// HTMLファイル
<head>
 <link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
 <p>テキスト</p>
</body>
// CSSファイル(style.css)
p {
 font-size: 24px;
 color: gray;
}

まとめ

CSSファイルを書く場合は、どんなことがあっても別ファイルに書いた方が良いです!
wordpressで作っているこのブログや他のサイトのソースを見ると、インラインで書いてありますが、やっぱり見辛いですね。

エンデ・バタローをフォローする
CSSHTMLサイト制作

埼玉県北本市に住み始めて2年目。

前は東京都の京王線沿線に。
その前は神戸の三宮に。
その前は名古屋の八事霊園の近くに住んでいました。

ある年の冬、車で島根県へ旅行に出かけました。
同県の山中にある寒村をゆるゆると走っていると地面が凍結しており
車ごと川に滑り落ちそうになった経験を持つ30代(男)です。

フロントエンドを始めて9年目になります。
最近は、ずっとwordpressをいじっており
エディタはVSCodeに乗り換え、日々の業務でイラレとフォトショ、HTMLとCSSとjavascriptとphpを使用してます。
仕事をしていて、検索する手間を省くためフロント技術ブログを書いています。

エンデ・バタローをフォローする
シェアする
広告
初めてのブログ

コメント

タイトルとURLをコピーしました