Loading...

htmlコーディング 小棹制作所

この記事がよく読まれてます

tumblrでの企画など、お手伝いします
  • fullPage.js ページスクロールで紙芝居のように魅せるWebページが作れるjQueryプラグイン (37,642Views)
  • 初代から大幅にパワーアップして帰ってきた! Owl Carousel 2の紹介とかんたんな設置方法 (19,067Views)
  • 多分一番簡単!ドロワーメニューを実装するためのjQueryプラグイン「drawer」 (18,531Views)
  • [メモ]Macのメールアプリで自動転送(もしくはリダイレクト)設定をする方法 (16,635Views)
  • tumblrのオリジナルテーマ作成入門 tumblrの独自タグを理解しよう (16,069Views)
  • wow.jsとanimate.cssを組み合わせると、かんたんに、かっこいい動きがあるWebページを作れます。 (15,954Views)
  • スマートフォンサイトでよく見る横からニョキッと出現するスライドメニューの実装なら「Sidr」で (15,559Views)
  • 国産のtumblrポートフォリオ用テーマ “Illustfolio2″ がすごくいい! (11,889Views)
  • シンプルだから機能もデザインもかんたんにカスタマイズできるjQueryのカルーセルプラグイン “Owl Carousel” (11,284Views)
  • ミュージシャン・バンド・アーティスト用Webサイト作成のためのTumblrテーマを作ったので配布します (11,241Views)
  • さくっとヘッダー固定のhtmlテーブルが作れるjQueryプラグイン「Fixed Header Table」 (11,035Views)
  • 企業ホームページっぽいレイアウトのTumblrのテーマを作ったので無料配布します (10,719Views)
  • 翻訳機能をWebサイトに埋め込む方法 (10,426Views)
  • Twitter Bootstrapが3にアップグレードして、さらに使いやすくなった (10,333Views)
  • tumblrのオリジナルテーマをゼロから作るのは心が折れるので、スターターテーマを使おう (9,898Views)
  • Twitter Bootstrapの基礎 Twitter Bootstrapってなに? からモーダルウィンドウ作成まで (8,922Views)
  • 細かいカスタマイズができるCSSフレームワーク、”Gumby FRAMEWORK” (6,895Views)
  • Twitter BootstrapベースのWordPress無料テーマ “Roots” (6,612Views)
  • tumblrのテーマに無限スクロール機能を追加する方法 (6,051Views)
  • 【Featherlight.js】テキストをライトボックスに表示できるjQueryプラグイン【jQueryプラグイン】 (5,748Views)
  • メディアクエリの基礎の基礎

    2013年04月16日(火)
    344Views

    この記事は執筆から1年以上経過しており、情報が古い可能性があります。

    レスポンシブ対応のWebサイト構築に必須のスキルである、メディアクエリについて、簡単なコードを見ながら説明します。

    メディアクエリとは

    ブラウザの横幅を検知することで、ひとつのhtmlファイルのみで、様々なレイアウトを出し分けるための技術です。
    これによって、PC向けサイトから、スマートフォン向けサイトまで、制作者が意図したレイアウトを出し分けることができるようになります。

    スナップショット 2013:04:15 13:29

    基礎をしっかり学んで、レスポンシブなWebサイト制作にきっちり対応できるようにしましょう。

    メディアクエリを使った、かんたんな実験をしてみよう

    サンプル1

    まずはサンプルを開いてください。
    ブラウザの横幅を狭めたり、広げたりしてみると、背景の色が変化するのが確認できます。

    これがメディアクエリの基礎の基礎です。

    どういう仕掛け?

    では、さっそくhtmlで書かれたメディアクエリ部分のコードを見ていきましょう。

    <style type="text/css">
    body{
    	background-color: gray;
    }</p>
    <p>@media screen and (max-width: 960px){
    	body{
    		background-color: red;
    	}
    }
    @media screen and (max-width:768px){
    	body{
    		background-color: orange;
    	}
    }</p>
    <p>@media screen and (max-width: 700px){
    	body{
    		background-color: yellow;
    	}
    }
    @media screen and (max-width: 500px){
    	body{
    		background-color: green;
    	}
    }
    </style>
    

    上記が

    <head>~</head>
    

    のなかに記載されています。

    では、これを解説していきましょう。

    @media screen and (max-width: 960px){
    	body{
    		background-color: red;
    	}
    }
    

    まず
    @media
    これでメディアクエリを使いますよと宣言します。
    screenで
    出力媒体の宣言をしています。
    これはメディアタイプを判別するためのもので
    メディアクエリ以外の、通常のサイト作成でもよく見かけるものですね。
    screenのほかには、紙に印刷する用の
    print
    などが有名です。

    そして次の
    (max-width: 960px)
    これが最も重要なポイントです。
    これで、ブラウザの横幅が960px以下のとき、(max-width: 960px)以下の{}内に記載されたスタイルが動作するようになります。

    この例では、横幅が960px以下の時に
    背景色(background-color)が赤(red)になるように設定されていますね。

    そして、768px以下の時はオレンジ色、700px以下の時は黄色になるように、というふうに設定されています。

    簡単な使用例

    では、メディアクエリが実際に、どういった所で使われるのかを、単純なサンプルで見ていきましょう。

    サンプル2

    横幅の広いPC用レイアウトでは2カラム、ブラウザの横幅を狭めていって640px以下になったときに、右側のサイドバーがメインコンテンツエリアの下に落ちて1カラムになっているのが確認できると思います。
    レスポンシブレイアウトで非常によくみかける、手法ですね。

    この例では、floatで、左右2カラムにしていたものを
    640px以下になった段階で
    float:none;
    というふうに、float設定を解除することで
    このようなレイアウトを実装しています。
    あとは、メインコンテンツ(#main)とサブコンテンツ(#side)のwidth(横幅)を、全体(#wrapper)にたいして、100%に設定しています。

    スタイル部分

    <style type="text/css">
    #wrapper{
    	width:90%;
    	margin:0 auto;</p>
    <p>}
    #main{
    	width:60%;
    	height: 900px;
    	background-color: green;
    	float: left;
    }
    #side{
    	width: 40%;
    	float: right;
    	background-color: red;
    	height: 400px;
    }</p>
    <p>@media screen and (max-width: 640px){</p>
    <p>#main{
    	width:100%;
    	float: none;
    }
    #side{
    	width: 100%;
    	float: none;
    }
    }
    </style>
    

    html部分

    <body>
    <div id="wrapper">
    <div id="main">
    メインコンテンツ
    </div>
    <div id="side">
    サブコンテンツ
    </div>
    </div>
    </body>
    

    以上が、メディアクエリの基礎になります。
    この機能をうまく利用して、画像やナビゲーションの出しわけを行なっています。

    まとめ

    この記事のまとめはありません。

    おわりに

    この記事はあなたのお役にたてましたか?
    もしよろしければ・・・

    この記事をみんなに教える?


    筆者に何か教える?

    たとえば、 小棹制作所はこんなこと↓を知りたがっているようです。

    feedlyでブログを購読する?

    follow us in feedly

    筆者にメーッセージを送る?

    なんでもご自由に書いて送ってください。
    ご質問等返信を希望の場合は、メールアドレス等返信先の記載をお忘れなく。

    チェックを入れて送信してください

    Copyright (C) 2012 小棹制作所.
    All rights reserved.