Webデザイン基礎知識・Web製作支援サイト｜小道具屋｜

角丸ってどうやって作るの？

注：グラフィックソフトFireWorksMXのキャプチャー画面です。他のグラフィックソフトにも同じような機能があるかと思われますので取説で確認してください。

macromediaFireWorks（以下FW）では角丸短形ツールで、幅1px、柔らかい線、角丸半径30pxにて左記のような線を描きます。（今回は分かりやすいように半径30pxにて描いていますが、お好きなサイズにて書いてください）

左記のようにスライスを切るのですが、コーナー半径が30pxにて設定した場合はコーナー部分は30pxにて切りましょう。ここまで出来れば後は書き出してページに貼り付ければ完成です。書き出すさいには透過gifにて書いた方が背景とのマッチングがありますので適所変更してください。

で、出来上がったのが左記の物です。

もう一つ角丸の作り方として、円を描いてそれを縦横の4分割にする方法がありますが慣れるまでは上記の方法のほうがやりやすいです。

さて、左記の角丸を見て頂ければ分かるように隙間が出来てしまっています。これじゃカッコ悪いですよね。
文字の数によって大きくなったり、小さくなったりの、可変にしてみましょ。

縦の画像（便宜上、[1]、[2]と名前にしています）元の[1]の画像の大きさは15x170になっています、170px以上の文字の数（量）を超えてしまうと隙間が出来てしまうので、縦の画像を大きく作り直します。（今回は300pxにしてみました）
ただ作り直した画像だけを入れ替えただけでは、縦に長い角丸になってしまいます。 縦の画像だけをbackground（背景）にしてしまうことで伸縮する角丸が出来上がります。

尚、background属性はIE、ネスケの独自タグなのでW3C的には推奨されていませんので、CSSでbackground指定します。

最後に、backgroundに画像を置いたときにそのテーブルに文字や画像が無い場合Netscape4.xxでは表示しません。縦線の無い角丸になってしまうので、1x1の透過gifを貼り付けることで回避出来ます。