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要素に記述していく。「」として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;(両方解除)

<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にする。