ページ幅に合わせて3カラムの幅が変わる3段組みレイアウトを作成する - CSS
ページ幅に合わせて段組みのカラムの幅が変化するリキッドレイアウトをCSSで作成します。
この記事で紹介するレイアウトでは3つのカラムの幅が変化します。左のカラムが50%、中央と右のカラムは25%の幅になります。
FlexBox を利用する方法
Floatプロパティを利用する方法
参考サイト
http://matthewjamestaylor.com/blog/perfect-3-column-blog-style.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; /* 左右のパディングなし, 上部パディングなし、下部パディング 1em */
overflow:hidden;
}
.blogstyle {
background:#c1ffbf; /* 右カラム背景色 */
}
.blogstyle .colmid {
right:25%; /* 右カラム幅 */
background:#f8ff87; /* 中央カラム背景色 */
}
.blogstyle .colleft {
right:25%; /* 中央カラム幅 */
background:#ffd6d6; /* 左カラム背景色 */
}
.blogstyle .col1 {
width:46%; /* 中央カラムコンテンツ幅 (中央カラム幅 - 中央カラム左右パディング幅) */
left:52%; /* 100% + 中央カラム左パディング幅 */
}
.blogstyle .col2 {
width:21%; /* 左カラムコンテンツ幅 (左カラム幅 - 左カラム左右パディング幅) */
left:56%; /* 右カラム幅 + 中央カラム左パディング + 中央カラム右パディング + 左カラム左パディング */
}
.blogstyle .col3 {
width:21%; /* 右カラムコンテンツ幅 (右カラム幅 - 右カラム左右パディング幅) */
left:60%; /* ブラケットエリア*/
/*(100% - 左カラム幅 + 中央カラム左右パディング幅 + 左カラム左右パディング幅 + 右カラム左パディング幅) */
}
</style>
</head>
<body>
<div class="colmask blogstyle">
<div class="colmid">
<div class="colleft">
<div class="col1">
<!-- カラム 1 ここから -->
AAA<br/>
このカラムは、ウィンドウの横幅に合わせてサイズが変わります。
カラム幅が狭くなると文字が 折り返されることを確認できます。
<!-- カラム 1 ここまで -->
</div>
<div class="col2">
<!-- カラム 2 ここから -->
BBB<br/>
このカラムは、ウィンドウの横幅に合わせてサイズが変わります。
カラム幅が狭くなると文字が 折り返されることを確認できます。
<!-- カラム 2 ここまで -->
</div>
<div class="col3">
<!-- カラム 3 ここから -->
CCC<br/>
このカラムは、ウィンドウの横幅に合わせてサイズが変わります。
カラム幅が狭くなると文字が 折り返されることを確認できます。
<!-- カラム 3 ここまで -->
</div>
</div>
</div>
</div>
</body>
</html>
実行結果
著者
iPentecのメインデザイナー
Webページ、Webクリエイティブのデザインを担当。PhotoshopやIllustratorの作業もする。
