開発でよく使用する便利技をここに残しておきます。
これいいなと思ったものはここに残すつもりなので都度更新するかもしれません。
要素の上下中央寄せ
要素の上下中央寄せの方法はいくつかあります。
その中でも、自分が開発を行う上でよく使うのをいくつか紹介させて頂きます。
完成例
html
<div class="c-box">
<div class="c-box__inner"></div>
</div>
flex
まずはflexを使った上下中央寄せをご紹介します。
.c-box {
display: flex;
align-items: center;
width: 200px;
height: 200px;
border: 1px solid #333;
}
.c-box__inner {
width: 30px;
height: 30px;
background: #333;
}
display: flex;はcssのレイアウト技法の一つです。
align-itemsは垂直方向の揃え方を指定します。(display: flex;を指定しないと使用できません。)
centerプロパティで垂直方向の中央に配置しています。
position + transform
次はpositionとtransformを使ってやってみます。
.c-box {
position: relative;
width: 200px;
height: 200px;
border: 1px solid #333;
}
.c-box__inner {
position: absolute;
top: 50%;
width: 30px;
height: 30px;
background: #333;
transform: translateY(-50%);
}
こっちのやり方では親のc-boxにposition: relativeを設定。
子のc-box__innerにposition: absolute;とtop: 50%;で上下中央に配置していますが
これだけだと子の要素の高さ(30px)分、下に行ってしまうのでtransform: translateY(-50%);で要素の半分(50%)を上にずらしています。
translateYはY軸の位置を決めます。
calc
次はwidthなどで最近見かけるようになってcalcを使ったやり方を紹介します。
.c-box {
position: relative;
width: 200px;
height: 200px;
border: 1px solid #333;
}
.c-box__inner {
position: absolute;
top: calc(50% - 15px);
width: 30px;
height: 30px;
background: #333;
}
こちらも上の例とほぼほぼ同じですが、違う点はtransformを使用していないのと
topプロパティにcalcを使っています。
calcはcssの値の計算に使える関数です。
top: calc(50% - 15px);でtop: 50%から子要素の高さの半分の15pxを引いているので中央に来るようになっています。
calcはwidthなどでも多く使える場面があるので覚えておくといいかもしれません。
要素の左右中央寄せ
次は左右中央寄せの仕方を何パターンかご紹介します。
text-align
これは紹介不要だと思いますが、一応紹介しておきます。
<p>ダミーテキストです。</p>
p {
text-align: center;
}
これだけです。
主にテキストの位置関係で使用します。
テキストを中央に寄せたい場合、左に寄せたい場合、右に寄せたい場合も使用できますので知らない方は是非調べてみてください。
margin
これもよく使うので紹介するほどでもないですが
<div class="c-box">
<div class="c-box__inner"></div>
</div>
.c-box {
width: 200px;
height: 200px;
border: 1px solid #333;
}
.c-box__inner {
width: 30px;
height: 30px;
background: #333;
margin: 0 auto;
}
こんな感じでmargin: 0 auto;を使えば左右中央寄せができます。
また、margin: 0 0 0 auto;などとすると右寄せにもできます。
flex
またflexですが、縦ができるのであればもちろん横もできます。
<div class="c-box">
<div class="c-box__inner"></div>
</div>
.c-box {
display: flex;
justify-content: center;
width: 200px;
height: 200px;
border: 1px solid #333;
}
.c-box__inner {
width: 30px;
height: 30px;
background: #333;
}
このようにコードは上でやった上下中央寄せと同じコードですが一箇所だけ違います。
align-itemsは垂直方向の位置指定でしたが、
justify-contentプロパティを今回は入れています。
justify-contentプロパティは水平方向の位置指定ができるのでcenterの値を入れると左右中央に配置できます。
position + transform
次はpositionとtransformでやってみますが、こちらも上で紹介したこととほぼほぼ同じことをします。
.c-box {
position: relative;
width: 200px;
height: 200px;
border: 1px solid #333;
}
.c-box__inner {
position: absolute;
left: 50%;
width: 30px;
height: 30px;
background: #333;
transform: translateX(-50%);
}
このように変わった部分は子要素のtransform: translateX(-50%);の部分だけです。
(左右中央寄せなのでtop→leftに変わってます。)
flex系
flex
flexは上でも紹介していますが、中でもよく使うものをご紹介します。
justify-content
2つ以上の要素を左右の端に置いたり、均等に並べたい場合によく使用するのが
justify-contentプロパティです。
その他にも要素の横位置の調整だったりでも多く使用します。
<div class="c-box">
<div class="c-box__inner"></div>
<div class="c-box__inner c-box__inner--red"></div>
</div>
.c-box {
display: flex;
justify-content: space-between;
width: 200px;
height: 200px;
border: 1px solid #333;
}
.c-box__inner {
width: 30px;
height: 30px;
background: #333;
}
.c-box__inner--red {
background: #ff0000;
}
このように2つの要素を両端に置くことができました。
使う場面は多くあるのですが、短かなところで言うとサイトのheaderなどで左にロゴがあって、右にメニューがあるようなものとかだとイメージしやすいかと思います。
モーダル
モーダル組むときの簡単な方法です。
<div class="c-modal">
<div class="c-modal__content">
テキストサンプル
</div>
</div>
.c-modal {
display: flex;
align-items: center;
justify-content: center;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0, 0.8);
}
.c-modal__content {
padding: 20px;
margin: 20px;
width: 200px;
max-height: calc(90vh - 40px);
border: 1px solid #333;
border-radius: 10px;
background: #fff;
overflow: scroll;
}
これだけです。
これだけで、簡単にモーダルが作れます。
中のコンテンツが増えた時、少ない時にflexを用いて上下左右中央になるようにしています。
また、中のコンテンツが増えた際に中のコンテンツがスクロールできるようにしています。
その際に重要なのが、 max-height: calc(90vh - 40px);の部分です。
ここではvhを用いて、コンテンツの高さを画面幅以上にならないように制御し、コンテンツの上下のマージン分を引いています。
まとめ
こんな感じで自分がよく使うcssを紹介しましたが、皆さんはどうでしょうか？
こんなの便利だよとかあれば是非ご紹介してください。