CSS - AxiZ沖縄ブログ

CSSについての講義の補足&まとめです。

リファレンス

リファレンスに関しては、 HTMLの場合と同じくMDN をご利用下さい。

CSSとは

Cascading Style Sheetsの略です。
Webページのレイアウトを整えるための技術で、HTMLと合わせて使用します。
HTMLはWebページの構造（内容）を定義するものでしたが、 CSSは、それぞれの要素の配置や大きさ、色などのレイアウトに関する部分を定義します。

ファイル名・拡張子

cssファイルの拡張子は「.css」です。
ファイル名は任意ですが、「style.css」や「styles.css」などが多いです。

ファイル名を日本語にすることも可能ですが、その場合は文字化けを防ぐために、
ファイルの先頭に「@charset "UTF-8";」と記述します。

バージョン

HTMLと同じくW3Cという団体が仕様を決めています。
現在の最新バージョンはCSS3です。
最新バージョンの機能の場合、HTMLと同様、ブラウザの種類やブラウザのバージョンによっては対応していない機能もある可能性があります。

適用方法

HTMLファイルのレイアウトを整えるには、CSSを適用させる必要があります。
そして、HTMLにCSSを適用させる方法は3つあります。

style属性に指定する
styleタグの中に記述する
外部ファイルに記述する

一般的には3の方法が使われることがほとんどですが、それぞれにメリットデメリットがあるので、一つずつ説明していきます。

style属性に指定する

これは、タグの中にstyle属性をして、その中にスタイルを指定します。

index.html
html <h1 style="color: red; ">Hello</h1>
- メリット
  
  軽く試したいときに便利。
- デメリット
  
  HTMLファイルの中身が煩雑になる。
  複数の要素に同じ設定をしたい時、同じことを何度も書く必要があり、効率が悪い。
styleタグの中に記述する

これは、headタグの中でstyleタグを使って設定する方法です。

index.html html <head> <style> h1 { color: red; } </style> </head> ... <h1>Hello</h1>
- メリット
  
  1の方法よりはファイルの中身が見やすい。
  1つのファイルで、HTMLとCSSの両方を確認できる。
- デメリット
  
  複数のHTMLファイルに、同じ設定をしたい時、それぞれのファイルに同じ内容を何度も書く必要があるので、効率が悪い。
外部ファイルに記述する

CSSとHTMLのファイルを分けて書く方法です。
この方法が一般的でよく使用されます。

index.html html <head> <link rel="stylesheet" href="css/style.css"> </head> <h1>Hello</h1>

style.css css h1 { color: red; }
- メリット
  
  複数のHTMLファイルに同じ設定を簡単に出来るので、効率が良い。
  HTMLファイルとCSSファイルを分けると事で、管理がしやすくなる。
- デメリット
  
  TMLとCSSでファイルを分けるので、ファイル数が増える。

書き方

書き方は以下の通りです。

セレクタ {    
    /* コメント */
    プロパティ: 値;
}    
/* サンプル */
h1 {   
    /* 文字色を赤く */
    color: red;
}

セレクタは、「どの要素に？」の役割を果たします。
プロパティは、「何を？」に当たります。
値は、プロパティに対する値です。
このサンプルの場合、h1要素に対して、文字色を赤に設定します。
という意味になります。
値は、プロパティによって設定できるものが異なります。
色、サイズなどの場合もあれば、プロパティによってあらかじめ決められているものもあります。

一つのセレクタに対してプロパティはいくつでも設定可能です。
一番最後に書いたセレクタの値に対しては、セミコロンを省略することができます。
ただし、セミコロンを省略してしまうと、後からプロパティを追加するときに付け忘れて思わぬ不具合につながる必要があるので、セミコロンはつける癖をつけておいた方がよいでしょう。

また、cssでコメントを書く場合は /* */の中に書きます。

セレクタについて

セレクタの指定方法

全部で4つあります。
1の指定方法はあまり使われません。

全ての要素の指定
- (ユニバーサルセレクタ)
要素で指定要素名(要素セレクタ)
クラス指定 .クラス名
id指定 #id名

セレクタの適用範囲

別々の要素に同じスタイルを適用させたい場合や、逆に適用する要素を絞り込みたい場合などのセレクタの書き方色々。

aとbに同じスタイルを適用
a, b
aの配下にあるbにスタイルを適用
a b
aの直下にあるbにスタイルを適用
a > b
aの次に来るbにスタイルを適用
a + b
aかつbの要素にスタイルを適用
ab

※aとbはセレクタを表しています。

疑似クラス

疑似クラスは、要素が特定の状態の時にスタイルを適用したいという場合に使用するものです。
コロン(:)を使用して、状態を指定します。

リンクに関する疑似クラス

a:link（未訪問の場合）
a:visited（訪問済みの場合）
a:hover（マウスが乗ったとき）
a:active（マウスをクリックしたとき）

他にも、フォームに関する疑似クラスや、順番などに関する疑似クラスもあります。
詳しくはリファレンスなどをご覧ください。

値について

長さの設定

px：ピクセル指定
em：親要素に対して何倍かの指定
%：親要素に対して何%かの指定

0を指定する場合は、単位を省略できる。
0以外を指定するときは、単位を指定しないとうまく動作しないので注意する。

色の指定

名前で指定する。

red, blue, greenなど、色の名前で直接指定する。
color: red;
RBG

red, blue, greenの頭文字を取ったもの。 RBGも2つの指定方法がある。
1. rgb(0, 0, 0)
  
  それぞれを0～255の値で指定する。 0,0,0だと黒。255,255,255だと白。
  color: rgb(0, 0, 0);
2. 16進数で2桁ずつ、6桁で指定する方法。
  #000000

HSLという指定方法もあります。
また、透明度を指定することも可能です。

プロパティについて

プロパティの種類

プロパティは様々な種類があります。
主なもの以下の通り

テキストに対するスタイル（文字色、フォントのサイズなど）
リストへのスタイル（リストの左端のマークなど）
背景へのスタイル（背景色や背景の画像など）
カーソル（カーソルのアイコン）
ボックスモデルに関する
- widthとheight
- border
- marginとpadding
配置に関するプロパティ
- displayプロパティ
- グリッドレイアウト
- FlexBox
- positionプロパティ
- float

などなど。
大抵やりたいことをうまく検索すれば見つけることができるはずです。
ググってやりたいことが実現できるプロパティを探し、詳しく知りたい場合はリファレンスを参照するなどして調べてみてください。

プロパティの一括指定

プロパティは、書き方によって複数のプロパティを一括で指定できるものがあります。
例えば、marginというボックスモデルの余白を定義するプロパティがあります。
上下左右を指定するには、 margin-top, margin-bottom, margin-left, margin-right というプロパティで指定すればよいのですが、以下にようにまとめて指定することもできます。
margin: 10px 15px 20px 25px;

一括指定ができるプロパティや、指定の仕方のルールなどはリファレンス等を参照ください。

勉強方法

CSSは書き方は難しくありません。
一度理解してしまえば、後はやりたいことを実現するための適切なプロパティを探してうまく使えるかどうかです。
HTMLと比較すると、覚えることが多く、自分の思い通りのレイアウトを実現するのは意外と難しいです。
色々なサイトを参考に、試行錯誤したり、ドットインストールなどの学習サイトで基礎を身に付けると良いでしょう。

Bootstrap

CSSの応用編として、Bootstrapという技術があります。
これはCSSのフレームワークです。
簡単に言うと、少ない記述でいい感じのデザインをサクッと作れてしまう技術。
javaScript(jQuery)も必要なので、ハードルは低くありませんが、興味がある人は調べて試してみるのも良いでしょう。