[PR]さくらのレンタルサーバ ライト
下の画像のような背景画像のある丸コーナーのボックスを表示させるCSSが紹介されています。



設置方法は以下のとおり。

まずは、CSSに以下のコードを記述します。

/*TeachMeJoomla'sﾂ flexible rounded corners module CSS*/
ﾂ/*image setup */
ﾂdiv.module-green, div.module-green div{
ﾂbackground:ﾂ url('images/rounded_green.jpg');ﾂ /* 背景に使う画像 */
ﾂ}
ﾂ/*replaced with TeachMeJoomla's single image technique*/
ﾂ div.module-green
ﾂ{
ﾂpadding: 0px 0px 0px 0px;
ﾂmargin:0px 0px 0px 0px;
ﾂbackground-repeat:no-repeat;
ﾂbackground-position:bottom left;
ﾂheight:1%;
ﾂwidth:auto;
ﾂ}
ﾂ div.module-green div
ﾂ
ﾂ{
ﾂmargin:0px 0px 0px 13px;
ﾂbackground-repeat:no-repeat;
ﾂbackground-position: bottom right;
ﾂpadding: 0px 0px 13px 0px;
ﾂwidth:auto;
ﾂ}
ﾂdiv.module-green div div
ﾂ{
ﾂﾂ background-position: top right;
ﾂﾂﾂﾂ margin: 0px 0px 0px 0px;
ﾂﾂﾂﾂ padding: 0px 0px 0px 0px;
ﾂ}
ﾂdiv.module-green div div div
ﾂ{
ﾂﾂ margin:0px 13px 0px -13px;
ﾂﾂ background-position: top left;
ﾂﾂ padding: 13px 0px 0px 13px;
ﾂ}
ﾂ/*reset nested divs*/
ﾂ div.module-green div div div div
ﾂ{
ﾂpadding:0px 0px 0px 0px;
ﾂmargin:0px 0px 0px 0px;
ﾂﾂ background:none;
ﾂﾂﾂﾂ background-image: none;
ﾂﾂﾂﾂ background-position: top left;
ﾂﾂﾂﾂ background-repeat: repeat;
ﾂﾂﾂﾂ background-color: transparent;
ﾂﾂﾂﾂ width:100%;
ﾂ}

そして、HTMLでは以下のように記述すればOKです。

<div class="module-green">
ﾂﾂﾂﾂﾂﾂ <div>
ﾂﾂﾂﾂﾂﾂﾂﾂ <div>
ﾂﾂﾂﾂﾂﾂﾂﾂﾂﾂ <div>
ﾂﾂﾂﾂﾂﾂﾂﾂﾂﾂ <p>
ﾂﾂﾂﾂﾂﾂﾂﾂﾂﾂ Look! I'm a flexible rounded corners box
ﾂwith 1 single background image!
ﾂﾂﾂﾂﾂﾂﾂﾂﾂﾂ here's more HTML
ﾂﾂﾂﾂﾂﾂﾂﾂﾂﾂ </p>
ﾂﾂﾂﾂﾂﾂﾂﾂﾂﾂ <ul>
ﾂﾂﾂﾂﾂﾂﾂﾂﾂﾂﾂﾂ <li>item</li>
ﾂﾂﾂﾂﾂﾂﾂﾂﾂﾂﾂﾂ <li>item</li>
ﾂﾂﾂﾂﾂﾂﾂﾂﾂﾂﾂﾂ <li>item</li>
ﾂﾂﾂﾂﾂﾂﾂﾂﾂﾂﾂﾂ <li>item</li>
ﾂﾂﾂﾂﾂﾂﾂﾂﾂﾂ </ul>ﾂﾂﾂﾂﾂﾂﾂﾂﾂ
ﾂﾂﾂﾂﾂﾂﾂﾂﾂﾂ </div>
ﾂﾂﾂﾂﾂﾂﾂﾂ </div>
ﾂﾂﾂﾂﾂﾂ </div>
ﾂ</div>

主要ブラウザ(IE6, IE7, Firefox, Opera)で動作を確認できているとのことです。また、確認していませんが、モジュールにも設定できるようです。

• 元記事: CSS Flexible rounded corners box with one (single) background image

次 >