CSSで段組レイアウトのテンプレートメニュー
公開:2015-10-21
更新:
CSSで段組みレイアウトのテンプレートのメニューです。2段組/3段組、サイドバー可変幅/固定幅、横並び順各種あります。
様々なウィンドウ幅や画面幅に対応するレスポンシブデザインで、デモで実際に検証できます。ソースコードは無料フリーです。
ちなみにCSS自体がサイドバーやコンテンツという概念ではなく、ここでは分かりやすいように、幅が狭い側と広い側でそう呼んでいるだけです。コンテンツは全て可変幅としています。
ページ内目次
2段組:サイドバー固定幅
ウィンドウや画面の幅を広げた際に、B1~B2を以下の順で横並びにします。
左サイドバー + 右コンテンツ
左コンテンツ + 右サイドバー
2段組:サイドバー可変幅
ウィンドウや画面の幅を広げた際に、B1~B2を以下の順で横並びにします。
左サイドバー + 右コンテンツ
左コンテンツ + 右サイドバー
3段組:サイドバー固定幅
ウィンドウや画面の幅を広げた際に、B1~B3を以下の順で横並びにします。
3段組:サイドバー可変幅
ウィンドウや画面の幅を広げた際に、B1~B3を以下の順で横並びにします。