html5とcss3を使用したアダプティブレイアウト。 ビデオコース「HTML5 と CSS3 のアダプティブ レイアウト」 メインコンテンツブロックのスタイル

アダプティブ Web サイト レイアウトにより、Web ページをタブレットやスマートフォンの画面に自動的に調整できます。 モバイル インターネット トラフィックは年々増加しており、このトラフィックを効果的に処理するには、使いやすいインターフェイスを備えた応答性の高い Web サイトをユーザーに提供する必要があります。

検索エンジンは、モバイル デバイスで表示されたときのサイトの応答性を評価するために、さまざまな基準を使用します。 Google は、モバイル検索結果でモバイル デバイスに対応したサイトにモバイル フレンドリーという特別なマークを付けることで、スマートフォンやタブレットの所有者によるインターネットの利用を簡素化しようとしています。 Yandex には、モバイル検索でユーザー向けにモバイル/レスポンシブ バージョンを備えたサイトを優先するアルゴリズムもあります。

モバイル端末でのページの表示はサービス上で確認できます。

米。 1. Yandex と Google のモバイル検索結果と、サイトのモバイル デバイスへの使いやすさに関する注記 アダプティブ レイアウトとは何ですか?

アダプティブ レイアウトは、どのデバイスで表示しても水平スクロール バーとスケーラブルな領域が存在せず、読みやすいテキストとクリック可能な要素用の大きな領域が存在しないことを前提としています。 メディア クエリを使用すると、ページ上のブロックのレイアウトと配置を制御し、さまざまなデバイスの画面サイズに適応するようにテンプレートを再配置できます。

この記事では、レスポンシブ Web サイトを作成するための基本的なテクニックについて説明します。 レスポンシブ デザインの場合、メイン サイト コンテナの幅は % で設定され、ブラウザ ウィンドウの幅の 100% 以下にすることができます。 グリッド列の幅も%で指定します。 レスポンシブ デザインでは、メイン コンテナとグリッド列の幅は px 値を使用して固定されます。

このレッスンで説明するアダプティブ 流体レイアウト手法は 2 列のテンプレートで完全に機能し、サイトが適応性があり、モバイル デバイスでの表示に便利になります。 テンプレートは、ページのメイン コンテンツの異なるレイアウトを想定しています。このレッスンでは、メイン ページのレイアウトについて説明します。

ホームページのレイアウト

ページは、ヘッダー (ヘッダー)、メイン コンテンツとサイドバーのラッパー コンテナー、およびフッター (フッター) の 3 つの主要なブロックで構成されます。 768px と 480px をデザインの転換点として考えてみましょう。

最初のポイントでは、トップメニューを非表示にし、サイドバーを投稿のあるコンテナの下に移動します。 2 番目のポイントでは、ヘッダー要素の位置を変更し、投稿内のソーシャル ネットワーク ボタンの配置をキャンセルし、ページ フッター列の折り返しをキャンセルします。


米。 2. アダプティブレイアウトの例 1. メタタグとセクション

1) 必要なファイルをセクションに追加します - 使用するフォント、jQuery ライブラリ、およびプレフィックスフリー プラグインへのリンク (プロパティにブラウザーのプレフィックスを書き込まないようにするため)。

適応型 Web サイト レイアウト

2. ページヘッダー

次のコンテナ要素をページヘッダーに配置します。
ロゴ

関連記事