Media Queriesでブラウザ幅にあわせてレイアウト

1ページ目 (1-1 of 1)

  • 管理人

    劇ぱわ6Plusでブラウザ幅に合わせたレイアウト調整にチャレンジしてみました。主にトップページだけですが。

    もともとは細かいことを気にせず横幅固定にしていたのですが、ブラウザの横幅なんて日によっていろんな状態があるので、劇ぱわを開くたびにいちいちマウスでウィンドウ幅を広げる行動が面倒だったんですよね。あとはまあ、いろんな端末があるから横幅に制限があると横スクロール必須になってしんどい。

    というわけで最近知った『レスポンシブデザイン』と『Media Queries』という手法にチャレンジです。

    レスポンシブデザインは、最近ではPCとスマホやタブレットでレイアウト変更するデザインとして説明されることが多いみたいですが、今回はそこまではやらず、PCのブラウザだけ考えることにしました。

    やり方自体は意外と単純ですね。

    #main{
        font-size: 180%;
    }
    @media screen and (max-width: 1000px){
        #main{
            font-size: 150%;
        } 
    }
    @media screen and (max-width: 760px){
        #main{
            font-size: 120%;
        } 
    }
    

    のようにCSSで追加定義するだけで、横幅に応じてスタイルを変更できます。

    ちなみに上記の指定では、760pxまでなら font-size:120% 、1000pxまでなら 150% 、それ以外では180% と段階的に変更できます。

    なのであとはごりごりと横幅に合わせてスタイル定義していくだけなのですが、、、やり方は単純でもデザインはそれぞれ自分で考えなきゃいけないので、そのぶん手間暇は必要ですね。


    あと、スマホやタブレットなどの横幅にピタッと合わせるなら、HTMLのmetaタグに『Viewport』を指定するといいようです。

     <meta name="viewport" content="width=device-width; initial-scale=1.0" /> 

    横幅を端末の幅に指定するという記述です。劇ぱわ6Plusではこの指定はやってません。スマホ用に全部デザインし直す必要がありそうだったので。Viewport指定しなくてもMedia Queriesは使えるみたいです。ちなみに、劇ぱわのネタ帳ではViewport指定しています。

comments powered by Disqus

「デザイン」の関連タイトル

最近のコメント