Adding CSS
スタイルシートの組み込み方についてのページです。
スタイルシートは、HTMLに組み込んで使用します。組み込み方には、要素に直接スタイルを記述するインライン、スタイルブロックをHEAD内に記述して要素に指定する埋め込み、スタイルシートを外部ファイルにしてリンクやインポートして組み込むことができます。
用途に応じて使い分けると便利です。ここでは、概要を説明します。
METAタグの設定
スタイルシートを使用する場合、<HEAD>内にMETAタグで言語の指定します。Java Scriptも使用する場合は合わせて指定します。
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Style-Type" content="text/javascript">
インラインでの組み込みについて
スタイルを直接タグに、組み込みます。
タグに直接組み込みますからか、変更する場合HTMLのように指定した個所を探しながら訂正しなければなりません。
部分的な修正など、変則的に利用するときは便利です。
<p style="font-size: 12pt">インラインでの組み込みについて</p>
埋め込みでの組み込みについて
スタイルシートのベーシックな組み込み方です。
<HEAD>〜</HEAD>タグ内に、スタイルブロック<STYLE>〜</STYLE>内にスタイルを書き、使用するタグに指定して使用します。 DTPやWordのスタイルと同じ考え方です。スタイルブロックのあるスタイルを変更した場合、ページ内の指定されているタグはすべて訂正できます。
<html>
<head>
<title>Style Sheets</title>
<meta http-equiv="Content-Style-Type" content="text/css">
<style type="text/css">
<!--
p.copy { font-size: 12pt; color: blue; }
-->
</style>
</head>
<body>
<p style="copy">埋め込みでの組み込み</p>
</body>
</head>
</html>
リンクでの組み込みについて
埋め込みのように、スタイルブロックをページの中に置かず、別にスタイルブロック・データ・ファイル作成し、リンクさせて組み込むこともできます。
複数のページに、共通したデザインやレイアウトするとき便利です。 スタイルブロック・データ･ファイルのあるスタイルを変更した場合、スタイルが指定されているタグ全ページ同時に訂正できます。
<html>
<head>
<title>Style Sheets</title>
<meta http-equiv="Content-Style-Type" content="text/css">
<link rel="stylesheet" type="text/css" href="css/main.css">
</head>
<body>
<p style="copy">リンクでの組み込み</p>
</body>
</html>
インポートでの組み込みについて
リンクと同じく、スタイルブロックをページの中に置かず、別にスタイルブロック・データ・ファイル作成し、インポートさせて組み込むこともできます。
<html>
<head>
<title>Style Sheets</title>
<meta http-equiv="Content-Style-Type" content="text/css">
<style type="text/css">
<!--
@import url("css/main.css")
p { font-size: 12pt; color: blue; }
-->
</style>
</head>
<body>
<p style="copy">インポートでの組み込み</p>
</body>
</html>
 |
 |
|---|
