画像で影付きの角丸テーブルを作る方法

現在ホームページリニューアル中なんですがコンテンツに幅が可変の影付きで角丸のテーブルをつけることにしました。

■設置対象ページ

今回はホームページ制作のフロー詳細を素敵なテーブルで作っていきたいと思います。

■必要な物

1.テーブル用画像

2.CSS

3.やる気

1と2につきましてはチュートリアルを書きますが3については何とかしてください。

それではまず画像を作りましょう。

サイズは幅が可変ですので特に気にしなくてもOKですが、実際設置するページに配置するのが良いでしょう。

1.Photoshopの角丸矩形ツールで上記のように角丸矩形を描きます。

（今回は半径6pxで作成しました）

2.グラデーション・ドロップシャドーを追加

3．画像を刻む

7つに刻んで保存

・上左・・・tl.png

・上右・・・tr.png

・中左・・・ml.png

・中右・・・mr.png

・下左・・・bl.png

・下右・・・br.png

・中央・・・ms.jpg

CSSを書き込む（iG:Syntax Hiliterがうまくいかないので見にくくてすいません）

.dialog {

width:80%;

margin:0px auto;

min-width:20em;

max-width:500px; /* お好みにより編集してください */

color:#333;

width:expression(document.body.clientWidth > 502? “500px” : “auto”);

}

.dialog .hd .c,

.dialog .ft .c {

font-size:1px;

height:18px;

}

.dialog .ft .c {

height:14px;

}

.dialog .hd {

background:transparent url(images/tl.png) no-repeat 0px 0px;

margin-right:19px; /* 右角スペース */

}

.dialog .hd .c {

background:transparent url(images/tr.png) no-repeat right 0px;

margin-right:-18px; /* 上余白からの引き込み */

}

.dialog .bd {

background:transparent url(images/ml.png) repeat-y 0px 0px;

margin-right:18px;

}

.dialog .bd .c {

background:transparent url(images/mr.png) repeat-y right 0px;

margin-right:-18px;

}

.dialog .bd .c .s {

margin:0px 10px 0px 9px;

background:#ededed url(images/ms.jpg) repeat-x 0px 0px;

padding:1em;

}

.dialog .ft {

background:transparent url(images/bl.png) no-repeat 0px 0px;

margin-right:18px;

}

.dialog .ft .c {

background:transparent url(images/br.png) no-repeat right 0px;

margin-right:-18px;

}

/* テーブル内コンテンツ */

.dialog h1 {

/* ヘッダー */

font-size:2em;

margin:0px;

padding:0px;

margin-top:-0.6em;

}

p {

font-family:Arial, ‘ＭＳ Ｐゴシック’, sans-serif;

}

.dialog p {

margin:0.5em 0px 0px 0px;

padding:0px;

font:0.95em/1.5em Arial, ‘ＭＳ Ｐゴシック’, sans-serif;

}

html>body .dialog pre {

font-size:1.1em;

}

完成系はこんな感じです。

めんどくさいという人はここから全部ダウンロードしてください。

パスワードは『castage』です。