スタイルシート｜初心者ホームページ作成術

スタイルシート

スポンサードリンク

CSSはカスケーディングスタイルシートのことで、CSSを利用することでページスタイルをコントロールできます。
本体のHTMLにはページの内容を記述し、CSSにはそのページの装飾を記述する事で、効率よくWebサイトを作成することが出来るようになります。

スタイルシートの記述方式

スタイルシートの設定は3方式あります。
　１．要素に直接記述する方式
　２．HTMLページに記述する方式
　３．外部ファイルcssに記述する方式

スタイルシートの競合

スタイルシートが競合する場合は優先規則に従って適用されます。

設定者競合は後方設定が優先

ブラウザのデフォルト・スタイルシート、閲覧者のスタイルシート、制作者の作成したスタイルシートの順で優先度が高い。

セレクタ競合は限定的な部分が優先

要素に対するスタイル、class属性に対するスタイル、id属性に対するスタイルの順で優先度が高い。

設定場所競合は後方出現が優先-

同一のセレクタであれば、後から読み込まれた記述された内容の順で優先度が高い。

優先度の変更

「!important」で優先度を変更出来る。

class属性

class属性を利用すると、繰り返してスタイルを適用させられる。同じページ内で何個でも指定できます。

classの記述方式

クラス名のみ指定する記述方法と、要素名に続けてクラス名を指定する記述方法があります。ピリオドを先頭に付加する。

クラス名のみ指定	.red { color : red; }	要素の種類に関連しない
要素名に続けてクラス名を指定	p.red { color : red; }	指定した要素のみ

クラス名のみ指定

クラス名のみ指定すると、要素の種類に関連しない指定が出来る。

タグ	<p class="red">この文字色は赤</p>
style	.red {color : red}
css001.html	クラス名のみ指定サンプルを開く　別画面で開きます。

要素名に続けてクラス名で指定

要素名に続けてクラス名で指定すると、指定した要素にしか反映しない。

タグ	<p class="red">この文字色は赤</p>
style	p.red {color : red}
css002.html	要素名に続けてクラス名で指定サンプルを開く　別画面で開きます。

ID属性

ID属性を利用すると、ひとつの要素にだけスタイルを適用させられる。
同じページ内で１個しか指定できない。JavaScriptから参照先を指定できる。

IDの記述方式

IDは重複しないように記述します。シャープを先頭に付加する。

#red1 { color: red; }

p#red2 { color: red; }

スポンサードリンク

サイトMENU

コンテンツMENU

SEO対策特集

PPC広告特集

PPC広告基礎

ＰＣスキルアップ

リモートアシスタント

初心者ホームページ作成術 スタイルシート