テーブルレスレイアウトを開く新しいデザインのフロンティア
レイアウトにテーブルを使用しない理由はたくさんあります 。 CSSを使用してレイアウトを行うのは難しいため、人々がそれらを使い続けようとする最も頻繁な理由の1つです。 CSSスクリプティングは学習曲線を伴いますが、CSSレイアウトの仕方を理解すると、どのように簡単にできるのか驚くかもしれません。 そして、あなたが学ぶと、人々はCSSを使わないために2番目に多い理由を扱います。「テーブルを書く方が速い」テーブルを知っているので高速ですが、CSSを学ぶとすぐにそれと。
ブラウザのCSS測位のサポート
CSSの配置は、現代のすべてのブラウザでうまくサポートされています 。 Netscape 4またはInternet Explorer 4用のサイトを構築している場合を除き、読者はCSS配置Webページの表示に問題はないはずです。
あなたがページを構築する方法を再考する
表を使用してサイトを構築する場合は、 表形式で考える必要があります。 言い換えれば、セルと行と列の観点から考えています。 あなたのWebページにはこのアプローチが反映されます。 CSSポジショニングデザインに移行すると、コンテンツをレイアウトのどこにでも配置することができるため、他のコンテンツの上に重ねて配置することもできるため、コンテンツの観点からページを考えるようになります。
異なるウェブサイトは異なる構造を持っています。 効果的なページを作成するには、ページにコンテンツを割り当てる前にそのページの構造を評価します。 ページの例には、次の5つの異なるセクションがあります。
- ヘッダー 。 バナー広告のホーム、サイト名、ナビゲーションリンク、記事タイトルなど。
- 右の列 。 これは、検索ボックス、広告、ビデオボックス、ショッピングエリアがページの右側に表示されます。
- コンテンツ 。 記事、ブログ投稿、ショッピングカートのテキスト。ページの肉とジャガイモ。
- インライン広告 。 コンテンツ内のインライン広告。
- フッター 。 下のナビゲーション、著者情報、著作権情報、バナー広告、関連リンク
これら5つの要素をテーブルに入れるのではなく、HTML5のセクション要素を使用してコンテンツのさまざまな部分を定義し、CSSの配置を使用してコンテンツ要素をページに配置します。
コンテンツセクションの特定
サイトのさまざまなコンテンツ領域を定義したら、それらをHTMLに書き込む必要があります。 一般的にセクションを任意の順序で配置することができますが、ページの最も重要な部分を先に配置することをお勧めします。 このアプローチは、検索エンジンの最適化にも役立ちます。
配置を実証するために、3つの列を持ちヘッダーまたはフッターを含まないページを想定します。 ポジショニングを使用して、好きなタイプのレイアウトを作成できます。
3列レイアウトの場合は、左側の列、右側の列、およびコンテンツの3つのセクションを定義します。
これらのセクションは、コンテンツのARTICLE要素と2つの列の2つのSECTION要素を使用してインスタンス化されます。 すべてには、それを識別する属性もあります。 id属性を使用する場合は、各IDに固有の名前を付ける必要があります。
コンテンツの配置
CSSを使用して、IDの要素の位置を定義します。 あなたの位置情報を次のようなスタイルの呼び出しに格納します：
#content {
}
これらの要素内のコンテンツはできるだけ多くのスペース、つまり現在の場所またはページの幅の100％を占有します。 固定幅にすることなくセクションの位置に影響を与えるには、パディングまたはマージンのプロパティを変更します。
このレイアウトでは、2つの列を固定幅に設定し、絶対位置を設定して、HTML内の位置によって影響を受けないようにします。
＃left-column {
位置：絶対;
左：0;
幅：150px;
margin-left：10px;
margin-top：20px;
色：＃000000;
パディング：3px;
}
＃右列{
位置：絶対;
左：80％;
top：20px;
幅：140ピクセル。
パディング - 左：10ピクセル。
z-インデックス：3;
色：＃000000;
パディング：3px;
}
コンテンツ領域では、2つの外側の列にコンテンツが重ならないように、左右に余白を設定します。
#content {
top：0px;
余白：0px 25％0 165px;
パディング：3px;
色：＃000000;
}
HTMLテーブルの代わりにCSSを使用してページを定義するには、少し技術的なスキルが必要ですが、柔軟性が高く応答性の高いデザインから、後でページの構造を簡単に調整できるというメリットがあります。