cssファイルの読み込み

cssファイルの読み込み方法を記載します。

外部ファイルから読み込む

cssファイルの読み込みは基本的に外部から行います。
cssファイルはスタイルを別ファイルに記載するという考え方が元になっています。
したがって、外部のファイルからcssファイル読み込むことが望ましいです。

基本

cssファイルを用意し、そのファイルを読み込みます。
以下は、htmlファイルと同じディレクトリの “style.css” というファイル名のcssファイルを読み込んでいます。

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

http経由での読み込み

Webフォントを利用する場合、http経由でcssを使用します。
以下は、googleフォントを使用する例です。

<link href="https://fonts.googleapis.com/css?family=Lato:400" rel="stylesheet" type="text/css">

このように、httpを経由してcssファイルを読み込むことが出来ます。

cssファイルを読み込む位置

headタグに記載するのが一般的です。
htmlファイルはcssファイルを読み込んだ後に、読み込んだcssファイルに記載されたスタイルを適応します。

styleタグ

スタイルはcssファイルだけでなく、styleタグを利用することも出来ます。
以下は、htmlファイル内にstyleタグを記載した例になります。
記載の位置に規定はありません。
このstyleタグ以降に “.sample_style” クラスを使用した場合、このスタイルが適用されます。
なお、cssファイルとstyleタグの優先順位は読み込みが遅い方が優先されます。
cssファイルの読み込みよりstyleタグの記述が後の場合、styleタグのスタイルが適応されます。

<style type="text/css">
<!--
.sample_style {
  color:blue;
  font-size: 20px;
  font-family: 'serif';
}
--> 
</style>

まとめ

この記事と共にcssとstyle属性についてを理解することで、よりcssファイルについて理解が深まりますので、良かったら次の記事も参考にして下さい。
次の記事