スッキリかんたんスタイルシート～ホームページの構成

トップ＞スッキリかんたんスタイルシート

WinIE
5.0	5.5	6.0

WinNS
4.x	6.x	7.x

WinOpera
6.0	7.x	8.0

winFirefox
1.x

MacSafari
1.x	2.0

MacNs
4.x	6.x	7.x

MacOpera
6.0	7.5	8.0

MacFirefox
1.x

【下記CSSのブラウザ対応】　バージョンがグレーで表示されているブラウザは対応していません。赤表示は一部対応です。

floatプロパティによる2段組

header

side

body {margin:0;
      padding:0;
      font-size:14px;}

マージンを０に指定することで，それぞれの要素の隙間をなくします。パディングを０にしておくのは，Operaでの初期設定のパディングをなくすためです。（ブラウザによって初期設定が違うので，マージンとパディングは０に設定します。）

main

レイアウトがくずれないようにcontents（div要素）で囲み，幅を設定します。それぞれのボックスにも幅を設定します。

    #contents {width:700px;}
    #side {float:left;
           width:200px;}
    #main {float:right;
           width:500px;}

p要素のマージンを０にしておくことで，上下のボックスの間に余白ができる（Firefoxで表示したとき）のを防ぎます。

footer

>>> HTMLソース

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>floatプロパティによる2段組</title>

<style type="text/css">
<!--
/* ページのレイアウト */

body {margin:0;
      padding:0;
      font-size:14px;}
#header{width:700px;}
#contents {width:700px;}
#side {float:left;
       width:200px;}
#main {float:right;
       width:500px;}
#footer {clear:both;
         width:700px;}

/* ページの基本デザイン */

p {margin:0;}
#header, #footer {
	background-color:#9A7656;}
#contents {line-height:1.5em;}
#main {background-color:#E8DAC1;}
#side {background-color:#D0AD73;}
strong {font:bold 16pt "ＭＳ Ｐゴシック", Osaka, sans-serif;}
-->
</style>
</head>
<body>
<div id="header"><p><strong>header</strong></p></div>
<div id="contents">

<div id="side">
<p><strong>side</strong>
<PRE>
body {margin:0;
      padding:0;
      font-size:14px;}
</PRE>
マージンを０に指定することで，それぞれの要素の隙間をなくします。
パディングを０にしておくのは，Operaでの初期設定のパディングをなくすためです。
（<FONT COLOR="#0000FF">ブラウザによって初期設定が違うので，
マージンとパディングは０に設定します。</FONT>）
</p></div>

<div id="main">
<p><strong>main</strong><br>
<IMG SRC="2dan.gif">
<br>レイアウトがくずれないようにcontents（div要素）で囲み，幅を設定します。
それぞれのボックスにも幅を設定します。
<PRE>
    #contents {width:700px;}
    #side {float:left;
           width:200px;}
    #main {float:right;
           width:500px;}
</PRE>
p要素のマージンを０にしておくことで，上下のボックスの間に余白ができる（Firefoxで表示したとき）のを
防ぎます。
</p></div>

</div>

<div id="footer"><p><strong>footer</strong></p></div>

</body>
</html>

floatプロパティによる2段組～中央に配置する

header

side

body {margin:0;
      padding:0;
      text-align:center;
      font-size:14px;}

WinIE5.5以前では，[margin:0 auto]の中央寄せに対応していない。text-align:centerを書き加えることで，ブロック要素をセンタリングしている。（実はこれはバグ。バグを逆に使ってセンタリングしているということ）

main

ボックス全体をcontainer（div要素）で囲み，margin:0 auto　で，中央に配置している。bodyにtext-align:centerを指定したままでは，中のテキストまでがセンタリングされてしまうので，text-align:leftで左寄せにしている。

    #container {margin:0 auto;
                width:700px;
                text-align:left;}

p要素のマージンを０にしておくことで，上下のボックスの間に余白ができる（Firefoxで表示したとき）のを防ぎます。

footer

>>> HTMLソース

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>floatプロパティによる2段組～中央に配置する</title>

<style type="text/css">
<!--
/* ページのレイアウト */

body {margin:0;
	padding:0;
      text-align:center;
      font-size:14px;}
#header{width:700px;}
#container {margin:0 auto;
	width:700px;
      text-align:left;}
#contents {width:700px;}
#side {float:left;
	width:200px;}
#main {float:right;
	width:500px;}
#footer {clear:both;
	width:700px;}

/* ページの基本デザイン */

p {margin:0;}
#header, #footer {
	background-color:#9A7656;}
#contents {line-height:1.5em;}
#main {background-color:#E8DAC1;}
#side {background-color:#D0AD73;}
strong {font:bold 16pt "ＭＳ Ｐゴシック", Osaka, sans-serif;}
-->
</style>
</head>
<body>
<div id="container">

<div id="header"><p><strong>header</strong></p></div>
<div id="contents">

<div id="side">
<p><strong>side</strong>
<PRE>
body {margin:0;
      padding:0;
      text-align:center;
      font-size:14px;}
</PRE>
WinIE5.5以前では，[margin:0 auto]の中央寄せに対応していない。
text-align:centerを書き加えることで，ブロック要素をセンタリングしている。
（実はこれはバグ。バグを逆に使ってセンタリングしているということ）
</p></div>

<div id="main">
<p><strong>main</strong><br>
<IMG SRC="2dan_center.gif">
<br>ボックス全体をcontainer（div要素）で囲み，margin:0 auto　で，中央に配置している。
bodyにtext-align:centerを指定したままでは，中のテキストまでがセンタリングされてしまうので，
text-align:leftで左寄せにしている。
<PRE>
    #container {margin:0 auto;
                width:700px;
                text-align:left;}
</PRE>
p要素のマージンを０にしておくことで，
上下のボックスの間に余白ができる（Firefoxで表示したとき）のを防ぎます。
</p></div>

</div>

<div id="footer"><p><strong>footer</strong></p></div>
</div>
</body>

</html>

floatプロパティによる2段組～中央に配置する～背景に画像を指定する

header

side

背景の画像は，container・side・mainのそれぞれのボックスの幅に合わせます。
背景画像を指定すると，段組ボックスの高さが揃うという利点があります。

main

#container {margin:0 auto;
            width:700px;
            text-align:left;
            background:url("2dan_center_bg.gif");}

footer

使用している背景画像

>>> HTMLソース

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>floatプロパティによる2段組～中央に配置する～背景に画像を指定する</title>

<style type="text/css">
<!--
/* ページのレイアウト */

body {margin:0;
	padding:0;
      text-align:center;
      font-size:14px;}
#header{width:700px;}
#container {margin:0 auto;
	width:700px;
      text-align:left;
      background:url("2dan_center_bg.gif");}
#contents {width:700px;}
#side {float:left;
	width:200px;}
#main {float:right;
	width:500px;}
#footer {clear:both;
	width:700px;}

/* ページの基本デザイン */

p {margin:0;}
#header, #footer {
	background-color:#758FEA;}
#contents {line-height:1.5em;}
strong {font:bold 16pt "ＭＳ Ｐゴシック", Osaka, sans-serif;}
-->
</style>
</head>
<body>
<div id="container">

<div id="header"><p><strong>header</strong></p></div>
<div id="contents">

<div id="side">
<p><strong>side</strong></p>
<br>
<p>背景の画像は，container・side・mainのそれぞれのボックスの幅に合わせます。<br>
背景画像を指定すると，段組ボックスの高さが揃うという利点があります。
</p></div>

<div id="main">
<p><strong>main</strong><br>
<IMG SRC="2dan_center_image.gif">
<pre>
#container {margin:0 auto;
            width:700px;
            text-align:left;
            background:url("2dan_center_bg.gif");}
</pre>
</p>
</div>

</div>

<div id="footer"><p><strong>footer</strong></p></div>
</div>
<br>
使用している背景画像<br>
<IMG SRC="2dan_center_bg.gif">
</body>

</html>

floatプロパティによる2段組～サンプル

News

Information

Photo gallery

楽天ダウンロード

＠SOLAショップ

ITOBEN STYLE

>>> HTMLソース

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<META http-equiv="Content-Type" content="text/html; charset=SHIFT_JIS">
<META http-equiv="Content-Style-Type" content="text/css">
<META name="GENERATOR" content="IBM WebSphere Studio Homepage Builder Version 9.0.0.0 for Windows">
<title>floatプロパティによる2段組～サンプル</title>

<style type="text/css">
<!--
/* ページのレイアウト */

body {margin:0;
	padding:0;
      text-align:center;
      font-size:12px;}
#header{width:700px;
        height:50px;
        margin:0;}
#container {margin:0 auto;
	width:700px;
      text-align:left;
      background-color:#ffc4c4;}
#contents {width:700px;}
#side {float:left;
	width:200px;}
#main {float:right;
	width:500px;}
#footer {clear:both;
	width:700px;}

/* ページの基本デザイン */

p {margin:0;}
#header, #footer {
	background-color:#ec0000;
        color:#ffffff;}
#contents {line-height:1.5em;}
strong {font:bold 16pt "ＭＳ Ｐゴシック", Osaka, sans-serif;}

/* menuのデザイン */

.menu{margin:10px;
	border:1px solid #ec0000;
	background-color:#ffffff;}
.menu h2 {margin:0;
	padding:2px 5px;
	color:#ffffff;
	background-color:#ec0000;}
.menu ul {margin:0;
	padding:0 5px 10px 5px;
	list-style-type:none;}
.menu li {padding:2px 0;
	border-bottom:1px dotted #666666;}

/* mainのデザイン */

.main {width:100%;/* IEのバグ対策 */
	margin:10px 10px 10px 0px;
	border:1px solid #ec0000;
	background-color:#ffffff;}
.main h2 {margin:0;
	padding:0.2em 0.5em;
	color:#ffffff;
	background-color:#ec0000;}
p {padding:10px 10px;}
p img {float:left;
	margin:0 10px 10px 0;}
p.date {clear:both;
	text-align:right;}
-->
</style>
</head>
<body>
<div id="container">

<div id="header"><img src="hp004_01.gif" width="700" height="50" border="0"></div>
<div id="contents">

<div id="side">

<!-- メニューの内容 -->
<div class="menu">
<h2>News</h2>
  <ul>
    <li><a href="#">最新情報</a></li>
    <li><a href="#">取材情報</a></li>
  </ul>
</div>;
<!-- メニューの内容 -->

<div class="menu">
<h2>Information</h2>
  <ul>
    <li><a href="#">サイトマップ</a></li>
    <li><a href="#">このサイトについて</a></li>
    <li><a href="#">著作権について</a></li>
  </ul>
</div>
<!-- メニューの内容 -->
<div class="menu">
<h2>Photo gallery</h2>
  <ul>
    <li><a href="#">広州</a></li>
    <li><a href="#">香港</a></li>
    <li><a href="#">バリ島</a></li>
    <li><a href="#">ペナン島</a></li>
  </ul>
</div>

</div>

<div id="main">
<!-- メインコンテンツの内容 -->
<div class="main">
<h2>楽天ダウンロード</h2>
<p><img Src="aaa.jpg" height="120" width="120" Border="0">【楽天ダウンローダ動作環境】<BR>
OS：日本語版 2000(SP4)/XP(SP2)<BR>
※XP Professional 64bit Editionは動作保証対象外となります。<BR>
CPU：PentiumIII　600MHz以上<BR>
メモリ：128MB以上(Windows 2000/XPの場合、256MB以上)<BR>
HDD：インストールには約15MB以上のHDDの空容量が必要となります。<BR>
回線環境：ADSL/CATV/FTTHなどのブロードバンド回線<BR>
※お使いのPCにMicrosoft Internet Explorer 6以降がインストールされている必要があります。</p>
</div>
<!-- メインコンテンツの内容 -->
<div class="main">
<h2>＠SOLAショップ</h2>
<p><img Src="bbb.jpg" height="60" width="120" Border="0">
  50MB以上の容量のソフトウェアをアナログ回線やISDN回線でダウンロードいたしますと、非常に時間がかかります。
従いまして、これら大容量ソフトウェアの購入を希望される場合は、ブロードバンド環境を推奨しております。
ご了承の程、よろしくお願いいたします。<BR>
ソフトウェアを購入後のキャンセルは一切受け付けられませんので、ご注意願います。
購入前に必ず対応OS・動作環境をご確認ください。
対応OS・動作環境については、各商品の詳細画面でご確認いただけます。
</p>
</div>
</div>
<!-- メインコンテンツここまで -->
</div>

</div>

<div id="footer"><p><strong>ITOBEN STYLE</strong></p></div>


</body>

</html>

floatプロパティによる3段組

header　header{width:700px;}

side_left

side_left {
←float:left;
　width:150px;}

main
main {
←float:left;
　width:400px;}

side_right

side_right {
←float:left;
　width:150px;}

footer　footer {clear:both;width:700px;}

>>> HTMLソース

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>floatプロパティによる3段組</title>

<style type="text/css">
<!--
/* ページのレイアウト */

body {margin:0;
      padding:0;
      font-size:14px;}
#header{width:700px;}
#contents {width:700px;}
#side_left {float:left;
	width:150px;}
#main {float:left;
	width:400px;}
#side_right {float:left;
	width:150px;}
#footer {clear:both;
	width:700px;}

/* ページの基本デザイン */

p {margin:10px;}
#header, #footer {
	background-color:#A7A754;}
#contents {line-height:1.5em;}
#main {background-color:#EDEDDA;}
#side_left, #side_right {background-color:#CCCC99;}
strong {font:bold 16pt "ＭＳ Ｐゴシック", Osaka, sans-serif;}
-->
</style>
</head>
<body>

<div id="header"><p><strong>header</strong>　header{width:700px;}</p></div>

<div id="contents">

<div id="side_left">
<p><strong>side_left</strong>
<br><br><br>
side_left {<br>
←float:left;<br>
　width:150px;}<br><br></p>
</div>

<div id="main">
<p><strong>main</strong>
<br>
main {<br>
←float:left;<br>
　width:400px;}
<br><br><IMG SRC="3dan.gif"></p>
</div>

<div id="side_right">
<p><strong>side_right</strong><br>
<br><br>
side_right {<br>
←float:left;<br>
　width:150px;}<br><br></p>
</div>

</div>

<div id="footer"><p><strong>footer</strong>　footer {clear:both;width:700px;}</p></div>

</body>
</html>

段組の背景に画像を指定する

header

side_left

　side_left {
←float:left;
　width:140px;}

３つのボックスを囲むdiv要素のcontentsのマージンを10pxに設定したので，両サイドのボックスの幅は10pxずつ短い140pxに指定しています。

main

　main {
←float:left;
　width:400px;}

【背景画像】
ヘッダ用，フッタ用，container用を700×10pxで作成。
ヘッダ用とフッタ用は，空白部分を背景色と同じにしてあります。

s_right

　side_right {
←float:left;
　width:140px;}

footer

header1.gif

back1.gif

footer1.gif

>>> HTMLソース

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>段組の背景に画像を指定する</title>
<style type="text/css">
<!--
/* ページのレイアウト */

body {margin:0;
	padding:0;
　　　font-size:14px;
      background-color:#ccccff;
	text-align:center;}
#container {margin:10px auto;
	width:700px;
	text-align:left;}
#contents {margin:0 10px;}
#header {width:700px;
	background:url("header1.gif") no-repeat top;}
#side_left {float:left;
	width:140px;}
#main {float:left;
	width:400px;}
#side_right {float:left;
	width:140px;}
#footer {clear:both;
	background:url("footer1.gif") no-repeat bottom;
	width:700px;}
#container {background:url("back1.gif");}

/* ページの基本デザイン */

#header p, #footer p {margin:10px 20px;
	padding:10px 0;border:solid 1px #0094DB;}
#side_left p, #main p, #side_right p {
	margin:10px;
	padding:10px;
      border:solid 1px #0094DB;}
strong {font:bold 16pt sans-serif;}
-->
</style>
</head>
<body>
<div id="container">

<div id="header"><p><strong>header</strong></p></div>

<div id="contents">

<div id="side_left">
<p><strong>side_left</strong>
<br><br>
　side_left {<br>
←float:left;<br>
　width:140px;}
<br><br>３つのボックスを囲むdiv要素のcontentsのマージンを10pxに設定したので，
両サイドのボックスの幅は10pxずつ短い140pxに指定しています。</p>
</div>

<div id="main">
<p><strong>main</strong>
<br><br>
　main {<br>
←float:left;<br>
　width:400px;}
<br><br>
【背景画像】<br>
ヘッダ用，フッタ用，container用を700×10pxで作成。<br>
ヘッダ用とフッタ用は，空白部分を背景色と同じにしてあります。<br>
<IMG SRC="header-footer.gif"></p>
</div>

<div id="side_right">
<p><strong>s_right</strong><br>
<br><br>
　side_right {<br>
←float:left;<br>
　width:140px;}</p>
</div>

</div>

<div id="footer"><p><strong>footer</strong></p></div>

</div>
<IMG SRC="header1.gif"><br>header1.gif<br><br>
<IMG SRC="back1.gif"><br>back1.gif<br><br>
<IMG SRC="footer1.gif"><br>footer1.gif

</body>
</html>

Windows Vista