モバイルファーストのレイアウトアプローチ

スマホやタブレットの普及に伴い、Webデザインにも「モバイルファースト」な考え方が浸透しつつあります。これは、PCとモバイル環境それぞれのデザインに過剰な工数を作よりも、モバイル環境での表示を第一に設計してしまおうという考え方です。

モバイルブラウザで機能するmeta要素のviewportは、モバイルサイトの構築に置いて非常に大きな意味を持っています。

<meta name="viewport" contemt="width=device-width, initial-scale=1, user-scalable=no">

viewportの入力次第でスマホ場での表示が大きく変わる。

最も重要なのはwidthで、横幅1000pxのPC向け縦スクローつサイトをスマホでも横幅ぴったりに縮小表示したい、という時はwidth=1000と指定すればいい。

⭐️レスポンシブレイアウトではwidth="device-width"と設定する。

「デバイスの解像度をそのままブラウザの横幅と捉える」という意味で、

■meta要素とは・・・

meta要素とは、HTML文書の内に記述される、ページの情報を定義する要素を指します。 meta要素はタグを用いてページ概要の指定、javascript使用の宣言、検索エンジンロボットへの動作の命令など様々な目的で記述されます。

検索エンジンはmetaタグの内容をもとに、そのサイトの概要把握や、ロボットのクロールやインデックス登録といった動作の制御を行いますので、SEOにおいても重視されるタグです。

■例

・ページの概要の指定 meta description

<meta name="description" content=”ページ説明文” />

検索順位には影響しないものの、設定された文言が検索結果にそのまま表示される可能性があるため、検索したユーザーのクリック率に大きく関与します。

・キーワードの指定 meta keyword  

<meta name="keywords" content=”キーワード１、キーワード２、キーワード３” />