web-dev-qa-db-ja.com

なぜBootstrap=グリッドレイアウトはHTMLテーブルよりも望ましいですか？

[注：この質問を「HTMLレイアウトにテーブルを使用しない理由」と混同する可能性がある人のために、私はその質問をしていません。私が尋ねている質問は、なぜグリッドレイアウトがテーブルレイアウトと根本的に異なるのかということです。]

プロジェクトのCSSライブラリ（特にBootstrap）を調査しています。私はWebデザイナーではなくプログラマーであり、優れたデザインをカプセル化するライブラリーから恩恵を受けることができると感じています。

プレゼンテーションとコンテンツが混在するため、HTMLテーブルを使用して基本的なサイトレイアウトを達成するのは悪い習慣であることは誰もが知っています。 BootstrapのようなCSSライブラリによって提供される利点の1つは、テーブルを使用せずに「グリッド」レイアウトを作成する機能を提供することです。同等のテーブルレイアウトとは意味のある方法で異なります。

言い換えると、これら2つのHTMLの例のfundamentalの違いは何ですか？グリッドレイアウトは単に別の名前のテーブルであると考えるのは間違っていますか？

<div class="row">
    <div class="span16"></div>
</div>

<div class="row">
    <div class="span4"></div>
    <div class="span4"></div>
    <div class="span4"></div>
    <div class="span4"></div>
</div>

そして

<table>
  <tr>
    <td colspan=4></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</table>
htmltwitter-bootstraphtml-tablegrid-layouthtmllayout
60
Larry Lustig

違いは、最初の例は意味的にマークアップされているであり、マークアップされているデータが実際には表形式ではないことを前提としています。 <table>は、表形式データにのみ使用する必要があり、テーブルに似たレイアウトで表示されるデータには使用しないでください。

ただし、BootstrapのようなCSSパッケージを使用すると、クラスをnotセマンティックであるがプレゼンテーション用のHTML要素に割り当てる必要があるため、コンテンツとプレゼンテーションの分離が減り、違いが多少なくなります。 should要素に意味的に意味のあるクラスを割り当て、要素にプレゼンテーションクラスを直接割り当てるのではなく、lesscss mixins（または同様のテクノロジー）を使用して、CSSフレームワークで定義された表現動作をこれらのクラスに割り当てます。

いう：

<div class="products">
    <div class="product"></div>
</div>

.products {
    .row;
}

.products > .product {
    .span16;
}

shouldと言うことに注意してください。実際には、これは必ずしもより実行可能なオプションであるとは限りませんが、理論的な目標であるべきです。

32
deceze

CBroe comment が最良の選択肢だと思うので、明確にすることを選択しました。

divを避けてください。 divは最後の手段であり、最初の選択肢ではありません。代わりに、実際の要素でBootstrap=クラスを使用してください。たとえば：

<form class="container">
    <fieldset class="row">
        <label class="span4" for"search">Type your search</label>
        <input class="span6" type="text" id="search" />
    </fieldset>
</form>

Fieldsetを使用して1つのフィールドを含めるのは残念ですが、同じことに対してdivを使用するよりも意味的に最適です。 HTML5標準では、article、section、header、footerなどの多くの新しいコンテナ要素が定義されています およびその他 。場合によってはdivを使用する必要がありますが、使用を最小限に抑えると、コードのセマンティックが大幅に向上します。

19
Metalcoder

基本的な違いは、Bootstrapを使用してレイアウトを「リフロー」できることです。メディアクエリを使用するだけで、マークアップを変更する必要はありません。たとえば、デスクトップでは、ユーザーは高解像度のワイドディスプレイを持っているので、4つのdivが同じ行にありますが、携帯電話では1行に2ダイビング、​​次の行に次のdivが必要です。したがって、メディアクエリを使用して各行の列数を調整できます。ハードコーディングされたHTMLテーブルを使用する場合、これを行うのは非常に困難です。

そうは言っても、次の理由でbootstrapの実装はあまり好きではありません。

  1. ピクセル単位でハードコードされたブレークポイントがあります。つまり、携帯電話やテーブルの表示解像度が向上すると、それらのデバイスでWebサイトに予期しないレイアウトが表示される可能性があります。ピクセルカウントは、表示の貧弱なプロキシサイズです。
  2. 使用される最大表示領域が1170pxに制限されます。これは、アプリでより多くのコンテンツを表示するために実際に使用できるニースワイドディスプレイを使用するユーザーにとっては残念なことです。
  3. ブートストラップのレイアウトはソースに依存しません。つまり、HTMLで設定されている列の順序を変更することはできません。ただし、これはより重要な点です。
  4. デフォルトのレイアウトは非常に小さい解像度用で、高解像度のレイアウトはメディアクエリが起動したときにのみトリガーされます。IMOは、携帯電話の解像度が引き続き向上し、ウェブサイトに古いモバイルデバイス用のデフォルトレイアウトが設定されるとすぐに悪い選択肢になります。
  5. ブートストラップレイアウトは、サポートする価値がないと思われるすべてのバグとブラウザを表示するために細字部分を読む必要があるという意味で、本当に「心配する必要はありません」yo気にするかもしれません。たとえば、韓国や中国のユーザーをターゲットにしている場合、驚くかもしれません。

だから、bootstrapですべてが金であるというわけではなく、彼らのアプローチが常に可能な限り最高であるとは限りません（余談ですが、私がbootstrap=いわゆる「ジャンボトロン」への執着-不便な顔のヘッダーを無駄にするこれらの不動産-コミュニティが「新しい標準」として受け入れ始めないことを願っています。個人的にCSSテーブルレイアウトを使用します（display:table）bootstrapハードコーディングなしで<table>私のマークアップ。たとえば、メディアクエリを使用して、たとえば縦向きまたは横向きに応じて行を再配置できます。ただし、最も重要な利点は、レイアウトが真にピクセルであるか、パーセンテージに依存しないことです。たとえば、3列のレイアウトでは、最初と最後の列に必要なスペースをコンテンツに決定させます。ピクセルも幅のパーセンテージもありません。中央の列は残りのすべての領域を取得します（これは私のアプリにとっては良いことですが、他の人にとってはそうではないかもしれません）。さらに、メディアクエリのブレークポイントでbootstrap驚くほど使用しないemsを使用します。

10
Shital Shah

ページレイアウトにはBootstrapグリッド、表形式データにはテーブルを使用します。

Bootstrapのグリッドは、gridviewコントロールのような開発者の感覚のグリッドではなく、ページのコンテンツを含むグリッドのように、デザインページのレイアウトの感覚で考えています。また、Bootstrapグリッドを使用して、表形式データを含む従来のグリッドを作成することもできますが、decezeが指摘したように、この種類のグリッドはHTMLテーブルにより適しています-このシナリオでは。

4
DShultz

テーブルを使用するだけであれば、デバイスごとに個別のページを作成することなく、モバイル/タブレット用にドキュメントのサイズを変更する際の柔軟性を十分に活用できなくなると思います。テーブル構造が定義されたら、実際にできることはズームインとズームアウトだけです。

3
hovrakziggler

（Bootstrapのグリッドシステムで使用されるクラスは実際には純粋にプレゼンテーション用であるため）マークアップの2つのセットの違いは必ずしもsemanticとは限りませんが、1つの非常に重要な違いはグリッドシステムがはるかに柔軟であることです。

たとえば、テーブルベースのレイアウトをさまざまな画面サイズに対応させることは非常に困難です。 1つのtd要素を表示するようにブラウザに指示する方法はありません下別のtdを同じ行に。一方、divの例では、簡単に実行でき、同じマークアップをさまざまな方法で表示できます偶数クラスが相対的な比率を定義するという意味で「表示」である場合ページ上の要素の配置。

2
Louis Simoneau

可能であれば、他のコメントから集めたものと、このページで経験したリンクの爆発を要約したいと思います。

テーブルの使用に関する問題はグリッドレイアウトではなく、CSSではなくHTMLで表現しようとする試みです。

Bootstrapは、（ほとんど）純粋なCSSを介してグリッドレイアウトを許可します。これが問題ない理由です。 「ほとんど」の部分が来るのは、HTMLがまだレイアウトデータによって汚染されているからです。

<nav class="span4"> ... </nav>
<article class="span8"> ... </article>

これは確かに、古い表形式のデザインよりもはるかに意味論的で保守可能ですが、「span4」と「span8」はまだHTMLに埋め込まれた表示データです。ただし、デザインをデータ（ネストされたdivなど）から完全に切り離すことはできないため、これは妥当な代価です。

とはいえ、 [〜＃〜] less [〜＃〜] などの前処理言語によって提供される最新のCSS機能を使用すると、このカップリングでも破損する可能性があります。同じ例：

<nav id="secondary-nav"> ... </nav>
<article id="main-content"> ... </article>

以下のLESSと組み合わせて：

#secondary-nav{
    .span4;
    // More styling (padding, etc) if needed
}
#main-content{
    .span8;
}

これにより、完全に分離されたHTMLとスタイルシートが作成されます。HTMLはよりクリーンで読みやすく、HTMLの変更を少なくして再設計できるため、理想的です。ただし、CSSは現在ミックスイン（AFAIK）をサポートしていないため、LESSまたは他のCSSプリプロセッサを使用している場合にのみ機能します。

私たちはすでに職場でLESSを使用しているので、このタイプのソリューションを使用するようにプッシュすることを知っています。私はセマンティックHTMLとデータ設計の分離を非常に強く信じています。 :)

1
Gilthans

テーブル、tr、tdのバージョンは、ブラウザのアルゴリズム（ラッピング、動的な幅、マージン、センタリングなど）に依存します。divのあるバージョンは、cssとスクリプトによってより簡単に調整できます。

0
Andrei

基本的に、DIVはDIVであり、テーブル要素は単なるテーブル要素です。テーブルの問題は、最終的には厳密なデータ構造であるため、多くの場合、すべての列と行を追跡するだけです。 DIVははるかに柔軟で寛容です。

たとえば、「span4」に等しいクラスを持つ4つのDIVを取得し、それらを2列幅に変更する場合は、外側のクラス「row」のCSSを少し調整するだけです。そして、おそらくクラス「span4」。実際、このようなDIVを行う場合、個々のDIVを「span4」または他の番号と呼ぶことは避けます。

私のアプローチは、「rowspan」と呼ばれる親ラッパーDIVを作成し、内部DIVに「cell」などの汎用IDを持たせることです。

<div class="rowspan">
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
</div>

たとえば、各「セル」クラスの幅は100ピクセルで、親の「行幅」は400ピクセルです。これは、行の4列に相当します。 2列にしたいですか？問題ない！ 「rowspan」を200ピクセル幅に変更するだけです。この時点ではすべてCSSであるため、DOMのページ構造を再調整することなく簡単に実行できます。

しかし、テーブルでは？簡単ではありません。基本的に、</tr><tr>タグを使用してテーブルを再レンダリングし、新しい行を作成する必要があります。

0
JakeGould