ホームページ >ウェブフロントエンド >htmlチュートリアル >DIV + CSS などというものはありませんlayout_html/css_WEB-ITnose
DIV + CSS などというものはありませんlayout_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 12:31:291057ブラウズ
「CSS を練習したい場合は、まず IE を使用する必要があります」と「
次に、純粋な 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, olul と ol はそれぞれどういう意味ですか?答えられないが、それが何に使えるかはわかっているということは、あなたがビジュアル ツールに甘やかされていることを証明しており、セマンティックな XHTML を書くためには、この時点で基本的な知識を補う必要があります。非常に優れていると思われるツールをいくつか見つけてください。非常に包括的な基礎を備えた XHTML の書籍を調べてください。しっかりした基礎がなければ、XHTML に関する知識をさらに構築するのは不安定になるからです。 ul と ol は実際には、それぞれ順序なしリストと順序付きリスト、つまり順序なしリストと順序付きリストを表します。意味的には、ある種の並列関係を表すために使用されます。たとえば、買い物に行く前に、買い物リストを作成します。カンマで区切られた。それらの違いは、順序があるかどうかです。たとえば、買い物リストには順序がありません。ただし、旅行の旅程の観光スポットのリストには順序があります。訪問。
ul は、ナビゲーション要素が前述の並列関係に従い、ツリー ナビゲーション構造もネストされた ul で表現できるため、ナビゲーション バーでよく使用されます。ここでのナビゲーションは、一般的な水平または垂直ナビゲーション バー、あるいは地図ナビゲーションでも構いません。たとえば、中国の地図では、各省のホット スポットは実際には異なります。主流のブラウザでは、ユーザーは中国の地図を表示し、州のホットスポットを直接クリックできますが、CSS をサポートしていないブラウザでは、同じ XHTML を使用して州名のプレーン テキストのリストを表示できます。これは完全に CSS によって実現されます。 JavaScriptにも依存していないなんて信じられますか？
さらに、ギャラリーのサムネイルを表示したい場合は、これらの写真も並列されるため、これらの写真を ul に配置することもできます。 CSS を使用すると、表のようにグリッドに画像を固定することなく、最初に横方向に自動的に配置され、1 行がいっぱいになったら自動的に 2 行目に配置できます。実際、レイアウトにテーブルを使用することは、コンテンツを刑務所に閉じ込めて、コンテンツをグリッド内にロックして走り回るのを防ぐようなものです。CSS の使用方法を知っている限り、セマンティクスに準拠した XHTML はオープン ステージのようなものです。ルールに従えば、内容は自然になります。自分を表現するのに適した場所を見つけます。
DLDL について聞いたことがありませんか? dl は、これらの視覚化ツールによって生成されたコードには決して現れないからですか? dlはdefinition listという意味で、定義リストのことです。これに含まれるサブ要素は li ではなく、dt と dd、つまり定義用語と定義の説明です。 dl 自体は、辞書の単語や説明リストなどのセマンティクスを使用して設計されています。例:
- Apple
- Apple
- Boy
- boy
ただし、同様のセマンティクス、つまり定義と説明の両方を含むリストを表現する必要がある場合は、dl の使用を検討することもできます。
フォーム、入力フォームもフォームです。これについては何も言うことはありません。セマンティクスを気にしない人でも、XHTML を記述する際には、フォームや入力データへの影響を考慮する必要があります。
tabletable はテーブルを表すために当然使用されますが、これはナンセンスではありません。データテーブルであればもちろん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 を書くことは中学生が作文を書くのと同じくらい簡単になります。実際、それは構成可能なツールを使用して積み木を構築するのと何ら変わりません。唯一の違いは、以前は自分が望む視覚効果を作成することだけを考えていたのに対し、今は何を構築しているのかを理解していることです。コードを書くことは、書けば書くほど熟練し、より上手に書けるようになるという点で、エッセイを書くことと似ています。 XHTML を記述した後、CSS を記述する方法について考え始める必要があります。CSS でのルールの選択と一致を容易にするために、XHTML に若干の変更を加える必要がある場合もありますが、これについては後で説明するのでやめておきます。今日ここに。
最後に、CSS に関する私の今後の記事を読むことに興味がある場合は、私のブログを購読することを検討してください:
中国語の猫 (フィード: http://feeds.feedburner.com/CatChen/ Chinese) dotNET の猫 ( フィード: http://feeds.feedburner.com/CatChen/dotNET)