#まとめ
##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はどこに書くか?
- スタイルの指定は大きく分けて3つの書き方がある。1つ目はstyleタグの中に書いていく方法。2つ目はインラインで書いていく方法。3つ目は外部ファイルに書いていく方法がある。
- styleタグはhead要素の中に入れなくてはいけない。head要素の中にstyleタグを作って、その中に書いていく。
- 複数行に分けて書くこともできるが、見通しをよくするために1行で書くこともある。
- インラインで書いていく場合は、タグに直接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を使うと1個につき100ポイント、クラスを1個使うたびに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にする。