スタイルシートのHTMLへの組み込み:ホームページ作成・基礎講座・HTML・CSS・javascript・SEO対策

超初心者でも簡単にできるホームページ作成,HTML基礎講座 EasyStudyHTML

ホームページ作成 HTML基礎講座 スタイルシートのHTMLへの組み込み

ホームページ作成・HTML基礎・スタイルシート(CSS)・javascript・SEO対策



スタイルシートのHTMLへの組み込み clear.gif
【解説】記述はすべて半角にして下さい。
Webページへスタイルシートを適用するにはHTMLへ組み込む手続きみたいなのが必要になります。組み込む方法は3種類あります。

方法
  HTMLから外部のスタイルシートファイル(.css)を読み込む
方法
  <style>タグを使用してドキュメント情報としてスタイルを適用させる
方法
  style属性を使用し、任意の要素の属性としてスタイルを適用させる

※上記の方法を単独で指定する事も複数を組み合わせて使用する事が出来ます。

基準となるスタイルシートの宣言
   どの方法を使用するにしてもスタイルシートの宣言は必要になります。
   「METAタグについて」を参照して下さい。

■方法
別でスタイルを記述したスタイルシートファイルを作成し、<link>タグでそのファイルを読み込む方法です。
拡張子は「.css」として下さい。

その別ファイルで作成したスタイルシートの先頭に「@charset:"文字コード";」を記述する事により使用する文字コードを確定する事が出来ます。
文字コード 種類
Shift_JIS シフトJIS
EUC-JP 日本語EUC
ISO-2022-JP JIS

※特に和文フォントを使用する場合には「@charset:”文字コード”;」を省くと環境によっては思い通りの表示がされない場合があります。
<link>タグは<head></head>内に記述して下さい。

【書式】
別ファイルで作成したスタイルシートのファイル名は何でもかまいません。
下記の例では「style.css」としています。
<link rel="stylesheet"type="text/css" href="スタイルシートまでのURL/style.css">

▼方法,瞭団
指定したファイル(スタイルシート)をWebページ全体に対して反映されるためデザインの統一をする場合に有効、また外部ファイルとしている為、各ページを修正する必要がなく1ファイルの修正だけで全体に反映させる事が出来ます。

▼<link>タグを複数設定する事により、外部ファイルを複数設定出来ます。
<link rel="stylesheet"type="text/css" href="スタイルシートまでのURL/style1.css">
<link rel="stylesheet"type="text/css" href="スタイルシートまでのURL/style2.css">
<link>タグは<head></head>内に記述して下さい。

@inportについて
 改めて別の外部ファイルを読み込む事が出来ます。
 @import url("URL");
 という具合で記述して下さい。(最後にセミコロン「;」が必要です)
 一般要素の前に記述して下さい。


■方法
HTML文章内で<style>タグを使用してスタイルを反映させる方法です。
スタイルの内容を<style></style>タグ内に配置します。
<head></head>内に記述して下さい。
記述したHTML全体に適用されます。
【書式】
<style type="stylesheet">
<!--
セレクタ{プロパティ:値;}
セレクタ{プロパティ:値;プロパティ:値;プロパティ:値;}
-->
</style>

※スタイルシート非対応のブラウザに対処する為に「<!--」、「-->」で挟みコメントアウトします。

■方法
style属性を使い任意の要素の属性としてスタイルを適用させます。
この方法の場合はその要素の範囲にのみ宣言されたスタイルが反映されます。
スタイルの宣言は「;」で区切って複数指定する事も出来ます。
【書式】
<任意の要素 style="プロパティ:値">・・・・・</任意の要素>
<任意の要素 style="プロパティ:値;プロパティ:値;・・・;プロパティ:値">・・・</任意の要素>

ページトップへ
TOP | 利用規約(免責) | お問合せ

Agora