レスポンシブデザインでコーディングしてみよう
2カラムのレスポンシブデザイン
responsive3.htmlとresponsive3.cssを開いてください。
パソコン表示は900px以上とします。
パソコン表示は2カラムで左にメイン(500px)、右にサイド(300px)です。それより小さいサイズの場合は2カラム表示せず、横幅いっぱいに広げます。
では、実際に2カラム表示のレイアウトをCSSでしてみましょう。
floatを使う場合
メインにfloat:left;
を、サイドにfloat:right;
と横幅をメディアクエリで指定してください。
.main, .side {
width:100%;
}
@media ( min-width : 900px ){
.main {
float: left;
width: 500px;
}
.side {
float: right;
width: 300px;
}
}
flexを使う場合
横に並べたいコンテンツの親要素にdisplay: flex;
を指定してください。
.main, .side {
width:100%;
}
@media ( min-width : 900px ){
.wrapper {
display: flex;
justify-content: space-between;
}
}