HTMLでCSSを適用する方法【現役エンジニアが解説】

PROGRAM

今回は、HTMLでCSSを適用する方法について、外部CSSと文書単位、要素の属性で適用する方法に分け、簡単に解説していきます。

外部CSSでCSSを適用する方法

外部CSSファイルを適用するには、linkタグを使います。

linkタグはhref属性で適用するCSSファイルを指定し、headタグ内に書きます。

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

上記のコードでは、hoge.cssという外部のCSSファイルを読み込み、HTML文書に適用しています。

文書単位でCSSを適用する方法

文書単位でCSSを適用するには、headタグ内でstyleタグを使います。

styleタグ内には、HTML文書に適用したいスタイルを書いていくことになります。

<style>
body{font-size:12px;}
</style>

上記のコードでは、HTML文書のbodyタグ内の全てのコンテンツの文字サイズを12ピクセルにしています。

要素の属性でCSSを適用する方法

要素のstyle属性にスタイルを書くことで、各要素独立してCSSを適用できます。

クラスやタグで適用させたいスタイルをまとめられない際には、この書き方が見受けられます。

<body style="font-size:12px;"></body>

上記のコードでは、bodyタグのstyle属性にスタイルを直接書くことで、このタグ内のみでCSSを適用させることができます。