CSSでdivを横並びにしてレスポンシブ対応する方法
CSSでdivを横並びにしてレスポンシブ対応する方法を説明します。
ここでいう「レスポンシブ対応」はパソコン版がスマホ版になっても崩れない（横スクロールが発生しない）ことを指すこととします。
スマホ版で横並びにしたいときと、スマホ版では縦並びに切り替えたい時があると思いますのでそれぞれ説明します。
要素を横並びにする方法
divなどの要素を横並びにするにはCSSの「display:flex」を利用します。
display:flexは主に横並びに使うためのCSSです。
display:flexをざっくり説明すると、display:flexを指定された直下の子要素を横並びにするというものです。
少しクセがあるので以下の記事を参考にしてみてください。
display:flexを利用すると以下のように横並べにできます。
完成イメージ
html
<div class="yokonarabe">
<div>左</div>
<div>右</div>
</div>CSS
.yokonarabe{
display:flex;/*コレ*/
width:100%;
margin:0;
}
.yokonarabe>div{
width:48%;
margin:0 1%;
border:1px solid #999;
background:#FFF;
}まずここまででdivを横並びにしました。
divの中にimg（画像）をいれれば画像の横並びも可能です。
CSSやhtmlの基本をしっかり理解すると、この記事の内容もより理解できるようになりますよ。
↓CSSやhtmlを楽しく学べるようにマンガを描きましたのでゼヒご覧ください↓
↑「副業してもう少し稼ぎたい！」というかたのために副業の方法も解説しています。
対応1.スマホ版でも要素を横並びにする場合
1列内のコンテンツが少ないときはスマホ版でも横並びにすることがあります。
レスポンシブでは横幅（width）をピクセルによる絶対指定はせずに横幅に対して％などの相対指定を使います。
パソコン版でwidthをpx指定している場合は調整する必要があります。
横並びについてはパソコン版同様、引き続き「display:flex」を使います。特に変更は不要でしょう。
以下の例は先に提示したものと全く同じものです。
このサイトの横幅を縮めてスマホ幅にしてみてください。
横並びのままのはずです。
対応2.スマホでは要素を縦並びにする場合
1列の内容が多いとき、スマホ版では見づらくなります。
PCでは2列にしつつスマホでは1列にしましょう。
PC版とスマホ版のCSSは「メディアクエリ」を使うことで切り変えることができます。
メディアクエリは以下のように記述します。
@media(min-width:751px){
パソコン版のCSS
}
@media(max-width:750px){
スマホ版のCSS
}このようにメディアクエリを使うことでPC版のときだけ効かせたいCSSとスマホ版だけ効かせたいCSSを分けることができます。
メディアクエリ・レスポンシブ対応についてもっと知りたい方はこちら↓
完成イメージ
上記を利用して、パソコンでは横並び、スマホでは縦並びにしたのがこちら↓
ブラウザの横幅を狭めると縦並びになります。
html
<div class="yokonarabe">
<div>PC版で左（スマホ版では上）</div>
<div>PC版で右（スマホ版では下）</div>
</div>CSS
@media(min-width:751px){
/*PC版のみ*/
.yokonarabe{
display:flex;
width:100%;
margin:0;
}
.yokonarabe>div{
width:48%;
}
}
/*PC・スマホ共通*/
.yokonarabe>div{
margin:0 1%;
border:1px solid #999;
background:#FFF;
}メディアクエリを使うことでパソコン版のときだけdisplay:flexが効くようにしています。
スマホ版ではdisplay:flexが指定されていない状態になります。
まとめ
要素を横並びにする
display:flexを使いましょう。
対応1.スマホ版でもdivを横並びにする場合
display:flexをそのまま利用しましょう。
対応2.スマホではdivを縦にする場合
メディアクエリでCSSを切り替え、display:flexが効いていない状態にしましょう。
以上、CSSでdivを横並びにしてレスポンシブ対応する方法でした。
「この記事の内容がよくわからなかった…」「なんかうまくいかなかった…」というかたは下記記事↓でhtmlとCSSの基本を学びましょう。
わからないまま突き進むより基本を学ぶのが結局近道です。
