 |
ホームページ作成 ＨＴＭＬ基礎講座 スタイルシートのＨＴＭＬへの組み込み
ホームページ作成・HTML基礎・スタイルシート（CSS)・javascript・SEO対策
|
|
| ■スタイルシートのＨＴＭＬへの組み込み |
 |
|
【解説】記述はすべて半角にして下さい。
Ｗｅｂページへスタイルシートを適用するにはＨＴＭＬへ組み込む手続きみたいなのが必要になります。組み込む方法は３種類あります。 |
方法��
ＨＴＭＬから外部のスタイルシートファイル（.css）を読み込む
方法��
<style>タグを使用してドキュメント情報としてスタイルを適用させる
方法��
style属性を使用し、任意の要素の属性としてスタイルを適用させる
※上記の方法を単独で指定する事も複数を組み合わせて使用する事が出来ます。
基準となるスタイルシートの宣言
どの方法を使用するにしてもスタイルシートの宣言は必要になります。
「ＭＥＴＡタグについて」を参照して下さい。 |
■方法��
別でスタイルを記述したスタイルシートファイルを作成し、<link>タグでそのファイルを読み込む方法です。
拡張子は「.css」として下さい。
その別ファイルで作成したスタイルシートの先頭に「＠charset："文字コード"；」を記述する事により使用する文字コードを確定する事が出来ます。
| 文字コード |
種類 |
| Shift_JIS |
シフトＪＩＳ |
| EUC-JP |
日本語ＥＵＣ |
| ISO-2022-JP |
ＪＩＳ |
※特に和文フォントを使用する場合には「＠charset：”文字コード”；」を省くと環境によっては思い通りの表示がされない場合があります。
※<link>タグは<head></head>内に記述して下さい。
【書式】
別ファイルで作成したスタイルシートのファイル名は何でもかまいません。
下記の例では「style.css」としています。
<link rel="stylesheet"type="text/css" href="スタイルシートまでのＵＲＬ/style.css">
▼方法�，瞭団�
指定したファイル（スタイルシート）をＷｅｂページ全体に対して反映されるためデザインの統一をする場合に有効、また外部ファイルとしている為、各ページを修正する必要がなく1ファイルの修正だけで全体に反映させる事が出来ます。
▼<link>タグを複数設定する事により、外部ファイルを複数設定出来ます。
<link rel="stylesheet"type="text/css" href="スタイルシートまでのＵＲＬ/style1.css">
<link rel="stylesheet"type="text/css" href="スタイルシートまでのＵＲＬ/style2.css">
※<link>タグは<head></head>内に記述して下さい。
＠ｉｎｐｏｒｔについて
改めて別の外部ファイルを読み込む事が出来ます。
@import url("URL");
という具合で記述して下さい。（最後にセミコロン「；」が必要です）
一般要素の前に記述して下さい。
■方法��
ＨＴＭＬ文章内で<style>タグを使用してスタイルを反映させる方法です。
スタイルの内容を<style></style>タグ内に配置します。
※<head></head>内に記述して下さい。
記述したＨＴＭＬ全体に適用されます。
【書式】
<style type="stylesheet">
<!--
セレクタ｛プロパティ：値；｝
セレクタ｛プロパティ：値；プロパティ：値；プロパティ：値；｝
-->
</style>
※スタイルシート非対応のブラウザに対処する為に「<!--」、「-->」で挟みコメントアウトします。
■方法��
ｓｔｙｌｅ属性を使い任意の要素の属性としてスタイルを適用させます。
この方法の場合はその要素の範囲にのみ宣言されたスタイルが反映されます。
スタイルの宣言は「；」で区切って複数指定する事も出来ます。
【書式】
<任意の要素 style="プロパティ:値">・・・・・</任意の要素>
<任意の要素 style="プロパティ:値;プロパティ:値;・・・;プロパティ:値">・・・</任意の要素>
|
|
|
|
ページトップへ |