CSSで2カラムの設定をしてみよう

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

こんにちは。
シーサイドレーベルweb担当の飯野です。

今回は「CSSで2カラムの設定をしてみよう」
と題してお話させて頂きます。

2カラムというのは、
ホームページのレイアウトのことで、
メインのコンテンツと左もしくは右に
サイドバーがある形の事を言います。

2カラムを表示させる方法としては
いくつかあるのですが、
今回は「float」プロパティを使って
レイアウトを組んでみたいと思います。

htmlの書き方

CSSの書き方

CSSで2カラムサンプル表示

floatプロパティでメインコンテンツは左へ。
サイドバーは右に表示するように指示しています。

widthは横幅です。それぞれ指定してみました。
borderは罫線なのですが、今回分かりやすいように
1pxの罫線でそれぞれのコンテンツを囲ってみました。

背景色に、分かりやすいように
#contentsにはグレー
メインコンテンツは黄色
サイドバーは水色にしてみました。

ここで、#contentsセレクタの所に
overflow: hidden;と書かれていますが、
これを入れることでfloatプロパティを解除しています。

例えば、overflow: hidden;を削除してみると
グレーの背景色が見えなくなってしまうと思います。
overflow: hidden;を入れることで
floatプロパティが解除され背景色が下まで表示されます。

レイアウトの組み方は色々あるのですが、
今回は一例としてご紹介させて頂きました。

今後、また他の表示方法なども
ご紹介していきたいと思います。

では、また来週お会いしましょう。

mt

起業初年度1000万円、その後ゆるやかに年商3000万円までを目標に起業に向けて一歩を踏み出したい方向けの起業専門メルマガです。最新のノウハウを始め、セミナーや限定サービスのご案内をご希望の方は今すぐ下記フォームより、メインで使っているメールアドレスをご登録下さい。家族との時間を大切にしながら自由自在に収入を増やせる起業家になる方法を余すことなくお伝えいたします。

メールアドレス(必須)

コミュニティ