html - HTML の適切な構造化

Question

ウェブサイトを開発する際のベストプラクティスについて読んでいます。しかし、プロジェクトの範囲やその他の多くの考慮事項に応じて、答えはほとんどさまざまであるため、私はまだ興味があります。

簡単に言うと、基本的に、ウェブサイトの 3 つの主要な要素の適切なフォーマットについてお聞きしたかったのです。

ヘッダ
本体
フッター

構造はどのように構築されるべきですか？これらの 3 つは、次のようなコンテナーにラップする必要があります。

<div class="wrap">
    <div class="header"></div>
    <div class="body"></div>
    <div class="footer"></div>
</div>

そして、スタイリングはどのように行うべきですか？CSS に position:absolute を使用するようにアドバイスされている人もいれば、代わりに相対を使用する人もいます。非常に基本的な質問で申し訳ありませんが、現在の学習時点でこれについて本当に混乱しています。

score 4 · Accepted Answer

多くのラッパーを持つような疑似標準が存在する唯一の理由は、レイアウトを作成するときに役立つことが証明されているからです。基本的に、それはすべて理由があります。必要なページを周囲に配置せずにデザインできる場合は、<div id="mainwrapper">そのようなメインラッパーは必要ありません。:)

私のヒントは、単純にサイトの作成を開始し、単純な要素と CSS スタイルを使用して、希望どおりに見えるようにすることです。うまくいかない場合 (たとえば、フローカラムレイアウトの作成方法がわからないなど) は、Web で「HTML フローカラムレイアウト」などを検索して、そこから進んでください。

編集：「それを機能させる」とは、通常、単純なものを作成するために、テーブル、多くの魔法の数字、および要素の負荷を使用する必要がないことを意味します。

経験則: 1)それらが何をするのか2)なぜそれらが必要なのかを理解していない場合は、コード/ソリューションを切り取って貼り付けないでください。自分でビルドしてみて、作業を進めるうちに、一部のパターン (clearfix、テーブルの回避、フローティングレイアウトなど) が非常に一般的である理由を理解することをお勧めします。今は時間の節約にはならないかもしれませんが、長期的にはより良い開発者になることは間違いありません。

score 2 · Accepted Answer

HTML レイアウトは非常に主観的であり、開発者としての要件や好みによって異なります。2 つの主なレイアウトは、静的(絶対配置などを使用) とフローティング(リキッドレイアウトにフローティング div を使用) です。

これは、これらの原則をより深くカバーする優れた記事です

基本的に、ブロックレベルの要素、つまりdivタグを使用してページを構成する必要があります。表形式のデータテーブルがある場合はまったく問題ありませんが、レンダリングが遅く、ページレイアウトを完全に制御する必要がある場合に問題が発生する可能性があるため、レイアウトには使用しないでください。

スタイル設定のベストプラクティスでは、CSS を使用して、インラインではなくクラス属性を介して要素を配置およびスタイル設定することをお勧めします。これにより、CSS スクリプトを縮小し、ページのオーバーヘッドを削減できます。CSS は非常によく進化しており、マークアップ内のクラスの数を減らすために利用できるセレクターがたくさんあります。詳細については、W3Cの CSS セレクターを参照してください。

score 1 · Accepted Answer

さまざまなSEOフレンドリーなレイアウトを提供するサイトがたくさんあり、それらはすべてcssを提供します

http://www.searchenginefriendlylayouts.com/

http://www.davidjrush.com/blog/2011/02/seo-friendly-two-column-layout/

http://matthewjamestaylor.com/blog/perfect-3-column.htm

score 1 · Accepted Answer

HMTL を記述するときは、マークアップの読みやすさと、将来の変更のしやすさに留意する必要があります。

関心事の分離を心がけてください。サイトのどの部分が構造的に他の部分と関連しているか、他の部分に依存していないか。依存する要素を (div などを使用して) まとめてグループ化し、関連のない要素を離してください。

同様の方法で CSS を構築してみてください。2 つの要素の位置が他方に依存しているが、もう一方は依存していない場合は、関連する要素を 1 つのクラスにグループ化し、継承を使用して違いを構造化します。無関係なものはおそらく完全に別のcssクラスにあるはずです。

また、CSS を再利用できるように構造化してみてください。

これらの点は少し一般的ですが、うまくいけば役に立ちますか？

score 1 · Accepted Answer

HTML5 の例。現在、最適なレイアウト幅は 960 です。.content{ width:960px }

<!-- Outer Div -->
<div id="content">
    <!-- Inner Content -->
    <div id="content-inner">

        <!-- header -->
        <header>
          <div class="header">
            <div id="header_wrapper"></div>
          </div>
         </header>

         <!-- body -->
         <div id="content-body">
            <section></section>
            <section></section>
         </div>
    </div>

    <!-- footer -->
    <footer>
         <div class="footer">
            <div id="footer_wrapper"></div>
          </div>
    </footer>

</div>

html - HTML の適切な構造化

5 に答える 5

Related

Reference