floatプロパティ
指定された要素を左または右に寄せて配置する際に使用。
副作用
・親要素の高さは子要素のheightの合計
・子要素にfloatを使用すると、その子要素は浮いたような形になる
・親要素は高さを持てなくなり、消えてしまう
解決方法
floatの副作用を防ぎたいクラスに付与することで問題が解決。
css
.clearfix::after {
content: "";
clear: both;
display: block;
}
html
<div class="contents clearfix">
<div class="left-content">
</div>
<div class="right-content">
</div>
</div>
after
HTMLに書かなくても要素を後付けできる
contentプロパティ
擬似要素afterによって作成された要素の中身を指定するためのプロパティ。
afterを利用する際は必須になるので、何も表示したくない場合は値を""とし空白とする。
clearプロパティ
clearプロパティは、floatによって無くなる要素の高さを正常に戻してくれるプロパティ。
手前の要素をfloatしたあと、floatによって回り込ませたくない要素に対して使う。
値は both とすることが多い。
displayプロパティ
displayプロパティは、要素の種類(ブロック要素、インライン要素)を変更することができるプロパティ。
値には、変更したい要素の種類を取る。
marginプロパティ
箱の外側に余白を取ります。pxで指定。上下左右4方向に指定できる。
指定方法 説明
margin: 1px; [上下左右]の余白をまとめて1pxに指定
margin: 1px 1px; [上下][左右]の余白をそれぞれ1pxに指定
margin: 1px 1px 1px; [上][左右][下]の余白をそれぞれ1pxに指定
margin: 1px 1px 1px 1px; [上][右][下][左]の余白をそれぞれ1pxに指定
paddingプロパティ
箱の内側に余白を取る。指定方法はmarginと同様pxになる。
指定方法 説明
padding: 1px; [上下左右]の内側の余白をまとめて1pxに指定
padding: 1px 1px; [上下][左右]の内側の余白をそれぞれ1pxに指定
padding: 1px 1px 1px; [上][左右][下]の内側の余白をそれぞれ1pxに指定
padding: 1px 1px 1px 1px; [上][右][下][左]の内側の余白をそれぞれ1pxに指定
borderプロパティ
箱の境界線の幅や色を変更できる。
ボックスモデルの中央寄せ
marginプロパティで、左右の値をautoに指定することで、ブロック要素を中央に配置することができる。
指定方法 説明
margin: 0 auto; [左右]に対して中央に配置
justify-contentプロパティ
justify-content: 〇〇;といった形で、display: flex;に併記する。
すると横並び方向の詳細を決めることができる。
・左寄せ
justify-content: flex-start;
・右寄せ
justify-content: flex-end;
・中央揃え
justify-content: center;
・両端が左右に寄り等間隔
justify-content: space-between;
・両端が左右に寄り等間隔で両端の余白と要素間の余白が1:2
justify-content: space-around;
position: absolute;
要素の配置を絶対指定する。ブラウザの左上を基準として、top/right/bottom/leftで位置を指定。
例）上側と左側に、それぞれ30pxの空間ができる。
position: absolute;
top: 30px;
left: 30px
position: relative;
親要素に付与すると、子要素の基準を自身の要素として指定することができる。
align-items
display: flex;が付与された子要素について、縦方向の詳細を決める
例）上下中央に配置
align-items: center;
flex-direction
display: flex;が付与された子要素について、並び順を決める
例）上から下に並んでいく
flex-direction: column;
background-image
背景画像を指定する
background-image: url(xxxxxxxx);
background-size
背景画像のサイズを決めることができる
例）全体を覆うサイズになる
background-size: cover;
background-position
背景画像の配置を決めることができる
例）上下左右中央に配置される
background-position: center;
:hover
マウスが当てられたときに機能する疑似要素
.cta-btn:hover {
box-shadow: 0 0 10px #ffa201;
}