検索
ホームページウェブフロントエンドhtmlチュートリアル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 dt> ;
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 からの転載です

声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
HTMLドキュメントのルートタグは何ですか?HTMLドキュメントのルートタグは何ですか?Apr 29, 2025 am 12:10 AM

Theroottaginanhtmldocumentis.itservesStop-levellementThateChationCothercontent、ProperDocumentsTurcuteRuctureAndBrowsingを保証します。

HTMLタグと要素は同じものですか?HTMLタグと要素は同じものですか?Apr 28, 2025 pm 05:44 PM

この記事では、HTMLタグは要素を定義するために使用される構文マーカーであり、要素はタグやコンテンツを含む完全なユニットであると説明しています。彼らは協力してWebPages.Characterカウントを構築するために協力します:159

< head>の重要性は何ですかおよび< body> HTMLのタグ?< head>の重要性は何ですかおよび< body> HTMLのタグ?Apr 28, 2025 pm 05:43 PM

この記事では、< head>の役割について説明します。および< body> HTMLのタグ、ユーザーエクスペリエンスへの影響、およびSEOの影響。適切な構造化により、ウェブサイトの機能と検索エンジンの最適化が強化されます。

< strong>< b>の違いは何ですかタグと< em>< i>タグ?< strong>< b>の違いは何ですかタグと< em>< i>タグ?Apr 28, 2025 pm 05:42 PM

この記事では、HTMLタグの違いについて説明します。、、、、、、、およびプレゼンテーションの使用とSEOとアクセシビリティへの影響に焦点を当てています。

HTMLのドキュメントで使用されている文字セットを示す方法を説明してください。HTMLのドキュメントで使用されている文字セットを示す方法を説明してください。Apr 28, 2025 pm 05:41 PM

記事では、UTF-8に焦点を当てたHTMLでのキャラクターエンコーディングの指定について説明します。主な問題:テキストの正しい表示を確保し、文字化けされたキャラクターの防止、SEOとアクセシビリティの強化。

HTMLのさまざまなフォーマットタグは何ですか?HTMLのさまざまなフォーマットタグは何ですか?Apr 28, 2025 pm 05:39 PM

この記事では、Webコンテンツの構築とスタイリングに使用されるさまざまなHTMLフォーマットタグについて説明し、テキストの外観に対する影響とアクセシビリティとSEOのセマンティックタグの重要性を強調しています。

「ID」属性とHTML要素の「クラス」属性の違いは何ですか?「ID」属性とHTML要素の「クラス」属性の違いは何ですか?Apr 28, 2025 pm 05:39 PM

この記事では、HTMLの「ID」属性と「クラス」属性の違いについて説明し、一意性、目的、CSS構文、および特異性に焦点を当てています。それらがWebページのスタイリングと機能にどのように影響するかを説明し、のベストプラクティスを提供する

HTMLの「クラス」属性とは何ですか?HTMLの「クラス」属性とは何ですか?Apr 28, 2025 pm 05:37 PM

この記事では、スタイリングとJavaScriptの操作の要素をグループ化するHTML「クラス」属性の役割を説明し、一意の「ID」属性とは対照的です。

See all articles

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

Video Face Swap

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

SAP NetWeaver Server Adapter for Eclipse

SAP NetWeaver Server Adapter for Eclipse

Eclipse を SAP NetWeaver アプリケーション サーバーと統合します。

AtomエディタMac版ダウンロード

AtomエディタMac版ダウンロード

最も人気のあるオープンソースエディター

SecLists

SecLists

SecLists は、セキュリティ テスターの究極の相棒です。これは、セキュリティ評価中に頻繁に使用されるさまざまな種類のリストを 1 か所にまとめたものです。 SecLists は、セキュリティ テスターが必要とする可能性のあるすべてのリストを便利に提供することで、セキュリティ テストをより効率的かつ生産的にするのに役立ちます。リストの種類には、ユーザー名、パスワード、URL、ファジング ペイロード、機密データ パターン、Web シェルなどが含まれます。テスターはこのリポジトリを新しいテスト マシンにプルするだけで、必要なあらゆる種類のリストにアクセスできるようになります。

SublimeText3 Linux 新バージョン

SublimeText3 Linux 新バージョン

SublimeText3 Linux 最新バージョン