WebページのレイアウトにCSSを使用する方法

1 日目: どの DOCTYPE を選択するか

はじめに

みなさん、こんにちは！この一連の記事は、Ajie 自身の w3cn.org サイト作成プロセスに基づいて書かれています。 Ajie は、これまでに Web 標準に完全に準拠した Web サイトを作成したことがありません。今は海外の資料を参考にしながら、その過程で感じたことや考えたことを記録していますので、皆さんのお役に立てれば幸いです。さて、始めましょう。

初日

標準を満たすサイトの作成を開始します。最初に行うことは、ニーズを満たす DOCTYPE を宣言することです。

この Web サイトのホームページの元のコードを見ると、最初の行が次であることがわかります:



有名な Web デザイン ソフトウェア開発者である Macromedia やデザインの巨匠 Zeldman の個人 Web サイトなど、標準を満たすサイトをいくつか開くと、同じコードを見つけます。他の標準準拠サイト (k10k.net など) のコードは次のとおりです:



それでは、これらのコードは何を意味するのでしょうか?置く必要があるのでしょうか？

DOCTYPEとは

上記のコードをDOCTYPEステートメントと呼びます。 DOCTYPE はドキュメント タイプの略語で、使用している XHTML または HTML のバージョンを示すために使用されます。

DTD (上記の例の xhtml1-transitional.dtd など) はドキュメント タイプ定義と呼ばれ、ドキュメントのルールが含まれています。ブラウザは、定義した DTD に基づいてページの ID を解釈し、それを表示します。 。

標準に準拠した Web ページを構築するには、DOCTYPE 宣言が不可欠かつ重要なコンポーネントです。XHTML が正しい DOCTYPE を決定しない限り、ロゴも CSS も有効になりません。

XHTML 1.0 では、次の 3 つの DTD 宣言から選択できます:

Transitional (移行): 要件が非常に緩和された DTD で、HTML4.01 ロゴを引き続き使用できます (ただし、xhtml の記述方法に準拠する必要があります)。完全なコードは次のとおりです:



厳密: 厳密な DTD の場合、
などのプレゼンテーション層の識別子と属性は使用できません。完全なコードは次のとおりです:



フレームセット: フレーム ページ用に特別に設計された DTD。ページにフレームが含まれている場合は、この DTD を使用する必要があります。完全なコードは次のとおりです。

どの DOCTYPE を選択すればよいでしょうか

理想的な状況はもちろん厳密な DTD ですが、Web 標準に慣れていないデザイナーのほとんどにとって、現時点では暫定的な DTD (XHTML 1.0 Transitional) が理想的です。 (このサイトも暫定的な DTD を使用しています) を選択してください。この DTD ではプレゼンテーション層の識別子、要素、属性も使用できるため、W3C コード検証に合格することも容易になります。

注: 上記の「プレゼンテーション層の識別と属性」は、タイプセット用のテーブル、背景色の識別など、純粋にパフォーマンスを制御するために使用されるタグを指します。 XHTML では、タグはプレゼンテーションを実現するためではなく、構造を表すために使用されます。この移行の目的は、最終的にデータとプレゼンテーションを分離することです。

例: マネキンが着替えます。モデルはデータ、服は表現のようなもの モデルと服が分かれているので、自由に着せ替えることができます。オリジナルの HTML4 ではデ​​ータとプレゼンテーションが混在しており、プレゼンテーション形式を一度に変更するのは非常に困難でした。あはは、この概念は少し抽象的ですが、アプリケーションのプロセス中に徐々に理解する必要があります。

補足

DOCTYPE宣言は、すべてのXHTMLドキュメントの先頭、すべてのコードとマークアップの上に配置する必要があります。

詳細については、W3C Webサイトをご覧ください

2 日目: 名前空間とは何ですか?

DOCTYPE が宣言された後の次のコードは次のとおりです:


通常、HTML4.0 コードは単なる ですが、ここでの「xmlns」とは何ですか?

この「xmlns」はXHTML名前空間の略称で、「名前空間」宣言と呼ばれます。名前空間の役割は何ですか? Ajie 自身の理解は次のとおりです。

xml では独自のロゴを定義できるため、自分が定義したロゴは他の人が定義したロゴと同じである可能性がありますが、意味は異なります。ファイルを交換または共有するときにエラーが発生しやすくなります。このエラーを回避するために、XML では名前空間宣言を使用します。これにより、ID を指す URL を通じて ID を識別できるようになります。例:

Xiao Wang と Xiao Li の両方が 識別子を定義している場合、Xiao Wang の名前空間は「http://www.xiaowang.com」、Xiao Li の名前空間は「http://www」です。 .com」の場合、2 つのドキュメントがデータを交換するときに、 識別子が異なる名前空間に属しているため、混乱することはありません。

より一般的な説明は次のとおりです: 名前空間は、ドキュメントにマークを付けて、このドキュメントが誰に属しているかを他の人に伝えることです。この「誰」が URL に置き換えられるだけです。

XHTML は HTML から XML に移行するためのマークアップ言語であり、XML ドキュメントのルールに準拠する必要があるため、名前空間も定義する必要があります。また、XHTML1.0 ではロゴをカスタマイズできないため、名前空間は同じ「http://www.w3.org/1999/xhtml」になります。まだ完全に理解していなくても問題ありません。この段階ではコードをコピーするだけです。



の後の lang="gb2312" は、ドキュメントが簡体字中国語であることを指定します。

3 日目: 言語エンコードを定義する

3 番目のステップは、次のように言語エンコードを定義することです:


ブラウザで正しく解釈され、W3C コード検証に合格するには、すべての XHTML ドキュメントが使用するエンコード言語を宣言する必要があります。通常は gb2312 (簡体字中国語) を使用します。Unicode、ISO を使用することもできます。 8859-1 など、ニーズに応じて定義されます。

通常はこの定義で十分です。ただし、XML ドキュメントではこのように言語エンコーディングが定義されていないことを付け加えておきます。XML は次のように定義されています。ホームページのコードの最初の行にも同様の記述が見られますが、これは W3C が推奨する定義方法でもあります。では、このアプローチを採用してみませんか?その理由は、IE6/windows など、一部のブラウザでは標準のサポートが不完全であり、そのような定義方法を正しく理解できないためです。したがって、現在の移行計画では、引き続きメタ方式の使用を推奨します。もちろん、両方の方法で書くこともできます。

この Web サイトのソース コードを見ると、言語エンコードが定義されている文がもう 1 つあることがわかります:


これは、さまざまなブラウザがページを正しく解釈できることを確認するために、ブラウザによって作成された古いバージョンを参照するためのものです。

注: 上記の宣言ステートメントの最後にスラッシュ「/」がありますが、これは以前の HTML4.0 コードの記述とは異なります。その理由は、XHTML 構文ルールでは、すべてのタグに開始と終了が必要であるためです。たとえば、 と 、

と

など。ペアになっていない識別子の場合は、識別子の末尾にスペースを追加する必要があります。 」。たとえば、
は
と記述され、 は と記述されます。これは、ブラウザがコードを一緒に認識しないようにするためです。

4日目: スタイルシートの呼び出し

Web標準を使用してWebサイトをデザインする移行方法は、主にXHTML+CSSスタイルシートを使用することです。これには、すべての Web デザイナーが CSS に習熟していることが必要です。これまで CSS を使用したことがない場合は、今すぐ学習を始めてください。 Web標準に準拠したWebサイトを作成するには、CSSの知識がなければ美しいページをデザインすることはできません。

実際、パフォーマンスのあらゆる側面は CSS で実装する必要があります。以前は位置決めとレイアウトに table を使用していましたが、現在は位置決めとレイアウトに p を使用する必要があります。これは考え方の変化ですが、最初は少し違和感があります。ハハ、どんな変化にも抵抗はあるでしょう。標準によってもたらされる「利点」を享受するには、古い伝統的な慣習をいくつか放棄する価値があります。

スタイルシートの外部呼び出し

これまでは、スタイルシートを次の2つの方法で使用することが一般的でした。

ページ内メソッド：ページコードの先頭領域に直接スタイルシートを記述する方法。これと同様:

なぜ二度書かなければならないのですか？

実際、通常の状況では、外部リンク方法 (つまり、最初の文) を使用するだけで十分です。ここで使用するダブル テーブル呼び出しは単なる例です。スタイルシートの入力には「@import」コマンドを使用します。 「@import」コマンドは、Netscape 4.0 ブラウザでは無効です。つまり、特定のエフェクトを Netscape 4.0 ブラウザでは非表示にし、4.0 以降または他のブラウザでは表示したい場合は、「@import」コマンド メソッドを使用してスタイル シートを呼び出すことができます。



5 日目: ヘッド領域のその他の設定

これらのヒントは主にメタ タグの設定に焦点を当てています。実際には、最後に「/」を追加することに注意してください。タグは閉じてますが、入門チュートリアルなので詳しく書いてください。

お気に入りアイコン

このサイトをお気に入りに追加すると、お気に入り URL の前にある IE アイコンがこのサイトの特別なアイコンになることがわかります。この効果を実現するのは非常に簡単です。まず 16x16 のアイコンを作成し、それに favicon.ico という名前を付け、ルート ディレクトリに配置します。次に、次のコードを先頭領域に埋め込みます:






検索エンジン用に用意されたコンテンツ
コードは次のとおりです。自分のサイトのコンテンツに置き換えるだけです:

検索ロボットを許可する サイト上のすべてのリンクを検索します。特定のページを検索したくない場合は、robots.txt メソッドを使用することをお勧めします

サイト作成者情報を設定します



サイトの著作権情報を設定します



サイトの簡単な紹介 (推奨)



サイトのキーワード (推奨) )

まずはこれくらい。補足説明、これまでの 5 つのセクションはヘッド領域のコードに関するもので、実際のページの内容についてはまったく触れていませんでした。あはは、実はヘッド領域は非常に重要であることがわかります。ページの先頭コードを見てデザイナーを判断するのは十分にプロフェッショナルですか?

6日目: XHTMLコード仕様

正式なコンテンツ制作を開始する前に、まずWeb標準のコード仕様を理解する必要があります。これらの仕様を理解すると、迂回路を回避し、できるだけ早くコード検証に合格することができます。

1. すべてのタグには対応する終了タグが必要です

これまで、HTML では、対応する を記述することなく、

や

などの多くのタグを開くことができました。

を押して閉じます。しかし、これは XHTML では合法ではありません。 XHTML は厳密な構造を必要とし、すべてのタグを閉じる必要があります。ペアになっていない別のタグの場合は、タグの最後に「/」を追加してタグを閉じます。例:


2.すべてのタグ要素と属性の名前は小文字である必要があります。HTML とは異なり、

ページの左列

ページの中央列ページ

ページの右列

このとき、ページの効果は次のとおりです。 3 つの並列した灰色の四角形と背景画像のみが表示されます。しかし、高さを全画面にしたいのですが、どうすればよいですか?



4.100%適応高さ?

3つの列を同じ高さに保つために、#left、#middle、#rightに「height:100%;」を設定しようとしましたが、適応的な反応は非常に効果的です。いくつかの試みの結果、各 p に絶対的な高さ「height:1000px;」を与える必要がありました。コンテンツが増加するにつれて、この値は常に修正する必要があります。高さを調整する方法はないのでしょうか？アジエ自身の研究が深まるにつれ、実際には 100% を設定する必要はまったくありません。この方法については、次の研究セクションで詳しく紹介します。

Day 10: Adaptive height

3列レイアウトの最後に著作権などの情報を入れるフッター行を追加したい場合。 3 つの列の下端を揃えなければならないという問題が発生しました。テーブルレイアウトでは、大きなテーブルを小さなテーブルに入れ子にする方法を使用します。これにより、3 つの列を簡単に揃えることができますが、p レイアウトでは、3 つの列が独立して分散され、コンテンツの高さが異なるため、揃えるのが困難になります。実際、p を完全にネストし、3 つの列を 1 つの p に配置し、下部の配置を実現できます。これは実装例です (白い背景のボックスはページをシミュレートします):

この例のページのメイン コードは次のとおりです:

< p id="メインボックス"> ;

特定のスタイルシートは、対応するセクションに記述されています。重要な点は、#mainbox レイヤーが #menu、#sidebar、#content の 3 つのレイヤーにネストされていることです。 #content のコンテンツが増えると、 #content の高さが増加し、 #mainbox の高さも拡張され、 #footer レイヤーは自動的に下に移動します。これにより、高度な適応性が実現されます。

#menu と #content がページの右側「FLOAT: right;」にフローティングし、#sidebar が #menu レイヤーの左側「FLOAT: left;」にフローティングしていることにも注目してください。はフローティング方式の位置決めであり、絶対位置決めを使用してこの効果を実現できます。

この方法のもう 1 つの問題は、#sidebar の背景を 100% 正確にできないことです。一般的な解決策は、ボディの背景色で塗りつぶすことです。 (#mainbox の背景色は、Mozilla などのブラウザでは無効なので、使用できません。)

さて、メインフレームワークは構築できました。残りの作業は、レンガとタイルを追加するだけです。それ。他のレイアウトを試してみたい場合は、次の記事を読むことをお勧めします:

11日目: テーブルフリーメニュー

のレイアウトを最初に設定し、その中にコンテンツを入力し始めました。 1 つ目は、ロゴ画像を定義することです:

スタイル シート: #logo {MARGIN: 0px;padding:0px;WIDTH: 200px;HEIGHT:80px;}
ページ コード:

< a title= "Web デザイナー" href="http://www.w3cn.org/" >

上記のコードは簡単に理解できるはずです。まず CSS でロゴ レイヤーを定義し、それをページ上で呼び出します。 Web ページをより使いやすくするために、Web 標準では、正式なコンテンツであるすべての画像に alt 属性を追加することが求められていることに注意してください。この alt 属性は画像の機能（画像が表示できない場合に代替テキストを表示する）を記述するために使用しますので、意味のない画像名だけを書かないでください。

次のステップはメニューを定義することです。

1. テーブルのないメニュー (垂直)

まずメニューの最終的な効果を見てみましょう: デモページ

通常、このようなメニューを実装するには、少なくとも 2 つのテーブル層をネストします。 td で設定 背景色は、1 ピクセルの高透明 GIF 画像を挿入することで実現されます。背景色の交互効果は、td の onmouseover イベントを使用して実現されます。しかし、このメニューのページ コードを見ると、次の文だけが表示されます:

• ウェブサイト標準とは


• 標準を使用する利点< ; /a>


• Web ページ テンプレートのダウンロード< /li>
  
• WEB 標準関連のチュートリアル


• < title="ツール" href="http://websoft.jianzhan8.cn">Web ページ作成ソフトウェア


• ヘルプを使用する

はテーブルを使用しませんが、 unsequenced

。メニュー全体の効果の秘密は完全に id="menu" にあります。CSS でのメニューの定義を見てみましょう:

(1) まず、メニュー レイヤーのメイン スタイルを定義します。

#menu {
MARGIN: 15px 20px 0px 15px; /*レイヤーの外側の境界線の距離を定義します*/
PADDING:15px; /*レイヤーの内側の境界線を 15px に定義します*/
BACKGROUND: #dfdfdf; /*背景色を定義します* /
COLOR: #666; /*フォントの色を定義します*/
BORDER:#fff 2px 実線として /*境界線を 2px の白線として定義します*/
WIDTH:160px; /*コンテンツの幅を次のように定義します160px*/
}

(2) 次に、順序なしリストのスタイルを定義します。

#menu ul {
MARGIN: 0px;
PADDING: 0px;
BORDER: Medium none; /*境界線を表示しない* /
LINE-HEIGHT:normal;
LIST-STYLE-TYPE: none;
}

#menu li {BORDER-TOP: #FFF 1px margin: 0px;}

注: ID の派生メソッド定義ここでは selector が使用されています (第 7 章「Day: CSS の概要」を参照) は、メニュー レイヤーのサブ要素

と
• のスタイルを説明しています。 LIST-STYLE-TYPE: none は、順序なしリストのデフォルトのスタイルが使用されないこと、つまり、小さなドットが表示されないことを意味します (後で小さなドットを置き換えるために独自のアイコンを使用します)。 BORDER-TOP: #FFF 1px ソリッド; メニュー間の 1px の間隔線を定義します。
  
  (3) onmouseover効果を定義します
  
  #menu li a {
  PADDING:5px 0px 5px 15px;
  DISPLAY:block;
  FONT-WEIGHT:bold;
  BACKGROUND:url(images/icon_dot_lmenu.gif) -repeat 2px 8px;
  WIDTH: 100%;
  COLOR: #444;
  TEXT-DECORATION: none;
  }
  #menu li a:hover { BACKGROUND: url(images/icon_dot_lmenu2.gif) #C61C18 no-repeat 2px 8px;
  COLOR: #fff; }
  
  は次のように説明されます:
  
  "display:block;" は、リンクをボタンにすることを意味します。 (images /icon_dot_lmenu.gif) traditional no-repeat 2px 8px;"この文は、li を置き換える小さな点のアイコンを定義します。 「透明」は背景が透明であること、「2px 8px」はアイコンの位置が左から2px、上から8pxであることを指定します。この文は、「BACKGROUND-IMAGE: url(images/icon_dot_lmenu.gif); BACKGROUND-POSITION: 2px 8px; BACKGROUND-REPEAT: no-repeat; BACKGROUND-COLOR: traditional
  」という 4 つの文に分割することもできます。 li a:hover」は、マウスがリンク上に移動したときの色の変化と小さなアイコンの変化を定義します。
  
  OK、これがテーブルのないメニューの実装方法です。もともと HTML で記述されていたすべてのプレゼンテーション スタイルが取り除かれ、CSS ファイルに組み込まれていることがはっきりと感じられます。ページコードの大部分は保存されます。 CSS を使用してメニュー スタイルを変更するのは非常に簡単です。
  
  2. テーブルなしのメニュー（横）
  
  上記は縦のメニューです。横のメニューを表示したい場合は、liも使用できますか？もちろん可能です。コードを以下に示します。効果はこのページの上部にあります:
  
  ページ コード
  
  

  
  

  
  
  • < ;a title="ホーム" href="http://www.w3cn.org/">ホーム
  
  
  • < ;a title=" 私たちについて" href="http://www.w3cn.org/aboutus.html">私たちについて
  
  
  • < ;a title= "Web 標準" href="http://www.w3cn.org/webstandards.html">Web 標準
  
  
  • < ;a title ="標準の利点" href="http://www.w3cn.org/benefits.html">標準の利点
  
  
  • 移行方法
  
  
  • 関連チュートリアル
  
  
  • ツール
  
  
  • リソースとリンク
  
  
  • よくある質問
  
  
  
  
  スタイルシートコード
  
  #submenu {
  MARGIN: 0px 8px 0px 8px;
  BORDER: #ffdfdf;
  COLOR: #666;
  身長:
  
  #submenu ul {
  CLEAR: 左;
  PADDING: 0px;
  TEXT-ALIGN: 中央;
  }
  
  #submenu li {
  FLOAT: left;
  MARGIN: 0px;
  PADDING: 2px 2px 3px;
  BACKGROUND: url(images/icon_dot_lmenu.gif) -繰り返し 2px 8px;
  WIDTH: 100%;
  COLOR: なし;
  
  #submenu li a:hover {
  BACKGROUND: url(images/icon_dot_lmenu2.gif) C61C18 リピートなし 2px 8px;
  COLOR: #fff; }
  
  #submenu ul li#one A { WIDTH : 60px}
  #submenu ul li#two A { WIDTH: 80px}
  #submenu ul li#three A { WIDTH: 80px}
  #submenu ul li#four A { WIDTH: 90px}
  #submenu ul li#five A { WIDTH: 80px}
  #submenu ul li#six A { WIDTH: 80px}
  #submenu ul li#seven A { WIDTH: 60px}
  #submenu ul li#eight A { WIDTH: 90px}
  #submenu ul li# nine A { WIDTH: 80px}
  
  上記のコードは 1 つずつ解析されません。水平メニューの鍵は、
• スタイルを定義するときの「FLOAT: left;」ステートメントです。さらに、UL 定義の DISPLAY:inline; 文に注意してください。これは、li がインライン オブジェクトとして強制的に表示され、その行がオブジェクトから削除されることを意味します。水平配置を実現します。例に示すように、各サブメニューの幅を定義し、メニューの間隔を制御することもできます。まあ、試してみて、li を使用してさまざまなメニュー スタイルを実装することもできます。
  
  ヒント: サブメニューの合計幅がレイヤーの幅より大きい場合、メニューは自動的に折りたたまれます。この原理を使用すると、順序付けされていない 1 つのリストの 2 列または 3 列のレイアウトを実現できますが、これは困難です。オリジナルのHTMLで実現します。
  
  
  

  12 日目: 検証と一般的なエラー

  何日も熱心に取り組んだ後、私たちは Web サイトを再設計するために XHTML+CSS の使い方を学ぶことに熱心に取り組みました。では、作成したページが実際に Web 標準に準拠していることをどうやって確認できるのでしょうか? W3C および一部のボランティア Web サイトは、ページが標準に準拠しているかどうかを確認し、エラーを修正するためのヘルプ情報を提供するオンライン検証プログラムを提供しています。これらのチェックは非常に便利で、ページをデバッグするときに最初に行います。
  
  1. 有効です エラーコードが存在する行とエラーの原因を見つけるのに役立ちます。
  
  XHTML 検証の一般的なエラーにより、比較テーブルが発生します
  
  
  DOCTYPE が見つかりません! HTML 4.01 移行にフォールバック -- DOCTYPE が定義されていません。
  
  文字エンコーディングが見つかりません! UTF-8 に戻ります -- 未定義の言語エンコーディング。
  「img」の終了タグが省略されましたが、OMITTAG NO が指定されました -- 画像タグが「/」で閉じられていません。
  
  SHORTTAG YES が指定されていない限り、属性値の指定は属性値リテラルでなければなりません -- 属性値は引用符で囲む必要があります。
  
  要素 "p" 未定義---p タグは大文字にすることができないため、小文字の p に変更する必要があります。
  必須属性「alt」が指定されていません---画像には alt 属性を追加する必要があります。
  
  必須属性「type」が指定されていません---JS または CSS によって呼び出されるタグに type 属性がありません。
  最も一般的な間違いは、ラベルの大文字化です。通常、これらのエラーは関連しています。たとえば、

を忘れた場合、他の
• タグがエラーを報告するため、通常、1 つのエラーが解決されると、他のエラーは消えます。ページが XHTML1.0 検証に合格した場合、ページにアイコンを配置できます。 コードは次のとおりです:
  img src="http://www.w3.org/Icons/valid-xhtml10" alt="有効な XHTML 1.0!" /> < /p>
  
  
  2.CSS2検証
  
  
  検証URL：http://jigsaw.w3.org/css-validator/
  
  検証方法：URL検証、ファイルアップロード検証、直接貼り付けコード検証の場合成功すると、「おめでとうございます。このドキュメントはスタイルシートの検証に合格しました。ほほー、検証情報は中国語に対応しています。」と表示されます。図に示すように:
  
  
  
  
  検証が失敗した場合、エラーと警告の 2 種類のエラーが表示されます。エラーは、修正する必要があることを意味します。修正しないと検証に合格しません。警告は、W3C によって推奨されていないコードがあり、それを変更することが推奨されることを意味します。
  
  
  CSS2 検証の一般的なエラーにより、比較テーブルが発生します
  
  
  (エラー) 無効な数値: color909090 はカラー値ではありません: 909090 ---16 進数のカラー値には「#」記号、つまり #909090 を追加する必要があります (エラー)無効な数値: margin-top不明な寸法: 6ピクセル ---ピクセルは単位値ではありません。正しい書き方は6ピクセルです
  
  (エラー) 属性スクロールバー-フェイスカラーが存在しません: #eeeeee ---スクロール バーの色は非標準の属性です
  
  (エラー) 値cursorhand が存在しません: hand は非標準の属性値です。cursor:pointer に変更されます
  
  (警告) Line: 0 font-family:最後の選択肢としてカテゴリ ファミリを指定します -- W3C 推奨フォント定義 最後に、Web フォントがさまざまなオペレーティング システムで表示できることを保証するために、「sans-serif」などのフォントのカテゴリで終わります。
  
  (警告)行: 0 他のプロファイルの警告メッセージが見つかりません -- コード内に標準以外の属性または値があり、検証プログラムが対応する警告情報を判断して提供できないことを示します。
  同様に、検証を通過した後、CSS 検証通過アイコンを配置できます。コードは次のとおりです。
  
  < ;img style="max-width:90%" src="http://jigsaw.w3.org/css-validator/images/vcss" alt="有効な CSS!" / >
  
  
  
  -->

以上がWebページのレイアウトにCSSを使用する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。