flexによる横並び
今回はflexによる､横並びです｡モバイルファーストで､スマホの場合は､1カラムレイアウトになります｡メディアクエリで振り分けます｡はじめに完成形を見て頂きましょう｡わかりやすいように､色を付けています｡
コンテンツ
スマホで表示した場合､コンテンツが上､サイドバーが下に来ます｡HTMLは以下になります｡
大枠のボックスを作り､コンテンツとサイドバーのボックスを作っています｡
<div class="flex-box">
<div class="left">
<p>コンテンツ</p>
</div>
<aside class="side-bar">
<p>サイドバー</p>
</aside>
</div>
これをCSSにすると､こうなります｡
.left{
background: aqua;
}
.side-bar{
background: green;
}
@media (min-width: 768px) {
.flex-box{
display: flex;
}
}
768px以上になると､コンテンツが横並びになります｡ポイントは､親要素(flex-box)にたいして､flexを書きます｡
モバイルファーストで
僕の場合､モバイルファーストでHTMLコーディングをします｡メディアクエリで振り分けます｡今回は､768px以上になるときのCSSをメディアクエリで書きます｡
今は､スマホなどモバイル端末で見られる機会が多く､まずは､スマホ向けにHTMLコーディングをするといいでしょう｡
ちなみに､モバイルとPCで表示をガラリと変えることはしていないですね｡今回､紹介したように､カラムを変えるくらいのときしか､メディアクエリを書かないことが多いですね｡
全てではないですが｡
できるだけ､デザインを統一しています｡
さいごに
スマホでは1カラム､それ以外は2カラム｡ブログレイアウトの定番ですが､知っていると便利ですね｡
方法は色々とあるので､参考程度にとどめてください｡