今さら聞けないCSSのあれこれ #CSS

CSSとは

・CSS: HTML要素の見た目を決めるもの

例(h2の色を青に変更する)

h2(セレクター) {
 color(プロパティ): blue(値);
}

idとclassの使い分け

idはサイト内に1つ、classは複数
基本はclassで装飾。idはJSが絡んでくるときに使う

CSSの単位(よく使うのだけ抜粋)

・px: ピクセル、画素数(絶対的)
・%: 親要素に対する割合(相対的)
・em、rem: 基準となる文字に対する大きさ(相対的)

CSSの色

・カラーネーム：red,green,yellowなど
・RGB法(10進法): Red、Green、Blueのバランスで指定 Ex:color(255,0,0);
・RGB法(16進法): 上記と同じ(0~9 + A~Fの16進法で指定) Ex: #ff0000;
　　※１６進法の繰り返しは省略可　#FFFFFF = #FFF;

margin、paddingの指定順(ショートハンド)

margin: 10px, 20px, 30px, 40px;(上、右、下、左の時計回り)
margin: 10px, 20px, 30px;(上10px、左右20px、下30px)
margin: 10px, 20px(上下10px、左右20px)
margin: 10px(上下左右10px)
margin: 0(0の時は、pxを省略できる)

CSSの優先度

セレクタが被った場合、後ろに書いてあるものが優先。
HTMLファイルのタグ内に書いたstyle属性が最優先
classとidに違う値を指定した場合、idが優先。
セレクターが多いほうが優先(.content h2{} > h2{})
- ポイント加算式で優先度が決まり、idは100P、classは10P、タグは1P...etc
!important; を値の後ろに記述することで、優先度が一番高くなる

ブラウザの差異を吸収するためのCSS

・リセットCSS: ブラウザによる差異を無くすために、ブラウザに予め指定されているスタイルを無くす為のCSS
リセットCSSの例

・ノーマライズCSS: ブラウザごとの差異を細かく調整して無くしつつ、基本的なスタイルは残す為のCSS

メディアクエリとレスポンシブWebデザイン

・メディアクエリ: ブラウザの幅によって適応させるCSSを変える方法

記述方法(例)

@media screen and (max-width: 768px){
  CSS_for_SP;
}
@media (max-width: 1600px){
  CSS_for_PC;
}

・グリッドシステム: bootstrapで採用されているシステム。画面を12分割し、規定された幅ごとにレイアウトを変更できる。

記述方法(例)

<div class="col-xs-8">
 hogehoge
</div>
<div class="col-xs-4">
 piyopiyo
</div>

プリプロセッサー

・プリプロセッサーとは... 進化系CSS(CSSを楽に書ける)

何が出来るの？

変数が使える
CSSが入れ子で記述できる

どんなものがあるの？

less
sass
stylus
tass など

従来のCSSに変換するには？

ツールを使う

コマンドを使う

Sassの教科書

タスクランナーを使う(色んな作業を一度に行う)

gulp

CSS3に関して

ブラウザ別CSS対応の違い

ブラウザ別対応表
・Graceful degradation: 全てのブラウザに同じに見えようとするではなく、対応していないブラウザに対しては必要最低限の表示が出来るよう整えていく考え方。

・ベンダープリフィクス: Webブラウザー開発者が、先行して実装しているCSS3の頭につけるもの(W3C勧告前で正式なプロパティではないので、マークで見分ける)

・Safari、Chrome: -webkit-
・FireFox: -moz-
・IE:　-ms-
・Opera: -o-

ベンダープリフィクスの例

-webkit-border-radius: 8px;

CSS3で出来るようになったこと(抜粋)

角丸(border-radius)
グラデーション(linear-gradient)
ドロップシャドウ(box-shadow)
半透明(opacity)
アニメーション