ブートストラップ レスポンシブ デザイン_html/css_WEB-ITnose

レスポンシブ デザインのブートストラップ

概要

このチュートリアルでは、Web レイアウトにレスポンシブ デザインを適用する方法について説明します。このコースでは、レスポンシブ Web デザインについて学びます。モバイル デバイスの普及に伴い、ユーザーがモバイル デバイスを介して Web サイトを閲覧して優れた視覚効果を得ることができるようにする方法は、避けられない問題となっています。レスポンシブ Web デザインはこれを実現する効果的な方法です。

レスポンシブ Web デザインとは

レスポンシブ Web デザインは、ユーザーがさまざまなサイズのデバイスで Web サイトを閲覧するときに優れた視覚効果を得ることができる方法です。たとえば、最初にコンピューターのモニターでウェブサイトを閲覧し、次にスマートフォンでウェブサイトを閲覧すると、スマートフォンの画面サイズはコンピューターのモニターよりもはるかに小さいですが、両者のユーザーエクスペリエンスにはほとんど違いが感じられません。これは、Web サイトのレスポンシブ デザインが素晴らしい仕事をしていることを意味します。

流動的なレイアウトのサンプルには応答性が実装されており、さまざまな画面サイズで閲覧することをお勧めします。 Chrome または FireFox の Window Resize 拡張機能を使用してブラウザのサイズを変更できます。

Bootstrap のレスポンシブ デザインの例を表示するには、ここをクリックしてください。

レスポンシブ Web デザインの仕組み

レスポンシブ Web デザインを適用するには、さまざまなデバイス サイズに適応するスタイルを含む CSS を作成する必要があります。さまざまなフォントやメディア クエリなどの Web 開発技術を使用してページが特定のデバイスに読み込まれると、最初にデバイスのビューポート サイズが検出され、デバイス固有のスタイルが読み込まれます。

レスポンシブ Web デザインのための CSS を詳しく見てみましょう

「bootstrap-sensitive.css」を学習することで、「レスポンシブ デザイン」がどのように機能するかの微妙な違いについて学びます。この前に、Web ページの先頭領域に次のコード行を追加する必要があります:

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

ビューポートのメタ タグは、デフォルトのビューポートをオーバーライドし、ビューポート関連のスタイルの読み込みに役立ちます。

width 属性は画面の幅を設定します。これには、320 ピクセルを表す 320 や、ブラウザーにネイティブ解像度を使用するように指示する「device-width」などの値が含まれます。

initial-scale プロパティは、ビューポートの初期スケールです。 1.0 に設定すると、デバイスのネイティブ幅がレンダリングされます。

もちろん、Bootstrap のレスポンシブ CSS を次のように追加する必要があります:

<link href="assets/css/bootstrap-responsive.css" rel="stylesheet">

さて、レスポンシブ CSS ファイルを探すと、いくつかのパブリック宣言の背後にあることがわかります。 （行番号10～22）には、'@media'で始まる様々なフィールドがあります。これは、さまざまなデバイスで機能するスタイルを作成する方法です。

最初の領域は「 @media (max-width: 480px)」 で始まり、最大幅 480px のデバイス用にスタイル設定されます。

2 番目の領域は「@media (max-width: 767px)」で始まり、最大幅 767px のデバイス用にスタイル設定されます。

3 番目の領域は「@media (min-width: 768px) and (max-width: 979px)」で始まり、最大幅は 768 ピクセル、最大幅は 979 ピクセルです。ピクセルのデバイス設定スタイル。

次の領域は、最大幅 979 ピクセルのデバイスのスタイル設定です。したがって、「@media (最大幅: 979px)」で始まります。

最後の 2 つの領域は、それぞれ「@media (min-width: 980px)」と「@media (min-width: 1200px)」で始まります。前者は、最小幅のデバイスのスタイルを設定します。後者は最小幅 1200 ピクセルのデバイスにスタイルを設定します。

したがって、このスタイル シートの基本的な機能は、'min-width' 属性と 'max-width' 属性を使用して最大幅と幅を調整することです。最小幅によって、使用されるスタイルが決まります。

説明

レイアウトの応答性を高めるために、Bootstrap は次の 3 つのことを行います。

1. グリッド内の列の幅を変更します。

2. 必要に応じて、フローティング要素の代わりにスタック要素を使用します。スタック要素が何なのかまだわからない場合は、w3.org の次のフォームが役立つかもしれません:

ルート要素 (html) はスタック コンテキストのルートを形成し、他のスタック コンテキストは任意に配置された要素から生成されます (「auto」ではなく「z-index」の計算値を持つ、相対的に配置された要素を含みます)。スタック コンテキストは、それを含むブロックに対して必要ありません。

3. タイトルとテキストをその寸法で正確にレンダリングします。

モバイル フレンドリーなレイアウトをより迅速に開発

Bootstrap には、モバイル フレンドリーなレイアウトを開発するための便利なクラスがいくつかあります。これらのクラスは「response.less」で見ることができます。

.visible-phone、幅 767 ピクセル以下の携帯電話で表示され、幅 979 ピクセルから 768 ピクセルのタブレットでは非表示になり、デスクトップでは非表示になります。これがデフォルトです。

.visible-tablet、幅 767 ピクセル以下の携帯電話では非表示、幅 979 ピクセルから 768 ピクセルのタブレットでは表示、デスクトップでは非表示 (デフォルト)。

.visible-desktop、幅 767 ピクセル以下の携帯電話では表示されません。979 ピクセルから 768 ピクセルのタブレットでは表示されません。デスクトップでは表示されます (デフォルト)。

.hidden-phone、幅 767 ピクセル以下の携帯電話では表示されません。タブレットでは 979 ピクセルから 768 ピクセルで表示され、デスクトップでは表示されます。これがデフォルトです。

.hidden-tablet、幅 767 ピクセル以下の携帯電話で表示、979 ピクセルから 768 ピクセルのタブレットで非表示、デスクトップで表示 (デフォルト)。

.hidden-desktop、幅 767 ピクセル以下の携帯電話で表示、幅 979 ピクセルから 768 ピクセルのタブレットで表示、デスクトップでは非表示 (デフォルト)。

このチュートリアルで使用されるすべての HTML、CSS、JS、および画像ファイルをダウンロードするには、ここをクリックしてください。