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

いろいろな端末の画面サイズを確認する

VIEWPORT RESIZER
ブラウザでPC、ノートブックやスマートフォン、タブレットの縦横それぞれ確認できます。
とてもスマート(使いやすく優れてデザイン)なものです。
是非、ブックマークをお勧めします。

利用方法は簡単で、下記サイトを訪れてブックマークします。
この時にツールバーに入れると便利です。
http://lab.maltewassermann.com/viewport-resizer/

調べたいサイトを表示したら、ブックマークしたVIEWPORT RESIZERをクリックする。
サイトの上に黒いバー表示するのでそれぞれのアイコンをクリックしてサイズを見る。

世界中の多くのクリエーターが利用しています。

レスポンシブ・ウェブデザインのすすめ -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