HTML&CSSコーディング
CSSをHTMLに適用する方法
前回では、CSSコードを記述する方法を解説しました。
書き方がわかったとして、次はそのCSSコードをどこに記述するか、どうやってHTMLに適用するかが気になると思います。
ここでは、CSSをHTMLに適用させる方法をわかりやすく解説します。
CSSをHTMLに適用する3つの方法
CSSをHTMLに適用するには、次の3つの方法があります。
- 各タグのstyle属性として記述する（Inline CSS）
- headタグ内に記述する（Internal CSS）
- HTMLファイルとは別にCSSファイルを用意する（External CSS）
各タグのstyle属性として記述する
タグにstyle属性を設定すると、値にCSSプロパティとその値を記述することができます。
<h1 style="font-size: 24px;">大見出しが入ります。</h1>
レイアウトは、style属性を設定したそのタグにのみ反映します。
また、セレクタの記述は不要になります。
このように適用するCSSは、インラインCSS（Inline CSS）と呼ばれます。
headタグ内に記述する
HTMLファイルのheadタグ内にCSSを記述することもできます。
この場合、CSSコードを<style type="text/css"></style>で囲みます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="description" content="ページ概要が入ります。">
<title>タイトルが入ります。</title>
<style type="text/css">
h1 {
font-size: 24px;
}
</style>
</head>
<body>
<h1>大見出しが入ります。</h1>
</body>
</html>
レイアウトの指定は、そのウェブページにのみ反映します。
このように適用するCSSは、内部CSS（Internal CSS）と呼ばれます。
CSSファイルを用意する
HTMLファイルとは別にCSSファイル（拡張子 .css）を用意して、そこにCSSコードを記述することができます。
HTMLファイルでそのCSSファイルを読み込むことで、各タグにレイアウトを適用することができます。
レイアウトの指定は、そのCSSファイルを読み込んだウェブページで有効です。
このように適用するCSSは、外部CSS（External CSS）と呼ばれます。
まとめて処理できる
一般的に、サイト全体のレイアウトを取るには外部CSSを使用します。外部CSSを使用すれば、CSSの記述は一度で済むからです。
また、途中でレイアウトを変更する場合、そのCSSファイルを修正するだけで、修正後のレイアウトをすべてのページに反映させることができます（すべてのページでそのCSSファイルを読み込んでいることが前提）。
CSSファイルの読み込み方
style.cssという名前のCSSファイルを、HTMLファイルが入っているフォルダ（ディレクトリ）に入れた場合で考えてみます。
@charset "utf-8";
h1 {
font-size: 24px;
}
通常、文字コードを指定するため、CSSファイルの先頭に@charset "utf-8";を記述します（ひとまず丸暗記でOK）。
HTMLファイルでstyle.cssを読み込むには、HTMLファイルのheadタグ内に次のように記述します。
<link rel="stylesheet" href="./style.css">
href属性の値はCSSファイルのパスを記述します。ここでは相対パス（そのファイルから見た相手の位置）で記述していますが、絶対パス（URL）で記述することもできます。
HTML/CSS一覧
HTMLの基本マークアップ
HTMLファイルの構造
CSSの基本レイアウト
- CSSの役割とコードの書き方
- CSSをHTMLに適用する方法
- テキストをレイアウトするプロパティ
- 枠線の種類、太さ、色を指定する
- paddingとmarginで余白をつくる
- ショートハンドとロングハンド
- 背景に色をつける
使い方とサンプル集
固有名詞/専門用語 日英辞書
化学、会計、観光、アニメ、漫画などの分野の用語を収録。
Niugnepについて
Niugnepは翻訳会社のオフィスペンギンが運営する、わかりやすい解説をモットーにした教養メディアです。Niugnepというサイト名は、Penguinが逆立ちしていることに由来します。