適応型ウェブデザインの手法

昨日の正午、Google はアダプティブ ウェブ デザインの概念と手法に関するオンライン レクチャーを開催しました。同じウェブ ページ コードを維持することで、複数の閲覧デバイス (デスクトップ コンピューターのモニターからスマートフォンやその他のモバイル製品デバイスまで) で Web サイトをより快適に閲覧できるようになります。ここでは、レクチャーの内容を簡単にまとめます。

1. HTML ヘッダーにビューポート タグを追加します。

ウェブサイトの HTML ファイルの先頭にビューポート メタ タグを追加して、ビューポートの幅がデバイスの画面の幅と等しく、初期スケーリングは実行されないことをブラウザに伝えます。コードは次のとおりです。

<meta name="viewport" content="width=デバイス幅、初期スケール=1" />

このコードは Chrome、Firefox、IE9 以上をサポートしていますが、IE8 および IE8 より前のブラウザはサポートしていません。

2. CSS ファイルの最後に、さまざまな画面解像度のルールを追加します。

たとえば、次のコードを使用すると、画面幅が 480 ピクセル未満のデバイス (iPhone など) で、Web ページのサイドバーを非表示にし、中央のコンテンツ バーの幅を自動的に調整できます。以下のコードは Z-Blog 用であり、WordPress 関連のタグ名のみを変更する必要があります。

@media screen および (最大デバイス幅: 480px) {

元のタイトル: アダプティブ Web デザインの方法

キーワード: