CSSを記述する場所
CSSを記述する場所は3種類あります。それぞれの違いを理解して使い分けてください。
HTMLのタグに直書きする
HTMLのタグにstyle属性を追加してCSSを記述します。例えば以下のように書きます。
<h1 style="color:red;">HTMLの練習</h1>
用途としては、お試しでスタイルを当てるときに使います。この書き方を多用してしまうとHTMLのコードとCSSのコードが混在し読みにくくなります。また、コードの修正が面倒くさくなります。例えば下記のような場合です。
<h1 style="color:red;text-decoration:underline;border:solid 1px #000000;padding:10px;margin:10px;background-color:pink;">HTMLの練習</h1> <p style="color:blue;border:solid 1px #000000;padding:10px;margin:10px;background-color:skyblue;font-size:12px;font-weight:bold;">このページではCSSを記述する場所について解説しています。よろしくお願いします。</p>
HTMLファイルからCSSの記述を分離するのが基本的な考え方なので、この方法はおすすめしません。CSSは別ファイルとして用意して、HTMLから読み込むようにします。
styleタグに書く
headタグの子要素として、styleタグを書きます。その中にCSSを記述します。styleタグの中にまとめてそのページのCSSを記述します。HTMLのタグに直書きする方法よりもコードの見通しが良くなります。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <style type="text/css"> h1{ color:red; } </style> <title>HTMLの練習</title> </head> <body> <h1>見出しタグ</h1> </body> </html>
以下に該当の箇所だけ抜き出します。
<style type="text/css"> h1{ color:red; } </style>
CSSファイルを作成し、HTMLファイルから読み込む
HTMLファイルとは別にCSSファイルを作成します。例えば、「style.css」と言うCSSファイルを作成して、その中にCSSを記述します。そして、そのファイルをHTMLのheadタグ内で読み込みます。以下のように記述します。
<!-- HTMLファイルからCSSファイルを読み込む例 --> <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <!-- ↓CSSファイルの読み込み↓ --> <link rel="stylesheet" type="text/css" href="style.css"> <title>HTMLの練習</title> </head> <body> <h1>見出しタグ</h1> </body> </html>
以下に該当の箇所だけ抜き出します。
<link rel="stylesheet" type="text/css" href="style.css">
「style.css」ファイルの内容は以下です。
h1{ color:red; }
