お昼に食べすぎてお腹が痛いバナナです。
今回は、CSSだけでスプリットレイアウトを作ってみたいと思います。
スプリットレイアウトというのは縦半分に割れているサイトです。
若干、いまさら感がありますが…。
どうやって作ろうかなと考えた時に下記の2つの方法を思いついたので、今回は2つを紹介していきたいと思います。
- Flexboxを使用した方法
- floatを使用した方法
共通して使用するHTML
どちらの方法も同じHTMLを使用するので、先に書いておきますね。
HTML
<div class="parent">
<div class="child"></div>
<div class="child"></div>
</div>共通して使用するCSS
CSS
.child:nth-child(1){
background: url('./images/col2_bg_left.jpg') no-repeat center center;
background-size: cover;
}
.child:nth-child(2){
background: url('./images/col2_bg_right.jpg') no-repeat center center;
background-size: cover;
}Flexboxを使用したスプリットレイアウト
CSS
.parent{
display: flex;
height: 100vh;
}
.child{
height: 100vh;
width: 50%;
}
@media screen and (max-width: 768px) {
.parent{
flex-direction: column;
}
.child{
width: 100%;
}
}floatを使用したスプリットレイアウト
CSS
.parent{
overflow: hidden;
height: 100vh;
}
.child{
float: left;
height: 100vh;
width: 50%;
}
@media screen and (max-width: 768px) {
.child{
float: none;
height: 50vh;
width: 100%;
}
}まとめ
どちらの方法も横並びにしてその背景に画像を設定するだけなので簡単にできますね。
どちらもやりやすいですが、Flexboxを使ったほうが簡単でいいですね。
最近はfloatを使うことが少なくなりましたね。
Flexbox万能ですからね。
調子こいて使いすぎてIEとかで崩れててヒィィってなるんですけどね。
jsを使わないとできなさそうなことでも最近はCSSだけで完結できることが多くなりましたよね。
簡単にホームページが作れるサービスとかもたくさん出ててきてるし…。
ポンコツ底辺のバナナはいつ仕事がなくなるかとビクビクして夜も寝れません。
ちなみにバナナの睡眠時間は23:30くらい～7:00くらいです。
約8時間。健康的です。
今回はこんな感じで。またね。