ホーム > SEO > Search Console > モバイル > レスポンシブ ウェブ デザイン
目次 | 元のページ 前のページ | 次のページ サイトマップ | ページEND

モバイル ユーザビリティ レスポンシブ ウェブ デザイン


モバイル ユーザビリティ レスポンシブ ウェブ デザイン



モバイル ユーザビリティ対応を行う為には、ビューポートを設定する必要があります


レスポンシブ ウェブ デザイン 設定方法



ページ html の head 部の任意の場所に、下記一文を書き加えます

<meta name="viewport" content="width=device-width, initial-scale=1.0">



レスポンシブ ウェブ デザイン 設定説明



•meta viewport タグを使用して、ブラウザのビューポートの幅とスケーリングを制御する
•width=device-width を追加して、画面の幅をデバイス非依存ピクセルに合わせる
•initial-scale=1.0 を追加して、CSS ピクセルとデバイス非依存ピクセルの間に 1:1 の関係を確立する

initial-scale=1.0 については、initial-scale=0.54 のように、ページのレイアウトに合わせて、表示幅をモバイル向けに制御することができるのですが、この方法では、「モバイル フレンドリー テスト」で、モバイルフレンドリーであると判定されても、Google Search Console のモバイル ユーザビリティで、「コンテンツの幅が画面の幅を超えています」判定されてしまいます


Google Search Console では、「問題がまだ存在するかどうかを確認する」方法として、「モバイル フレンドリー テスト」が案内され、その「モバイル フレンドリー テスト」では問題がなしとされるにもかかわらず、Google Search Console でエラー判定されてしまうのは困った問題ですが、Google は一向に修正する気配が見られません

initial-scale=1.0 でページをデザインするしかなさそうです




画像のレスポンシブ ウェブ デザイン化



テキストは、画面の幅が変わっても、自動で折り返してくれますので問題ないのですが、JPEG とか PNG とかの画像は、幅いっぱいになったので折り返す ・・・ なんてことはできませんので、画像については、表示幅を画面に合わせて可変になるよう設定する必要があります


画像のレスポンシブ ウェブ デザイン 設定方法



画像については、CSSに下記の様に設定します

img {
width:100%;
max-width: 100%;
height: auto;
}



画像のレスポンシブ ウェブ デザイン 設定説明



画像のサイズ(横幅)を親要素を基準にするように max-width(最大値)を 100%に設定、縦幅については、横幅に応じて自動的に設定されるよう、height を auto 設定とし自動的縮尺するようにします

これだけの記述で、画像は親要素のサイズを基準に自動的に拡大 ・ 縮尺するようになり、この手法を「フルードイメージ」といいます




Google Search Console Google AdSense 等 Googleで使用、表示される日時について


Google Search Console Google AdSense 等 Googleで使用、表示される日時は、Google アメリカ本社のある「アメリカ合衆国 カリフォルニア州 マウンテンビューアンフィシアターパークウェイ1600番」の時間である「ロサンゼルス時間」(タイムゾーンの名称 「アメリカ合衆国 太平洋時間」)になっています
日本との時差は、「-16」で、日本の方が、16時間進んでいます (日本で日付が変わっても、現地で日付が変わるのは 16 時間後です)

日本時間に置き換えたい時は、Google Search Console で表示される日時に、16 時間足すことにより求められます
例えば、、Google Search Consoleでの表示時間、「2014.4.27 0:00」 は、日本時間、「2014.4.27 16:00」のことになります

目次 | 元のページ 前のページ | 次のページ サイトマップ | ページTOP
ホーム > SEO > Search Console > モバイル > レスポンシブ ウェブ デザイン
   

© 2014 abhp.net All Rights Reserved.

関連情報サイト


レスポンシブWebデザインはviewportとメディアクエリーからはじめろ! 株式会社Bark to Imagine
もう逃げない。HTMLのviewportをちゃんと理解する - Qiita
HTML5-ページ全般-meta要素 表示領域を設定する - TAG index
これがスマートフォン向けサイトを作るときの viewport 設定3パターンだ - てっく煮ブログ
レスポンシブの画像問題を解決する簡単な方法 それからデザイン スタッフブログ
レスポンシブ ウェブデザインの基礎    Web    Google Developers

コンテンツ一覧

ページTOP
ページTOP
ページTOP
ページTOP