CSSでページ幅に合わせてコンテンツエリアの幅が変わるレイアウトを作成する (リキッドレイアウト余白部分をピクセル指定) - CSS

ページ幅に合わせてカラムの幅が変化するリキッドレイアウトをCSSで作成します。

参考サイト

http://matthewjamestaylor.com/blog/ultimate-1-column-full-page-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;
}

.fullpage {
 background:#cbe6ff;
}

.fullpage .col1 {
 margin:0 15px;
}

-->
</style>
</head>

<body>
<div class="colmask fullpage">
 <div class="col1">
  <!-- カラム 1 ここから -->
   AAA
   <br/>
   このカラムは、ウィンドウの横幅に合わせてサイズが変わります。
カラム幅が狭くなると文字が 折り返されることを確認できます。
  <!-- カラム 1 ここまで -->
 </div>
</div>
</body>

</html>

実行結果

余白を 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;
}

.fullpage {
 background:#abe6ff;
}

.fullpage .col1 {
 margin:0 1em;
}

</style>
</head>

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

</html>

著者

とりっち

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

目次

CSSでページ幅に合わせてコンテンツエリアの幅が変わるレイアウトを作成する (リキッドレイアウト余白部分をピクセル指定) - CSS

参考サイト

寸法図

コード例

実行結果

余白を em単位で指定する場合

コード例

関連するページ

目次

CSSでページ幅に合わせてコンテンツエリアの幅が変わるレイアウトを作成する (リキッドレイアウト 余白部分をピクセル指定) - CSS

参考サイト

寸法図

コード例

実行結果

余白を em単位で指定する場合

コード例

関連するページ

CSSでページ幅に合わせてコンテンツエリアの幅が変わるレイアウトを作成する (リキッドレイアウト余白部分をピクセル指定) - CSS