CSS

2013.10.16

はみ出る部分を処置方法 [overflow]

overflow:表示方式

[表示方式]
visible(ボックスからはみ出して表示)
hidden(はみ出した部分を表示しない)
scroll(スクロールして見れるようにする)
auto(必要に応じてスクロールが出る)

[CSS]

.sample1{overflow:visible}
.sample2{overflow:hidden}
.sample3{overflow:scroll}
.sample4{overflow:auto}

「overflow:scroll」を指定してます。
overflowは、ボックスに内容が入りきらない時に、その部分がどのように表示するのかを設定するプロパティ。

「overflow:hidden」を指定してます。
overflowは、ボックスに内容が入りきらない時に、その部分がどのように表示するのかを設定するプロパティ。

「overflow:auto」を指定してます。
overflowは、ボックスに内容が入りきらない時に、その部分がどのように表示するのかを設定するプロパティ。

「overflow:visible」を指定してます。
overflowは、ボックスに内容が入りきらない時に、その部分がどのように表示するのかを設定するプロパティ。

2013.10.16

表示されないようにする [display:none]

display:none(その要素がない状態)
visibility:hidden(領域はあるが見えない状態)

[CSS]

.none{display:none}
.hidden{visibility:hidden}

すぐ下には表示されない段落がある。「display:none」を指定。

123 456
右となりは「visibility:hidden」を指定 visibility:hiddenだよ
2013.10.16

重なる十順序を指定 [z-index]

z-index:重なる順序

.sample{
 z-index:2;
}
2013.10.16

絶対的な位置に固定配置 [position:fixed]

position:fixed(絶対位置であること示す)
top:距離(上からの距離)
bottom:距離(下からの距離)
left:距離(左からの距離)
right:距離(右からの距離)

div{
 position:fixed;
 top:50px;
 left:100px;
}

上から200px
左から30pxに位置している赤い四角

※スクロールしても位置が変わらない。

2013.10.16

相対的な位置に配置 [position:relative]

position:relative(絶対位置であること示す)
top:距離(上からの距離)
bottom:距離(下からの距離)
left:距離(左からの距離)
right:距離(右からの距離)

div{
 position:relative;
 top:50px;
 left:100px;
}

上から50p
左から30pxに位置している青い四角

2013.10.16

絶対的な位置に配置 [position:absolute]

position:absolute(絶対位置であること示す)
top:距離(上からの距離)
bottom:距離(下からの距離)
left:距離(左からの距離)
right:距離(右からの距離)

div{
 position:absolute;
 top:50px;
 left:100px;
}

上から200px
左から30pxに位置している赤い四角

2013.10.16

回り込みを解除 [clear]

clear:どちら側を解除するか

[どちら側を解除するか]
left(左側を解除)
right(右側を解除)
both(両側を解除)
none(解除しない)

.left{
 clear:left;//左側を解除
}
.both{
 clear:both;
}
2013.10.16

左右への回り込み配置 [float]

float:配置位置

[配置位置]
left
right
none

.left{
 float:left;
}
2013.10.15

幅と高さの指定 [width height]

width:
height:

[CSS]

.sample1{
 width:200px;
 height:150px;
}

幅200px高さ150pxで指定

2013.10.15

枠線をまとめて指定 [border]

border-top:上の線
border-bottom:下の線
border-left:左の線
border-right:右の線
border:

[CSS]

.sample1{border:double 5px #ff9900;}
.sample1{border:dashed 3px #ffcc00;}
.sample1{border:dotted 8px #0000ff;}
.sample1{border:ridge 10px #996600;}

double 5px #ff9900

dashed 3px #ffcc00

dotted 8px #0000ff

ridge 10px #996600

2 / 512345

トップ