CSS レイアウト チュートリアル: 流動的なレイアウトを実装する最良の方法
はじめに:
Web 開発では、レイアウトは重要な概念です。適切なレイアウトを使用すると、Web ページがすっきりと美しく見え、さまざまなデバイスで完璧に表示されます。一般的なレイアウト方法の 1 つは流体レイアウトです。この記事では、CSS を使用して流動的なレイアウトを実装する方法を紹介し、具体的なコード例を示します。
流動的なレイアウトとは何ですか?
流動的なレイアウトとは、Web ページのレイアウトがブラウザーのビューポートのサイズに応じて動的に拡大および縮小できることを意味します。その反対が固定レイアウトで、Web ページの幅と高さが固定されており、ブラウザのサイズに応じて自動的に調整することはできません。流動的なレイアウトでは、Web ページの幅と高さがブラウザのサイズに応じて自動的に調整され、さまざまな画面サイズに対応できます。
流動的なレイアウトを実装するにはどうすればよいですか?
流体レイアウトを実装するための最良の方法をいくつか紹介します:
- パーセント単位を使用する:
CSS では、パーセント単位を使用して要素の幅と高さを設定できます。たとえば、要素の幅を 50% に設定すると、その要素は親要素の幅の半分を占めることになります。このようにして、ブラウザのビューポートの幅が変化すると、それに応じて要素の幅も変化し、流動的なレイアウトが可能になります。 - max-width と max-height の使用:
max-width 属性と max-height 属性を使用すると、要素の最大幅と最大高さを制限できます。たとえば、画像要素の最大幅を 100% に設定すると、さまざまな画面サイズで画像要素のサイズを自動的に変更できます。 - @media クエリの使用:
@media クエリを使用すると、さまざまな画面サイズにさまざまな CSS スタイルを適用できます。 @media クエリを使用すると、さまざまな画面サイズに応じてさまざまなレイアウトとスタイルを設定できます。たとえば、@media クエリを使用して、モバイル デバイス上の Web ページのレイアウトを制御し、小さな画面サイズに適応させることができます。
コード例:
次は、CSS を使用して流動的なレイアウトを実現する方法を示す簡単なコード例です:
<!DOCTYPE html>
<html>
<head>
<style>
.container {
width: 80%;
margin: 0 auto;
background-color: lightgray;
}
.sidebar {
width: 25%;
padding: 20px;
background-color: white;
float: left;
}
.main-content {
width: 75%;
padding: 20px;
background-color: white;
float: right;
}
.clearfix::after {
content: "";
display: table;
clear: both;
}
</style>
</head>
<body>
<div class="container">
<div class="sidebar">
<h2 id="Sidebar">Sidebar</h2>
<p>Some content goes here...</p>
</div>
<div class="main-content">
<h2 id="Main-Content">Main Content</h2>
<p>Some content goes here...</p>
</div>
<div class="clearfix"></div>
</div>
</body>
</html>上記のコードでは、パーセンテージ単位を使用しました。ブラウザのビューポートの 80% を占めるようにコンテナの幅を設定します。同時に、float 属性を使用してサイドバーとメインコンテンツをそれぞれ左側と右側に配置し、流動的なレイアウトを実現しました。最後に、clearfix クラスを使用してフロートをクリアし、コンテナーが正常に表示されるようにしました。
結論:
上記の方法とコード例を通じて、CSS を使用して流動的なレイアウトを実現する方法を確認できます。流動的なレイアウトにより、Web ページをさまざまなデバイスに適応させることができ、ユーザーに優れたブラウジング エクスペリエンスを提供します。この記事の紹介と例が、読者が流動的なレイアウトをよりよく理解し、実践するのに役立つことを願っています。
以上がCSS レイアウト チュートリアル: 流体レイアウトを実装する最良の方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
カーソルの次のレベルCSSスタイリングApr 23, 2025 am 11:04 AMCSSを備えたカスタムカーソルは素晴らしいですが、JavaScriptを使用して次のレベルに物事を引き出すことができます。 JavaScriptを使用して、カーソル状態間で移行し、カーソル内に動的テキストを配置し、複雑なアニメーションを適用し、フィルターを適用できます。
Worlds Collide：スタイルクエリを使用したキーフレーム衝突検出Apr 23, 2025 am 10:42 AM2025年には、互いに互いに跳ね返る要素を伴うインタラクティブなCSSアニメーションは、CSSにPongを実装する必要はありませんが、CSSの柔軟性とパワーの増加はLee＆＃039;の疑いを補強します。
UI効果にCSSバックドロップフィルターを使用しますApr 23, 2025 am 10:20 AMCSSバックドロップフィルタープロパティを使用してユーザーインターフェイスをスタイルするためのヒントとコツ。バックドロップフィルターを複数の要素間でレイヤー化する方法を学び、それらを他のCSSグラフィカル効果と統合して、精巧なデザインを作成します。
微笑んでいますか？Apr 23, 2025 am 09:57 AMまあ、SVG＆＃039;の組み込みのアニメーション機能は、計画どおりに非推奨されることはありませんでした。確かに、CSSとJavaScriptは負荷を運ぶことができる以上のものですが、以前のようにSmilが水中で死んでいないことを知っておくのは良いことです
「かわいい」は見る人の目にありますApr 23, 2025 am 09:40 AMイェーイ、テキストワラップのジャンプを見てみましょう：サファリテクノロジーのプレビューにかなり着陸してください！しかし、それがChromiumブラウザーでの仕組みとは異なることに注意してください。
CSS-Tricks XLIIIを記録しますApr 23, 2025 am 09:35 AMこのCSS-Tricksアップデートは、アルマナック、最近のポッドキャスト出演、新しいCSSカウンターガイド、および貴重なコンテンツを提供するいくつかの新しい著者の追加の大幅な進歩を強調しています。
Tailwind＆＃039;の@Apply機能は、響きよりも優れていますApr 23, 2025 am 09:23 AMほとんどの場合、人々はTailwind＆＃039;の@Apply機能を紹介します。このように展示されたとき、@Applyはまったく有望な音をしません。だからobvio
私はリリースがないように感じます：正気な展開への旅Apr 23, 2025 am 09:19 AM馬鹿のように展開することは、展開に使用するツールと複雑さの報酬と複雑さの減少との間の不一致になります。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
DVWA
Damn Vulnerable Web App (DVWA) は、非常に脆弱な PHP/MySQL Web アプリケーションです。その主な目的は、セキュリティ専門家が法的環境でスキルとツールをテストするのに役立ち、Web 開発者が Web アプリケーションを保護するプロセスをより深く理解できるようにし、教師/生徒が教室環境で Web アプリケーションを教え/学習できるようにすることです。安全。 DVWA の目標は、シンプルでわかりやすいインターフェイスを通じて、さまざまな難易度で最も一般的な Web 脆弱性のいくつかを実践することです。このソフトウェアは、
MantisBT
Mantis は、製品の欠陥追跡を支援するために設計された、導入が簡単な Web ベースの欠陥追跡ツールです。 PHP、MySQL、Web サーバーが必要です。デモおよびホスティング サービスをチェックしてください。
SublimeText3 中国語版
中国語版、とても使いやすい
mPDF
mPDF は、UTF-8 でエンコードされた HTML から PDF ファイルを生成できる PHP ライブラリです。オリジナルの作者である Ian Back は、Web サイトから「オンザフライ」で PDF ファイルを出力し、さまざまな言語を処理するために mPDF を作成しました。 HTML2FPDF などのオリジナルのスクリプトよりも遅く、Unicode フォントを使用すると生成されるファイルが大きくなりますが、CSS スタイルなどをサポートし、多くの機能強化が施されています。 RTL (アラビア語とヘブライ語) や CJK (中国語、日本語、韓国語) を含むほぼすべての言語をサポートします。ネストされたブロックレベル要素 (P、DIV など) をサポートします。
