WEBトレ

CSS

CSSとは

CSS（Cascading Style Sheets、カスケーディング・スタイル・シート）とは、ウェブページのスタイルを指定するための言語です。
ワープロソフトなどで作成される文書も含めて、文書のスタイルを指定する技術全般をスタイルシートといいます。
また、cssの拡張機能としてscssといったcssを書きやすく、見やすい形にしたスタイルシートも存在します。

HTMLとCSSの違い

HTMLとCSSの違いは文章の「構造」を指定するのか「装飾」を指定するのかといったことです。
HTMLはタグで文章を囲うことで意味付けをして、文章の構造を作ります。
それに対してCSSは「どんな装飾をするのか」「その装飾の色やサイズは何か」を指定する言語です。

CSSの基本

CSSの作法

CSSは、「セレクタ」「プロパティ」「値」の3つを下記のように使って書いていきます。

セレクタ{
  プロパティ:値;
}

・セレクタ：どのHTML要素にCSSを適用させるのかを指定する。

・プロパティ：線や色など、何を変えるのかを指定する部分。

・値：プロパティに対して、どのくらいの変化をさせるのかを指定する部分。

注意点として、値の後ろには必ず「；」を書き入れるようにしましょう。

コメント

CSSファイルは、日本語などのCSS以外の記述があると動作を止めてしまいます。 メモなどを残したい場合は、コメントアウトという方法を使って、「CSSの記述ではありません」というのを明確にする必要があります。 CSSは「/*」と「*/」で囲んだ範囲をコメントと認識します。下のように使います。

セレクタの組み合わせ

セレクタはHTMLタグ、ID、classそれぞれ単体で使うこともできますが、複数を組み合わせて使うこともできます。 しかし、書いていくうちにHTMLの構造が変わる可能性があるので、下記のような構造に依存してしまうと、CSSに修正箇所が多く出てしまいます。
なので、セレクタはよほどのことが無い限りはclassを単体で指定するようにしましょう。

セレクタは、複数の組み合わせで使用すると、単体のセレクタより優先度が高くなるので注意しておきましょう。

CSSの効率的な書き方

SCSS

cssを効率よく書く手段として、一つは上にも書いたscssというものを使用しています。
scssを使用するメリットとしては

・コードの記述が速くなる
セレクターやプロパティのネストを利用して全体的な記述量を減らせます。
また一度定義したスタイルのセットを呼び出せたり、記述済みの複雑なコードを再利用できたりするなど、作業の効率化を図れます。

・メンテナンス効率が上がる
SCSSでは変数や四則演算、関数などが使えるので、それらの値を書き換えるだけで修正や使いまわしができるため、メンテナンス性が向上します。

・コーディングの正確性が上がる
SCSSを用いることで記述量が減り、またコードの再利用がしやすくなるため、人為的なミス、バグが減りコーディングの精度が上がります。

といったものが挙げられます。

実際に見てもらえると分かりやすいと思います。

SCSS

CSS

それぞれ同じ内容を記述してあるコードとなっていて、行数で見るとscssの方が多いですが、何をどこに記述したのか、どこに何の入れ子をしたのかがscssの方がわかりやすいと思います。
さらに、親タグの名前が違うだけで入れ子自体は同じという場合、scssだとそのまま内容をコピーして利用できるのでわざわざタグの順序や名前を書き換えるという手間もなくなります。

class指定

cssを効率よく書く手段の二つ目は、クラス名をうまく使用することです。
クラス名とは、htmlに記述する指定方法の一つで、主にcss側でスタイルを当てる場所の指定のために記述しておきます。
このクラスをうまく使い、同じスタイルを使用したい場合にクラス名を同一のものにしたり、 一部違うスタイルを当てはめたい場合に複数のクラス名を当てはめたりすることで装飾や修正をしやすくすることができます。

プロパティの順序

cssを効率よく書く手段の三つ目は複数人で作業する場合に特に気をつけたいことなのですが、当てはめるプロパティの順序を揃えるというものです。
Googleのガイドラインでプロパティの順序はアルファベット順に並べることが推奨されており、複数人で作業をする場合にも記述の順序ルールが統一されていると作業がしやすくなります。
プロパティの記述順として、視覚順というものもありW3Cの仕様書で推奨されている順序です。
他にも、おおまかなスタイルから細かいスタイル変更といった順番の書き方や、変更箇所が類似しているもの（width/heightやmargin/padding）をまとめて記述するといった方法もあります。

CSSの記述場所

インライン形式

インライン形式とはHTMLのタグの中に、直接CSSのスタイルを記述していく方法です。
要素タグの中に、CSSスタイルを記述するための「style=””」を追加して、セレクタ・プロパティ・値を指定します。
適用したい要素に直接スタイルを記述していくので、直感的で分かりやすい方法ですが、 もしも全ページ共通のスタイルを追加・修正したい場合には、全てのタグのスタイルを更新しなければならないというデメリットがあります。

ヘッダー埋め込み形式

ヘッダー埋め込み形式とはhead要素内に、style要素を使って一括してCSSを記述する方法です。
HTMLとCSSを分けて記述することができますが、適用されるスタイルはそのページのみとなるため、 もしも全ページ共通のスタイルを追加・修正したい場合には、全てのページやテンプレートを更新しなければなりません。
インライン形式と同様に、CSSの更新効率が悪いため、特定のページにだけ適用したいスタイルがある場合などの使用に留めておくと良いでしょう。

外部参照形式

ヘッダー埋め込み形式とは　CSSを外部ファイルとして別に作成し、HTMLからlink要素でリンクを貼る方法です。
スタイルの追加・修正は、CSSファイルを更新するだけで、リンクしている全てのページに反映されるため、更新効率が良くなります。Webサイト制作では、最も使用頻度の高い記述方法です。
ただし、外部参照によるCSSの読込は、ブラウザのレンダリングブロックの原因となります。 大きなCSSファイルを読み込む場合は、ページの表示速度が遅くなる可能性があります。
必要に応じて、ファーストビュー部分のスタイルを、埋め込み形式にするなどの工夫をすると良いでしょう。

基本的なCSSセレクタ

CSSセレクタとは、どの部分にCSSを適用するかを指定するパスのようなものです。
CSSを使いこなすためには、意図した通りのセレクタ指定ができることがとても重要です。
ここでは、まず初めに覚えておくべき基本的なセレクタ指定から、少し高度なセレクタ指定まで利用頻度の高いものをいくつかご紹介します。

タグ名のセレクタ指定

html、body、h1、p、a、img、table、ul、li、など、HTMLのタグ名を直接セレクタに指定する方法です。
CSSのセレクタには、タグ名をそのまま記述します。先頭にシャープ（#）やドット（.）は付けません。
HTMLの構造に大幅な変更があった場合などに更新効率が悪いため、タグ名のセレクタ指定は極力使わないことが推奨されています。

#id名によるセレクタ指定

HTMLソース内のid名をセレクタに指定する方法です。CSSのセレクタには、id名の先頭にはシャープ（#）を付けて記述します。

.class名によるセレクタ指定

HTMLソース内のclass名をセレクタに指定する方法です。CSSのセレクタには、class名の先頭にドット（.）を付けて記述します。

子孫セレクタ指定

CSSを適用する対象を絞り込んで指定する方法です。セレクタを半角スペースで区切って、複数のセレクタを繋げて記述します。 子孫セレクタを使うことで、より高度なセレクタ指定を行うことが可能です。
セレクタは、いくつでも繋げて指定することができます。また、タグ名、id名、class名を混ぜて繋げても構いません。
※子孫セレクタは、必ず半角スペースで区切って指定してください。「#A.B」のようにスペース無しで繋げてしまうと、「AかつB」となり、異なるセレクタ指定に変わってしまいますので注意してください。

複数のセレクタに同じCSSを指定する方法

複数のセレクタをカンマ（,）で区切って記述することにより、異なるセレクタにまとめて同じCSSスタイルを指定することができます。
以下の記述例は、h1、h2、h3、pタグに共通するCSSスタイルはまとめて指定し、共通でないCSSスタイルは、別々に指定しています。
上記のようにCSSスタイルの内容が重複している部分をまとめることで、すっきりしたシンプルなソースになります。
複数セレクタの場合、カンマ区切りの後の半角スペースは、有っても無くてもどちらでも意味は同じです。子孫セレクタと複数セレクタの指定を混同しやすいので注意しましょう。

擬似クラスセレクタ

擬似クラスセレクタとは、HTMLの文書構造では表すことのできない、特定の状態や条件を指定するためのセレクタです。
わかりやすい例を挙げると「対象のリンクにマウスポインターが重なった時」「訪れたことのあるリンクだけ」「ナビゲーションメニューの最後のメニューだけ」などの状態や条件を指定して、CSSスタイルを適用させることができます。
記述方法は、スタイルを適用したい要素を通常のセレクタで指定し、その後ろに「:（コロン）」を付けて、擬似クラスセレクタを指定します。

ユニバーサルセレクタ

全称セレクタとも言われるユニバーサルセレクタは、全ての要素を対象に指定出来るセレクタです。
ユニバーサルセレクタは個別性が「0」のため、基本となるスタイルを一度、全ての要素もしくは多くの要素に指定することで、その後他のセレクタで上書きしていくといった使い方ができます。

CSSの詳細度

CSSはセレクタの書き方によって、詳細度という概念で評価され、適用される優先順位を決定します。詳細度は、以下のようなバージョン番号のような形で表されます。

初心者の方は、もっとざっくりと、「id名セレクタ ＞ class名セレクタ ＞ タグ名セレクタ」の順番で優先順位が高いと覚えておいても良いと思います。
また、「!important」を width: 100% !important; といったように使用することで優先順位を最高に引き上げることができます。

属性のCSSセレクタ指定

[]を使うセレクタを属性セレクタと言います。この[]内にはhtmlタグの属性やその値を入れることができます。
「inputタグのname属性がexampleなら」というセレクタは「input[name="example"]」となります。

<input name="example" type="text" value="指定"> の場合

input[name="example"]{
border: 1px solid #999;
padding: 10px;
・・・
}

これで指定することができます。
nameだけでなくinput[type="text"]でも同じように指定ができます。