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

デザイン事務所ダウンアンダー

営業
10:00-
19:00

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

     技術ノート   , , ,  野村貞次

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

画面サイズに応じてスタイルを切り替え、同一の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段組ですが、スマホの狭い画面で見るとヘッダ→本文→サイドバー→フッタ左・中・右という順に表示されます。これはスマホ用スタイルに「横並び指定を解除」という指定をしているからです。

なぜ今頃?

Googleが「4/21までにスマホ対応しないと検索順位を大幅に下げるよ!」と言ってきたからです。

一企業に振り回されるのも変な話ですが、検索順位対策(SEO:検索エンジン最適化)はたいへん重要ですのでしかたありません。SEOを除いて考えても、いつかはやるべきことです。逆に、せっつかれた今がチャンス!ということですね。

当サイトは、仕事を優先して対処していませんでした。

既存サイトのデザインポリシーを引き継いで

レスポンシブ化することも可能です。

基本的にはWordPressを用いたCMS化とともに行います。

どうぞご相談ください。

 

     技術ノート   , , ,  野村貞次

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

 こちらの記事も読んで見ましょう

レスポンシブデザインに切り替えました。 東京都練馬区。Wordpressはおまかせ。印刷・ホームページなど販売促進のためのデザインを提案します。

Copyright©デザイン事務所ダウンアンダー,2015 All Rights Reserved.

ページ先頭へ