CSS入門（nojimayusuke）

#まとめ

##CSS概要
cascading style sheetの略
html文書構造+css見た目=webページ

* CSSでは基本的にHTML内の要素を指定して、それに対してstyleを当てはめていく。
* 書き方はセレクタ（どの要素に対してスタイリングするかというもの、操作対象）を書いたあとに、｛｝を書いて、その中にプロパティと値をセットにして「プロパティ：値」のように書く。
* プロパティと値のセットは複数書くこともできるので、その場合は；で区切って書く。
* h1の文字を赤くしたい場合　
「h1{color: red;}」
と記述する。
「h1」がセレクタで、「color」がプロパティで、「red」が値ということになる。
* セレクタはHTMLの要素を指定する場合と、idを指定する場合と、classを指定する場合の書き方がある。
* HTMLの要素を指定するにはh1,p,ulとタグをそのまま書いていけばよい。
* idを指定する場合は「#」を付けて、idの名前を書いておく。
* classの場合は「.」を付けて、class名を付けることでセレクタになる。
* CSS中にコメントを書く場合、/*....*/で囲う。

##CSSはどこに書くか？
* スタイルの指定は大きく分けて３つの書き方がある。１つ目はstyleタグの中に書いていく方法。２つ目はインラインで書いていく方法。３つ目は外部ファイルに書いていく方法がある。
* styleタグはhead要素の中に入れなくてはいけない。head要素の中にstyleタグを作って、その中に書いていく。
* 複数行に分けて書くこともできるが、見通しをよくするために１行で書くこともある。
* インラインで書いていく場合は、タグに直接style属性を付けて、そこに指定する。例えば、文字色を緑にしたい場合には、「style="color:green;"」と記述する。この場合はセレクタは自明なので、プロパティと値だけ書けば良い。
* 外部ファイルの指定はhead要素に記述していく。「<link rel="stylesheet" href="">」としてhref属性でファイル名を指定する。default.cssというファイルを作成->default.cssの中に「ul{color: pink;}」と記述->index.htmlからdefault.cssを読み込んでulに対して文字色をピンクにする。

##セレクタの指定方法
* 「*」で指定した場合  
すべてのセレクタに影響を及ぼす
a,b複数のセレクタを一気に指定
* スペースで区切る場合
section.item
sectionの下の階層にあるすべてのitemを指定（子要素と孫要素を同時に選択できる）
* 不等号で区切る場合
section > .item
sectionの直下の階層にあるitemを指定（子要素のみに影響を及ぼす）
* +で区切る場合
h2 + p
h2の直後のp要素に影響
* くっつけた場合
p.item
p要素であって尚且つclassがitemであるものを指定している。
* 「,」で区切った場合  
複数のセレクタを一気に指定することができる。

##スタイル指定の優先度
* セレクタが同じ場合->後から書いた方が優先  
  外部ファイルやstyleタグに書くよりも、インラインで書いたほうが優先  
  詳細度の高い方が優先  
  !important指定が最優先
* 詳細度について  
  詳細度はセレクタの中でidを使うと１個につき100ポイント、クラスを１個使うたびに10ポイント、要素を1個使うたびに1ポイントで計算される。
「h1{color: green;}」の場合1ポイント  
「#main h1{color:red;}」101ポイント  
「section #main h1{color:yellow;}」102ポイント  

##色の指定
* 名前で指定(red blue purple)
* rgb数値で指定 rgb(0,255,0)
* 16進数で指定 #00f->青(3桁)  
              #ff0000->赤(6桁) 

##テキストのスタイルを指定する
* color 色
* font-weight: bold; 太字
* font-weight: normal; 普通の太さ
* font-size: 14px; 文字の大きさを変える（ピクセルで指定）
* text-align: center; 行揃えを指定する
* text-decoration: 上下に線を引くことができる  
  text-decoration: line-through; 打ち消し線
* font-family: フォント指定
* line-height: 40px;行の高さを指定

##backgroundについて(背景のスタイル)
* baclground-repeat: url('bg.png');  
  背景に画像を敷き詰める
* background-repeat: no-repeat;  
  1個しか画像を表示しない（左起点）
* background-repeat: repeat-x;  
  横方向だけに画像を敷き詰める
* background-repeat: repeat-y;  
  縦方向だけに画像を敷き詰める
* background-position:10px 10px;  
  右に10px下に10pxの場所を起点にして画像を表示する。
* background-attachment: scroll;  
  画面がスクロールした時にその背景画像をどうするのか指定する。  
[scroll] スクロールすると一緒に流される。  
[fixed] スクロールしても流されない。

以上のプロパティは順不同、省略可能でいっきに指定することもできる。
background: green url('bg.png')no-repeat;  

##ボックスモデルの理解
* width 幅  
  width: 400px;  
%で指定することもできる。この場合、親要素の領域に対しての%表示になり、ブラウザを動かしても指定した%の領域を保っている。
* height 高さ  
  height: 200px;  
%で指定することもできる。この場合、親要素の高さを明示的に示してあげなければならない。
* border 境界
* padding 境界とコンテンツエリアの間にある内側の余白の部分
* margin 境界の外にある余白の部分

##borderについて
* border-color
* border-width
* boeder-style solid(実線) dashed(破線) dotted(点線) double(二重線) inset(立体的に見せる) outset(立体的に見せる)  

background同様にborderで一気に指定することができる。（順不同省略可）
borderで指定すると上下左右すべてborderに対して指定した設定を適用する。

* 左と右でスタイルを変えたい場合  
  border-left: red 5px solid  
  border-right: blue 5px solid  
  右が青色、左が赤色のスタイルになる。

##padding,marginについて
* padding: 10px; 1つの数字の指定だけで上下左右に余白を作ることができる。
* 上下左右それぞれ別に指定する場合  
  padding: 10px(上)20px(右)30px(下)40px(左);時計回りに指定できる。
* 指定する数字の数によってどこが対応するのかの違い  
1 -> all  
2 -> top&bottom left&right  
3 -> top left&right bottom  
4 -> top right bottom left
* 1つだけ指定したい場合（左の場合）  
  padding-left: 10px;
* marginもpaddingと同じである

##display,overflowについて
* 要素の表示に関するプロパティ
* display(要素の表示方法を指定するためのもの)  
  - block 前後に改行が入る  
  - inline 前後に改行が入らない（高さと幅の設定が解除）
  - none 表示されない（スクリプトで表示と非表示を切り替える際によく使われる）

* overflow(要素の内容がはみ出した場合の挙動を指定するためのもの)
　- visible(ありのまま表示する、はみ出して表示される)
　- hidden(はみ出した部分を隠したいとき)
　- scroll(はみ出した部分がスクロールすると見えてくるようになる)

##positionについて
* position(要素の配置方法を指定するためのプロパティ)
 - static(初期値)
 - relative(相対的な配置)　親要素に指定
 - absolute(絶対的な配置)　子要素に指定
 - fixed(スクロールしても位置を変えたくない)  

一般的にはある要素の子要素を、親要素に対して相対的内地で配置したい場合によく使われる。その場合には、親要素に「position:relative;」を指定して、子要素に「position:absolute;」を指定すれば良い。

* fixed(スクロールしても位置が変わらないものを作成するときに使用。例ヘッダーメニュー、フッターメニュー)

##z-indexについて
* z-index(要素の重なりを指定するためのプロパティ)同じ階層でなおかつposition の指定がstatic以外のものに対して使うことができる。数値が大きいほど、重なりの上になる。


##float,clearについて
* float(要素を回りこませる)
* clear(要素を回りこませるのを解除する)
 - clear: left;(左)
 - clear: right;(右)
 - clear: both;(両方解除)

```html
<style>
img {
          float: left;
     }
/*imgの左側に寄せたい場合*/
 h2 {
          clear: left;
/*回りこんでいる関係のない文字に対して回り込みを解除する*/

     }
</style>
```

##list-styleについて
* list-style-type マーカーの種類(デフォルトだと黒丸)、circle(白丸)、square(四角)、katakana(ア、イ、ウ)
* list-style-position マーカーの位置(デフォルトだとoutside)、outside(リスト領域の外側にマーカーが表示される)、inside(リスト領域の内側にマーカーが表示される)
* list-style-image マーカーを画像で表示したい場合に使用する。  

list-style-typeを指定していて、list-style-imageを指定するとimageの方が優先度は高い。

##cursorについて
* cursor(マウスオーバーした際にカーソルの形状を変える)
* プロパティ
  - move 十字カーソルに変わる(ドラッグ可能か知らせるため)
  - help 「?」マークに変わる
  - wait 待ち時間用のカーソルに変わる
  - pointer 指カーソルに変わる

OSやブラウザによって若干形状が違ってくる。

##擬似クラスについて
* 要素がある特定の状態になったときにスタイルを指定できる。セレクタに「:」をつけて記述していく。
 - a:link { color:blue; } -> 未訪問のリンクに対してスタイルを指定
 - a:visited { color:gray; } -> 訪問済みのリンクに対してスタイルを指示  
 - a:hover { font-weight: bold; } -> リンクにマウスオーバーした時に太字にする
 - a:active { background: red; } -> リンクを押してから離すまでのスタイルを指定
 - input:focus { background:green; } -> input要素にfocusがあたった時にbackgroundをgreenにする。