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


売れ筋ソフトベスト10
WinIE
5.05.56.0
WinNS
4.x6.x7.x
WinOpera
6.07.x8.0
winFirefox
1.x
MacSafari
1.x2.0
MacNs
4.x6.x7.x
MacOpera
6.07.58.0
MacFirefox
1.x
【下記CSSのブラウザ対応】 バージョンがグレーで表示されているブラウザは対応していません。表示は一部対応です。
floatプロパティによる2段組

header

side

body {margin:0;
      padding:0;
      font-size:14px;}
マージンを0に指定することで,それぞれの要素の隙間をなくします。パディングを0にしておくのは,Operaでの初期設定のパディングをなくすためです。(ブラウザによって初期設定が違うので,マージンとパディングは0に設定します。

main

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

    #contents {width:700px;}
    #side {float:left;
           width:200px;}
    #main {float:right;
           width:500px;}
p要素のマージンを0にしておくことで,上下のボックスの間に余白ができる(Firefoxで表示したとき)のを防ぎます。

footer

>>> 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要素のマージンを0にしておくことで,上下のボックスの間に余白ができる(Firefoxで表示したとき)のを防ぎます。

footer

>>> 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ソース
floatプロパティによる2段組〜サンプル

楽天ダウンロード

【楽天ダウンローダ動作環境】
OS:日本語版 2000(SP4)/XP(SP2)
※XP Professional 64bit Editionは動作保証対象外となります。
CPU:PentiumIII 600MHz以上
メモリ:128MB以上(Windows 2000/XPの場合、256MB以上)
HDD:インストールには約15MB以上のHDDの空容量が必要となります。
回線環境:ADSL/CATV/FTTHなどのブロードバンド回線
※お使いのPCにMicrosoft Internet Explorer 6以降がインストールされている必要があります。

@SOLAショップ

50MB以上の容量のソフトウェアをアナログ回線やISDN回線でダウンロードいたしますと、非常に時間がかかります。従いまして、これら大容量ソフトウェアの購入を希望される場合は、ブロードバンド環境を推奨しております。ご了承の程、よろしくお願いいたします。
ソフトウェアを購入後のキャンセルは一切受け付けられませんので、ご注意願います。購入前に必ず対応OS・動作環境をご確認ください。対応OS・動作環境については、各商品の詳細画面でご確認いただけます。

ITOBEN STYLE

>>> 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ソース
段組の背景に画像を指定する

header

side_left

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

3つのボックスを囲む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ソース
Windows Vista

つくろう!魅せよう! スッキリかんたんスタイルシート〜基本 スッキリかんたんスタイルシート〜文字 スッキリかんたんスタイルシート〜色と背景 スッキリかんたんスタイルシート〜リンク スッキリかんたんスタイルシート〜ボックス スッキリかんたんスタイルシート〜配置 スッキリかんたんスタイルシート〜リスト スッキリかんたんスタイルシート〜表 スッキリかんたんスタイルシート〜いろいろ スッキリかんたんスタイルシート〜HP構成
Copyright(C)1997. itoben style. All Rights Reserved.