【CSS】CSSの基本 ~ CSSの記述場所 「どこに書くの?」

CSS

(最新更新月:2021年5月)

「HTMLは書けるようになってきたけど、見栄えを良くしたい!」

「CSSはどこに書けばいいの?」

というCSS初学者向けの記事となります

CSSの基本 ~ CSSの記述場所

について解説します

「そもそも、CSSって何?」

「場所はわかるけど、CSSの書き方を知りたい!」

という方は、CSSとは?CSSの記述方法をご覧ください

はじめに

記述場所は3通り!

  1. 対象のタグ内(インライン)
  2. styleタグ内
  3. 別ファイル(.css)

上記の3通りの方法でそれぞれ書いてます

出力結果はこの通り↓

各場所が別々でも同じようにCSSが反映されています

コード紹介

全体のコードはこんな感じです↓

<!doctype html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="index.css" />
    <style>
        .style-css{
            color:blue;
        }
    </style>
    <title>CSSの基本</title>
  </head>
  <body>
    <p style="color: red;">インライン</p>
    <p class="style-css">styleタグ</p>
    <p class="css-file">cssファイル</p>
  </body>
</html>

「よくわからない!」「見ていていやになる!」という人はさっと目を通して飛ばしてください!笑

下記より解説します!

図解

それぞれの記述場所はこの通り↓

まだちょっとよくわからないですよね?

ひとまず先に進んで下さい!

場所の解説

スポンサーリンク

インライン

CSSを適用したいタグに直接記述します

<p style="color: red;">インライン</p>

styleタグ内

styleタグをHTMLファイルのheadタグ内に記述します

<style> 
   .style-css{color:blue;} 
</style>

適用したいタグ内にクラス名を入れ込みます(この場合style-css

<p class="style-css">styleタグ</p>

別ファイル(.css)

HTMLファイルと同列に別ファイルを作成します(index.css)

【別ファイル(index.css)内】

.css-file{color:green;}

【htmlファイル内】

headタグ内に作成した.cssファイルを取り込む(index.css)

<link rel="stylesheet" href="index.css" />
<link rel="stylesheet" href=ファイルパス />

となりますので、形を覚えてしまいましょう!

適用したいタグ内にクラス名を入れ込みます(この場合css-file)

<p class="css-file">cssファイル</p>

まとめ

インラインやstyleタグへ記述する方法ですと、CSSを変更するたびに対象のタグやファイルまでアクセスしないといけません

おススメは、別ファイル(.css)です!

最初の段階から別ファイルで記述することに慣れておきましょう!

また、「場所を覚えるだけでは書けないよ!」という初学者の為に、記述方法についての記事を用意しておりますので、是非合わせてご覧ください!

最後までご覧頂きありがとうございました!!!

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