スタイルシート(CSS)レイアウト

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対策に関しては別ページで説明）よって外部スタイルシートを利用する事をオススメします。外部スタイルシートの設定方法については下記を参考にして下さい。

外部ファイルを作る
まずスタイルシートのファイルとファイルを保存しておくフォルダを作成します。（ファイルはメモ帳などのテキストエディタでOKです）ココではフォルダ名を【css】ファイル名を【sample.css】とします。拡張子は【.css】です。間違えないように。
HTMLにリンクを張る
<link rel="stylesheet" href="フォルダ名/ファイル名" type="text/css">になります。　ココでの設定なら
<link rel="stylesheet" href="css/sample.css" type="text/css">となります。
このタグを<head>〜</head>の間に記述します。 
<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; }

Home | 目次 | Page Top

無料サーバー
お薦めサーバー
ネットショップ
CMSブログソフトウェア

Copyright © スタイルシート(CSS)レイアウト. All Rights Reserved.

サイトマップ