制作者の活動(PR)。

アイドル・堀北真希ちゃんをうさぎ化した女子大生キャラクタ
主な作品

アイドルをモデルにした創作キャラクタを用いたイラストの一例とアニメーション動画

ブロックの四隅を丸くするには。

CSSの小技として、ブロックの四隅を丸くする方法です。

ブロックの四隅を丸くするには・目次。

ブロックの四隅を丸くするには。

現状では奨められるものではありません。

現状、CSSのbackground-imageプロパティでは、一つの画像しか指定する事が出来ません。

このため、どうしても現行の仕様及び実装の元では、最低四重に汎用ブロックレヴェル要素でマークアップしなければなりません。

制作者には、そこまで面倒な事をする必要があるのかとしか思えず、依ってブロックの四隅を丸くする小技は、余りお奨めする気にはなれません。

この方法は、当然ながら、ネットスケープ 4.xでは不可能です。

実際にどうするのか。

1. まず、周りの背景色と、ブロック内の背景色を明確にし、それに合わせた角の丸い画像を用意します。

ここでは、回りの背景色を白(#ffffff)、ブロック内の背景色を薄緑色(#d0ffd0)として話を進めます。

この場合、用意する画像は以下の四つです。

2. 続いて、四隅を丸くしたいブロックを、以下のように<div>要素で四重にマークアップします。
<div id="main1"><div id="main2"><div id="main3"><div id="main4">
    (ブロックの内容)
    </div></div></div></div>

尚、<div>要素を使う事で、内容はブロックレヴェル要素となりますが、それでも内容となるコンテンツは<p>要素など適切にでマークアップしておきましょう。

そうしておく事で、CSSに依る装飾効果が期待出来ない環境でも、適切に読めるようになるでしょう。

3. CSSでは、四つの<div>要素に対して以下のように作ります。
div#main1 {
    background: #d0ffd0 url("RoundCorners_LU.GIF") 0 0 no-repeat;
    margin: 0;
    padding: 0;
    }

div#main2 {
    background: transparent url("RoundCorners_LB.GIF") 0 100% no-repeat;
    margin: 0;
    padding: 0;
    }

div#main3 {
    background: transparent url("RoundCorners_RU.GIF") 100% 0 no-repeat;
    margin: 0;
    padding: 0;
    }

div#main4 {
    color: #000;
    background: transparent url("RoundCorners_RB.GIF") 100% 100% no-repeat;
    margin: 0;
    padding: 1em;
    }

ここで重要なのはbackgroundプロパティの値です。

一番外側の<div>要素には予め決めてある背景色(background-colorプロパティ)を指定しておりますが、二番目以降ではtransparent値、すなわち透明を指定しております。

これは、透明にしておかないと外側で指定したある隅の背景画像が内側で指定した背景色で塗り潰されてしまうからです。

また、画像はそれぞれbackground-repeatプロパティ値としてno-repeat値を指定して、一個のみの表示とします。

勿論、background-positionプロパティ値も適切な値となっている事が必要です。

また、marginプロパティの値は一番外側を除いて全て0に、marginプロパティの値はは一番内側を除いて全て0にしなければなりません。

こうしないと、崩れてしまうからです。

実際に対応しているユーザエージェントで表示させると、以下のようになります。

しらぎくのウェブサイト作成入門サイトマップ

ページ外へのご案内。

marguerite.site@gmail.com