「CSSサイトレイアウト記録」学習メモ(1)_html/css_WEB-ITnose

今日からフロントエンド技術を真剣に勉強しましょう、ははは~~~さあ~~~

初心者にはこの本『CSS Webサイトレイアウト録』(第2版)をおすすめします。少し古い本ですが。とても古典的です。

注: ここで説明する CSS はすべて CSS 2.0 バージョンです。

第 1 章 Web 標準と CSS レイアウトの概要

1.1 Web 標準の歴史と発展

1.1.1 Web 標準

Web 標準は W3C (World Wide Web Consort) によって開発されていますウム）とその他 標準化団体によって開発された一連の仕様。HTML、XHTML、JavaScript、CSS などの一連の標準が含まれます。

Web標準の目的は、さまざまなブラウザや端末デバイスを通じてエンドユーザーに情報コンテンツを表示するためのWebプレゼンテーション層の統一技術標準を作成することです。

1.1.2 Web プレゼンテーション層テクノロジー

Web 自体は非常に複雑な技術アーキテクチャで構成されていますが、その最終的な目的は、ブラウザーまたはアプリケーション ユーザーに対峙し、後者に視覚的な情報対話プラットフォームを提供することです。それは操作が簡単です。プレゼンテーション層技術とは、ユーザーに情報を表示し、ユーザーにインタラクティブな動作を提供する技術を指します。簡単に理解すると、プレゼンテーションは技術的なレベルでのスタイルであり、プレゼンテーション層がもたらすものは視覚的に見えるものです。

現在、W3C によって策定された Web 標準はまさにプレゼンテーション層技術の集合体であり、現在唯一のクロスプラットフォームおよびクロスクライアント技術です。

1.2 Web 標準の構成

Web 標準は、構造、プレゼンテーション、動作の 3 つの部分で構成される一連の標準です。

1.2.1 構造(Structure)

構造は、Webページで使用される情報を整理、分類するために使用されます。構造化設計に使用される主な Web 標準テクノロジには、HTML、XML、および XHTML があります。

1. HTML (Hyper Text Mark-up Language) ハイパーテキスト マークアップ言語

Webの最も基本的な記述言語です。 HTML テキストは、HTML コマンド タグで構成される説明テキストです。HTML タグには、テキスト、グラフィック、アニメーション、サウンド、表、リンクなどを記述することができます。 HTML の構造は、Head と Body の 2 つの部分で構成されます。ヘッダーにはブラウザが必要とする情報が記述され、ボディには表示される具体的なコンテンツが含まれます。

2. XML (The Extensible Markup Language) Extensible Markup Language

XML はもともと HTML の欠点を補い、その強力な拡張性でネットワーク情報公開のニーズを満たすために設計されました。データ変換と説明。

3. XHTML (The Extensible HyperText Markup Language) 拡張可能なハイパーテキスト マークアップ言語

簡単に言えば、XHTML の確立の目的は、HTML から XML への移行を実現することです。

1.2.2 プレゼンテーション

プレゼンテーション技術は、形式、色、​​サイズなどのスタイル制御を含む、構造化情報の表示を制御するために使用されます。現在のWeb表示において、パフォーマンスに利用されているWeb標準技術は主にCSS技術です。

CSS (Cascading Style Sheets)
W3C が CSS 標準を作成する目的は、HTML を担当する構造とは別に、CSS を使用してページ全体のレイアウト デザインを記述することです。 CSS レイアウトを XHTML で記述された情報構造と組み合わせて使用​​すると、デザイナーがプレゼンテーションとコンテンツを分離しやすくなり、サイトの構築と保守が容易になります。

1.2.3 Behavior (動作)

動作とは、ドキュメント全体内のモデルの定義と、ユーザーが実行する対話型アクションを記述するために使用される対話型動作の記述を指します。ドキュメントを実行できます。動作を表現する Web 標準技術には主に DOM と ECMAScript があります。

1. DOM (Document Object Model) ドキュメント オブジェクト モデル

W3C DOM 仕様によれば、DOM はブラウザが Web コンテンツ構造と通信できるようにするインターフェイスであり、ページ上のコンテンツ 標準コンポーネント。 Web デザイナーと開発者に、サイト内のデータ、スクリプト、プレゼンテーション オブジェクトにアクセスする標準的な方法を提供します。

2. ECMAScriptスクリプト言語（JavaScriptの拡張スクリプト言語）

CMA（コンピュータ製造業者協会）によって開発された標準スクリプト言語（JavaScript）であり、特定のインターフェース上でオブジェクトの対話的な操作を実現するために使用されます。 。

1.3 CSS レイアウトとテーブル レイアウトの違い

現在の Web 標準から見ると、最も理想的な技術的構造は HTML または XHTML を使用して Web ページをデザインすることです。XHTML を使用して構造を記述することが推奨されています。より厳密な言語であり、Web ページのレイアウト パフォーマンスを完成させるために CSS が使用されます。

1.3.1 CSS の利点

CSSはWebページのレイアウトスタイルを制御するための基礎であり、Webページのパフォーマンスとコンテンツを真に分離できるスタイルデザイン言語です。従来の HTML のスタイル制御と比較して、CSS は Web ページ内のオブジェクトの位置をピクセル レベルで正確に制御でき、ほぼすべてのフォントとフォント サイズ スタイルをサポートし、Web ページのオブジェクト ボックス モデルのスタイルを制御する機能を備えています。予備的なページ インタラクション デザインを実行します。要約すると、CSS には次のような主な利点があります:

完全なブラウザサポート: CSS スタイルで設計された Web ページは、多くのプラットフォームやブラウザで最も近いスタイルのパフォーマンスを発揮します。

CSS デザイン コードでは、CSS の内部インポート (インポート) 機能を使用して、デザイン要件に応じてデザイン コードを 2 回分離できます。

スタイルデザイン制御機能が強力で、Webページオブジェクトの位置レイアウトなどをピクセルレベルで正確に制御できます。

優れた継承パフォーマンス (カスケード処理): CSS コードは、ブラウザーの解析順序において OOP オブジェクト指向と同様の基本的な特性を持ち、ブラウザーは CSS レベルに従って同じ要素に定義された順序で複数のスタイルを適用できます。

1.3.2 従来のテーブル レイアウトと CSS レイアウト

実際、従来のテーブル レイアウト方法は、HTML テーブル要素の境界線ゼロ機能を利用しているだけです。表要素はセルの枠線と間隔を0、つまり枠線を表示しないで表示できるため、Webページ内の各要素をレイアウトに応じて分割し、表の各セルに配置することで、Aを実現できます。複雑な組版の組み合わせ効果。

テーブル レイアウト コードの最も一般的な形式は、HTML タグの間に、width="100%"、border="0" などのデザイン コードを埋め込むことですが、この種の混合スタイルのデザイン コードは、テーブルユニット グリッドでは可読性が大幅に低下し、メンテナンスコストも高くなります。

テーブル レイアウトの核心は、形式要件を満たすことができるテーブル構造を設計し、各セルにコンテンツを読み込むことです。スペースとスペースは、プレースホルダーとして多くの透明な GIF によって実装されます。最終的な構造は複雑なテーブルです。このような複雑なテーブル設計では、大量の Web ページ ファイルが作成され、設計や変更が困難になり、最終的にはブラウザのダウンロードと解析が遅くなります。

CSS レイアウトを使用すると、この状況を根本的に変えることができます。 CSS レイアウトの思考方法は、table 要素のデザインには組み込まれなくなり、HTML の別の要素 div に置き換えられました。 div は、レイヤーまたはブロックとして理解できます。テーブルよりも単純な要素です。 div の機能は、後のスタイル定義のために情報の一部をマークすることだけです。

div を使用する場合、テーブルのように内部セルを通じてレイアウトを整理する必要はありません。 CSS の強力なスタイル定義機能により、テーブルよりも簡単かつ自由にページのレイアウトやスタイルを制御できます。以下に div スタイルのデザイン コードの一部を示します:

これは、ページ内のクラス コンテンツを持つすべてのオブジェクトのスタイルを制御するために使用されます。

1.4 Web 標準への移行

Web 標準の目的は、Web ページの構造、パフォーマンス、動作の分離を実現し、最適なアーキテクチャを実現し、Web サイトの使いやすさとユーザー エクスペリエンスを提供することです。以下の基準と方法を使用して Web サイトを構築することが最も理想的な選択です。

1.4.1 HTML から言語への移行。 XHTML は、最終的なパフォーマンスを目的として設計されたものではなく、主に Web ページのコンテンツの構造設計に使用され、ブラウザーの解析に適した設計言語です。

現在、XHTMLの利用規格には主にTransitional、Strict、Framesetの3つの適用方法があります。 移行モード: ユーザーがいくつかの HTML タグを使用して XHTML ドキュメントを作成できるようにする緩やかな移行 XHTML アプリケーション。この方法をお勧めします。

厳密なメソッド: XHTML ではスタイル タグと属性を使用できません。 Frameset メソッド: フレーム Web ページのアプリケーション メソッド。

1.4.2 CSSの役割を最大限に発揮する

1.合理的なCSSファイル構造

CSSはスタイルデザインとコンテンツの分離を実現しますが、CSSファイル自体も適切な階層構造を持つ必要がありますと仕様を変更することで、スタイルデザインのメンテナンス性をさらに向上させることを目的としています。

2. 継承と再利用のメリット

CSS を使用する利点は、その優れた再利用特性にあり、1 つの CSS デザインコードを複数の領域で同時に使用できることです。 CSS は再利用機能に加えて、オブジェクト指向プログラミングと同様の継承メカニズムを実装することもでき、これにより Web サイトのスタイル構造をさらに改善することができます。

3. クロスプラットフォーム コードを設計する

CSS には、ブラウザーのブランドやバージョンによってレンダリング方法が異なるため、CSS の分析にも一定の違いがあります。これらの理由から、CSS の設計には特定のクロスプラットフォーム互換性機能も必要であり、コーディング時に珍しい属性の使用を最小限に抑える必要があります。古いバージョンのブラウザーとの互換性を維持したい場合は、特定の CSS ハックを残すことにも注意する必要があります。コード。

CSSハックは簡単にCSSハッカープログラムと訳せます。これは、ブラウザーがコードを受信することを期待するのと似ており、ブラウザーの解析問題を効果的に解決できます。

4. ユーザビリティの良いCSSスタイルのデザイン

ユーザビリティの目標は、インタラクティブな製品（ソフトウェア、Webサイト）がユーザーのニーズを最大限に満たすことです。ユーザビリティの高い CSS スタイルのデザインの目的は、優れたデザインを通じてユーザーが使いやすい、よりインタラクティブな Web サイトを作成することです。

5. DOM ベースのスクリプト言語を使用してインタラクションを作成する

DOM は、スクリプト言語のクロスプラットフォームおよびクロスブラウザー アプリケーションを実現するためにも作成されます。現時点では、ほとんどのブラウザが標準 DOM をサポートしています。 DOM 準拠のスクリプト言語を使用すると、ブラウザーが DOM 準拠である限り、基本的にブラウザーの異なるバージョンを検出したり、複数の異なるコード セットを作成したりする必要がなく、同じコードでサポートされているすべての操作を完了できます。現在の JavaScript は、DOM 標準に準拠したスクリプト言語です。

1.5 よくある質問

1.5.1 Web 標準を使用した後もテーブルは役に立ちますか?

1. テーブルについて

Web 標準を使用したからといって、テーブルを使用しなくてもよいというわけではありません。を除き、テーブルのみを使用 Web ページのレイアウトとしては、ページ要素のレイアウトに無理があり、データを表示するためにテーブル形式が使用されます。テーブルの機能は Web ページをレイアウトすることではなく、レイアウト タスクは CSS に任せる必要があります。

2. その他の要素について

使用経験に応じて、XHTML 標準の一部の要素は 3 つの主要なカテゴリに分類されます。

補助レイアウトデザイン要素

div、span、その他の要素を指します。主な機能はページ全体をレイアウトすることです。

構造要素または情報要素

table、ul、pre、codeなどの要素を指し、情報の表示や制御のための要素です。

a、メタ要素

これらを使用して、いくつかの特別な機能を実装します。

1.5.2 Web ページのデザインに HTML を引き続き使用できますか?

答えは「はい」です。 XHTML が推奨される理由は、HTML の設計形式では、パフォーマンスとコンテンツの分離という Web サイトのアーキテクチャ原則を満たせなくなっているためです。 HTML を使用して Web サイトを構築し続ける場合、最終的な目標に関しては違いはありません。

1.5.3 XML を直接使用しないのはなぜですか?

1.5.4 ウェブサイトの再構築とは

ウェブサイトの再構築とは、古いHTMLのテーブルレイアウト方式を変更し、Web標準に準拠した新しいウェブサイトの構造とコーディング方法を使用することとして理解できます。より深い意味で、私たちは Web 標準を通じて Web サイトの効率を向上させるインターフェースを提供したいと考えています。この利点は、単純にスケーラビリティと保守性の 2 つの側面として理解できます。

つづく....