CSS レイアウト: 40 のチュートリアル、ヒント、例、ベスト プラクティス_html/css_WEB-ITnose

CSS レイアウト: 40 のチュートリアル、ヒント、例、ベスト プラクティス

前書き: レイアウトは、Web 開発における重要なトピックです。XHTML/CSS が登場すると、TABLE レイアウトの使用は徐々に消え、CSS レイアウトが使用されます。多くの利点が主流になりつつあるため、この記事では CSS ベースの Web レイアウトに関する 40 のリソースとチュートリアルを紹介します。記事の出典はhlにあります。記事内の多くの例は、古典的な CSS 書籍「CCS: The Missing Manual, 2nd Edition」に記載されていますが、私の知る限り、この第 2 版は中国では翻訳および出版されていません。ここから英語版をダウンロードできます (ただし、ユーザー名の登録が必要です)

Text

CSS ベースのレイアウトは、より柔軟なレイアウト方法と強力なユーザー視覚体験を提供できます。いくつかの重要なヒントとキーポイントは、初心者が CSS レイアウトの基本と本質を理解するのに役立ちます。この記事が書かれたのは、完全に柔軟性があり、輪郭のある列を持ち、完璧に機能する完璧なレイアウトを見つけるために書かれた理由です。

したがって、次のリストは、CSS ベースのレイアウトについて Web 上でまとめたいくつかのヒント、チュートリアル、ベスト プラクティスのリストです。

もちろん、次の CSS 関連トピックにも興味があるかもしれません:

使用すべき 7 つの CSS ハック

CSS を使って何でもする: 50 以上のクリエイティブな例とチュートリアル

CSS を使用して何かを修正する: 20 以上の一般的なバグと修正

CSS レイアウトのチュートリアル

1-CSS を使用して 3 列の固定レイアウト構造を完成させる-この記事では実装方法について説明しますHTML/CSS に基づく 3 列固定レイアウト構造。基本要素 (上部のロゴ バー、ナビゲーション バー、テキスト エリア、カテゴリを定義する中央の列、右サイドバー）。

2-CSS を使用してページ レイアウトをデザインする - CSS ファイルを使用してサイトのページ レイアウトをデザインする方法。

3-横型レイアウトのサイトの作り方- 従来の横型レイアウトとは異なるサイトテクニックを作成する (訳者注: 横型レイアウト、顧客エクスペリエンスは好みの問題です)

サンプルはこちらからご覧ください| ダウンロード

4 ～通常の横レイアウトとは違う超簡単2カラムレイアウトテクニック～ ).

ここで例を参照してください ダウンロード

5-シンプルな 2 列 CSS レイアウト - これは、シンプルな 2 列レイアウトを作成するためのチュートリアルです。このレイアウトには、タイトル領域、水平ナビゲーション バー、メイン コンテンツ領域、サイドバー、およびフッター領域が含まれています。そして、このレイアウトは水平方向に中央揃えになっています。

ここで例を参照してください

6-聖杯レイアウト (聖杯レイアウト) � この記事では、3 列レイアウト (2 列) について説明します。固定幅の側面 列と 1 列の幅を広げる中間列レイアウトにより、ページの構造と明瞭さが確保されます。

ここで例を参照してください

7-CSS センタリング 101- CSS を使用して固定幅レイアウトをセンタリングする方法

以下のように CSS を使用してコンテナの ID で DIV を完成させます2 つのルール 含まれるコンテンツは中央に配置されます

8-CSS レイアウトを最初から作成する - このガイドでは、完全に機能する CSS レイアウトを作成することで、CSS レイアウトを開始する方法を段階的に説明します。

9-非主流!複数列レイアウト - 複数列レイアウト、一定の高さの列 (各列の高さが等しい)、固定幅または可変幅の中央領域、単純なマークアップ、CSS。 (翻訳者注: オリジナルの作者の写真は上の写真と同じです)

ここで例を参照してください

10- 独自の CSS レイアウトを作成します - 柔軟性の高いレイアウト、同じ高さの列、垂直ハードル要素。この記事では、これらの目標を達成し、それらを使用して独自の CSS レイアウトを作成する方法について説明します (翻訳者注: 原文は One True Layout です。翻訳方法がわからないので、試してみてください。)

こちらからご覧ください

11 - PSD から HTML まで、WEB デザインをステップごとに完成させます - Photoshop から HTML を完成させるまで、全プロセスをステップごとに説明します。