コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > htmlチュートリアル > 本文

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

WBOY
リリース： 2016-06-24 12:33:15
オリジナル
899 人が閲覧しました

全国各地に「再構築」の春風が吹き、インターネットはしばらく混乱状態にありますが、「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 を必要とするわけではありません


メインメニューでは

人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート