開発でよく使用する便利技をここに残しておきます。
これいいなと思ったものはここに残すつもりなので都度更新するかもしれません。
要素の上下中央寄せ
要素の上下中央寄せの方法はいくつかあります。
その中でも、自分が開発を行う上でよく使うのいくつか紹介させて頂きます。
完成例
html
<divclass="c-box"><divclass="c-box__inner"></div></div>flex
まずはflexを使った上下中央寄せをご紹介します。
.c-box{display:flex;align-items:center;width:200px;height:200px;border:1pxsolid#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:1pxsolid#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:1pxsolid#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
これもよく使うので紹介するほどでもないですが
<divclass="c-box"><divclass="c-box__inner"></div></div>.c-box{width:200px;height:200px;border:1pxsolid#333;}.c-box__inner{width:30px;height:30px;background:#333;margin:0auto;}こんな感じでmargin: 0 auto;を使えば左右中央寄せができます。
また、margin: 0 0 0 auto;などとすると右寄せにもできます。
flex
またflexですが、縦ができるのであればもちろん横もできます。
<divclass="c-box"><divclass="c-box__inner"></div></div>.c-box{display:flex;justify-content:center;width:200px;height:200px;border:1pxsolid#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:1pxsolid#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プロパティです。
その他にも要素の横位置の調整だったりでも多く使用します。
<divclass="c-box"><divclass="c-box__inner"></div><divclass="c-box__inner c-box__inner--red"></div></div>.c-box{display:flex;justify-content:space-between;width:200px;height:200px;border:1pxsolid#333;}.c-box__inner{width:30px;height:30px;background:#333;}.c-box__inner--red{background:#ff0000;}
このように2つの要素を両端に置くことができました。
使う場面は多くあるのですが、短かなところで言うとサイトのheaderなどで左にロゴがあって、右にメニューがあるようなものとかだとイメージしやすいかと思います。
まとめ
こんな感じで自分がよく使うcssを紹介しましたが、皆さんはどうでしょうか？
こんなの便利だよとかあれば是非ご紹介してください。