Web制作の技術情報を中心に、WordPress、jQuery、CSSなどの情報など幅広く発信中。Web制作スキルや知識のアウトプットブログです。

Sedori Plan

Web

2つのステップでレスポンシブルサイトのレイアウトを作成する方法

投稿日:

2つのステップでレスポンシブデザインを作成する方法
スマートフォンの普及率がどんどん高くなっていますね。

普及率

IDC Japanの調べによると、日本でのクライアント端末別の普及率はスマートフォンが49.8%、タブレット端末が20.1%、PCが97.0%だった。

ITmedia ニュースより

参考サイト日本のスマホ普及率は49.8%に

実際にわたしの友達でスマートフォンを持ったからパソコンはあまり見なくなったって言う人もいますし、スマホがあればパソコンって必要?って聞かれたりします。

ネットサーフィン、お店の場所、facebook更新などスマホがあればパソコンはいりませんね。

2年ぐらい前から、会社のサイトをスマートフォンでも見れるようにしたいって案件が増えてきています。全て最初からスマートフォンのサイトを作るのは大変なので簡単にレイアウトをスマトーフォン用に変えれるやり方をご紹介いたします。

photo credit: Travis Isaacs via photopin cc

メタタグを追加する STEP1

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">

maximum-scale=1.0; user-scalable=0;
この指定を入れると、閲覧者の操作による拡大縮小を禁止します。

メタタグを追記してください。

HTML構造

html

大体の受けさせていただいた案件のホームページのレイアウトは上記のような形が多かったです。これをレスポンシブデザインのサイトにします。

CSS3 media query STEP2

レスポンシブデザインのサイトにするためにCSS3 media queryを使います。

CSS3 media queryってなに?

Media Queries を使うと、デバイスの更に細かい仕様に応じて、スタイルシートの割り振りを指定できるようになります。

Webデザインレシピ より

簡単に言うと、「スクリーンサイズに応じて、CSSを使い分ける」です。

使い方は下記に例を上げました。スクリーンサイズが600px以下のとき

	@media screen and (max-width: 600px) {
	
	#container{
		background-color: #F00;
	}
	
	#main{
		float: none;
		width: auto;
		margin-bottom: 20px;

	}
	
	#sidebar{
		float: none;
		width: auto;
	}
	
	}

スクリーンサイズに分けて、タブレットのとき、スマホのときの表示方法を変える事が出来ます。

まとめ

[サンプル] 2つのステップでレスポンシブデザインを作成する方法

今回サンプルをつくりました。ブラウザサイズ(900px、600px、480px)を変えると表示が変わります。スマホ対応のサイトは今後必須になってきますのでぜひ試してみてください。

スポンサーリンク
  • この記事を書いた人
  • 最新記事
しん

しん

Webサイトの構築、プログラムを制作しています。中小企業、個人のホームページの制作、更新作業も承ります。 仕事以外はバスケをしたり、ジムで筋トレしております。 映画/海外ドラマ/プログラミング/バスケ/トレーニング/カナダ/カメラ・写真

-Web

Copyright© Sedori Plan , 2019 All Rights Reserved.