iPentec.com  /  Doc  /  CSS  /  CSS Float  /  Flexbox  /  CSS Grid Layout  /  段組み  /  リキッドレイアウト

目次

ページ幅に合わせて左カラムの幅が変わる3段組みレイアウトを作成する (3段組みリキッドレイアウト) - CSS

ページ幅に合わせて段組みのカラムの幅が変化するリキッドレイアウトをCSSで作成します。
この記事で紹介するレイアウトでは左カラムの幅が変化します。中央のカラムと右のカラムは固定幅になります。

参考サイト

http://matthewjamestaylor.com/blog/ultimate-3-column-blog-style-pixels.htm

Floatプロパティを利用する例

寸法図


コード

<!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;
}

.blogstyle {
 background:#ffe7a5;/*　右側カラム背景色 */
}

.blogstyle .colmid {
 float:left;
 width:200%;
 margin-left:-200px;/* 右カラム幅 */
 position:relative;
 right:100%;
 background:#fccbff;/* 中央カラム背景色 */
}
.blogstyle .colleft {
 float:left;
 width:100%;
 margin-left:-200px;/* 中央カラムの幅 */
 background:#cbe6ff;/* 左カラム背景色 */
}
.blogstyle .col1wrap {
 float:left;
 width:50%;
 padding-bottom:1em;/* 中央カラム下部パディング */
}
.blogstyle .col1 {
 margin:0 15px 0 415px;	/*中央カラムの左右パディング:
	左パディング = 左カラム幅 + 中央カラム 左パディング幅
	右パディング = 右カラム幅 + 中央カラム 右パディング幅 */
 position:relative;
 left:100%;
 overflow:hidden;
}
.blogstyle .col2 {
 float:right;
 width:170px; /* 左カラムコンテンツ幅　(左カラム幅 - 左カラム左右パディング幅) */
 position:relative;
 left:185px; /* 左カラム 左パディング幅 */
}
.blogstyle .col3 {
 float:right;
 width:170px; /* 右カラムコンテンツ幅 (右カラム幅 - 右カラム左右パディング幅) */
 position:relative;
 left:555px;
}
-->
</style>

</head>

<body>
<div class="colmask blogstyle">
 <div class="colmid">
  <div class="colleft">
   <div class="col1wrap">
    <div class="col1">
     <!-- カラム 1 ここから -->
     aaa
     <!-- カラム 1 ここまで -->
    </div>
   </div>
   <div class="col2">
    <!-- カラム 2 ここから -->
    bbb
    <!-- カラム 2 ここまで -->
   </div>
   <div class="col3">
    <!-- カラム 3 ここから -->
    ccc
    <!-- カラム 3 ここまで -->
   </div>
  </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:#fff;
 min-width:600px; /* 最小幅 */
}

.colmask {
 position:relative;
 clear:both;
 float:left;
 width:100%;	/* ページ全体幅 */
 overflow:hidden;
}

.blogstyle {
 background:#ffe7a5; /* 右カラム背景色 */
}

.blogstyle .colmid {
 float:left;
 width:200%;
 margin-left:-12em; /* 右カラム幅 */
 position:relative;
 right:100%;
 background:#fccbff; /* 中央カラム背景色 */
}

.blogstyle .colleft {
 float:left;
 width:100%;
 margin-left:-12em;	/* 中央カラム幅 */
 background:#cbe6ff; /* 左カラム背景色 */
}

.blogstyle .col1wrap {
 float:left;
 width:50%;
 padding-bottom:1em; /* 中央カラム 下部パディング */
}

.blogstyle .col1 {
 margin:0 1em 0 25em; /* 中央カラム左右パディング */
	/* 左パディング = 左カラム幅 + 中央カラム左パディング幅 */
	/* 右パディング = 右カラム幅 + 中央カラム右パディング幅 */
 position:relative;
 left:100%;
 overflow:hidden;
}

.blogstyle .col2 {
 float:right;
 width:10em; /* 左カラムコンテンツ幅 (左カラム幅 - 左カラム左右パディング) */
 position:relative;
 left:11em; /* 左カラム左パディング幅 */
}
.blogstyle .col3 {
 float:right;
 width:10em; /* 右カラムコンテンツ幅 (右カラム幅 - 右カラム左右うパディング) */
 position:relative;
 left:33em;
}

#footer {
 clear:both;
 float:left;
 width:100%;
 border-top:1px solid #000;
}
</style>
</head>

<body>
<div class="colmask blogstyle">
 <div class="colmid">
  <div class="colleft">
   <div class="col1wrap">
    <div class="col1">
     <!-- Column 1 start -->
     AAA<br/>
このカラムは、ウィンドウの横幅に合わせてサイズが変わります。 
カラム幅が狭くなると文字が 折り返されることを確認できます。
     <!-- Column 1 end -->
    </div>
   </div>
   <div class="col2">
    <!-- Column 2 start -->
     BBB<br/>
このカラムは、ウィンドウの横幅に合わせてサイズが変わります。 
カラム幅が狭くなると文字が 折り返されることを確認できます。
    <!-- Column 2 end -->
   </div>
   <div class="col3">
    <!-- Column 3 start -->
     CCC<br/>
このカラムは、ウィンドウの横幅に合わせてサイズが変わります。 
カラム幅が狭くなると文字が 折り返されることを確認できます。
    <!-- Column 3 end -->
   </div>
  </div>
 </div>
</div>

</body>
</html>

FlexBoxを利用する場合

寸法図


コード

.container {
    display: flex;
    width: 100%;
}

.leftColumn {
    flex-grow: 1;
    background-color: #bfddff;
    padding-left: 15px;
    padding-right: 15px;
}

.centerColumn {
    width: 200px;
    flex-shrink: 0;
    flex-grow: 0;
    background-color: #ffbffa;
    padding-left: 15px;
    padding-right: 15px;
}

.rightColumn {
    width: 200px;
    flex-shrink: 0;
    flex-grow: 0;
    background-color: #ffe7a5;
    padding-left: 15px;
    padding-right: 15px;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title></title>
  <link rel="stylesheet" href="ColumnLayout-3Column-Liquid-Flex.css" />
</head>
<body>
  <div class="container">
    <div class="leftColumn">
      <!-- カラム 1 ここから -->
      AAA<br />
      このカラムは、ウィンドウの横幅に合わせてサイズが変わります。
      カラム幅が狭くなると文字が 折り返されることを確認できます。
      <!-- カラム 1 ここまで -->
    </div>
    <div class="centerColumn">
      <!-- カラム 2 ここから -->
      BBB<br />
      このカラムは、ウィンドウの横幅に合わせてサイズが変わります。
      カラム幅が狭くなると文字が 折り返されることを確認できます。
      <!-- カラム 2 ここまで -->
    </div>
    <div class="rightColumn">
      <!-- カラム 3 ここから -->
      CCC<br />
      このカラムは、ウィンドウの横幅に合わせてサイズが変わります。
      カラム幅が狭くなると文字が 折り返されることを確認できます。
      <!-- カラム 3 ここまで -->
    </div>
  </div>
</body>
</html>

表示結果




GridLayoutを利用する場合

寸法図


コード

.container {
    display: grid;
    grid-template-columns: 1fr 200px 200px;
    grid-template-rows: auto;
}

.leftColumn {
    grid-column: 1 / 2;
    grid-row: 1 / 2;
    background-color: #bfddff;
    padding-left: 15px;
    padding-right: 15px;
}

.centerColumn {
    grid-column: 2 / 3;
    grid-row: 1 / 2;
    background-color: #ffbffa;
    padding-left: 15px;
    padding-right: 15px;
}

.rightColumn {
    grid-column: 3 / 4;
    grid-row: 1 / 2;
    background-color: #ffe7a5;
    padding-left: 15px;
    padding-right: 15px;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title></title>
  <link rel="stylesheet" href="ColumnLayout-3Column-Liquid-Grid.css" />
</head>
<body>
  <div class="container">
    <div class="leftColumn">
      <!-- カラム 1 ここから -->
      AAA<br />
      このカラムは、ウィンドウの横幅に合わせてサイズが変わります。
      カラム幅が狭くなると文字が 折り返されることを確認できます。
      <!-- カラム 1 ここまで -->
    </div>
    <div class="centerColumn">
      <!-- カラム 2 ここから -->
      BBB<br />
      このカラムは、ウィンドウの横幅に合わせてサイズが変わります。
      カラム幅が狭くなると文字が 折り返されることを確認できます。
      <!-- カラム 2 ここまで -->
    </div>
    <div class="rightColumn">
      <!-- カラム 3 ここから -->
      CCC<br />
      このカラムは、ウィンドウの横幅に合わせてサイズが変わります。
      カラム幅が狭くなると文字が 折り返されることを確認できます。
      <!-- カラム 3 ここまで -->
    </div>
  </div>
</body>
</html>

表示結果




著者
とりっち
iPentecのメインデザイナー
Webページ、Webクリエイティブのデザインを担当。PhotoshopやIllustratorの作業もする。

関連するページ

最終更新日: 2018-11-22
作成日: 2011-01-24
ドキュメント
新着記事一覧
タグ一覧
ドキュメント トップ
コンテンツ
YouTube
iPentec
プライバシー
iPentecについて
iPentec all rights reserverd.