スタイルシートとは
スタイルシート（以下CSS）とは、「Cascading Style Sheets」の略で通常CSSと記述されます。本来Webページのデザインを詳細に設定するための技術であり、HTMLからデザイン的な設定を分離することが目的で開発されました。

HTMLが誕生し、一般に普及するようになったころからHTMLにビジュアル要素を求められるようになりました。結果、本来表組みであったテーブルタグがレイアウトに使用されるなど、文章の論理的構造を表すことを目的としたHTMLは本来の目的から離れました。デザイン優先で作成されたWebページは非常に複雑なソースとなり、情報アクセシビリティが無視されていました。

現状ではまだまだテーブルタグや、HTMLでデザインを行っているWebサイトが多く存在しますが、今後はCSSでのデザイン設定が主流になるでしょう。
その理由として、メンテナンスを容易に行え、Webページのデザインを統一することができること、CSSに変更を加えるだけで多くのWebページを制作できるなど、メリットが多い点にあります。
また、Webアクセシビリティが重要視される中、現在を含め将来、高齢者の方や障害者の方など、あらゆる方に情報を提供できるWebサイトを実現していかなければなりません。それを行うためにもCSSの知識は欠くことができないでしょう。

少しずつですが、CSSの簡単な設定方法からページデザインにいたるまで、CSSノウハウを公開していきます。
設定方法も多種多様で、サイトごとに特異性のあるものなので、参考のひとつにしていただければ、と思います。

---

定義と記述について

◎定義について
CSSでは「セレクタ」「属性」「値」の３つを組み合わせて定義します。「セレクタ」はスタイルを適応する対象、属性には適応するCSSの種類を指定します。


◎基本的な記述方法について

セレクタ{属性:値;}

(例)h1を設定します

h1{color:#FF0000;}

◎セレクタ内のセレクタ定義方法について

セレクタ セレクタ{属性:値;}

セレクタ名を半角スペースで区切って表示すると、セレクタ内の他のセレクタにスタイルを適用できます。
(例)pタグの中のaタグにのみフォントカラーのスタイルを設定します。

(p a{color:#FF0000;}

※この時、pタグの中に入っていないaタグにはスタイルは適応されません。


◎複数の属性をまとめて定義する方法について

セレクタ{属性:値;属性2:値2;}

ひとつのセレクタに対して、複数の属性を「;」で区切ることで設定できます。
(例)h1タグにフォントカラー設定を行い、背景色を設定します。

h1{
color:#FF0000;
background-color:#00FF00;
}

◎複数の値をまとめて定義する方法について

セレクタ{属性:値 値2 値3;}

ひとつの属性に対して、複数の値を半角スペースで区切ることによって設定できます。
(例)ボーダーの設定をまとめて行う

h1{
border:#FF0000 solid 1px;
}

◎コメントの書き方
CSSでは「/*」「*/」で挟まれたテキストはコメントになります。
どの箇所の設定であるなど、分かりやすいコメントは更新の際に役立ちます。
(例)

/* 本文見出し設定 */
h1{color:#FF0000;}

◎セレクタについて
セレクタは以下の種類になります。

1.HTMLのタグに指定する「基本セレクタ」
2.1つのHTMLの中で1つのみ設定できる「IDセレクタ」
3.複数の要素に対して同じ設定ができる「classセレクタ」

1.基本セレクタについて
<h1><p><ul><ol>など、HTMLのタグに指定します。
設定したタグが記述されると、自動的にスタイルが適応されます。

2.IDセレクタについて
IDセレクタは定義した要素にのみ適応されるので、HTMLの中で使用できるのは1回のみとなります。
また、記述は先頭に「#」をつけ、名前は任意で設定します。
(例)

#footer{
border-bottom-style: solid;
border-bottom-color: #0C419A;
border-top-width: 1px;
}

「#footer」とした場合、＝「IDセレクタ」になるので、ページの中で一度しか使用できません。

3.classセレクタについて
classセレクタは先頭に「.」をつけ、名前は任意で設定します。
複数のタグに同じ設定ができ、また何度でも使用できます。
(例)

.title{
font-size:12px;
color:#FF0000;
border:#FF0000 solid 1px;
padding:3px;
}

---

以上、第一回目はCSSの記述方法についてでした。
次回は簡単なページの作成方法を取り上げたいと思います。
お楽しみに！

デザイン制作・ホームページ制作・SP制作のご相談はiconまでお問い合わせください。