角丸にチャレンジ – GIF画像+CSS編

もはや「Web2.0デザイン」といえば外すことが出来ない角丸(Rounded Corners)。実現させるにはいろいろな方法がありますが、今回は CSSで角をもっと丸くする方法いろいろ – GIGAZINE で紹介されている方法にチャレンジしてみました。

» More Rounded Corners with CSS – Schillmania.com

まずは、利用する角丸の画像を作成。Fireworks でやってみます。

  1. 角丸矩形角丸矩形で横幅が1600pxぐらいの角丸矩形を描画します。

    rouded-corners-1-2.png

  2. スライスツールスライスツールを使って以下のように6つのスライスを作成します。

    rouded-corners-1-2.png

  3. [最適化]パネルで書き出すファイル形式を「GIF」にして、書き出しを実行します。すると、6つのGIFファイルが作成されます。

    rouded-corners-1-3.png

    rouded-corners-1-4.png

これで画像の用意ができました。次に HTML と CSS です。

[cc lang="html"]

<-- main content goes here -->

[/cc]

ご覧のとおり、header、body、footer のそれぞれのdivの中に c というクラスのdivを用意します。各 div の背景画像に先ほど用意したGIF画像を設定していきます。

こんなイメージです。わかりますかね?こういうのを「Sliding door (引き戸、障子)」メソッドというらしいです。

rouded-corners-1-5.png

[cc lang="css"]
.dialog {
width:250px;
}
.dialog .header .c,
.dialog .footer .c{
font-size:1px; /* ensure minimum height */
height:13px;
}
.dialog .header{
background:transparent url(rc_r1_c1.gif) no-repeat 0px 0px;
}
.dialog .header .c{
background:transparent url(rc_r1_c2.gif) no-repeat right 0px;
}
.dialog .body{
background:transparent url(rc_r2_c1.gif) repeat-y 0px 0px;
}
.dialog .body .c{
background:transparent url(rc_r2_c2.gif) repeat-y right 0px;
}
.dialog .footer{
background:transparent url(rc_r3_c1.gif) no-repeat 0px 0px;
}
.dialog .footer .c{
background:transparent url(rc_r3_c2.gif) no-repeat right 0px;
}
[/cc]

c の背景を全部右寄せにするのがポイントかな。

こちらができあがりのサンプル。けっこうカンタンに出来ました。

角丸にチャレンジ – GIF画像+CSS編」への6件のフィードバック

  1. Alextwcys

    Hello, my name is Alex, i’m a newbie here. I really do like your resource and really interested in things you discuss here, also would like to enter your community, hope it is possible:-) Cya around, best regards, Alex!

    返信
  2. ピンバック: Jungle Java

  3. Shapoklyag

    Добрый день! Я пишу это сообщение от лица главоря семьи. Но кое-кто этому факту не доволен. Причина этого проста – ведь я женщина! А как правило, женщина не может и не должна занимать такое положение в семье. Хочу провести опрос и узнать ваше мнение. Всю полученную информацию я помещу на Нижегородский Семейный сайт, [url=http://nnfamily.ru]nnfamily.ru[/url] Там я разделю результаты по географическому принципы и отмечу на карте тенденции мнений по данному вопросу! Интересно же ) Кто же прав ?:)

    返信

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>