Home > スタイルシート(CSS)について目次 > スタイルシートの記述について
インラインスタイルとはHTML内のタグに直接指定する方法です。タグの中にstyle=""で設定していきます。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>〜</title>
</head>
<body>
<div style="margin: 5px;border: 1px solid black;width: 450px;height: 100px;">〜</div>
</body>
</html>
内部スタイルシートとは、HTMLの<head>〜</head>内にスタイルシートを記述する方法です。
<style type="text/css">
<!--
適用するタグ名{
プロパティ等
} -->
<style>
で指定します。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>〜</title>
<style type="text/css">
<!--
div{
margin: 0px;
border: 1px solid black;
width: 450px;
height: 100px;
}
-->
</style>
</head>
<body>
<div>〜</div>
</body>
</html>
外部スタイルシートとは、HTMLファイルとは別のファイル(style.css)にスタイルシートを記述してリンクさせる方法です。<link rel="stylesheet" href="保存先ファイル名/ファイル名.css" type="text/css">で指定します。
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>〜</title>
<link rel="stylesheet" href="保存先ファイル名/ファイル名.css" type="text/css">
</head>
<body>〜</body>
</html>
上記の記述例を見ても分かると思いますが、インラインに記述した場合はページのレイアウトやデザインを変更しようとした場合、一つ一つのページを変更する事になりページ数が多ければ大変な時間と労力を費やしてしまいます。
また内部スタイルシートの場合もレイアウトやデザインの設定のみならず、各タグの設定(指定)が増えればおのずとHTML内への記述が増え、インライン同様に変更には時間と労力がかかるとともに、SEO上もあまりよくありません。(SEO対策に関しては別ページで説明)よって外部スタイルシートを利用する事をオススメします。外部スタイルシートの設定方法については下記を参考にして下さい。
<head>
<title>スタイルシート</title>
<link rel="stylesheet" href="css/sample.css" type="text/css">
</head>
<body>〜
外部スタイルシート内への記述に関しては、例えば リンクを設定してあるテキストを【赤字で下線なし】と設定してみます。 外部スタイルシート【sample.css】の中身は
a{
text-decoration: none;
color: red;
}
ではマウスが上にきたときに【下線を付ける】場合を追加すると外部スタイルシート【sample.css】の中身は
a{
text-decoration: none;
color: red;
}
a:hover{ text-decoration: underline; }
Copyright © スタイルシート(CSS)レイアウト. All Rights Reserved.