コミュニティ
学ぶ
ツールライブラリ
AIツール
レジャー
検索
日本語
ホームページ ウェブフロントエンド htmlチュートリアル div+css レイアウト_html/css_WEB-ITnose

div+css レイアウト_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
Jun 24, 2016 pm 12:33 PM
div+cssレイアウト

全国各地に「再構築」の春風が吹き、インターネットはしばらく混乱状態にありますが、「div+CSS」が「流行」となり、数え切れないほどのWebサイトが必ず独自の「再構築」を始めています。ただし、これらのさまざまな Web サイトのソース コードを開くと、よく人々を笑わせます


6 つまたは 7 つのレイヤーのネスト、テーブルのないテーブル、純粋な div+a で構成されるページ、および数百の式レイヤー クラスが表示されます。 ... 現在、「高度なテクニック」を宣伝するいくつかの本を除いて、標準に関する本が増えていますが、本の最初の数章でそのような文章を強調しない人はほとんどいません...「構造と構造の分離」。しかし、これらの本の読者のうち、最初の数章を真剣に読んだ人は何人いるでしょうか? それとも、退屈な構造の説明を無視して、一見高度なレイアウト テクニックやハックに飛び込むのでしょうか? div+CSS という用語は最初から多くの人を誤解させており、すぐに成功したいという熱意がこの現象の原因です。テーブル レイアウトに慣れている Web ページの最初のステップは、標準に触れる必要があります。さまざまなレイアウトを実装するための CSS テクニックを盲目的に求めるのではなく、考え方を変えるように努めてください


以下では、私が経験した多くの標準に準拠した考え方について説明します。これは、標準に触れたばかりの XDJM にとっては役に立つでしょう:


1. 「コードの保存」はマーケティング ツールであり、目的ではありません

「div レイアウトを使用すると、テーブル レイアウトよりも多くのコードを節約できます」と私は考えています。この文自体は確かに Web ページの標準化の利点の 1 つであり、「利点の 1 つ」であることに注意してください。 「利点の 1 つ」 「唯一の利点」は目的ではありません。 「コードの節約」は、多くの場合、頑固な上司を説得するために使用されます。 Web ページの標準化の唯一の目的は、「構造とパフォーマンスの分離」です。 、コードを保存するためではなく、Webサイトのサイドバーの表示形式とメインコンテンツさえ同じであるため、以前は統一クラスを使用していました（これを教える本はまだいくつかあります）。ただし、その代償として、コードの適切な構造が失われます。1. ソース コードが読めなくなります。2. Web サイトの保守コストが増加します。たとえば、リンクの色などを変更するには、ページのソース ファイルを変更してクラスを追加する必要があり、その作業負荷は単に ID を調整するよりもはるかに大きくなります。長期的には、その構造はますます悪化し、それを元に戻すのは困難になります。

当時、私が犯した間違いです。 「コードを保存」するために、メインメニューに「mm」、2番目のメニューに「.m2」という名前を付け、3番目のレベルのメニューを「m3」にしました。その結果、Webページの可読性が大幅に低下します。他の同僚が引き継ぐのは難しいですが、手間は省けますが、疲れます。同様に、ファイルやフォルダーの名前を単純化しすぎるのもよくありません。たとえば、「Website Reconstruction」では、すべての画像を「i」ディレクトリに保存することが推奨されています。非常に簡略化されたディレクトリ構造を詳細に説明し、他の制作スタッフ、開発者、さらには知識豊富な上司を含む関係者全員がそれを理解して実装できるようにしてください。そうしないと、不必要なトラブルが増えるだけです。

2. ID はスナイパーライフル、クラスは諸刃の剣

優れたウェブページ構造を持ちたければ、ID とクラスの両方を上手にマスターする必要があります、いわゆる「両手で握る」ことです。 、両手が強くなければなりません。」 ID はスナイパー ライフルのようなもので、スタイルをロードしたい要素を正確に見つけるのに役立ちます。クラスは軽量でより柔軟な騎士の剣です。この 2 つを組み合わせることで、優れた構造と優れたページを実現できます。豊かなパフォーマンス。しかし、現在では ID がクラスによって完全に置き換えられるという間違った見解が存在しています。実際、これはクラス全体を開いたときに ID を見つけることができないということです。この現象の原因は様々ありますが、根本的な原因はテーブル時代から受け継がれている「クラス=CSS」という概念が根強く残っていることです。クラスの方が ID より多用途で柔軟であるのは事実ですが、優れた Web ページ構造を構築する上でクラスの効果は ID よりもはるかに低いことも認識しておく必要があります。 id には必須の一意性があるため、id を通じて必要なモジュールを簡単に取得できますが、クラスにはこの利点がありません。モジュールに一意のクラス名を定義できますが、Web ページのスタイルを変更できるのはプロデューサー自身だけであることが前提となります。それ以外の場合は、スタイルが同じであると判断した少し怠け者を見つけて、前のクラスを直接適用します。その結果、Web ページに「gonggao」または「gonggao」という名前のモジュールが 12 個以上あることがわかります。 「xinwen」なので、大量の HTML コメントを追加しないと、この結果は明らかに私たちが望むものではありません。さらに、前述したように、ユニバーサル クラスを通じて保存されたコードは、個別に定義された各クラスで浪費する必要があります。

IDはスナイパーライフル、クラスは両刃の剣です。
3. すべてのコンテンツが「コンテナ」として div を必要とするわけではありません


メインメニューでは

Related knowledge
＆lt; Progress＆gt;の目的は何ですか 要素？ ＆lt; Progress＆gt;の目的は何ですか 要素？ Mar 21, 2025 pm 12:34 PM

この記事では、HTML＆lt; Progress＆gt;について説明します。要素、その目的、スタイリング、および＆lt; meter＆gt;との違い要素。主な焦点は、＆lt; Progress＆gt;を使用することです。タスクの完了と＆lt; Meter＆gt; statiの場合

＆lt; datalist＆gt;の目的は何ですか 要素？ ＆lt; datalist＆gt;の目的は何ですか 要素？ Mar 21, 2025 pm 12:33 PM

この記事では、HTML＆lt; Datalist＆GT;について説明します。オートコンプリートの提案を提供し、ユーザーエクスペリエンスの改善、エラーの削減によりフォームを強化する要素。

HTMLは初心者のために簡単に学ぶことができますか？ HTMLは初心者のために簡単に学ぶことができますか？ Apr 07, 2025 am 12:11 AM

HTMLは、簡単に学習しやすく、結果をすばやく見ることができるため、初心者に適しています。 1）HTMLの学習曲線はスムーズで簡単に開始できます。 2）基本タグをマスターして、Webページの作成を開始します。 3）柔軟性が高く、CSSおよびJavaScriptと組み合わせて使用​​できます。 4）豊富な学習リソースと最新のツールは、学習プロセスをサポートしています。

＆lt; meter＆gt;の目的は何ですか 要素？ ＆lt; meter＆gt;の目的は何ですか 要素？ Mar 21, 2025 pm 12:35 PM

この記事では、html＆lt; meter＆gt;について説明します。要素は、範囲内でスカラーまたは分数値を表示するために使用され、Web開発におけるその一般的なアプリケーション。それは差別化＆lt; Meter＆gt; ＆lt; Progress＆gt;およびex

ビューポートメタタグとは何ですか？レスポンシブデザインにとってなぜそれが重要なのですか？ ビューポートメタタグとは何ですか？レスポンシブデザインにとってなぜそれが重要なのですか？ Mar 20, 2025 pm 05:56 PM

この記事では、モバイルデバイスのレスポンシブWebデザインに不可欠なViewportメタタグについて説明します。適切な使用により、最適なコンテンツのスケーリングとユーザーの相互作用が保証され、誤用が設計とアクセシビリティの問題につながる可能性があることを説明しています。

＆lt; iframe＆gt;の目的は何ですか タグ？使用する際のセキュリティ上の考慮事項は何ですか？ ＆lt; iframe＆gt;の目的は何ですか タグ？使用する際のセキュリティ上の考慮事項は何ですか？ Mar 20, 2025 pm 06:05 PM

この記事では、＆lt; iframe＆gt;外部コンテンツをWebページ、その一般的な用途、セキュリティリスク、およびオブジェクトタグやAPIなどの代替案に埋め込む際のタグの目的。

HTML、CSS、およびJavaScriptの役割：コアの責任 HTML、CSS、およびJavaScriptの役割：コアの責任 Apr 08, 2025 pm 07:05 PM

HTMLはWeb構造を定義し、CSSはスタイルとレイアウトを担当し、JavaScriptは動的な相互作用を提供します。 3人はWeb開発で職務を遂行し、共同でカラフルなWebサイトを構築します。

HTMLでの開始タグの例は何ですか？ HTMLでの開始タグの例は何ですか？ Apr 06, 2025 am 12:04 AM

Anexampleapalofastartingtaginhtmlis、それはaperginsaparagraph.startingtagsaresentionentientiontheyinitiateelements、definetheirtypes、およびarecrucialforurturingwebpagesandcontingthomedomを構築します。

See all articles