HTML/CSS」タグアーカイブ

Bootstrap基礎

Gridシステムについて

containerクラスで囲うと余白ができる

全体の横幅12に分割すると考える。

先ず、rowクラスを作り、その中に
col-sm-12クラスのようにして追加いく。

col-sm-12のsmの部分は、該当px以下のときに適応される。
xs = auto
sm = 750px
md = 970px
lg = 1170px
が種類。

hidden-xs
visible-xs
のように該当サイズになると見せたり消したりもできる。

tableタグ

tableタグにtableクラスを付けるだけで見た目が変わる。
その他にも、tableクラスと合わせて
table-stripedクラス(色分)
table-borderedクラス(枠線)
table-hoverクラス(カーソル反応)
table-condensed(縮小)
などがある。

trタグではwarningクラスと付けると行に色が付く。

formタグ

先ずform-groupクラスで囲う。
その中にlabelタグとinputタグを入れる。
labeタグにはcontrol-labelクラスを付けて、
inputタグには、form-controlクラスを付ける。

buttonタグには、
btn btn-primaryクラス等を付ける。

formタグにform-inlineクラスを付けと横並び。

glyphiconsとボタン

<i class=”glyphicon glyphicon-book”></i>
のように使う。

btn btn-primaryクラス等でボタンとなる。

ボタンをグループ化スル場合、要素を
btn-groupクラスで囲う。

dropdown

ボタングループを作って、ボタンを入れて、そのボタンに、
dropdown-toggleクラスを付けのと、
data-toggle属性にdropdownを付ける。

メニューは、ulタグにdropdown-menuクラスを付ける。

<button class=”btn btn-primary dropdown-toggle” data-toggle=”dropdown” >
xxx <span class=”caret”></span>
</button>
<ul>
<li class=”dropdown-menu”>xxx</li>
</ul>
のような感じ。

最大幅を固定

@media(min-width:750px){.container{max-width:750px;}}
この場合750pxより大きい場合に適用。

グリッドのネスト

ネストさせる場合。
.row > .col > .row > .col
にする。

子になった方も12で分割される。

適当に実験

googleサイト内検索 ウィジェット

wordpress標準の検索だと使いづらい。

CSSメモ

忘れていたことを少し調べた。昔の知識なので、
しっかり調べ直すことが必要。

positionについて

static:
位置指定できない(top/bottom/left/rightが使えない)static以外は基準となれる。
relative:
top/bottom/left/rightが使える。
abusolute:
祖先の左上基準。なければbodyの左上から。
fixed:
スクロールしても固定。

abusolute,fixedはfloat:noneになってしまう。
relativeはtop/bottom/left/rightとfloatを流用できるが、通常はstatic + floatとおぼえておく。

floatのクリア

floatの親要素に以下。

センタリング

margin: 0 auto
widthは必要。

margin相殺

marginは重なると相殺される。
大きい値が優先。

ネストして親と子が同じ方向にmarginがあった場合も
相殺される。(親にborderがあったりpaddingがあるとおきない。)

高さ100%