|
|
© 2014 abhp.net All Rights Reserved. | |
| ホーム ＞ SEO ＞ Search Console ＞ モバイル ＞ レスポンシブ ウェブ デザイン |
モバイル ユーザビリティ レスポンシブ ウェブ デザイン |
モバイル ユーザビリティ レスポンシブ ウェブ デザインモバイル ユーザビリティ対応を行う為には、ビューポートを設定する必要があります レスポンシブ ウェブ デザイン 設定方法ページ html の head 部の任意の場所に、下記一文を書き加えます
レスポンシブ ウェブ デザイン 設定説明•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に下記の様に設定します
画像のレスポンシブ ウェブ デザイン 設定説明画像のサイズ（横幅）を親要素を基準にするように max-width（最大値）を 100％に設定、縦幅については、横幅に応じて自動的に設定されるよう、height を auto 設定とし自動的縮尺するようにします これだけの記述で、画像は親要素のサイズを基準に自動的に拡大 ・ 縮尺するようになり、この手法を「フルードイメージ」といいます |
|
|
| ホーム ＞ SEO ＞ Search Console ＞ モバイル ＞ レスポンシブ ウェブ デザイン |