カテゴリー別アーカイブ: Responsive

レスポンシブ・ウェブデザインのすすめ -Google

昨日Googleからのブログにこんな内容の記事がアップされた。

タイトル「Google がお勧めするスマートフォンに最適化されたウェブサイトの構築方法」

■要約(Googleより抜粋)
1. レスポンシブ・ウェブデザインを使用しているサイト、すなわち、すべてのデバイスに単一の URL で同じ HTML を提供し、CSSを使用してデバイスごとにデザインを変更するサイトです。こちらが Google の推奨する設定方法となります。
2. すべてのデバイスに対し単一の URL で、ユーザーエージェントに応じてデスクトップ用かモバイル用かなどを判断して動的に異なる HTML と CSS を提供するサイト。
3. モバイル用のサイトとデスクトップ用のサイトを別々に構築しているサイト。

当社が昨年より進めてきたレスポンシブデザイン対応がGoogleも推奨する方法だということは、サイトの企画制作において重要なファクターだ。
確かにレスポンシブデザインでリニューアルしたクライアントさんは検索結果も上がっている。サイトを使う人・見る人の利便性が向上することを重視しているということだと思う。

http://googlewebmastercentral-ja.blogspot.jp/2012/06/google.html

 

レスポンシブデザインの構築参考サイト

レスポンシブデザインを勉強するのには、参考になるサイトを徹底的に分析することから始めます。分析して行く中で自分が分りやすく社内でも使いやすいものを選び勉強会を開きスキルを上げて行きます。
沢山ある参考サイトの中でとてもよく出来ていて、テンプレートとして利用もできるサイトです。

http://www.getskeleton.com/

http://foundation.zurb.com/

http://twitter.github.com/bootstrap/

スマートフォンのズーム機能 viewport設定

iPhoneやAndroidのズーム機能を使えるようにする場合のviewportの設定のHTML記述。
<head>にviewport設定を記述します。

<!– 画面をズームできるように設定 –>
<meta name=”viewport” content=”width=device-width, initial-scale=1, user-scalable=yes”>

<!– 画面をズームできないように設定 –>
<meta name=”viewport” content=”width=device-width; initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no” />

Concrete5 C5R
ズームできない
<meta name=”viewport” content=”width=device-width, initial-scale=1, maximum-scale=1″>
ズームできる
<meta name=”viewport” content=”width=device-width, initial-scale=1″>

IEのサイト表示が確認ができる

Macで制作しWinのIEで表示確認をしますが、いろいろなバージョンを実機でテストするのに手間がかかる場合、サクッとチェックできるサイトです。

サイトのアドレスを入れると画像として表示してくれます。なのでリンクとかマウスオーバーとか…は動作しませんが、全体のチェックには便利です。
IEでの横幅も上部に出ます。ただ縦幅は全部はでませんが「Render」ボタンの左横ボックスに数値を入れれば下の方も見れます。

IE NetRenderer
Internet Explorer 9, 8, 7, 6 or 5.5,
http://netrenderer.com/

CSS3 文字rem指定について

文字指定では相対指定の「em」と絶対指定の「px」があります。
「rem」文字指定はCSS3からの規格で「root」+「em」のことです。
IEだと元のhtmlファイルは指定した倍率で文字表示しますが、リンクされた別ページは倍率をきちんと表示できない場合があります。

そこでこの「rem」だと全ファイルがきちんとrootファイルと同じように表示します。
root(元)を62.5%にすると13pxは1.3rem指定でOK。

「globals.css」内
html { font-size: 62.5%; }
body { font-size: 13px; font-size: 1.3rem; }

CSS3に対応していないブラウザ用のため「px」も入れておく
例えば
font-size: 14px; font-size: 1.4rem
font-size: 12px; font-size: 1.2rem

Responsive body、a、ul設定

body設定は「globals.css」です。
body {
background: #fff;
font-family:’ヒラギノ角ゴ Pro W3′,’Hiragino Kaku Gothic Pro’,’メイリオ’,Meiryo,’MS Pゴシック’,’MS PGothic’,sans-serif;
font-size: 13px; font-size: 1.3rem;
line-height: 18px;
color: #555;
position: relative;
-webkit-font-smoothing: antialiased;
}

このcssで、リンクとリストも設定します
/*  :: Links */
a { color: #2a85e8; text-decoration: none; line-height: inherit; }
a:hover { color: #11639d; }
a:focus { color: #cc4714; }
a:hover, a:active { outline: none; }
p a, p a:visited { line-height: inherit; }

/*  :: Lists */
ul, ol { margin-bottom: 18px; }
ul { list-style: none outside; }
ol { list-style: decimal; }
ol, ul.square, ul.circle, ul.disc { margin-left: 30px; }
ul.square { list-style: square outside; }
ul.circle { list-style: circle outside; }
ul.disc { list-style: disc outside; }
ul ul, ol ol { margin: 4px 0 5px 30px; }
li { margin-bottom: 12px; }
ul.large li { line-height: 21px; }