Webページを作成する際、分類表示用のタグを使用するのが一般的ですが、角丸タグはスタイルが美しく鮮やかな表現ができるというメリットがあります。これは、ラベル テキストの単語数が変化した場合 (図 1 を参照)、それに応じて固定背景画像を拡張することはできません。このように、幅の異なる背景画像を多数作成する必要があり、非常に不便です。展開可能な角丸ラベルを作成する 2 つの方法を次に示します。
図 1
ストロークの丸みを帯びたラベル
図 1 に示すように、丸いラベルの端は背景色と異なります。まず、Photoshop で背景画像を作成する必要があります (図 2)。画像の幅は、可能なテキストの長さよりもわずかに広くなります。高さは少なくとも実際のラベルと同じであり、エッジはストロークの色に設定され、内側は透明ですが、丸い角の外側の領域は透明に設定できず、ページの背景色で塗りつぶされる必要があります。ここでは白を使用し、tab_bg.gif という名前を付けます。
図2
コードは次のとおりです。
以下は引用部分です。
<style type="text/css">
a.tab{ float:left; マージン:10px; 背景:#4B90C6 url(tab_bg.gif) フォント:bold 14px/30px 'Verdana'; }
a.tab スパン{padding-left:10px;background:url(tab_bg.gif) no-repeat;}
</スタイル>
<body bgcolor="#FFFFFF">
<a href="#" class="tab"><span>ホームページ</span></a>
<a href="#" class="tab"><span>プロフィール</span></a>
<a href="#" class="tab"><span>ゲストブック</span></a>
</body> |
コードの説明: 1. 実装のアイデアは、ラベルの右側の背景を <a> タグに設定し、ラベルの左側の背景を <span> タグに設定して、丸みを帯びたラベルの拡張を実現することです。
2. この方法では、背景画像をダウンロードするだけで、ラベルの両側で背景が同期して表示されない問題は解決されます。ただし、ラベル内の単語数が背景画像の幅を超える場合、問題が発生します。 (図 3 に示すように) ため、背景画像を作成する場合、画像の幅はできるだけ長い文字幅を考慮する必要があります。
図3
単色の角丸ラベル
上記の場合、ストローク効果を実現する必要があるため、テキストは背景の幅内でしか拡大できず、一定の制限があります。単色の角丸ラベルの場合は、完全に展開できます (図 4)。
図4
初めて使用する背景画像の左側と右側をそれぞれ背景画像に切り取り (図 5 を参照)、それぞれに tab_left.gif と tab_right.gif という名前を付けます。
図5
コードは次のとおりです。
以下は引用部分です。
<style type="text/css">
a.tab{ float:left; マージン:10px; 背景:#033EA5 url(tab_right.gif) フォント:bold 14px/30px 'Verdana'; }
a.tab スパン{padding-left:10px;background:url(tab_left.gif) no-repeat;}
</スタイル>
<body bgcolor="#FFFFFF">
<a href="#" class="tab"><span>ホームページ</span></a>
<a href="#" class="tab"><span>プロフィール</span></a>
<a href="#" class="tab"><span>ゲストブック</span></a>
</body> |
コードの説明:
1. <a> と <span> に異なる背景を使用し、リンクの背景色をストロークの色に設定して、モノクロのラベル効果を実現します。
2. この方法では任意の拡張効果を実現できます。
