テーブルフリー Web サイトを作成する理由と原則 翻訳_体験交換

Web 開発者が「テーブルは悪だ」と言いたがり、その理由を説明できない (または説明しようとしない) 時代に、この記事では人々がテーブルのないデザインを作成する確かな理由をいくつか説明します。テーブルのないサイトを作成するメリット、そして自分の Web サイトを変更したいという願望を抵抗力のある管理者に売り込む方法
一時期、Web デザイナーは「テーブルは悪魔だ!」と言っていたことがあります。しかし、彼らにはその理由が分かりませんでした。ここで、人々がテーブルを使用して Web ページを作成することに抵抗がある理由をいくつか説明します。フォームフリーの Web サイトを作成する 4 つの利点と、Web サイトを永続的な「ドメレーター」に変えてマーケティングする方法が含まれています。
テーブルレス レイアウトの利点から始めましょう。これらは、私が考える必要があると考えた順序にすぎません。他の人にとってより重要なものもあります。そのため、お好みでランク付けしてください。
それでは始めましょう。まずはテーブルレイアウトの利点から始めます。非常に多くの人にとって重要であるため、ここに記載されています。
整形式のコードを書くよう強制する
整形式のコードを書くよう強制する
適切に作成されたテーブルレス レイアウトを使用することはできず、不適切な非標準コードを使用することはできません。できます (技術的には可能です) が、それでは全体の目的が損なわれます。テーブルレス設計を作成するときは、標準に準拠したコードを使用する必要があります。常にクリーンなコードを書く習慣を身に付けるものはすべて、
テーブルレス レイアウトには不適切または非標準のコードを使用できません。訂正させていただきますが、（技術的にのみ）可能ですが、そうするとすべての目的が達成できなくなります。テーブルレス設計を行う場合は、適切な標準コード セットを使用する必要があります。プログラミングの良い習慣を身につけるのに役立つものは何でも良いことだと思います。
読み込み時間の短縮
ダウンロードの高速化
これはテーブルレス レイアウトの絶対的な利点であり、その理由はいくつかあります。まず、基本的なレベルで、テーブルの読み込みが遅いです。ほとんどの場合、高さを設定しない限り、テーブル要素の幅とテーブル要素の幅を調整するには、テーブル自体のサイズをページに合わせる前に、すべてのテキストをロードしてレンダリングする必要があります。もちろん、これが多くの人がテーブルについて気に入っている点ですよね?テーブルが非常に簡単にサイズ変更できるという事実欠点は、読み込みに時間がかかることです。
テーブルレス レイアウトは、次の理由を含めて非常に有益です: 1. 基本原則から、テーブル レイアウトを使用するとダウンロード速度が遅くなりますが、さらに重要な点が 1 つあります。 , テーブル要素の高さと幅をどのように設定しても、テーブルを読み込む前にテーブル内のすべての要素が読み込まれるため、多くの人がテーブル レイアウトに熱心になるのかもしれません。実際、テーブルのサイズは大きくなる傾向があるため、実際にはロードに時間がかかります。そのダウンロード時間を無視することはできません。
それでは、その読み込み時間の解決策は、すべての値を明示的に設定することですよね？そこで、今度は別の欠点が見えてきました。コードが乱雑になり、読み込み時間が長くなる。まず第一に、テーブルだけでも多くのコードが必要になります。平均的なテーブルベースのレイアウトには、TD の開始タグと終了タグがいくつありますか?トントン。すべての値を明示的に設定する必要がある場合、ページのサイズと読み込み時間が増加するだけです。このトピックに関しては多くの実験が行われていますが、ここでは、StopDesign が Microsoft Web サイトをテーブルベースのサイトからテーブルレスのレイアウトにリメイクして行った実験を紹介します。このリメイクでは、サイトのファイル サイズが 62% 削減され、Microsoft サイトの月あたりの平均ヒット数を使用すると、Microsoft は 1 日あたりの帯域幅を 924 ギグ、年間で 329 テラバイトの帯域幅を節約できると計算されました。帯域幅の料金を支払う企業にとって、これらのことは重要です。
したがって、ダウンロード時間を短縮するには、すべての値を明確に設定する必要があります。次に、その他の欠点に注目します。それは、コードの不完全性により、ダウンロード時間が長くなる可能性があることです。この問題については、「td」開始と終了のフラグが含まれていると考えられますが、それらを明確に設定するためには、ネットワークのサイズを増加する必要があり、これがダウンロード時間の延長につながると考えています。们已何度もテストが行​​われました。テーブル レイアウトを再使用せずに配布が行われ、マイクロ ルートの実行方法が確認され、テーブル レイアウトの使用により、このウェブ サイトでは 62% が節約されていることがわかりました。空間サイズ。毎月の平均ポイント率を計算すると、マイクロルートは毎日 924 GIGS の帯域を節約し、より大きな企業の場合、これは必ず必要です。
コードが読みやすくなります
コードの可読性が向上します
標準コード、意味論的な文書規則、およびテーブルのないレイアウトを使用している場合、コードは非常にきれいになり、実際には単なる通常のテキストのように見えます。
標準コード、標準セマンティックドキュメント、および非表形式レイアウトを使用すると、コードは、いくつかの特殊記号を含む慣用的なテキストのように、非常に明確に見えます。
これは、更新が簡単になるだけでなく、技術者以外のユーザーでも簡単に小さな変更を加えることができるため、大きな利点です。さらに、フリーランスで Web 開発者として働いている場合は、キャパシティがあるため、そのサイトを保守しなければならないフルタイムの Web 開発者がいるのが一般的です。クリーンで読みやすいコードなので、移行が簡単です。理解しやすいコードを残してくれると嬉しいですよね?戻りましょう
非テーブル レイアウトを使用する利点は、Web ページの更新が容易になるだけでなく、転職していない人でも微妙な変更や変換ができることです。さらに、フリーランスのWebデザイナーの場合は、プロのWebデザイナーにWebサイトを覚えてもらうこともできます。コードが単純なので、コード変換が非常に簡単になります。誰もがコード開発者にシンプルなコードを残してもらいたいと思っているので、コードを書くときはこれについても考慮する必要があります。
代替ビューの印刷
便利なスタイル定義
テーブル レイアウトを使用してページを作成すると、残念なことに、特定のレイアウトにロックされてしまいます。ある時点で、特に大規模なテーブルレス化運動以前にこの業界にいた場合は、多くの場合、ページの印刷可能なバージョンを別個に作成する必要があることを知っておいてください。言うまでもなく、これは非常に面倒な作業になる可能性があります。
テーブル レイアウトを使用して Web ページを作成する場合、特定の 1 つのレイアウト方法に固執する必要はありません。私たちのほとんどと同じように、テーブル レイアウトを使用する開発者は、「テーブルレス」の動きが始まる前にデザインしていた場合、ページごとに個別のレイアウトを作成する必要があり、その作業が非常に面倒であることを認識する必要があります。
テーブルレス レイアウトでは、印刷スタイルの制御が簡単になることが大きな利点です。すべてのページを個別に作成するのではなく、すべてのページに適用する単一の新しい印刷スタイルを簡単に作成できます。これだけでも大幅な時間の節約になりますが、次の点があります。
シンプルな出力スタイル制御は、テーブルレス レイアウトの大きな利点です。ページごとにスタイルを設計しなくても、シンプルな新しいレイアウトを簡単に作成して、すべての Web ページに適用できます。これは間違いなく大幅な時間の節約になります。
このアプローチではすべての要素を制御できますが、最大の鍵はページ自体内の情報の構成です。この例を使用して、すべてのページで印刷する表示順序が次の順序であると仮定してみましょう: ページ ヘッダー最初にコンテンツ、その次に特別ニュース、リンク リスト、フッターの順ですが、それでも通常の表示と同じように表示したいと考えています (つまり、上部にヘッダー、左側にリンク、中央にコンテンツ、右側にニュース、下部にフッター) 表ベースのレイアウトでは、印刷スタイルによって列が左から右に読み取られるため、特別な印刷構成を行うには新しいページを作成する必要があります。テーブルのないレイアウトでは、これに拘束されません。ページ内のコンテンツを好きなように並べることができ、見た目も制御できます...すべて CSS のみを使用します!
これを使用する場合この方法ですべての要素を制御する場合、最初に考慮すべき重要な点は、ページ自体上のすべての情報を効果的に整理する方法です。次のような並べ替えを想像してみましょう。最初にページの上部、次にコンテンツ、次に特定のニュース情報とリンクのリスト、そして最後にフッターです。ただし、通常の閲覧習慣に従って表示されるようにしたいと考えています (つまり、ヘッダーが上部、リンクリストが中央左、コンテンツが中央、ニュースが中央右、フッターが下部)。テーブル レイアウトを使用する場合、テーブルは左から右に読まれるため、新しいページを作成する必要がありますが、テーブルレス レイアウトを使用する場合は、この形式に拘束されません。コンテンツを好きな場所に配置でき、コンテンツを細かく制御できます。 CSS を使用するだけで上記の目的をスムーズに達成できます。
さらに、HTML 内でコンテンツを任意の順序で配置し、CSS を使用して Web サイトを表示するためにコンテンツ ブロックを移動できるため、プレゼンテーションを最終的に制御できます。
さらに、 CSS はコンテンツのすべてまたは一部を HTML ページ内の任意の場所に配置するため、コンテンツの表示方法を任意に制御できます。
コードがクリーンで表示を変更できるということは、携帯電話の小さな画面でもサイトを閲覧できることを意味するため、これは非常に重要です。柔軟性と構成により、XHTML の可能性を最大限に活用した強力な Web サイトを作成できるようになります。
コードの簡素化は非常に重要であるため、コンテンツの表現や位置を自由に制御できます。携帯電話の画面から簡単にWebページを表示できます。 XHTML の拡張性と構成を利用して、優れた Web サイトを作成できます。
検索エンジンの最適化
検索エンジンの最適化
レイアウトに影響を与えることなく、最も重要なコンテンツをページの上部に整理できるため、ページを検索エンジンに対してより最適化できます。たとえば、ページの左側にナビゲーション バーがあり、実際に優れたキーワードであるサイトの部分がたくさんリストされているとします。レイアウトを変更せずに、そのナビゲーション バー コードを実際の HTML の上位に移動できます。 CSS を使用してナビゲーションを希望の場所に配置しています。
テーブルレス レイアウトを使用すると、レイアウト全体に影響を与えることなく、最も重要なコンテンツをページの上部に配置できるため、ページで検索エンジンの最適化を実行できます。最大限に。たとえば、ページの左側にナビゲーション バーを配置し、注目率が非常に高いキーワードをいくつか書きました。したがって、ページ レイアウト全体に影響を与えることなく、HTML コードの前にナビゲーション バーコードを記述することができます。 CSSを使用して位置を調整しているためです。
これらの検索エンジンは、コードでフィルタリングしなくても、ドキュメント全体で一般的な単語をより明確に見つけることもできます。検索エンジンは、コードに対するコンテンツの比率が高い Web サイトを優先するため、すべてのスタイル要素を外部 CSS スタイル シートに入れると、検索エンジンに基づいたコンテンツの多いサイトです。前述したように、テーブルレス レイアウトにより、ページ サイズと読み込み時間が短縮されます。これは、検索エンジンにとってもう 1 つの利点です。
検索エンジンは、コードをフィルタリングすることなく、ドキュメント全体で共通のキーワードを見つけることができます。検索エンジンは、ページに占めるコンテンツの割合が大きいページを検索するため、外部スタイル シートにスタイル要素を配置すると、コンテンツを目立たせることができます。前述のテーブルのないレイアウトにより、ページ サイズとダウンロード時間が大幅に削減され、検索エンジンをより有効に活用できます。
プレゼンテーションの柔軟性
完全な適応性
CSS ベースのテーブルレス レイアウトへの変更は簡単です。変更できるのは CSS ファイルのみで、必要なだけスタイルやグラフィックを変更できます。効果は、すべてのページにカスケード表示されます。
CSS に基づくテーブルレス レイアウトは、非常に簡単な方法です。 CSS ファイルを変換することで、必要なスタイルや画像を変更できます。 Web サイト全体でカスケード スタイル シートを使用すると、毎日のページ更新の作業負荷を軽減できます。
プレゼンテーションがいかに強力であるかを示す最もよく知られた例の 1 つについては、CSS Zen Garden にアクセスし、[デザインの選択] リンクを介して違いを確認できます。異なるデザインのそれぞれは、まったく同じ HTML ファイルを使用しています。コンテンツ。変更されるのはそれぞれの CSS ファイルだけです。
有名な Web サイト、CSS Zen Garden にアクセスしてください。これは、ページ全体のレイアウトという点では古典的です。ナビゲーション バーの [デザインの選択] をクリックすると、さまざまなレイアウト スタイルを表示できます。それぞれの異なるデザイン スタイルは、まったく同じ HTML コンテンツを使用します。別の CSS を使用して HTML のコンテンツを変更するだけです。
標準で自分を売り込む
さまざまな標準で自分を売り込む
標準に合わせてコーディングし、柔軟なテーブルレス レイアウトを作成する方法を知っているだけでは十分ではない場合があります。管理者からの困難に直面する Web デザイナーもいます。ほとんどの場合、これらの問題の原因は、テーブルレス コンテンツと CSS 駆動のレイアウトを使用する利点を管理者が認識していないことにあります。
ここでのポイントは、標準コードを使用してスケーラブルなテーブルレス レイアウトを作成するだけでは十分ではないということです。 Web サイトのデザイナーの中には、Web サイトの管理において依然として多くの困難に直面している人もいます。ほとんどの場合、これはテーブルレス レイアウトの内容と CSS のレイアウト方法を無視したことが原因で発生します。
標準に合わせて設計したいが、変更に取り組む時間を与えるという点であまり前向きではない会社に勤めている場合は、次のことを試してください: 彼らに自分の財布について考えさせてください。コスト削減のメリット
標準化された設計を実行したいが、時間が遅れる可能性があるため、会社がそれを許可しない場合。そこで、あなたがやるべきことは次のとおりです。それらを手帳に書き留めて、どこでお金を節約できるかを指摘します。
たとえば、既存のコードの 1 ページを取得してみます。標準に合わせてクリーンアップします。ページ サイズを以前と比較し (画像の最適化を含む)、節約されたバイト数の差を数えます。それをサイトのページ数で掛け合わせます。次に、これをサイト全体で実行した場合に毎月節約される帯域幅コストの量を説明します。それでも十分でない場合は、CSS を使用した Web サイトにどれだけ迅速に変更を加えることができるかを示します。
たとえば、できるだけ多くの既存のコード ページを取得し、簡潔で標準的なコード形式でコードを書き直します。次に、前後 2 ページのサイズ差 (画像の最適化を含む) を比較し、サイズ差を計算します。次に、新しいレイアウトに従った場合に毎月どのくらいの帯域幅コストが節約できるかを説明します。これだけでは不十分な場合は、CSS レイアウトを使用するとダウンロード速度がどのくらい向上するか、ページ更新時に更新時間がどのくらい短縮されるかについて詳しく説明できます。こうすることで、Web サイトの機能を改善するために時間を費やすことができ、メンテナンスにかかる時間をほとんどなくすことができます。
概要
概要
この小さな記事が、テーブルレス レイアウトを使用する理由や利点を理解し始めるための手段として役立つことを願っています。また、Layout Gala とその利点を簡単に確認できるようになります。開始するには、テーブルレス レイアウトのサンプルを 1 つだけダウンロードするか、40 個すべてをダウンロードしてください。ただし、テーブルレス デザインに移行する最良のステップは、テーブルを削除する前に、Web サイトを標準準拠のバージョンに向けてゆっくりと移行することです。その時点までは、CSS についてできる限り勉強し、ここやウェブ上の他の場所の記事をよく読んで、テーブル レイアウトからテーブルレスに移行するのは時間の問題です。
この記事を書く目的は、これにより、誰もがテーブルレス レイアウトの使用に関する懸念を克服し、この方法をレイアウトに使い始めることができます。ここにショートカットがあります。レイアウト用に Layout Gala Web サイトから 40 個の既製のテンプレート ケースを直接ダウンロードできます。テーブルの使用をやめる前に、サイトをテーブルレスにするプロセスをできる限り遅くする必要があります。 CSS テクノロジを十分に学習し、この記事と Web サイト上のその他の関連記事を読んだ後は、テーブルレス レイアウトの Web サイトを作成するのは時間の問題です。