あなたにもサクッとできる！レスポンシブWebデザイン（RWD）にチャレンジ！

2014/10/16
- HTML&CSS
- Webについて

今週もTechWebの時間です。というか、コレは先週やった内容ですけど（笑）

ちなみにTechWebは、テクニカルWebデザインの略でWordPressと検索エンジン対策をメインにJavaScriptやCSSを使ったTipsなどを小出しにやっています。

まずは動作サンプル

ブラウザの横幅を変更して確認してください。
今回は、ブレイクポイントを1024pxと600pxにしています。

トピックス１

トピックス２

トピックス３

レスポンシブWebデザイン（RWD）とは

「レスポンシブWebデザイン」（以下、レスポンシブ）とは、ブラウザーの画面サイズに応じてレイアウトを変更させるWebページの作り方。パソコンとスマホから同じURLにアクセスし、同じHTMLファイルを開くと、パソコンにはパソコンに適したデザイン、スマホにはスマホに適したデザインが表示されます（中には、タブレット向けデザインを用意しているサイトもあります）。
日経BPコンサルティングスタッフルームより

レスポンシブWebデザイン

サイトをレスポンシブWebデザインで構築するとなると、しっかりと考えて作らないといけませんが、とりあえずRWDを体験してみたいのであれば結構簡単に作ることができます。

レスポンシブWebデザインを実現する方法としては、linkタグでPC用の外部スタイル（style_pc.css）、スマホ用の外部スタイル（style_sp.css）など別のファイルを読み込む方法と内部CSSや外部CSSの中で各デバイス用のスタイルを記述する方法があります。

今回は、スタイルシートの中で書き分ける方法でやってみます。

<div id="wrap">

    <header>
        <h1>レスポンシブWebデザイン</h1>
    </header>

    <nav>
        <ul>
            <li>menu1</li>
            <li>menu2</li>
            <li>menu3</li>
            <li>menu4</li>
            <li>menu5</li>
            <li>menu6</li>
        </ul>
    </nav>


    <section>
        <article class="topics">
            <p>トピックス１</p>
        </article>

        <article class="topics">
            <p>トピックス２</p>
        </article>

        <article class="topics">
            <p>トピックス３</p>
        </article>

        <p class="clear"></p>
    </section>


    <footer>
        <p>&amp;copy; RWD All Right Reserved.</p>
    </footer>

</div>

CSS

ブラウザの幅によりレイアウトを切り替えますが、その境目のことをブレイクポイントと呼びます。ブレイクポイントは、下の方法で指定します。

PC以外にスマホ用とタブレット用と切り替える場合は、ブレイクポイントを変えて２つずつ用意します。

@media screen and (max-width:ブレイクポイントの指定){
　ここにスタイルを指定
}

body{
	background-color: #eee;
	margin: 0px;
}

#wrap{
	background-color: #fff;
	margin: 0px auto;
	width: 900px;
}
@media screen and (max-width:1024px){
	#wrap{
		width: 600px;
	}
}
@media screen and (max-width:600px){
	#wrap{
		width: 480px;
	}
}


header{
	height: 80px;
	padding: 10px;
}
header h1{
	margin: 0px;
}

nav{
	background-color: #333;
}
nav ul{
	margin: 0px;
	padding: 0px;
	list-style-type: none;
	color: #eee;
}
nav li{
	width: 150px;
	float: left;
	padding: 0.5em 0;
	text-align: center;
	background-color: #333;
}
@media screen and (max-width:1024px){
	nav li{
		width: 200px;
	}
}
@media screen and (max-width:600px){
	nav li{
		width: 240px;
	}
}


section{
	padding: 12px;
	margin: 30px 0px 50px;
}

.topics{
	float: left;
	margin: 10px;
	padding: 5px;
	border: 1px solid #333;
	width: 260px;
	height: 150px;
}
@media screen and (max-width:1024px){
	.topics{
		width: 256px;
		height: 150px;
	}
}
@media screen and (max-width:600px){
	.topics{
		width: 426px;
		height: 200px;
	}
}


footer p{
	margin: 0px;
	padding: 10px;
	text-align: right;
}

.clear{
	clear:both;
}

そろそろWEB-LABOもレスポンシブにしないとな（笑）

その他のTechWebTipsはこちら

まずは動作サンプル

レスポンシブWebデザイン（RWD）とは

CSS

関連記事