CSSレイアウト

2020年10月24日 18:21

カラム＝段組み

Flexboxでレイアウトする

親要素のセレクタ{display:flex;}

sample HTML

<body>
<div class="box">
<div class="item">子要素１</div>
<div class="item">子要素２</div>
<div class="item">子要素３</div>
<div class="item">子要素４</div>
</div>
</body>

sample CSS

.box{
display:flexbox;
}
.item{
width:100px;
height:100px;
padding:10px;
margin:10px;
background:#cccccc;
}

子要素の並ぶ方向を設定する

親要素のセレクタ{flex-direction:値;}
flex-directionのプロパティ値
row：子要素を左から右に並べる(初期値)
row-reverse：子要素を右から左に並べる
colum：子要素を上から下に並べる
colum-reverse：子要素を下から上に並べる

子要素の水平方向の揃えを設定する

親要素のセレクタ{justify-content:値}
justify-contentのプロパティ値
flex-start：左揃えで配置(初期値)
flex-end：右揃えで配置
center：中央揃えで配置
space-between：最初と最後の子要素を両端に配置し、その間の子要素は間をあけて均等に配置
space-around：すべての子要素を均等な感覚で配置

positionプロパティでのレイアウト

セレクタ{position:値;}
positionのプロパティ値
static：特に配置方法を指定しない
relative：要素自身の左上を基準位置とした配置方法を指定(相対配置)
absolute：ウィンドウ全体の左上もしくは親要素の左上を基準位置とした配置方法を指定(絶対配置)
fixed：ブラウザのスクロールを無視した絶対配置(指定した要素は常に画面上に表示される)

配置位置を指定するプロパティ

セレクタ{
position:値;
top:値と単位;
left:値と単位;
}
positionのプロパティ値
top：基準位置の上端から要素を配置する距離を指定
right：基準位置の右端から要素を配置する距離を指定
left：基準位置の左端から要素を配置する距離を指定
bottom：基準位置の下端から要素を配置する距離を指定

画像をかさねて上部画像にリンクボタン機能を付与

HTML

<body>
<div class="access">
<img src="images/shopper.jpg" alt="Rin's Garden">
<a href="access.html" class="btn"<img src="images/access-btn.png" alt="アクセスマップはこちら"></a>
</div>
</body>

CSS

div{
width:600px;
position:relative;
}
a.btn{
position:absolute
bottom:10px;
right:10px;
}

要素を浮かせる

セレクタ{float:値;}
floatのプロパティ値
none：要素を浮かせない(初期値)
left：要素を左側に寄せて、後に続く要素を右側に回り込ませる
right：要素を右側に寄せて、後に続く要素を左側に回り込ませる

clearプロパティで回り込みを解除する

セレクタ{clear：値}
clearプロパティの値
none：回り込みを解除しない(初期値)
left：左寄せされた要素に対する回り込みを解除
right：右寄せされた要素の回り込みを解除
both：すべての回り込みを解除

この記事が気に入ったらサポートをしてみませんか？