第4回　角丸作りの基本と背景パターンを併用したCSS

解説：矢野りん

背景パターンを白抜きしたスタイルでシンプルにまとめた。トーン違いの同一色相による配色で、囲み全体が一体感のある部品に見えるよう工夫した。また、パターン部分と角丸の部分がうまくなじむように、角丸画像のサイズ設定に気をつけた。

角丸作りの基本は「div」や「p」のようにボックスを形作るタグを適切に構成することから。【図１】をみてみよう。一番最初のクラス「rbox」は囲みの上部に付けたグラデーションを表示するための領域だ。グラデーションはこの部分の背景になっている。

次は角丸画像を配置するためのクラス「rtop」を指定した「div」タグが出てくる。クラス指定したほうが右上、「rtop」と入れ子になっているのが左上の角丸画像になる。CSS作成の注意点としては、角丸用の各divタグには角丸画像のサイズに合わせてボックス領域の幅と高さを与えてやること。この領域にはとくに文字が入るわけではないので、サイズを指定しないと画像の表示が欠けてしまう。この点には注意が必要だ。

画像の構成は【図2】の通り。ポイントは角丸本体以外の色を、ページ全体の背景に指定したパターンの基調色と同じ色で塗ることだ。当然この部分はパターンが切れてしまうことになるが、【図3】のように角丸のサイズを10ピクセル程度の控えめなスタイルにとどめれば、四隅のパターンが切れるポイントはほとんどわからない。囲み上部の箇所だけ背景と角丸の色が非常に似通っているので作成しにくいが、囲みの部分はヌキの状態であるため、表示結果としてはくっきりと角丸が見える状態になる。画像は角マルの部分と背景色を微妙に変えている。【図2】に部品としてみると違いがわかりにくいが、角丸として適応されると意外とはっきり角がわかる。

角丸は非常に装飾的な印象を与えやすいスタイルだが、CSSで実現すればベースのタグ構成は驚くほど単純化できる。

実際サイトで活用する際はトピックスなど並列列挙型リストと併用することも考えられる。一度作れば使い回しがきく便利なスタイルだ。

 

 

 

 

次回へつづく