クロスブラウザなレイアウトデザインテクニック CSSでマルチカラムレイアウト クロスブラウザなレイアウトデザインテクニック 第7回 ブラウザ 印刷用を表示 ツイート 山田 祥寛[監修] / WINGSプロジェクト 宮本麻矢[著] 2010/03/17 14:00 ダウンロード サンプルファイル (8.4 KB) 目次 Page1 はじめに 対象読者 必要な環境 フロート型の2カラムレイアウト フロート型レイアウトのポイント フロート型:左サイドバーレイアウト フロート型:右サイドバーレイアウト Page2 ヘッダとフッタを追加する 「clearプロパティ」でフッタの回り込みを解除する Page3 「clearfix」でフッタの回り込みを解除する 全体をセンタリングする 背景色の段差を解消する Page4 ポジショニング型の2カラムレイアウト ポジショニング型:左サイドバーレイアウト ポジショニング型:右サイドバーレイアウト Page5 フッタの重なりを考慮する サイドバーをメイン領域より上に配置する Page6 CSSで3カラムレイアウトを実現する フロート型:3カラムレイアウト ポジショニング型:3カラムレイアウト まとめ ※この続きは、会員の方のみお読みいただけます(登録無料)。 会員登録(無料) ログインはこちら <<前へ 1 2 3 4 5 6 連載通知を行うには会員登録(無料)が必要です。 既に会員の方はログインを行ってください。 バックナンバー 印刷用を表示 ツイート バックナンバー 連載:クロスブラウザなレイアウトデザインテクニック CSSでマルチカラムレイアウト ページレイアウトに使えるCSSプロパティ ナビゲーションの実践的なスタイリング ナビゲーションのマークアップとCSSデザイン ブラウザのデフォルトスタイルをリセットする CSSハックで、クロスブラウザ対応のCSSを記述する 「ブラウザの表示モード」を理解してクロスブラウザなレイアウトを実現する 著者プロフィール 山田 祥寛(ヤマダ ヨシヒロ) 静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for ASP/ASP.NET。執筆コミュニティ「WINGSプロジェクト」代表。 主な著書に「入門シリーズ(サーバサイドAjax/XM... WINGSプロジェクト 宮本麻矢(ミヤモト マヤ) <WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂... ※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です Article copyright © 2010 WINGS Project, Miyamoto Maya, Shoeisha Co., Ltd. あなたにオススメ × ログイン Eメール パスワード ※旧SEメンバーシップ会員の方は、同じ登録情報(Eメール&パスワード)でログインいただけます。 × ブックマークを利用するにはログインが必要です 会員登録(無料) ログインはこちら All contents copyright © 2005-2022 Shoeisha Co., Ltd. All rights reserved. ver.1.5