角丸にチャレンジ – 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 です。

<div class="dialog">

  <div class="header">
      <div class="c"></div>
  </div>

  <div class="body">
      <div class="c">
          <-- main content goes here -->
      </div>
  </div>

  <div class="footer">
      <div class="c"></div>
  </div>

</div>

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

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

rouded-corners-1-5.png

.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;
}

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

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

About this entry

Published:
06.08.15 / 12am
Category:
webdesign, design
Tags:
No tags for this post.
Response:
5 comments | 1 trackback
Bookmark:
add to hatena hatena.comment 45 users add to del.icio.us 21 users add to livedoor.clip 9 users

関連するエントリ

  • No related posts.

Navigation

|