CSS レイアウト チュートリアル: 2 列のレスポンシブ レイアウトを実装する最良の方法
CSS レイアウト チュートリアル: 2 列のレスポンシブ レイアウトを実装する最良の方法
はじめに:
Web デザインにおいて、レスポンシブ レイアウトは非常に重要なテクノロジです。ユーザーのデバイスの画面サイズと解像度に応じて Web ページのレイアウトを自動的に調整できるようになり、より良いユーザー エクスペリエンスが提供されます。このチュートリアルでは、CSS を使用して単純な 2 列のレスポンシブ レイアウトを実装する方法を示し、具体的なコード例を示します。
1. HTML 構造:
まず、以下に示すように、基本的な HTML 構造を作成する必要があります:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>两栏响应式布局</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="left-column">
<!-- 左侧内容 -->
</div>
<div class="right-column">
<!-- 右侧内容 -->
</div>
</div>
</body>
</html>2. CSS スタイル:
次に、これを行う必要があります。レイアウトには、目的の効果を実現するためにいくつかの CSS スタイルが追加されます。フレックスボックス レイアウトを使用してこのレスポンシブ レイアウトを実装するため、style.css ファイルに次のコードを追加します。
.container {
display: flex;
/* 设为flex布局，子元素将自动排列 */
flex-wrap: wrap;
/* 如果子元素太多放不下，换行显示 */
}
.left-column {
flex: 1;
/* 左侧栏占据1份，即整个宽度的1/3 */
background-color: #eee;
/* 左侧栏的背景颜色 */
padding: 20px;
/* 内边距，让内容离边框有一定距离 */
}
.right-column {
flex: 2;
/* 右侧栏占据2份，即整个宽度的2/3 */
background-color: #ddd;
/* 右侧栏的背景颜色 */
padding: 20px;
/* 内边距，让内容离边框有一定距离 */
}
/* 响应式设计 */
@media screen and (max-width: 768px) {
.left-column, .right-column {
flex: 1;
/* 在小屏幕上将左右侧栏宽度设为100% */
}
} 3. 説明とデモ:
上記のコードでは、まず、レイアウト コンテナー .container 全体を display: flex に設定し、サブ要素 .left-column と .right-column が は自動的に 1 行に配置します。
次に、flex 属性を使用して、左側と右側の列の幅の比率を指定します。この例では、左の列が flex: 1 に設定され、右の列が flex: 2 に設定されています。これは、右の列が左の列の 2 倍の幅であることを意味します。
最後に、レスポンシブ デザインにメディア クエリ @media を使用します。画面幅が 768px 以下の場合、小さな画面デバイスに適応するために、左右のサイドバーの幅は 100% に設定されます。
4. 概要:
上記のコード例を通じて、単純な 2 列のレスポンシブ レイアウトを実装できます。 CSS のフレックスボックス レイアウトとメディア クエリを柔軟に使用することで、さまざまなデバイスに適応するレイアウト効果を迅速に実装できます。
同時に、レイアウトをさらに美しく最適化する必要がある場合は、必要に応じて他の CSS スタイルを追加し、列幅の比率を調整できます。
このチュートリアルがレスポンシブ レイアウトを学び、適用するのに役立つことを願っています。
以上がCSS レイアウト チュートリアル: 2 列のレスポンシブ レイアウトを実装する最良の方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
7447
15
1374
52
76
11
14
6
フロントエンドの面接官からよく聞かれる質問
Mar 19, 2024 pm 02:24 PM
フロントエンド開発のインタビューでは、HTML/CSS の基本、JavaScript の基本、フレームワークとライブラリ、プロジェクトの経験、アルゴリズムとデータ構造、パフォーマンスの最適化、クロスドメイン リクエスト、フロントエンド エンジニアリング、デザインパターン、新しいテクノロジーとトレンド。面接官の質問は、候補者の技術スキル、プロジェクトの経験、業界のトレンドの理解を評価するように設計されています。したがって、候補者はこれらの分野で自分の能力と専門知識を証明するために十分な準備をしておく必要があります。
CSS レイアウト単位の進化と応用: ピクセルからルート要素のフォント サイズに基づく相対単位へ
Jan 05, 2024 pm 05:41 PM
px から rem へ: CSS レイアウト ユニットの進化と応用 はじめに: フロントエンド開発では、多くの場合 CSS を使用してページ レイアウトを実装する必要があります。過去数年にわたって、CSS レイアウト ユニットは進化し、発展してきました。最初は要素のサイズと位置を設定する単位としてピクセル (px) を使用しました。しかし、レスポンシブ デザインの台頭とモバイル デバイスの普及により、ピクセル ユニットにはいくつかの問題が徐々に明らかになってきました。これらの問題を解決するために、新しい単位 rem が登場し、CSS レイアウトで徐々に広く使用されるようになりました。 1つ
レスポンシブ レイアウト デザインのユニット選択ガイド
Jan 27, 2024 am 08:26 AM
モバイル デバイスの人気とテクノロジーの発展により、レスポンシブ レイアウトはデザイナーにとって不可欠なスキルの 1 つになりました。レスポンシブ レイアウトは、さまざまなサイズの画面に最適なユーザー エクスペリエンスを提供するように設計されており、Web ページがさまざまなデバイス上でレイアウトを自動的に調整して、コンテンツの読みやすさと使いやすさを確保できます。適切なユニットを選択することは、レスポンシブ レイアウト デザインにおける重要な手順の 1 つです。この記事では、よく使用される単位をいくつか紹介し、単位を選択する際のヒントを提供します。ピクセル (px): ピクセルは画面上の最小単位であり、絶対的な単位であり、画面サイズが変化しても自動的に変化しません。
最高のレスポンシブ レイアウト フレームワークを探索してください。競争は熾烈です。
Feb 19, 2024 pm 05:19 PM
レスポンシブ レイアウト フレームワークの競争: 最良の選択は誰ですか?モバイルデバイスの普及と多様化に伴い、Web ページのレスポンシブなレイアウトの重要性がますます高まっています。ユーザーのさまざまなデバイスや画面サイズに対応するには、Web ページを設計および開発するときに応答性の高いレイアウト フレームワークを採用することが不可欠です。しかし、非常に多くのフレームワークのオプションがあるため、どれが最良の選択なのかと尋ねずにはいられません。以下は、Bootstrap、Foundation、Tailwind という 3 つの人気のあるレスポンシブ レイアウト フレームワークの比較評価です。
レスポンシブ レイアウトで HTML 固定位置を使用するための実践的なヒント
Jan 20, 2024 am 09:55 AM
レスポンシブ レイアウトでの HTML 固定位置のアプリケーション スキル、特定のコード サンプルが必要ですモバイル デバイスの人気とレスポンシブ レイアウトに対するユーザーの需要の増加に伴い、開発者は Web デザインでさらなる課題に直面しています。重要な問題の 1 つは、さまざまな画面サイズでページ上の特定の位置に要素を確実に固定できるように固定位置を実装する方法です。この記事では、レスポンシブ レイアウトでの HTML 固定配置の応用スキルを紹介し、具体的なコード例を示します。 HTML での固定位置は CSS の Position 属性によって行われます。
CSS レイアウト ガイド: グリッド レイアウトを実装するためのベスト プラクティス
Oct 26, 2023 am 10:00 AM
CSS レイアウト ガイド: グリッド レイアウトを実装するためのベスト プラクティス はじめに: 最新の Web デザインでは、グリッド レイアウトは非常に一般的なレイアウト方法になっています。これは、ページ構造をより適切に整理し、より階層的で読みやすくするのに役立ちます。この記事では、グリッド レイアウトのベスト プラクティスと、グリッド レイアウトをより適切に実装するのに役立つ具体的なコード例を紹介します。 1. グリッドレイアウトとは何ですか?グリッド レイアウトとは、ページの要素を特定のルールに従って簡単に配置できるように、ページをグリッドによって複数の列と行に分割することを指します。グリッドレイアウト
フロントエンド SEO — 詳細な説明
Mar 12, 2024 pm 06:13 PM
1. 検索エンジンの動作原理 入力ボックスにキーワードを入力し、検索またはクエリをクリックすると、結果が得られます。その背後にあるストーリーを掘り下げてみると、検索エンジンは多くのことを行っています。 Baidu などの検索エンジン Web サイトは、バックグラウンドで非常に大規模なデータベースを備えており、そこには多数のキーワードが格納されており、各キーワードは多くの URL に対応しており、これらの URL は、Baidu プログラムによって広大なインターネットから 1 つずつ抽出されて収集されます。ダウンロードをクリックすると、これらのプログラムは「検索エンジン スパイダー」または「Web クローラー」と呼ばれます。これらの勤勉な「スパイダー」は、毎日インターネット上を巡回して、あるリンクから別のリンクに移動し、コンテンツをダウンロードし、分析して絞り込み、キーワードを見つけます。ユーザーにとって役に立たない、役に立つ
HTMLのレスポンシブレイアウト設計ガイドの実装方法
Jan 27, 2024 am 08:26 AM
HTML を使用してレスポンシブ レイアウト デザインを実装する方法: モバイル デバイスの普及とインターネットの急速な発展により、レスポンシブ レイアウトはデザイナーにとって不可欠なスキルになりました。レスポンシブ レイアウトにより、Web サイトはさまざまなデバイス上のさまざまな画面サイズや解像度に自動的に適応し、ユーザーはより快適なブラウジング エクスペリエンスを得ることができます。この記事では、HTML を使用してレスポンシブ レイアウト デザインを実装する方法を紹介し、具体的なコード例を示します。 @media クエリの使用 @media クエリは、さまざまなメディア条件に基づいて適用できる CSS3 の機能です。
