オクテットログ

App,Web,IT,ゲーム,ガジェットのことを中心に色々書いています

トップ > ブログ > 【CSS】タブレットで1カラム表示に切り替わるようにMedia Queriesを書いてみた

【CSS】タブレットで1カラム表示に切り替わるようにMedia Queriesを書いてみた

ブログ

f:id:hakoz2017:20180519151712j:plain

最近ではネットサーフィンをするのもPCではなく、スマホやタブレットでするという人が多いと思います。

なのでWebサイト側も縦長の画面で見やすいようなレイアウトに対応させる必要があります。

今回はタブレット端末などの縦長画面でブログを閲覧した際に、通常PCでは2カラム表示のところ、1カラム表示に切り替わるように簡単にカスタマイズしてみました。


カスタマイズ前の状態

f:id:hakoz2017:20180526131157p:plain

カスタマイズ前は前に記事で書いた、画面サイズに依らずレイアウトを一定に保つ状態になっていました。

具体的には、ブラウザのウィンドウサイズを小さくしていくと、メインカラム、サイドメニュー、余白それぞれも同じような比率で小さくなっていくという状態です。


f:id:hakoz2017:20180526133201p:plain

これだと少し窮屈に感じますね。

もちろんタブレット端末で表示しても同じように、縦長画面に無理やり2カラム表示する状態になります。

サイトの構成によってはこのようなカスタマイズが適している場合もあるかもしれませんが、このブログにはあまり適していないので今回新たにカスタマイズしていこうと思います。

ちなみに使用しているCSSのサンプルテーマは「Boilerplate」です

staff.hatenablog.com

octetblog.hatenablog.com

今回行ったカスタマイズ

基本設定を書き直す

f:id:hakoz2017:20180610214906p:plain

まず、前に行ったカスタマイズで%表記したカラム幅などの値をpx表記に直し、メインカラム+サイドメニュー+余白の幅が1024pxになるように各幅を調整しました。

基本レイアウトに関連する部分のCSSは以下のようになっています。

#container #content { 
  width:1024px;
  margin: 0 auto;  
}
#main {
  width: 644px;
  float:left;
  margin-right:20px;
  background-color:#ffffff;
  padding:20px 20px;
}
#box2 {
  width: 280px;
  float:right;
  padding:20px 20px;
  background-color:#ffffff;
  }

前まではカラムの中央寄せの方法がよくわからなかったので、メインカラムとサイドメニューの横からmarginを使って一定の余白を設け、中央に向けて押さえつける感じで記述していました（笑）

しかし今回は、#container #contentの幅を1024pxに設定し、「margin: 0 auto」を使うことで、特に余計な記述をすることがなく中央にカラムを寄せることができました。


f:id:hakoz2017:20180610222024p:plain

さらに「margin:0 auto」を書くことにより、このようにウィンドウサイズが小さくなっても、メインコンテンツは1024pxに固定で、余白だけ伸縮するようになりました。


Media Queriesの記述

f:id:hakoz2017:20180612055956p:plain

画面サイズが1024px以上では2カラム、1024px以下では1カラムとなるようにMedia Queriesを書きました。


f:id:hakoz2017:20180612063152p:plain

1カラム表示では、メインカラムと同じ幅で一番下にサイドメニューが配置されています。

このようにすることで、タブレット端末などの縦長画面で見やすいレイアウトにすることができます。


@media (min-width:768px) and (max-width: 1024px) {
    #container #content {
        width:100%;  
    }
    
    #main
    {
        width:96%
    }
    #box2 {
        width: 96%;
        float:none;    
    }
    #box2-inner {
        width: 100%;
    }
    .hatena-module {
        width: 100%;
    }
    }

@media (min-width:480px) and (max-width:767px) {
    #container #content {
        width:100%;
    }
    #main
    {
        width:94%;
        float:none;
    }
    #box2 {
        width: 94%;
        float:none;
    }
    #box2-inner {
        width: 100%;
    }
    .hatena-module {
        width: 100%;
    }
    #blog-title {
  
        margin-bottom:-20px;
        padding-top:50px;
        padding-left:50px;
        background-color:#00a2e8;
        width:100%
        height:120px;
        font-size:80%;
    }
    }
    
    @media (max-width:480px) {
    #container #content {
        width:100%;
    }
    #main
    {
        width:90%;
        float:none;
    }
    #box2 {
        width: 90%;
        float:none;
    }
    #box2-inner {
        width: 100%;
    }
    .hatena-module {
        width: 100%;
    }
    #blog-title { 
        margin-bottom:-20px;  
        padding-top:50px;
        padding-left:50px;
        background-color:#00a2e8;
        width:100%
        height:120px;
        font-size:80%;
    }
    }

実際の記述は左右の余白を適度に確保するためにこのようにもう少し細かく画面サイズを分けています。


f:id:hakoz2017:20180612063950p:plain

さらに画面サイズが767px以下になった場合には、ブログタイトルの場所を移動し、サイズも少し縮小しています。


まとめ

Media QueriesをCSSに記述することで画面サイズに応じて1カラム表示と2カラム表示を切り替えることができるようになりました。

1カラム表示ではタイトルやタイトル下のメニューバーが窮屈になってしまうので、そのあたりをもう少しカスタマイズしたいところですね。