CSSスタイルシートは、HTMLやXMLなどマークアップ言語の構造と表示形式を分離するための仕様です。Webプログラミングを行う場合、HTMLと合わせてCSSの知識が必須となります。ここでは、CSS入門をテーマに、CSS書き方についての知識をまとめています。目次このページの目次です。CSS(スタイルシート)とはスタイルシートは、HTMLやXMLなどマークアップ言語の構造と表示形式を分離するための仕様です。Sheets(カスケーディングスタイルシート)、省略してCSSと記述です。以降ではCSSを用いて記載していきます。複数のWebページの見た目を統一することが容易にできるようになる事があげられます。CSSの記述例CSSの記述例を見ていきます。タグにstyle属性を指定して記述する例CSSはHTMLのタグのstyle属性に「プロパティ:値」というように記述します。style="color:red">HTMLにはタグとタグの属性、タグとタグの間の要素がある</p>ただし、一般的にタグに直接style属性を記述してコーディングするのではなく、HTMLなどの文書ファイルとは別に「.css」ファイルを作成して記述します。CSSの組込み方法CSSの組込み方法は3パターンあります。外部CSS(HTMLでCSSを別ファイルに記述)内部CSS(styleタグに記述)インラインCSS(タグにstyle属性を指定して記述)外部CSS(HTMLでCSSを別ファイルに記述)HTMLでCSSを別ファイルに記述することでCSSが組み込めます。HTMLファイルHTMLファイルではheadタグの要素として、linkタグを記述し、linkタグの属性にて取り込むCSSファイルを指定します。type="text/css"></head><body><p>CSSの定義で色が指定されます。</p></body></html>CSSファイルCSSファイルには以下のように記述します。{color:red}内部CSS(styleタグに記述)HTMLファイル内にstyleタグを記述してCSSが組み込めます。{color:red}</style></head><body>:</body></html>インラインCSS(タグにstyle属性を指定して記述)CSSはHTMLのタグのstyle属性に「プロパティ:値」というように記述することでCSSが組み込めます。style="color:red">CSSの定義で色が指定されます。</p>ただし、一般的にタグに直接style属性を記述してコーディングするのではなく、HTMLなどの文書ファイルとは別に「.css」ファイルを作成して記述します。重複したスタイル複数の同じスタイルが定義された場合は最後に読み込まれたスタイルの定義が採用されます。CSSファイルには以下のように記述します。{color:red}そして、HTMLファイルに以下のように記述した場合、外部CSSの後に内部CSSの定義が読み込まれるため、色はorangeになります。{color:orange;}</style></head><body><p>CSSの定義で色が指定されます。CSSの書き方CSSの記述例を見ていきます。・・・}CSSの構成要素セレクタスタイルを適用する対象を指定する部分を「セレクタ」といいます。プロパティ設定するスタイルの性質(色や大きさなど)を「プロパティ」といいます。値プロパティに設定する設定値を「値」といいます。・・・}」の設定するスタイルのかたまりのことを「宣言ブロック」といいます。「プロパティ:値」の部分のことを「宣言」といいます。CSSのセレクタCSSのセレクタについて見ていきます。CSSのセレクタの分類セレクタの分類には以下のようなものがあります。CSSのシンプルセレクタタグ名、ID、クラスに基づいて要素を選択します。CSSの要素セレクタ要素セレクタは、HTMLのタグ名をもとに要素を選択します。以下はpタグのスタイルをテキストのページ中央寄せ、色を赤に指定する例です。red;}CSSのIDセレクタIDセレクタは、HTMLのタグに設定されたid属性をもとに要素を選択します。以下はid="paragraph01"を指定したタグをIDセレクタでスタイルをテキストのページ中央寄せ、色を赤に指定する例です。red;}CSSのクラスセレクタクラスセレクタは、HTMLのタグに設定されたクラス属性をもとに要素を選択します。red;}以下のようにHTML要素を指定して選択することもできます。red;}CSSのユニバーサルセレクタユニバーサルセレクタは全てのHTML要素を対象にするセレクタです。別名で全称セレクタといいます。red;}CSSのグルーピングセレクタグルーピングセレクタは同じスタイルの要素をまとめて定義するセレクタです。以下のようにカンマ区切りで記述します。同じ定義のコードが最小化して記述できます。red;}CSSのコンビネーションセレクタ特定の関係に基づいて要素を選択します。CSSの疑似クラスセレクタ特定の状態に基づいて要素を選択します。CSSの疑似要素セレクタ要素の一部を選択してスタイルを設定します。CSSの属性セレクタタグの属性または属性値に基づいて要素を選択します。CSSの色指定CSSでの色の指定は、定義済みの色の名前(red、orange、blueなど)、RGB、HEX、HSL、RGBA、HSLA、の値で指定できます。CSSについてまとめていきます。背景画像の表示(background-image)ホームページ(HTMLの要素)の背景画像は「background-image」で指定できます。:</body>なお、背景画像を使用する場合は、テキストの邪魔にならない画像を使用してください。背景画像の繰返し指定(background-repeat)背景画像はデフォルトでは垂直、水平方向に繰返し表示されます。デフォルトと異なる表示にする場合はbackground-repeatを指定します。repeat-x横方向に繰り返す場合はrepeat-xを指定します。repeat-x;}repeat-y縦方向に繰り返す場合はrepeat-yを指定します。repeat-y;}no-repeat繰り返さない場合はno-repeatを指定します。no-repeat;}もっと知識を広げるための参考プログラミングプログラミング作法などプログラミングについてまとめています。Python、C言語、流れ図などプログラミングのオリジナル入門テキスト問形でまとめています。背景画像の繰返し指定(background-repeat)について追記しました。背景の画像(background-image)について追記しました。重複したスタイルについて追記しました。CSSの組込み方法について追記しました。CSSのグルーピングセレクタについて追記しました。CSSのユニバーサルセレクタについて追記しました。Loarding...。