ページ幅に合わせて段組みのカラムの幅が変化するリキッドレイアウトをCSSで作成します。
寸法図
この記事で紹介するレイアウトでは右カラムの幅が変化します。左のカラムは固定幅になります。
Float プロパティを利用する方法
参考サイト
http://matthewjamestaylor.com/blog/ultimate-2-column-left-menu-pixels.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;
}
.leftmenu {
background:#fccbff;/* 左カラム背景色 */
}
.leftmenu .colright {
float:left;
width:200%;
position:relative;
left:200px;
background:#cbe6ff;/* 右カラム背景色 */
}
.leftmenu .col1wrap {
float:right;
width:50%;
position:relative;
right:200px;
padding-bottom:1em;
}
.leftmenu .col1 {
margin:0 15px 0 215px;
position:relative;
right:100%;
overflow:hidden;
}
.leftmenu .col2 {
float:left;
width:170px;
position:relative;
right:185px;
}
</style>
</head>
<body>
<div class="colmask leftmenu">
<div class="colright">
<div class="col1wrap">
<div class="col1">
<!-- カラム 2 ここから -->
aaa
<br/>
このカラムは、ウィンドウの横幅に合わせてサイズが変わります。カラム幅が狭くなると文字が
折り返されることを確認できます。
<!-- カラム 2 ここまで -->
</div>
</div>
<div class="col2">
<!-- カラム 1 ここから -->
bbb
<!-- カラム 1 ここまで -->
</div>
</div>
</div>
</body>
</html>
実行結果
Float プロパティを利用する方法 (長さを em単位で指定する場合)
寸法図
コード例
<!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;
}
.leftmenu {
background:#fccbff; /* 左カラム背景色 */
}
.leftmenu .colright {
float:left;
width:200%;
position:relative;
left:12em;
background:#cbe6ff; /* 右カラム背景色 */
}
.leftmenu .col1wrap {
float:right;
width:50%;
position:relative;
right:12em;
padding-bottom:1em;
}
.leftmenu .col1 {
margin:0 1em 0 13em;
position:relative;
right:100%;
overflow:hidden;
}
.leftmenu .col2 {
float:left;
width:10em;
position:relative;
right:11em;
}
</style>
</head>
<body>
<div class="colmask leftmenu">
<div class="colright">
<div class="col1wrap">
<div class="col1">
<!-- カラム 2 ここから -->
aaa<br/>
このカラムは、ウィンドウの横幅に合わせてサイズが変わります。
カラム幅が狭くなると文字が折り返されることを確認できます。
<!-- カラム 2 ここまで -->
</div>
</div>
<div class="col2">
<!-- カラム 1 ここから -->
bbb<br/>
このカラムは、ウィンドウの横幅に合わせてサイズが変わります。
カラム幅が狭くなると文字が折り返されることを確認できます。
<!-- カラム 1 ここまで -->
</div>
</div>
</div>
</body>
</html>
FlexBox を利用する方法
CSSのFlextBoxを利用して段組みする場合のコードです。Floatプロパティよりシンプルでわかりやすいコードで記述できます。
コード
下記のHTMLファイル,CSSを作成します。
.container {
display: flex;
width: 100%;
}
.leftColumn {
width: 200px;
flex-shrink:0;
flex-grow:0;
background-color: #ffbffa;
padding-left: 15px;
padding-right: 15px;
}
.rightColumn {
flex-grow: 1;
background-color: #bfddff;
padding-left: 15px;
padding-right: 15px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="ColumnLayout-2Column-Liquid-Flex.css" />
</head>
<body>
<div class="container">
<div class="leftColumn">
<!-- カラム 1 ここから -->
bbb
<!-- カラム 1 ここまで -->
</div>
<div class="rightColumn">
<!-- カラム 2 ここから -->
aaa
<br />
このカラムは、ウィンドウの横幅に合わせてサイズが変わります。カラム幅が狭くなると文字が
折り返されることを確認できます。
<!-- カラム 2 ここまで -->
</div>
</div>
</body>
</html>
解説
FlexBoxを利用して段組みページを作成しています。FlexBoxの詳細は
こちらのページを参照してください。
実行結果
上記のHTMLページをWebブラウザで表示します。下図の画面が表示されます。段組みされたページが表示できていることが確認できます。
Grid Layout を利用する方法
CSSのGrid Layout を利用して段組みする場合のコードです。シンプルでわかりやすいコードで記述できます。
コード
下記のHTMLファイル,CSSを作成します。
.container {
display: Grid;
grid-template-columns: 200px 1fr;
grid-template-rows: auto ;
}
.leftColumn {
grid-column: 1 / 2;
grid-row: 1 / 2;
background-color: #ffbffa;
padding-left: 15px;
padding-right: 15px;
}
.rightColumn {
grid-column: 2 / 3;
grid-row: 1 / 2;
background-color: #bfddff;
padding-left: 15px;
padding-right: 15px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="ColumnLayout-2Column-Liquid-Grid.css" />
</head>
<body>
<div class="container">
<div class="leftColumn">
<!-- カラム 1 ここから -->
bbb
<!-- カラム 1 ここまで -->
</div>
<div class="rightColumn">
<!-- カラム 2 ここから -->
aaa
<br />
このカラムは、ウィンドウの横幅に合わせてサイズが変わります。カラム幅が狭くなると文字が
折り返されることを確認できます。
<!-- カラム 2 ここまで -->
</div>
</div>
</body>
</html>
解説
Grid Layoutを利用して段組みページを作成しています。Grid Layoutの詳細は
こちらのページを参照してください。
実行結果
上記のHTMLページをWebブラウザで表示します。下図の画面が表示されます。段組みされたページが表示できていることが確認できます。
著者
iPentecのメインデザイナー
Webページ、Webクリエイティブのデザインを担当。PhotoshopやIllustratorの作業もする。
最終更新日: 2019-12-09
作成日: 2011-01-24
