CSSってどこに書くの?CSSが記述できる3つの場所と最適な記述場所【練習ファイル付き】

CSSが書ける3つの場所を紹介していきます。
Thanks to our advertisers


今回はCSSの記述場所を紹介します。

CSSが記述できる3つの場所と、CSSの最適な適用方法を紹介します。

Thanks to our advertisers

CSSが記述できる場所。

styleタグの画像です。

CSSが書ける場所は全部で3箇所あります。

  • <style>属性でHTMLの要素に直接書く
  • <head>内に<style>要素で直接書く
  • CSSを外部ファイル化

それぞれを詳しく見ていきましょう。

<style>属性でHTMLの要素に直接書く

一つ目はHTMLの要素内に直接書く方法です。

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>無題ドキュメント</title>
</head>

<body>
 
 <section>
 <h1>HTMLの要素内に直接書く方法</h1>
 
 <p style="font-size:1.4rem;color:red;">HTMLの要素内に直接書く方法です。</p>
 </section>
 
  
</body>
</html>

要素内に「style=””」と書いてあげることで、そこにCSSを指定することができるようになります。

実際にブラウで表示するとこのような形になります。

要素内に直接cssを描いた場合です。

しっかり文字色が赤くなっています。

<head>内に<style>属性で直接書く

2つ目は、<head>内に<style>属性を使い書く方法です

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>CSSの記述場所</title>


<style>
 p{
 font-size:1.4rem;
 color:blue;
 }
</style>


</head>

<body>
 
 <section>
 <h1>HTMLの要素内に直接書く方法</h1>
 
 <p>HTMLの要素内に直接書く方法です。</p>
 </section>
 
 
</body>
</html>

<head>内に<style>要素を使うことで、CSSを指定することができます。

ブラウザで表示させるとこのようになります。

headタグ内にcssを適用させた場合です。

しっかりと文字が青色で表示されました。

CSSを外部ファイル化

3つめは、CSSを外部ファイル化して読み込ませる方法です。

外部ファイル化したCSSのファイル構造はこのようになっています。

外部ファイル化したCSSを読み込ませます。

「index.html」の一つ深い階層にあるCSSを読み込ませます。

CSSをHTMLに読み込ませるときはlinkタグを使います。

 <link rel=“stylesheet” href=“../style.css”>

href属性を使い相対パスで繋げます。

外部ファイルを読み込ませるパスの使い方について分からない方はこちらの記事を参考にしてください。

絶対に覚えるべし!相対パスと絶対パスの違い【練習ファイル付き】

HTML側の記述はこのようになります。

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>CSSの記述場所</title>

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

</head>

<body>
 
 <section>
 <h1>HTMLの要素内に直接書く方法</h1>
 
 <p>HTMLの要素内に直接書く方法です。</p>
 </section>
 
 
</body>
</html>

そしてcss側でスタイルを指定します。

 p{
    font-size:1.4rem;
    color:green;
}

実際にブラウザで表示させるとこのように表示されます。

cssを外部ファイル化したときです。

こちらも外部ファイルで指定した緑色が適用されています。

CSSの最適な記述場所。

これまで3つのCSSの記述場所を紹介してきましたが、CSSを書くのに最も適しているのは「外部ファイル化したCSS」に書くことです。

cssを外部ファイル化するのが最も適した書き方です。

外部ファイル化させることによる利点は大きく3つあります。

  • まとめて指定できる
  • 読み込みに時間がかからない
  • 管理がしやすい

 

CSSを要素内に書いてしまうと、指定した要素を変更するのにわざわざHTMLを見なくてはいけません。

それと、HTMLを読み込んでいる最中にCSSを読み込み、またHTMLを読み込み始めるのでページが表示されるまでに時間がかかり、ユーザーが離脱しやすくなります。

HTMLとCSSを分けることで読み込み時間を短縮でき、さらに管理もしやすくなります。

CSSの3つの記述場所を練習しよう。

今回紹介したCSSの3つの指定方法をファイルにしてまとめました。

実際に手を動かして、どのように指定されているのか確認してみましょう。

Thanks to our advertisers