東京都練馬区。Wordpressはおまかせ。印刷・ホームページなど販売促進のためのデザインを提案します。

営業
10:00-
19:00

レスポンシブデザインに切り替えました。

2015/03/25 　技術ノート　 google, iPhone, WordPress, ホームページ制作野村貞次

レスポンシブデザインとは

画面サイズに応じてスタイルを切り替え、同一のHTML（コンテンツ）で複数のデバイス（PCやスマホ）に最適な表示を提供するデザイン手法です。

具体的には

<head>内に<meta name=”viewport” content=”width=device-width,initial-scale=1.0,user-scalable=no”>のように「viewport」を宣言します。

スタイルシート内で@media only screen and (max-width : 780px) {〜}のように画面サイズに応じたスタイルを指定します。ここでは「最大幅が780px以下（タブレット）」の場合のスタイルを「〜」で指定しています。

通常、どのデバイスにも適用できるスタイルを書き、次にデバイスごとに切り替える部分を仕上げていきます。例えばこのサイトはPCで見れば2段組ですが、スマホの狭い画面で見るとヘッダ→本文→サイドバー→フッタ左・中・右という順に表示されます。これはスマホ用スタイルに「横並び指定を解除」という指定をしているからです。