検索

ホームページ >ウェブフロントエンド >htmlチュートリアル >マークアップ言語 - CSSレイアウト_HTML/Xhtml_Webページ制作

マークアップ言語 - CSSレイアウト_HTML/Xhtml_Webページ制作

PHP中文网
PHP中文网オリジナル
2016-05-16 16:45:371270ブラウズ

第 12 章 CSS レイアウト この本ではこれまで、ページの内部要素、つまりコンテンツについて主に説明してきましたが、長い間、デザイナーは列レイアウトにテーブルを使用し、他の要素をネストしてきました。テーブル内。 ここをクリックして「Script House HTML チュートリアル」コラムに戻ります。 CSS チュートリアルを表示するには、ここをクリックしてください。
上: マークアップ言語 - 印刷スタイル 。 第 12 章 CSS レイアウト
本書ではこれまで主にページの内部要素、つまりコンテンツについて説明してきましたが、長い間、デザイナーは列のレイアウトをテーブルに依存してきました。 、多くの場合、テーブルに埋め込まれます。適切な間隔と視覚効果を実現するために、他のテーブルを設定します。これらの巨大なタイプセット コンテンツは、ダウンロードに時間がかかるだけでなく、テキスト ブラウザ、スクリーン リーダー、小さなものは言うまでもなく、メンテナンスにも非常に手間がかかります。
この章では、CSS と構造化マークアップ構文を組み合わせて 4 つの一般的な方法を使用して、2 列のレイアウトを作成する必要がないことがすぐにわかります。
後の「技術拡張」で、Windows 用 Internet Explorer 5.0 のボックス モデルの問題とそれを回避する方法について説明します。また、CSS を使用して列の幅を等しくするための簡単な秘密も共有します。
                                                                        #p# CSS を使用して 2 列のレイアウトを作成するにはどうすればよいですか?
答えは、いくつかの方法があるということです。まず、2 つの一般的な方法 (フローティングと位置決め) の違いを理解するのに役立ちます。それぞれの方法で、ヘッダーとフッターの両方を含む 2 列のレイアウトを作成できます。
この章を Web サイトの構築を開始するためのガイドとして使用し、この本を使用していただければ幸いです。他の章のメソッドは、コンテンツの作成に使用されます。
ここで説明する 4 つのメソッドはすべて、ドキュメントの タグと の間に適用されます。使用されるマークアップ構文構造について説明します。
各メソッドを囲むページ構造を理解するために、他に何を含める必要があるかを大まかに見てみましょう。


"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional. dtd">


CSS レイアウト



.. メソッドのデモンストレーション...


実現するレイアウト構成については、図 12-1 を参照してください。これが完成させたい列レイアウトです。
図 12-1 2 列レイアウトのフレーム図
まず始めましょう。では、float 属性を使用する最初のメソッドを紹介します。
                                                                        #p# 方法 A: フローティング サイドバー


p id="header">
...ヘッダー部分...



...サイドバー部分...



...メイン部分..



上記はCSS の float 属性を使用して列レイアウトを作成するマークアップのソース コード。

タグを使用して、ページ要素を複数の論理段落に分割し、それぞれに一意の ID を付けます。 #header: タイトル画像、ナビゲーションバーなどが含まれます。 #sidebar: 追加のコンテンツ リンクと関連情報が含まれています #content: メインのテキスト コンテンツが含まれており、ページの焦点でもあります。 #footer: 著作権情報、作成者、補助リンクなどが含まれます。
これらのページ段落を分離すると、いくつかの CSS ルールを指定する限り、レイアウトを完全に制御でき、2 列のレイアウトをすぐに完成させることができます。 ヘッダーとフッターのスタイルを指定します
コンテンツ構造を列レイアウトに変換する最初のステップは、ヘッダーとフッターに背景色と内側のパッチを少し追加することです。これにより、コンテンツをより簡単に目立たせることができます。


#header {
パディング: 20px;
背景: #ccc;
}
#footer {
パディング: 20px;
背景: #eee;
}


メソッド A の構造に前の CSS を追加すると、図 12-2 に示すようになります。各段落に偽のコンテンツを追加しました。

図 12-2 ヘッダーとフッターのスタイルの指定
もちろん、#header と #footer では、フォント ファミリー、色、リンクの色など、これらの段落に適切なスタイルを引き続き指定できます。ちょっと待って、2 列のレイアウトを作成しましょう。 フローティング サイドバー
メソッド A の本質は、float 属性を使用してメイン コンテンツ

の両側に #sidebar を配置することです。この例では、コンテンツの右側に配置します。もちろん、反対側でも機能します。
フローティング #sidebar の重要な点は、タグのソース コード内で、サイドバーの上部がメイン コンテンツ

の前に表示される必要があることです。
次に、#sidebar に float 属性を追加し、幅を 30% に設定し、背景色を指定します。


#header {
パディング: 20px;
背景: #ccc;
}
#sidebar {
float: right;
幅: 30%;
背景: #999;
}
#footer {
パディング: 20px;
背景: #eee ;
}


図 12-3 は、この CSS を追加した後の表示効果です。サイドバーが右に移動し、メイン コンテンツがサイドバーの範囲内に流れていることがわかります。 .

図 12-3 #sidebar をメインコンテンツの右側にフロート表示 実際の列
図 12-3 を参照してください。この効果を完成させるには、#content

を使用して右側の外側のパッチを指定する必要があります。
追加する必要がある CSS は、


#header {
padding: 20px;
です。背景: #ccc;
}
#sidebar {
フロート: 右;
幅: 30%;
背景: #999;
}
#content {
マージン右: 34%;
}
#footer {
クリア: 右;
パディング: 20px;
背景: #eee;
}


コンテンツに設定した正しい外側のパッチ サイズは #sidebar より 4% 大きいことがわかります。 2 つの列の間にスペースがあります。 図 12-4 の次のスペースは、ブラウザで表示した場合の効果です。

の外側のパッチを設定している限り、 2 列目の錯覚

図 12-4 2 列レイアウト
同時に、#footer に追加された clear:right ルールにも注意する必要があります。ページのフッターが、2 つの列の長さの変更の影響を受けるのではなく、サイドバーとコンテンツ領域の後に確実に表示されるようにすることが重要です。フッターは、以前に表示されていたフロート コンテンツを回避します。
これで、2 つの列が表示されます。 -列レイアウトが利用可能です。引き続き境界線、背景、境界線、その他の要素を追加して、外観をより魅力的にすることができます。
ここまでは、柔軟なレイアウトを作成するために幅をパーセンテージで設定しました (列幅は自動的に設定されます)。ユーザーのウィンドウ幅に合わせて拡大/縮小します) ピクセル単位で幅を設定することもできます。固定幅レイアウトを作成する場合、内側と外側のパッチのサイズをピクセル単位で指定すると、Windows 版 IE が正しく動作しないという問題に注意する必要があります。 CSS ボックス モデルを解析します。詳細と考えられる解決策については、この章の「ボックス モデルの問題」を参照してください。
                                                                        #p# 方法 B: Double float




...メインコンテンツはこちら...




方法 A の欠点の 1 つは、サイドバーをフローティングにするには、マークアップ ソース コード内のメイン コンテンツの前にサイドバーを配置し、CSS ブラウザ、テキスト ブラウザ、スクリーン リーダーやその他のデバイスを閉じる必要があることです。 CSS をサポートしていない場合は、ページのメイン コンテンツの前にサイドバーのコンテンツが表示 (または読み取られます) します。これは実際には厳密ではありません。float メソッドを使用して、メイン コンテンツを置き換えるだけでこの問題を回避できます。ソース コード内でサイドバー

の位置を変更し (上図を参照)、CSS を使用してそれらを別の側にフロートさせます。


#header {
パディング: 20px;
背景: #ccc;
}
#content {
float: left;
幅: 66%;
}
#sidebar {
フロート: 右;
幅: 30%;
背景: #999;
}
#footer {
クリア: 両方;
パディング: 20px;
背景: #eee;
}


2 つの

を異なる方向にフローティングすることにより、図 12-4 のような効果を維持しながら、ソース コードを最も適切な方法 (メイン コンテンツをサイドバーの前に配置) に配置できます。 両側を避ける
同様に重要なのは、#footerdeclear 属性を両方に設定する必要があります。これにより、2 つの列の長さに関係なく、フッターは常に最後に表示され、タグのソース コードのコンテンツの順序も変更されます。改善されました。
                                                                        #p# 方法 C: フローティング メイン コンテンツ



< id="content">
...メインコンテンツ...




がありますもう 1 つの方法は、float 属性を使用してソース コードをマークするだけです。
メイン コンテンツの

を配置するだけです。左側にフローティングし、幅を 100% 未満に設定すると、右側にサイドバー用に十分なスペースが残ります。 CSS コンテンツ
メソッド C で必要な CSS コンテンツは、これ以上に単純なものではありません。「float 属性」、コンテンツ領域に使用する幅、2 つの列の間に残された小さな境界線です。

# header {
パディング: 20px;
背景: #ccc;
}
#content {

float: left;
width: 66% ; }
#sidebar {

background: #999; }
#footer {

clear : left;padding: 20px;
background: #eee;
}

サイドバーの幅を定義する必要がないことに注意してください。メイン コンテンツが自動的に埋められます

残りのスペース (この例では 34%) を使用します。 悲劇的な背景
図 12-5 はブラウザで表示した結果です。一部の一般的なブラウザでは、サイドバーの幅が指定されていないため、サイドバーの背景色がメイン コンテンツ領域の下に表示されます。

図 12-5 フローティング コンテンツですが、サイドバーの背景色が透けて見えます
この部分を追加できる限りこの問題は、サイドバーの左側にコンテンツ領域と同じ幅の外側の境界線を追加することで回避できます。実際には、外側のパッチを少し大きくして、2 つの列の間に少し空白を残します。 .

#header {
パディング: 20px;
背景: #ccc;
}
#content {
フロート: 左;
幅: 66%;
}
#sidebar {

マージン左: 70%; 背景: #999;
}
#footer {
クリア: 左;
パディング: 20px;
背景: #eee;
}
シンプルでプレーン

または、背景色を使用する必要がない場合は、境界線を設定する必要はありません。図 12 -6 は、#sidebar ステートメント全体を削除し、メイン コンテンツに少し右外側のパッチを追加した後の結果です

このとき、2 つの列はデフォルトの背景色を共有します。ページの

図 12-6 背景色を使用しないフローティング コンテンツ
CSS は、次のように縮小できます:

#header {
パディング: 20px;
背景: #ccc;
}
#content {
フロート: 左;
幅: 66%;

マージン右: 6%; }
#footer {
clear:left;
padding:20px;
background:#eee;
}

さらに左の外側のパッチを追加する (または背景色を省略する) には、背景画像を使用して列に背景色を与えるという方法もあります。この小さな秘密については、この章の「技術拡張」の単元で後ほど説明します。
float 属性の使用に加えて、位置決めを使用して列レイアウトを作成することもできます。最後のオプションであるメソッド D を見てみましょう。
                                                                        #p# 方法 D: 位置決め




...メインコンテンツ...



方法 D は同じマークアップを使用する ソース コード構造、最も効率的な方法で配置します

: メイン コンテンツをサイドバーの前に配置し、スタイル付きブラウザを閉じます。スクリーン リーダーは最初にメイン コンテンツ部分を受け取り、次にサイドバーを受け取ります。配置するときは、タグのソース コードは、ページ要素が表示される位置とは関係がありません。 予測可能な高さ
CSS コンテンツは最初の 3 つのメソッドと多少似ていますが、最初の違いはヘッダーに指定されたピクセルの高さです。後でサイドバーを配置するには高さを予測できる必要があります
ここでは A です。番号はランダムに選択され、ロゴ、ナビゲーション バー、検索フォームなど、ページの上部で使用されるコンテンツに応じて調整する必要があります。


#header {
高さ: 40px;
背景: #ccc;
}
#footer {
パディング: 20px;
背景: #eee;
}

各列のスペースを残す
次に、#content

の右側の外側のパッチを設定する必要があります。これにより、後で右側のサイドバー用のスペースを残すことができます。絶対配置方法を使用します (フローティングではありません)。右側のサイドバーを配置します。


#header {
height: 40px;
background: #ccc;
}
#content {
margin-right: 34%;
}
#footer {
パディング: 20px;
背景: #eee;
}

サイドバーに配置します
最後に、絶対配置を使用して #sidebar

を #content の境界内に配置する必要があります。また、ブラウザがページの周囲に追加するテキストも削除する必要があります。これにより、位置座標がすべてのブラウザで一貫します。


body {
マージン: 0;
パディング: 0;
}
#header {
高さ: 40px;
背景: # ccc;
}
#content {
margin-right: 34%;
}
#sidebar {
position: 絶対;
上: 40px;
右: 0;
幅: 30%;
背景: # 999;
}
#footer {
パディング: 20px;
背景: #eee;
}


後Position:absolute を指定すると、#sidebar は上部と右側の座標を使用して希望の位置に正確に配置できます (図 12-7)。

図 12-7 位置決めによる 2 列のレイアウト効果
We 「

#sidebar をブラウザウィンドウの上端から 40 ピクセル、右端から 0 ピクセルの位置に配置します。」 また、bottom と left を使用して座標を指定することもできます。 フッターの問題
前の方法を使用して列をフローティングする場合、clear 属性を使用すると、フッターがブラウザ ウィンドウ全体の幅に広がり、メイン コンテンツとサイドバーの長さの影響を受けないようにすることができます。
を配置する場合、サイドバーのドキュメント フローはページ全体から独立しているため、サイドバーがコンテンツより長い限り、ページのフッターをカバーします (図 12-8)
図 12 -8 サイドバーがフッターと重なっている
この問題に対する私の一般的な解決策の 1 つは、フッターのメイン コンテンツと同じ外側の右パッチを指定して、サイドバーがフッターを超えて拡張できるようにすることです。
この方法を使用するには、CSS を次のように調整する必要があります:


body {
マージン: 0;
パディング: 0;
}
#header {
高さ: 40px;
背景: #ccc;
}
#content {
margin-right: 34%;
}
#sidebar {
位置: 絶対;
上部: 40px;
右: 0;
幅: 30%;
背景: #999;
}
#footer {
右マージン: 34%;
パディング: 20px;
背景: #eee;
}


このソリューションは、コンテンツが短くサイドバーが長いページでは少し奇妙に見えますが、結果は図 12-9 に示されています。ページのフッターを避けるサイドバーを示します。

図 12-9 同じ外側のパッチとメイン コンテンツを持つページのフッター
                                                                        #p# 3 人
3 列のレイアウトを作成したい場合はどうすればよいですか? 絶対配置を使用する場合は、メイン コンテンツと左側の外側のパッチを追加するだけで問題ありません。はい。
レイアウトには絶対位置を再度使用する必要があるため、別のサイドバーをマークアップ ソース コード内のどこにでも配置できます。
2 番目のサイドバーを追加し、# という名前を付けるとします。 sidecolumn に移動し、次の CSS を使用してスペースを確保し、それを挿入します。


body {
マージン: 0;
パディング: 0;
}
#header {
高さ: 40px;
背景: #ccc;
}
#content {
マージン右: 24%;
マージン左: 24%;
}
#サイドカラム {
位置: 絶対;
上: 40px;
左: 0;
幅: 20%;
背景: #999;
}
#sidebar {
位置: 絶対;
上部: 40px;
右: 0;
幅: 20%;
背景: #999;
}
#footer {
margin-right : 24%;
マージン左: 24%;
パディング: 20px;
背景: #eee;
}


先ほど完成した部分は、先ほどの右側のサイドバーと同じように、メインコンテンツとフッターエリアの左外側のパッチを（重複を避けるため）残して、新しい #sidecolumn を絶対位置で配置し、上端に配置します。左端から 40 ピクセル、0 ピクセルの距離です。
3 番目の列に合わせて幅をわずかに変更したことに気づきましたか?レイアウトの幅を固定するには、任意の列のピクセル幅を指定できます。
図 12-10 は、この例をブラウザで表示した結果であり、CSS の絶対配置で完成した柔軟な 3 列のレイアウトです。

図 12-10 位置決め方法を使用した柔軟な 3 列レイアウト
                                                                        #p# 概要
この章では、CSS を使用してレイアウトを計画することで達成できる効果について簡単に説明しました。この章の目的は、プレイの基礎を提供することです。そのため、フローティングと配置という 2 つの主な方法を示します。
CSS レイアウト技術を徹底的に実験し続け、ページ内のネストされたテーブルを削除し、ブラウザーやデバイスで読み取れる、より柔軟で構造化されたマークアップ構文に置き換えていただければ幸いです。
CSS レイアウトについて詳しく知りたい レイアウトについては、次のリソースを必ず確認してください。 「The Layout Reservoir」(http://www.php.cn/): これは、絶対配置を使用して複数列のレイアウトを作成する優れた例です。 「テーブルハックから CSS レイアウトへ: Web デザイナーの旅」 (http://www.php.cn/): Jeffrey Zeldman によって書かれた優れたチュートリアルで、2 列のレイアウトを作成するために必要な手順が記録されています。 「CSS Layout Technoques: For Fun and Profit」(http://www.php.cn/): Eric Costello のさまざまな CSS レイアウト リソース。 「Little Boxes」(http://www.php.cn/): Owen Briggs によって書かれた多くの CSS レイアウト例の美しいインターフェイス。 「CSS Zen Garden」 (http://www.php.cn/): 「CSS ベースのデザインでどのような視覚効果が実現できるかを示します。」 Dave Shea が開拓した「Garden」では、読者から提供された最新の CSS が表示されます。単一の XHTML ドキュメントのデザイン (もちろんレイアウトも含む) これは、CSS の究極のレイアウト機能を確認できる素晴らしい Web サイトです。 テクニック拡張
基本的な CSS レイアウトの構築の基本を説明したので、次は Windows 用 Internet Explorer 5 および 5.5 について説明します。また、CSS ボックス モデルの誤った解析に関する残念な問題についても説明します。プラットフォームの使用方法については後で説明します。同じ高さの列レイアウトを実現するために背景画像をレイアウトする裏技。 ボックス モデルの問題
この章の冒頭で、複数列の CSS レイアウトを作成する方法について説明しました。これらの列にパッチと境界線を追加し始めるときは、width 属性のみを使用します。少し複雑になります。なぜですか?
残念ながら、Windows 用 Internet Explorer 5 は、内部および外部のパッチと境界線を追加するときに、アウトソーシング要素の幅を正しく計算できません。
たとえば、Windows 用の IE5 を除くすべてのブラウザでは、 support CSS1 は、アウトソーシング要素の幅を幅、内部パッチ、境界線の合計として計算します。これは、W3C がすべてのブラウザーで CSS ボックス モデルを処理することを期待している方法です。
ただし、Windows 用 IE5 では、ボーダーと内側のパッチが指定された幅内でカウントされますが、心配しないでください。問題を直接確認するのに役立ちます。 百聞は一見に如かず
図 12-11 と図 12-12 を比較してください。図 12-11 は、両側に 10 ピクセルの内側パッチと 5 ピクセルの境界線を持つ幅 200 ピクセルの要素です。これらを合計すると、実際の幅は 230 ピクセルであることがわかります。
図 12-11 ボックス モデルの正しい計算結果
図 12-12 Windows 版 IE5 が間違っている内側のパッチ、ボーダー、幅の計算 結果
これはデザインに準拠したボックス モデルです。幅属性は常に要素のコンテンツ範囲を定義し、内側のパッチとボーダーがこの値に追加されます。
したがって、サイドバーの幅を 200 ピクセルに定義し、パディングとボーダーを追加する場合、CSS 宣言は次のようになります:


#sidebar {
width: 200px;
padding: 10px;
border: 5px plain black;
}


幅を 200 ピクセルに設定しますが、Windows 用 IE5 を除き、サイドバーには実際には 230 ピクセルのスペースが必要です。 Windows の場合、サイドバーは内側のパッチと境界線を含めて合計 200 ピクセルを占めます。
図 12-12 は、幅属性が 200 ピクセルに指定されている場合、境界線と内側のパッチがコンテンツ スペースを占めることを示しています。コンテンツ空間の外ではなく。
                                                                        #p# 揺れる幅
内部パッチを適用する理由は、現在でも、IE5.x を使用している何百万人ものユーザーには、明らかに逸脱したデザイン結果が表示されるためです。同時に、覚えておかなければならない重要な点があります。この記事を書いている時点では、IE5 を使用している人がまだ多すぎるため、この問題を無視できません
では、どうすればよいでしょうか?この問題を解決するトリックがあります。このトリックでは、正しいボックス モデルを取得するために 2 つの異なる幅が提供されます。1 つは Windows 用の IE5 用、もう 1 つは他のブラウザー用です。 ボックス モデル ハック
Tantek Celik 氏がボックス モデル ハック (http://www.php.cn/) を作成しました。これにより、2 つの異なる幅を提供できるようになります。1 つは調整され、Window Internet Explorer 5 でのみ使用されます。もう 1 つは他のすべてのブラウザで使用されます。
IE5 と IE5.5 でのみ利用可能な CSS 解析バグにより、(境界線と内部パッチに対応するため) わずかに大きい幅を指定し、この値を実際の値でオーバーライドできます。 width を使用すると、他のブラウザが正しい結果を表示できるようになります。 ソース コードの例
たとえば、サイドバーのコンテンツ領域の幅を 200 ピクセル幅に設定し、さらに 10 ピクセルの内側パッチと 5 ピクセルの境界線を設定する場合、CSS は次のようになります:


#sidebar {
width: 200px;
padding: 10px;
border: 5px plain black;
}


Windows 版 IE5 の場合は、次のものが必要です。幅を 230 ピクセル (内側のパッチと両側の境界線の幅を加えたもの) として指定し、標準に準拠するブラウザーが正しい幅を取得できるように、200 ピクセルで上書きします。

#sidebar {
パディング: 10px;
ボーダー: 5px 単色黒;

幅: 230px; /* IE5/Win 用 */
voice -family: ""}"";
voice-family: 継承;
width: 200px; /* 実際の値 */
}
Windows 用 IE5 の値が最初に表示され、その後 Windows 用 IE5 に宣言が終了したと認識させるいくつかのルールが続くことに注意してください。ここでは、voice-family 属性を使用します。ブラウザはそれを認識し、最終的に実際の幅を指定すると、最初の幅ルールがオーバーライドされ、2 番目の幅ルールは Windows 用 IE5 によって無視されます。

結果は、Windows 用 IE5 とその他すべての IE5 でまったく同じに見えるはずです。 CSS2 互換ブラウザー このハックがなければ、Windows 版 IE5 のユーザーには列幅が設計よりも狭くなってしまいます。 Opera フレンドリー
IE5 for Windows の解析エラーもある CSS2 互換ブラウザーの場合、ボックス モデル パッチを使用するたびに追加のステートメントを追加する必要があります。この「Opera フレンドリー」と呼ばれるルールにより、すべてのブラウザーが標準に準拠します。解析バグがなく、期待された幅が表示されることを確認します。


#sidebar {
パディング: 10px;
ボーダー: 5px ソリッドブラック;
幅: 230px; /* IE5/Win の場合 */
voice-family: ""} "";
voice-family: 継承;
width: 200px; /* 実際の値 */
}
html>body #sidebar {
width: 200px;
}


このルールを使用すると、Windows 版 IE5 が CSS ボックス モデルを誤って解析する問題を完全に回避でき、誰もが正しい効果を確認できるようになります。 .
                                                                        #p# 幅以上のもの
ここでは、同じ表示幅を実現するために「ボックス モデル ハック」を使用していますが、このハックは、Windows 版 IE5 に異なる CSS コンテンツを提供したい場合に実際に便利です。どのハックも注意して使用する必要があります。必要な場合にのみ使用してください。将来簡単に削除できるように、「ボックス モデル ハック」が使用されている場所を覚えておくとよいでしょう。
この記事を書いている時点では、まだ何百万人ものインターネット ユーザーが Windows 版 IE5 を使用しているため、このパッチは不可欠です。
以下の「偽装フィールド」は、元々は A List Apart マガジン (http://www.php.cn/) の 2004 年 1 月号に掲載されたものです。 。 偽装コラム
私の個人 Web サイトのデザインに関して、最もよく聞かれる質問は次のとおりです。
「右の列の背景色をページ全体の下部まで広げるにはどうすればよいですか?」
実際、これは単純な概念であり、この章の冒頭で説明したすべてのレイアウト方法に当てはまります。 垂直方向の伸縮
CSS の最もイライラする特性の 1 つは、要素が実際に必要な長さまでしか垂直方向に伸縮しないことです。これは、高さ 200 ピクセルの画像を

内に配置すると、 < p> はページ上で 200 ピクセルしか拡張しません。
これは、

でページの段落を切り取り、この冒頭の方法を使用して複数列のレイアウトを完成させる場合に興味深いジレンマになる可能性があります。 1 つの列が他の列よりも長くなる場合があります (図 12-13)。コンテンツの量によっては、2 つの列を同じ長さにするのが難しい場合があります。
図 12-13 異なる長さのフィールド
フィールドに含まれるコンテンツに関係なく、付録を同じ長さに見せる方法はいくつかあります。私の解決策を共有します (絶対値に適用可能)。位置決めレイアウト方法)、この方法は非常に不可解なほど簡単です。 不正行為
この言葉では言い表せないほど単純な秘密は、縦に配置された背景画像を使用して色付きの列の錯覚を作成することです。SimpleBits (http://www.php.cn/) では、図 12-14 のような背景画像を使用しました。 (デモ用に比率を変更): 左側に装飾的なストライプ、中央にメインコンテンツ用の広い空きスペースを残し、その後に 1 ピクセルの境界線、次に右側のサイドバーの明るい茶色の領域、その後に反転装飾的なストライプ。

図 12-14 tile.gif 列幅が事前に割り当てられた、高さ 2 ピクセルの背景画像。
画像全体の高さはわずか数ピクセルですが、垂直タイルの後にあります。 , 列の内容がどれだけ長くても、最後まで色付きの列を作成できます。 CSS コンテンツ
タグに次の CSS ルールを追加しました。


background: #ccc url(tile.gif)repeat-y 50% 0;


これにより、ページ全体の背景色がグレーに設定され、画像が垂直方向に並べて表示されるだけになります。 (repeat-y)、次の 50% 0 は背景画像の位置を表します。この例では、ブラウザ ウィンドウの左端 (画像の中央) から 50% で、上端に近い位置にあります。 列の位置決め
背景画像を配置した後、位置決めレイアウトを上に配置し、左右の列の内側と外側のパッチを指定して、それらが正しい位置、つまり作成された偽の列に配置されるようにしました。 (図 12-15)。

図 12-15 タイル状の背景画像によって作成された色付きの列
注意しなければならない重要な点があります。その場合でも、Tantek Celik の Box Model Hack を使用して、Windows 版 IE5 のボックス モデルの問題を解決できます (この章の前半の「ボックス モデルの問題」を参照してください
または、可能であれば)。外側のパッチのみを使用し、境界線と内側のパッチを避けてください。その場合、ボックス モデル ハックを追加する必要はありません。同時に、フィールドのコンテンツが単純にタイルの背景画像上に配置される (透明に表示される) 場合は、それが行われます。ハックの使用を避けるには非常に簡単なはずです。 機能する限り
Web サイトで 2 列のレイアウトを作成するために絶対配置を使用しましたが、この章の冒頭で説明した他の方法を使用しても、同じアイデアが当てはまります。フラットです。背景画像を配置し、シミュレートされた列の背景を覆うように列をフローティングします。
これは単純な概念ですが、CSS レイアウトを構築するときにデザイナーがよく遭遇する不満の 1 つを解決できます。 結論
この章の初めに、レイアウトを構築する 4 つの方法を説明しました。そのうちの 3 つは float 属性を使用し、そのうちの 1 つは絶対配置を使用しました。もちろん、その他のレイアウトのヒントやデモについては、リストした追加のリソースを参照してください。
これらの効果を実現するために、境界線と内部パッチを含む列を作成する場合のボックス モデルのハックの重要性についても説明しました。
最後に、CSS レイアウトを設計するときに同じ高さの列を作成できるようにする便利なテクニックを紹介しました。これは非常に基本的なことだと考えられていますが、多くの場合イライラするデザイン目標を達成するのに役立ちます。小さなタイルの背景画像を使用すると、ページの下部に到達できる列を取得できます (コンテンツの長さに関係なく)
私は複数のフロートを使用することに慣れています。レイアウトについては、個人次第です。レイアウトにテーブルを使用する場合でも、それがクールだと思う場合は誰も何も言いません...ははは、冗談です。                                                                                                                                          

声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：XHTML 2.0の新機能プレビュー_HTML/Xhtml_Webページ制作次の記事：XHTML 2.0の新機能プレビュー_HTML/Xhtml_Webページ制作

関連記事

続きを見る