カテゴリー:CSS

記事本文

この記事をお勧めしたい方

CSSを綺麗にまとめたい方!




今日もお疲れです!
ビギナー中里です!


前回のCSSの書き方を知ろうで、インラインスタイル埋め込みスタイルという
CSSの記述方法を覚えました。

しかしこの方法では、スタイルの量が増えていくとHTMLファイルはどんどん膨れ上がり
管理もし辛くなってきます。

そこで、CSSの外部化をしてCSSを綺麗にまとめたいと思います!



本記事で得られるスキル

  • 外部CSSファイルの作り方
  • 外部CSSファイルの読み込み方
  • CSSの書き方(おさらい)



前準備
CSSの書き方を知ろうで使用したHTMLファイルをそのまま使っていきます。
HTMLファイルをテキストエディタとブラウザで開いておきましょう。



それではいきます!
※ここから下では「外部CSS」のことを単に「CSS」と呼びます。










CSSファイルの作り方
テキストエディタで新規にファイルを作ります。
以下の1行を入力しましょう。

@charset "UTF-8";

これはCSSファイルのお決まりなので、覚えておきましょう。
この1行だけ書かれたファイルをテンプレートとして保存しておいても良いかもしれませんね。

簡単に触れておくと
このcssファイルはUTF-8で書きますよ!
という宣言になります。

この1行は必ずCSSファイルの先頭に記述します。



では、ファイルを保存していきましょう。

保存場所はHTMLファイルと同じ場所にしてください。
ファイル名は
style.css
としましょう。










CSSファイルの読み込み方
CSSファイルが用意できたら、HTMLファイルから読み込んであげる必要があります。

HTMLの
<head>
内を確認してみましょう。

<head>
<meta charset="UTF-8">
<title>CSSの勉強始めます</title>
<style>
p {
text-align: center;
}
.fontred {
color: red;
}
.fontbold {
font-weight: bold;
}
</style>
</head>


<style>...</style>
の部分を外部化しますので、一旦削除してしまいましょう。


<head>
<meta charset="UTF-8">
<title>CSSの勉強始めます</title>
</head>


そして、
<title>
の下に以下の1行を追加します。


<link rel="stylesheet" href="style.css">


これで先ほど作成した
style.css
が読み込まれます。
<link>
タグについて、少し詳しく見ていきましょう。





linkタグ
<link>
タグは閉じタグが不要です。
今回は
rel
href
という属性を指定しています。


rel
(relation)属性の値には、HTMLとの関係性を記述します。
CSSの場合は
stylesheet
となります。


href
(HyperText Reference)属性の値には、HTMLからの参照を記述します。
CSSファイルはHTMLファイルと同じ場所に保存したので
style.css
となります。










CSSの書き方
では、CSSを書いていきましょう!
といっても、書く内容は先ほどHTMLから削除したものと全く同じです。
おさらいとして、もう一度書いてみましょう。

現在、CSSファイルには
@charset "UTF-8";
の1行が書かれています。
この下に各スタイルを書きます。

@charset "UTF-8";

p {
text-align: center;
}
.fontred {
color: red;
}
.fontbold {
font-weight: bold;
}

これでブラウザを更新してみましょう。
今までと同じようにスタイルが当たっているはずです。

埋め込みスタイル


もしもスタイルが当たっていない場合は、CSSの読み込み方をもう一度確認してみましょう。










今回はここまで!
お疲れ様でした!



これでHTMLはHTMLファイルに、CSSはCSSファイルにそれぞれまとめることが出来ますね。

CSSは1枚だけでなく、何枚でも読み込みができるため、1ファイルが肥大化して
管理し辛くならないように、機能ごとに分けることもあります。
といっても、1000行以内であれば1ファイルに収めて良いでしょう。



次回はカスケード、CSSの核心に迫っていきますよ!
ではまた!