DIV+CSS を正しく理解するlayout_html/css_WEB-ITnose

多くのネチズンは、テーブルレイアウトと比較するために div+CSS レイアウトを使用することについて話しています。 it560 は、div は実際にはレイアウトに使用されていないと考えています。div は、他の要素の意味を正確に表現できないブロック領域を表すためにのみ使用されているため、div+CSS レイアウトなどは存在しません。また、テーブル レイアウトはセルのレイアウト属性を定義するために CSS に依存することが多いため、テーブル + CSS レイアウトと言えます。言い換えれば、ここで説明する 2 つの主流のレイアウト方法は、純粋な CSS レイアウトと table+CSS レイアウトである必要があります。div+CSS レイアウトを使用していると感じる場合は、強迫性障害の可能性もあります。

次に、純粋な CSS レイアウトを実行する方法について説明します。CSS レイアウトは XHTML に依存するため、最初に CSS に依存しない XHTML を記述する方法について説明します。実際、CSS に依存しない XHTML を書くことは難しくありませんが、テーブル レイアウト コードを書くような最も重要な視覚効果に集中することはできませんが、その難易度は中学生の作文を書くのと同じくらいです。

中学生はどうやって作文を書くのですか？まずタイトルを見て、記事全体が何段落に分かれていて、それぞれの段落に何が書かれているかを考えて、言いたいことを明確に説明しましょう。 XHTML の場合、これは div を使用してドキュメントを大きな塊に分割するのと同じです。このとき、これらの div がどのような DOM を構築するのか、CSS が DOM 内の要素設定ルールをどのように選択してレイアウトを実装するのかなどは考えず、ドキュメントの広い領域を大まかに分割するだけです。

その後、もちろん、XHTML では、感情を表現したり、問題を実証したりするために、いくつかの一般的なテクニックを使用して、一般的な情報の整理を完了します。以下は、情報組織の形式と要素の対応するリストです。

img

コンテンツとしての画像は img に配置する必要があります。これ以上の選択肢はありません。ただし、画像がコンテンツとしてではなく装飾として使用される場合は、決して img を使用しないでください。非コンテンツ画像の場合は、CSS で参照する必要があり、XHTML には表示されません。たとえば、各ナビゲーション リンクには先頭の矢印インジケーターがあり、これらの矢印は img として直接表示するのではなく、CSS の background-image 属性を通じて追加する必要があります。

a

これも非常に正確に定義された要素であり、すべてのリンクでそれを使用する必要があります。おそらく多くの人は、a の本来の意味がアンカー ポイントであることを忘れています。実際、これは文書内の重要な参照位置をマークするために使用できます。

ul, ol

ul と ol はそれぞれどういう意味ですか?答えられないが、それが何に使えるかはわかっているということは、あなたがビジュアル ツールに甘やかされていることを証明しており、セマンティックな XHTML を書くためには、この時点で基本的な知識を補う必要があります。非常に優れていると思われるツールをいくつか見つけてください。非常に包括的な基礎を備えた XHTML の書籍を調べてください。しっかりした基礎がなければ、XHTML に関する知識をさらに構築するのは不安定になるからです。 ul と ol は実際には、それぞれ順序なしリストと順序付きリスト、つまり順序​​なしリストと順序付きリストを表します。意味的には、ある種の並列関係を表すために使用されます。たとえば、買い物に行く前に、買い物リストを作成します。カンマで区切られた。

十分に休憩しましたか?読み続けてください!

ナビゲーション要素は前述の並列関係に準拠しており、ツリー ナビゲーション構造もネストされた ul で表現できるため、ナビゲーション バーでよく使用されます。ここでのナビゲーションは、一般的な水平または垂直ナビゲーション バー、あるいは地図ナビゲーションでも構いません。たとえば、中国の地図では、各省のホット スポットは実際には異なります。主流のブラウザでは、ユーザーは中国の地図を表示し、州のホットスポットを直接クリックできますが、CSS をサポートしていないブラウザでは、同じ XHTML を使用して州名のプレーン テキストのリストを表示できます。これは完全に CSS によって実現されます。 JavaScriptにも依存していないなんて信じられますか？

さらに、ギャラリーのサムネイルを表示したい場合は、これらの写真も並列されるため、これらの写真を ul に配置することもできます。 CSS を使用すると、最初は横方向に自動的に配置され、1 行がいっぱいになったら自動的に 2 行目に配置することができ、表のようにグリッドに画像を固定する必要はありません。実際、レイアウトにテーブルを使用することは、コンテンツを刑務所に閉じ込めて、コンテンツをグリッド内にロックして走り回るのを防ぐようなものです。CSS の使用方法を知っている限り、セマンティクスに準拠した XHTML はオープン ステージのようなものです。ルールに従えば、内容は自然になります。自分を表現するのに適した場所を見つけます。

DL

DL について聞いたことがありませんか? dl は、これらの視覚化ツールによって生成されたコードには決して現れないからですか? dlはdefinition listという意味で、定義リストのことです。これに含まれるサブ要素は li ではなく、dt と dd、つまり定義用語と定義の説明です。 dl 自体は、辞書の単語や説明リストなどのセマンティクスを考慮して設計されています。例:

へへ

haha

girl

it560

表現する必要があるセマンティクスが類似しており、リストに定義と説明の両方が含まれている場合は、dl の使用を検討することもできます。

form、input

Form もフォームです。セマンティクスを気にしない人でも、XHTML を書くときにフォームやさまざまな入力が与える影響を考慮する必要があります。

table

table はテーブルを表すために当然使用されますが、これはナンセンスではありません。データテーブルであればもちろんtableで表現できますが、そうでない場合はtableを使わない方が良いでしょう。

名前のリストはどこにありますか?たとえば、3 行 4 列の名前のリストです。これら 12 人の人名が並列関係にある場合は、ul と 12 li を使用してそれらを表し、CSS を使用して 1 行に複数を並べて表示することをお勧めします。名刺リストはどうでしょうか？つまり、3 行 8 列があり、2 列ごとに左の列に個人の名前が表示され、右の列に電話番号とその他の連絡先情報が表示されます。 dl は個人名を、dd は連絡先を記載すればある程度対応できると思いますが、今回は dl の悪用に関する議論が含まれます。なぜなら、名前と連絡先が少し遠いからです。定義と説明として取得されます。

次に、XHTML を体系的に勉強したことがあるかどうかについての小さな質問があります。つまり、表の下にある caption、col、colgroup、thead、tbody、tfoot 要素と summary 属性がそれぞれ何を定義するために使用されているか知っていますか。テーブルを書くときに thead と tbody は何を使いますか?

div、span

上のリストをもう一度確認してください。ブロック領域を表す必要があるが、上でより適切な要素が見つからない場合は、最もセマンティックな 2 つの要素である div と scan の使用を検討できます。 div とspan の違いは歴史の中で言及されていませんが、現在では、div は大きな領域に使用され、span は行内の小さなテキストの断片に使用されます。上で div は一般に世界をいくつかの大きな領域に分割するために使用されるため、通常は使用する必要がないことを述べました。実際、インライン強調は通常、strong や em などのより強力なセマンティック要素とともに使用できるため、span はほとんど使用されません。

上記の非常に多くの一般的な要素を理解すると、以前は必要な視覚効果を作成することだけに気を配っていましたが、今では中学生が作文を書くのと同じくらい簡単になります。コードを書くことは、書けば書くほど熟練し、より上手に書けるようになるという点でエッセイを書くことと似ています。 XHTML を記述した後、CSS を記述する方法について考え始める必要があります。CSS でのルールの選択と一致を容易にするために、XHTML に若干の変更を加える必要がある場合もありますが、これについては後で説明するのでやめておきます。今日ここに。

この記事は http://www.it560.com/design/htmlcss/0MMDAwMDAwMzk0MA.html からの転載です