CSSの基礎知識

CSS（スタイルシート）とは？ CSSとは、Cascading Style Sheet（カスケーディング・スタイル・シート）の省略表記で、Webコンテンツの視覚的な表現を指定するための仕組みのことです。分かりやすく言うと、フォントサイズや色、背景などのデザインを指定する記述のことです。

CSSの書き方 【各部位の名称】 セレクタ { プロパティ: 値; } 例）p { color:#FF0000; } セレクタ：スタイルを適用する対象を指定CSSセレクタ（タグ）一覧 プロパティ：CSSで定義されているスタイルを指定 値：プロパティに指定可能な値を指定

CSSの構文 説明 例 【基本構文】 セレクタ { プロパティ: 値; プロパティ: 値; } p {color:#FF0000;} <p>タグにスタイルを適用します。 【グループ化】 セレクタを「,」（コロン）で区切ると、各セレクタのスタイルをまとめて指定することができます。 h1, h2, h3 {color:#FF0000;} <h1>、<h2>、<h3>タグすべてにスタイルを適用します。 【子孫セレクタ】 セレクタを半角スペースで区切ると、子孫関係にあるセレクタのスタイルを指定することができます。 p strong {color:#FF0000;} <p>タグの中にあるすべての<strong>タグにスタイルを適用します。 【IDセレクタ】 HTML中に設定されているID属性セレクタのスタイルを指定することができます。 #banner {background:#FF0000;} ID属性にbannerを指定した（id="banner"）HTMLタグにスタイルを適用します。 【クラスセレクタ】 HTML中に設定されているclass属性のスタイルを指定することができます。 .articles {background:#FFFFFF;} class属性にarticlesを指定した（class="articles"）HTMLタグにスタイルを適用します。 【リンクに関する擬似クラス】 <a>タグに擬似クラスを指定することで未訪問、訪問済み、マウスオーバー時のスタイルを指定することができます。 a:link {color:#FF0000;} 未訪問リンクにスタイルを適用します。 a:visited {color:#00FF00;} 訪問済みリンクにスタイルを適用します。 a:active {color:#0000FF;} アクティブ時のリンクにスタイルを適用します。 a:hover {color:#FF00FF;} マウスオーバー時のリンクにスタイルを適用します。