画像を使用せずに角丸ブロックを実現する方法

俗に角丸テーブルなどと呼ばれる装飾法がある。その必要がどこにあるのかは良くわからないが需要は高いらしい。しかしそれだけの為にtableを使うのは敬遠されがちだ。その代替手段としてdivを使用した方法もあるが、やはり画像を利用しなければならない為に面倒に感じる人や、装飾の為だけにdivを用いるのを嫌がる人も存在する。私もその中の一人だ。そこまでして角を丸くして得られるものがあるのか疑問だったので放置していたのだが、先日 Nifty Corners というページを見つけた。翻訳とは違うが自分なりに理解した事を書き連ねてみる。誤読も省略も多いであろう事を先に宣言しておきます。正確な情報が欲しい場合はリンク先の説明をお読み下さい。そして以下の説明に大きな誤りがある場合は知らせて頂ければ嬉しいです。

さて、画像を使用せずに角を丸く見せる方法ですが、細かい説明は省きます。なぜそうなるのかはソースを見て理解してください。id名なども変更していますし日本語やマークアップも少しおかしくなりますがご了承下さい。ファイル名やソースなどを変更しているのはわかりやすくする為でもあり、また、どこを変更しても良いのかを示す為でもあります。それでは先ずはDOM（もしくはJavaScript）を利用しない場合の方法です。

<div id="outer">

<span class="rtop">
<span class="r1"></span>
<span class="r2"></span>
<span class="r3"></span>
<span class="r4"></span>
</span>

<div id="inner">
<h1>タイトル</h1>
<p>ここに内部コンテンツを記入します。</p>
</div>

<span class="rbot">
<span class="r4"></span>
<span class="r3"></span>
<span class="r2"></span>
<span class="r1"></span>
</b>

</div>

span.rtop{display:block;background: #fff;}
span.rbot{display:block;background: #fff;}

span.rtop span{display:block;height: 1px;
    overflow: hidden; background: #69f;}
span.rbot span{display:block;height: 1px;
    overflow: hidden; background: #69f;}

span.r1{margin: 0 5px;}
span.r2{margin: 0 3px;}
span.r3{margin: 0 2px;}

span.rtop span.r4{margin: 0 1px;height: 2px;}
span.rbot span.r4{margin: 0 1px;height: 2px;}

div{background: #69f;}

基本的にはこれだけで 実現 できますが、外のdivの背景色と内部のdivの背景色の背景色を揃えたり、span.rtopやspan.rbotとその親要素（おそらくbody）の背景色を揃えたりしなければなりません。少し値を変更してみればどこに対応しているか直ぐに判断できるでしょう。参照先のページでは<b>を用いていますがここでは<span>を用いました。これはインライン要素ならば何でも良いようですが、emやstrongなどだと他のCSSが適用されている可能性があるので、普通はまず用いられない<b>を用いているようです。実際に利用する際は使用しないインライン要素を用いるのが良いようです。ちなみに外側のdivや内部の要素にもCSSは適用できますので自由に装飾が可能です。

本当はもうこれで終了なのですが、これだとまだ内部要素によって崩れるなど色々と問題があるようです。どのような問題なのかは割愛しますが、それほどの問題ではないような気がします。またこれは IE6,Opera7.6,FireFox1.0,Safari1.1 MacIE では動くようですが IE 5.x では動かないようです。まあ個人的にはこれだけでも満足なのですが、無用な要素を記述しなければいけない点と合わせるとやや使用には耐えられないと思うので、DOMを利用したスマートな方法も紹介します。当然の事ながらJavaScriptがオフの環境では角は丸くなりませんが、それによって崩れる事もないようです。margin や padding の取り方に注意しないと崩れる事もあるようでした。

その方法には二つのCSSファイルと一つのJavascriptを必要とします。

• corner.css
• print.css
• corner.js

そしてこれらのファイルをhead内で以下のように外部から呼び出します。ファイル名は何でも構いませんが、当然のように揃えるようにして下さい。呼び出す順番が関係あるのかは検証していませんが、特に変更する理由がない限りはこのままにしましょう。

<link rel="stylesheet" type="text/css" href="corner.css">
<link rel="stylesheet" type="text/css" href="print.css" media="print">
<script type="text/javascript" src="corner.js"></script>

さてこれで準備は整いました。呼び出すJavaScriptの内容は私にはあまり理解できていません。とりあえずはIE5.x PCを除く判定をし、色々なパラメータ？を吐き出している様ですが、それを新たに指定するためにもう一つのJavaScriptが必要になるそうです。また、セレクタの種類や使用できるidやclassにもある程度の制限があるようなのですが、詳しくはわかりませんでした。複雑なものを用いらなければ平気だと思われます。まあ使用できるのはタイプセレクタ、クラス（class）セレクタ、一意（id）セレクタ、簡単な条件下の子孫セレクタという事だと思います。

それではここからはその新たに必要なJavaScriptの書き方を場合別に例示します。その前にJavaScriptの共通部分の説明をしますと以下のようなJavaScriptを挿入することになります。

<script type="text/javascript">
window.onload=function(){
if(!NiftyCheck())
    return;
/* ここに場合別に記入するソースが入ります */
}
</script>

これは埋め込み型ではなく、外部から呼び出しても良いようです。それでは例をどうぞ。

単純な角丸

Rounded("div#outer","#ccffff","#6699ff");

<div id="outer">
<h1>画像無しで角丸装飾</h1>
<p>ここでは画像を使用しないで角を丸く見せる方法の解説をしています。</p>
<h2>例えばここが小見出し</h2>
<p>おそらく要素は何でも使用できると思います。</p>
<p>ソースを見ればどの部分が重要なのかがわかるようにする為に余計な装飾部分は省いています。これ以後のサンプルではdivのid名などには手を加えていません。</p>
<p>装飾はあくまでもオマケであって、大事なのはJavaScriptの部分です。最初に適用させるボックスを指定して、その背景色を順に指定しています。どちらの色をどこと合わせなければならないのかは続けて書かれているCSSと比べれば容易に判断できるでしょう。</p>
</div>

これが全ての基本です。段々と説明や改変が面倒になってきたので次の例からはサンプルをそのまま使用させて頂きますが、余計な装飾部分をなるべく省いています。しかし何がどう影響するのかはCSSを見れば一目瞭然なのでそこまで厳密に手を加えていません。ソースも実際のファイルから読み取って下さい。レイアウトが崩れている可能性もありますが、それは本質とは関係ないので無視します。

divを二つ

Rounded("div#content","#fff","#9DD4FF");
Rounded("div#nav","#fff","#E5FFC4");

小さな角丸

Rounded("div#header","transparent","#C3D9FF","small");
Rounded("div#box","#FFF","#E4E7F2");

上下で違う色の角丸

RoundedTop("div.news","#FFF","#91A7E3");
RoundedBottom("div.news","#FFF","#E0D6DF");

角丸部分を透過させたタブメニュー

RoundedTop("div#nav li","transparent","#E8F0FF");

説明の上ではタブメニューである必要はないのですが、新たなサンプルを書く気力が無いのでそのままにしてあります。ポイントはタブメニューではなくて背景に画像を用いた場合にtransparentで透過する所にあります。

もう二つほどサンプルはあるのですが、説明が必要だとは思えないので割愛させて頂きました。参照先を見れば直ぐに理解できると思いますし、基本を応用するだけで目新しい物はありません。

どのようなCSSを適用させるのか、どのように利用するのかは割りと自由に設定できるようです。基本的には角を丸くしたいブロックを指定して背景色を指定しているだけなのでそう難しくはありません。最後に一連の流れをまとめておきます。

1. DOMを使用しない方法があるが、余計なソースを記入しなければならないのと幾つかの環境では使用できない問題がある
2. そこでDOMを利用して実現させる
3. 先ずは corner.css print.css corner.js の三つを用意する。
4. 角丸を適用させたいページで上記三ファイルを

   <link rel="stylesheet" type="text/css" href="corner.css">
   <link rel="stylesheet" type="text/css" href="print.css" media="print">
   <script type="text/javascript" src="corner.js"></script>
   

   のようにして呼び出す。
5. 新たにJavaScriptを書いて細かい設定を行う

これだけです。説明の便宜上新たに指定するJavaScriptはHTMLファイルに埋め込みましたが外部指定でも平気なようです。またそれは別途装飾用のCSSファイルも同様です。新しく指定する全てのJavaScriptを一つのファイルにまとめておくことも出来るようなので、そうすれば後からの変更も容易になるでしょう。

ハッキリ言って翻訳は適当ですし、説明の為に改変したファイルが全ての環境で上手く動作しているかどうかは不明です。正確な情報が欲しい場合は Nifty Corners から得て下さい。

あまりにも拙い説明で申し訳ありませんが、なんとなくわかって頂けたのではないかと思います。わからない事がある場合にはコメント欄にでも書いて頂ければ時間の許す限りわかる範囲でお答えしたいと思います。それでは最後までお付き合い頂いてありがとうございました。

現状で気がついた問題点

• margin や padding の取り方に注意しないとJavaScriptのオンとオフとで表示が若干異なる場合もある。
• 角を丸くしたボックスに対してpaddingを指定するとややこしい事になる。
• あまり細かい要素に使用するには向かない。
• つまり他の要素を内包する位の大きさのボックスが望ましい。
• <h1> や <p> などにも指定できるが padding を指定しないとJavaScriptをオフにした時に読み難い。
• <p><span>段落</span></p>などとすれば良いかもしれないが美しくない。
• heightを指定するのにも注意が要る。
• 画像を用いた方が早い

反省（2005年10月16日01時10分）

随分と前に語り尽くされた話題のようですね。自分で Google博士に訊いてみよう とか言っておきながらなにやってるんだか。

• Nifty Corners
• Nifty Cornersについて考える - 徒書

Nifty Corners の発展版もあるようです。

• Nifty Corners++
• Nifty Corners++ Update