メディアクエリー

"レスポンシブデザイン"とは、どんなときでもブラウザやデバイスの表示状態に"合わせて"美しいサイトを作る戦略である。

そして、メディアクエリーは、レスポンシブデザインを実現するための最も強力なツールだ。widthをパーセント指定した例を考えよう。サイドバーにメニューが入りきらなくなるほどブラウザの幅を小さくした場合、全てのコンテンツが１列で表示されるようにしたい: 

@media (min-width:600px) {
  nav {
    float: left;
    width: 25%;
  }
  section {
    margin-left: 25%;
  }
}
@media (max-width:599px) {
  nav li {
    display: inline;
  }
}
<div class="container">
<section>

ブラウザのサイズを変えても、今までよりずっとクールだ!

</section>
<section>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit.

</section>

じゃーん! 今や我々のレイアウトは、モバイルブラウザで見てもいい感じに見える。これはメディアクエリーを使った人気サイトだ。min-widthとmax-widthよりたくさんある: もっと学びたければ、MDNドキュメントを見てみよう。

応用

metaタグのviewportを使うと、携帯での見栄えをもっと良くできる。

  • Creative Commons License