HTML&CSS ブロック配置

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;
}