ページ幅に合わせて左右のカラム幅が変わる2段組みレイアウトを作成する (floatを利用した2段組みリキッドレイアウト %指定 右側メニュー) - CSS
ページ幅に合わせて段組みのカラムの幅が変化するリキッドレイアウトをCSSで作成します。
概要
ページ幅に合わせて段組みのカラムの幅が変化するページを作成するには、FlexBoxを利用するかFloatを利用して段組みをします。
寸法図
左右のカラム幅が変化するレイアウトのページを作成します。左は75%、右は25%のカラム幅になります。
FlexBox を利用する方法
CSSのFlextBoxを利用して段組みする場合のコードです。Floatプロパティよりシンプルでわかりやすいコードで記述できます。
コード
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
body {
margin:0;
padding:0;
border:0;
width:100%;
background:#F0F0F0;
min-width:600px; /* 最小幅 */
}
.container{
display:flex;
}
.col1 {
flex: 3;
background: #ffd6d6;
padding-left: 2%;
padding-right: 2%;
padding-top: 2%;
padding-bottom: 2%;
}
.col2 {
flex: 1;
background: #c1ffbf;
padding-left: 2%;
padding-right: 2%;
padding-top: 2%;
padding-bottom: 2%;
}
</style>
</head>
<body>
<div class="container">
<div class="col1">
<!-- カラム 1 ここから -->
AAA<br />
このカラムは、ウィンドウの横幅に合わせてサイズが変わります。
カラム幅が狭くなると文字が 折り返されることを確認できます。
<!-- カラム 1 ここまで -->
</div>
<div class="col2">
<!-- カラム 2 ここから -->
BBB<br />
このカラムは、ウィンドウの横幅に合わせてサイズが変わります。
カラム幅が狭くなると文字が 折り返されることを確認できます。
<!-- カラム 2 ここまで -->
</div>
</div>
</body>
</html>
解説
75%と25%に分割するため、FlexBoxの表示をし、左カラム:右カラム = 3:1 の比率で表示する設定にします。
枠の内側の余白はpaddingプロパティで指定します。
表示結果
上記のHTMLをWebブラウザで表示します。下図のページが表示されます。
ウィンドウの幅を狭めると中の文字列が折り返されます。左右のカラムの幅も75%,25%の比率が変わらずに表示されます。
bodyタグのスタイルに
min-width:600px;が指定されているため、ウィンドウの幅が600px以下になると、横方向のスクロールバーが表示されます。
Float プロパティを利用する方法
floatプロパティで段組みを作成します。合わせて、カラムの枠のwidthプロパティの値を比率で指定します。
参考サイト
http://matthewjamestaylor.com/blog/perfect-2-column-right-menu.htm
コード
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>無題 1</title>
<style type="text/css">
body {
margin:0;
padding:0;
border:0;
width:100%;
background:#F0F0F0;
min-width:600px; /* 最小幅 */
}
.colmask {
position:relative;
clear:both;
float:left;
width:100%; /* ページ全体幅 */
overflow:hidden;
}
.colright,
.colmid,
.colleft {
float:left;
width:100%;
position:relative;
}
.col1,
.col2,
.col3 {
float:left;
position:relative;
padding:0 0 1em 0;
overflow:hidden;
}
.rightmenu {
background:#c1ffbf; /* 右カラム背景色 */
}
.rightmenu .colleft {
right:25%; /* 右カラム幅 */
background:#ffd6d6; /* 左カラム背景色 */
}
.rightmenu .col1 {
width:71%; /* 左カラムコンテンツ幅 (左カラム幅 - 左カラム左右パディング幅) */
left:27%; /* 右カラム幅 + 左カラム左パディング幅 */
}
.rightmenu .col2 {
width:21%; /* 右カラムコンテンツ幅 (右カラム幅 - 右カラム左右パディング幅) */
left:31%; /* 右カラム幅 + 左カラム左右パディング幅 +右カラム左パディング幅 */
}
</style>
</head>
<body>
<div class="colmask rightmenu">
<div class="colleft">
<div class="col1">
<!-- カラム 1 ここから -->
AAA<br/>
このカラムは、ウィンドウの横幅に合わせてサイズが変わります。
カラム幅が狭くなると文字が 折り返されることを確認できます。
<!-- カラム 1 ここまで -->
</div>
<div class="col2">
<!-- カラム 2 ここから -->
BBB<br/>
このカラムは、ウィンドウの横幅に合わせてサイズが変わります。
カラム幅が狭くなると文字が 折り返されることを確認できます。
<!-- カラム 2 ここまで -->
</div>
</div>
</div>
</body>
</html>
表示結果
上記のHTMLファイルをWebブラウザで表示します。下図のページが表示されます。
著者
iPentecのメインデザイナー
Webページ、Webクリエイティブのデザインを担当。PhotoshopやIllustratorの作業もする。
