CSSスキル ー 第6章 チャレンジ

Webサイト2カラムレイアウトを作ってみよう

このスキルのデータをダウンロード: Windows Mac

チャレンジ内容

ボックスをfloatを使って横並びにし、センタリングさせて2カラムのレイアウトを作成する方法について解説します。



使用するファイル

・チャレンジフォルダの中の「start」フォルダに入っている、index.htmlとstyle.cssをSublime Text 3で開きます。
style.cssの方に記述していきましょう。




進め方

01.レイアウトを組むためのボックスを作成しよう

・まず、index.htmlとstyle.cssをSublime Text 3で開きます。
・サイドバーとコンテンツの横幅を指定します。(サイドバー:300px コンテンツ:570px)
・ブラウザで見たときにわかりやすくするため、背景に色を設定しておきます。(サイドバー:gray コンテンツ:#ccc)



02.ボックスを横並びにしよう

・サイドバーとコンテンツを横並びにするため、floatをかけます。
・一度保存してブラウザで見てみます。floatをかけたので、フッターが変な位置に配置されています。
・フッターにfloat解除のCSSを書いていきます。
・再度保存してブラウザで見てみます。フッターの位置がちゃんと戻っていればOKです。




03.サイドバーとコンテンツを真ん中寄せにしよう

・2つのボックスを囲んでいる#wrapperに対して、widthとmarginを設定します。
・ブラウザで見たときに真ん中に寄っていれば大丈夫です。




このような手順で進めていくと、2カラムのレイアウトが完成します。
皆さんもぜひ、チャレンジしてみてください。