増減可能な角丸ボックスを作成する

角丸ボックスを作るはJavaScriptを使ったり、画像のみで表現したりといくつか方法がありますが、ここではテーブル要素を使用した角丸ボックスを紹介します。

ここで紹介する角丸ボックスは文字の増減に合わせて、縦には自由に増減しますが、横方向のサイズは画像に合わせて固定幅になるので注意して下さい。
まず、上と下の角が丸い画像２点と、その幅にあわせた横線の画像を用意します。サンプルでは２種類の画像を使用しています。 続いて、HTMLで縦3行のテーブルを記述し、上と下に画像を挿入し、真ん中に文章を入れるようにしてあります。詳しくは下記のサンプルを参照して下さい。
もちろん、文章でなくても構いませんし、画像やタイトルなども挿入することができますので、アイデア次第でいろいろな使い道はあると思います。

デザインサンプル

テキストが入ります。テキストが入ります。テキストが入ります。
テキストが入ります。テキストが入ります。テキストが入ります。
テキストが入ります。テキストが入ります。
テキストが入ります。テキストが入ります。
テキストが入ります。テキストが入ります。
テキストが入ります。テキストが入ります。
テキストが入ります。テキストが入ります。
テキストが入ります。テキストが入ります。

サンプルCSSコード

.waku-397 {
　　width: 397px;
　　border: 0;
}

.waku-397 td {
　　background:url(img/waku397-02.gif);
　　text-align: center;
}

.waku-250 {
　　width: 250px;
　　border: 0;
}

.waku-250 td {
　　background:url(img/waku250-02.gif);
　　text-align: center;
}

サンプルHTMLコード

<table cellspacing="0" class="waku-397">
　　<tr><td><img src="../img/waku397-01.gif"></td></tr>
　　<tr><td><テキストが入ります。テキストが入ります。テキストが入ります。</td></tr> 　　<tr><td><img src="../img/waku397-04.gif"></td></tr>
</table>

<table cellspacing="0" class="waku-250">
　　<tr><td><img src="../img/waku250-01.gif"></td></tr>
　　<tr><td>テキストが入ります。テキストが入ります。</td></tr>
　　<tr><td><img src="../img/waku250-03.gif"></td></tr>
</table>

Stylesheet Designguide MENU

Copyright (C) スタイルシートデザインガイド All Rights Reserved.