× 無料のユーザー登録をすると学習状況を管理することができるようになります

#06 3カラムのレイアウト (固定幅)

さて、今度は固定幅で 3 カラムを実現するレイアウトについて見ていきましょう。
今の状態がこのような形ですね。

全体の幅が固定であるときの、3カラムレイアウトを作っていきます。またマージンの相殺についても説明します。

  • 固定幅の3カラムレイアウト
  • マージンの相殺
2012年9月20日
どうしても #center のコンテンツを #left より先に記述したい場合には、例えば #center と #left をさらにもう1つの div 要素に入れて、その div 要素を 1 つのカラムとみなした 2 カラムのレイアウトとすることでうまくいきます。(実際のCSSはどうなるか考えてみましょう。)

<!-- #main_wrapper と #rightで2カラムレイアウト -->
<div id="main_wrapper">
    <!-- #center と #left で2カラムレイアウト -->
    <div id="center">center</div>
    <div id="left">left</div>
</div>
<div id="right">right</div>

このレッスンの問題を報告する

この動画に関する、よくある質問はまだありません。

プレミアム会員(月額980円)になると、全レッスンの素材ファイルをダウンロードできます。

詳しい説明を読む

プレミアム会員(月額980円)になると、全レッスンのソースコードを見られるようになります。

詳しい説明を読む

このレッスンの問題を報告する

プレミアム会員(月額980円)になると、全レッスンのデモを見られるようになります。

詳しい説明を読む
先生に質問してみよう (試験運用中)