スマホの場合に段組みを解除するには
スマホでは段組みレイアウトではなく通常のブロックにするには、メディアクエリのmax-widhを使ってスマホの画面サイズではfloatを解除して幅を100%にするとOKです。
はじめに
当サイトのインデックスページでは段組みレイアウトを使っていますが、スマホでは1段表示になります。
しかし、タブレットの縦向きモードの場合では、ある程度幅があるので、2段組みにしています。すなわち、どのサイズ以上になると段組みを許可するかがポイントとなってきます。
段組みの幅はできれば300ピクセルは欲しいところですよね。それ以下だとかなり窮屈に感じます。さらに、2段組みにするために、段と段の間に間隔を2％空けているので、その分も考慮しないといけません。
そこで、当サイトでは720ピクセル以上は段組みにして、それ以下は段組み解除しています。
CSSコード
前記事で作成した段組みスタイルに対して、720ピクセル未満の場合は段組み解除するには、以下のコードをCSSファイルに挿入するとよいでしょう。max-width とは「最大幅」という意味で、720ピクセル未満にするには、719ピクセルにすればOKです。一方、floatプロパティは none にしたほうがいいですが、両方 left で構わないと思います。まとめて幅を100%にします。
@media (max-width: 719px){
.leftbox, .rightbox {
float: left;
width: 100%;
}
}
備考
当サイトの段組み内のリストリンクスタイル ul.list で、1段の場合にマージンを解除するには、以下のように実装しています。
基本スタイル
それぞれの段の下マージンを1文字分（margin-bottom: 1em）とっています。左段は .left_col、右段は .right_col にしています。
.left_col {
float: left;
width: 49%;
text-align: left;
margin-bottom: 1em;
}
.right_col {
float: right;
width: 49%;
text-align: left;
margin-bottom: 1em;
}
.aside ul, ul.list {
list-style-type: none;
margin: 0px 0px 1em 0px;
padding: 0px;
border-top: dotted 1px;
}
.aside ul li, ul.list li{
padding: 0.5em 0px;
margin: 0px;
border-bottom: dotted 1px;
}
メディアクエリ
次に、メディアクエリで720ピクセル未満の場合、リンクリストを次の段と罫線をくっつけるために、まずマージンを強制的に0にして、右段内のリンクリストスタイルの上マージンを-1ピクセルにしています。
@media (max-width: 719px){
.left_col, .right_col {float: left;width: 100%;margin:0!important}
.left_col ul.list{margin-bottom:0!important}
.right_col ul.list{margin-top:-1px;margin-bottom:1.5em}
}