【CSS】CSS3による枠線の新しい表現方法

css3-border-design

CSS3より定義された「Border Radius」「Border Image」を使うことで角丸のボックスや、罫線の装飾によってこれまで画像で作成していた要素をCSSのみでデザインすることができるようになりました。

角丸(border-radius)

border-radius-img

「border-radius」を使うと背景要素の角に丸みをつけることができます。

CSSの書き方は下記の通りです。左上・右上・右下・左下と個別に設定ができます。

設定する値は丸みの半径の長さ、またはパーセンテージで指定をします。

設定値を1つにすると円の半径(正円)になります。

設定値を2つにすると1つ目の値は水平方向の半径、2つ目の値は垂直方向の半径となり楕円形になります。

CSSサンプル

/* 個別設定(正円) */
div {
    border-top-left-radius:     10px; /* 左上 */
    border-top-right-radius:    20px; /* 右上 */
    border-bottom-right-radius: 50px; /* 右下 */
    border-bottom-left-radius:  30px; /* 左下 */
}

/* 個別設定(楕円) */
div {
    border-top-left-radius:     10px 20px; /* 左上 */
    border-top-right-radius:    20px 10px; /* 右上 */
    border-bottom-right-radius: 50px 30px; /* 右下 */
    border-bottom-left-radius:  30px 50px; /* 左下 */
}

4つの角にまとめて設定したい場合は「border-radius」を使用します。

設定値は正円の場合、1つから最大4つまで設定ができます。

楕円の場合は、スラッシュ( / )で区切ることで、水平方向(横方向)と垂直方向(縦方向)を分けて設定することができます。

CSSサンプル

/* まとめ設定(正円) */
div {
    border-radius: 10px;              /* 4つの角すべてが10px半径の正円 */
    border-radius: 10px 20px;         /* 左上・右下が10px半径の正円、右上・左下が20px半径の正円 */
    border-radius: 10px 20px 0px;     /* 左上が10px半径の正円、右上・左下が20px半径の正円、右下が0px半径の正円 */
    border-radius: 10px 20px 0px 5px; /* 左上・右上・右下・左下の順番で半径が反映 */
}

/* まとめ設定(楕円)※反映される角の順番は正円と同じ */
div {
    border-radius: 10px / 20px;  /* 水平方法が10px 、垂直方向が20px */
    border-radius: 10px 20px / 20px 10px;
    border-radius: 10px 20px 0px / 0px 20px 10px;
    border-radius: 10px 20px 0px 5px / 0px 20px 5px 10px;
}

枠線イメージ(border-image)

border-image

「border-image」はその名前の通り、枠線に対して画像を設定することができます。

下記のサンプルでは、「border-image」の設定値としてborder-image-sourceの値 / border-image-sliceの値 / border-image-repeatの値を指定しています。

枠線画像として「border-image.png」を読み込み、25px内側へスライスした画像を上下左右それぞれ4つに分割して枠線に反映をします。

「border-image」内で「border-image-width」という枠線画像の太さを指定することができますが、ブラウザによって描画か異なっていたので、border-widthで太さを指定しておいたほうが確実そうです。

CSSサンプル

div {
    border: solid 20px;
    border-image: url(./border-image.png) 25 repeat;
}

「border-image」は指定したボックスの大きさに応じて枠線画像が変化するので、文章の内容で高さなどが変化する記事のボックスの装飾などに使えそうです。

関連記事

【CSS】スタイルシートだけで縦方向と横方向でセンタリングする方法

WEBデザインで画像やレイアウトした要素を中央に揃えるレイアウトを作ることがよくあります。実際にHTMLにコーディングをするときに、横位置をセンターにする場合や、縦位置をセンターにする場合などCSSだけで実現する方法をまとめてみました。 { margin: 0 auto...続きを読む

2015.02.07HTMLコーディング

【JavaScript】マウスオーバーでTooltips(吹き出し)を表示するライブラリまとめ

グラフィカルユーザインタフェース(GUI)において普及した表現手法のひとつにTooltips(ツールチップ)と呼ばれるものがあります。カーソルを合わせたときに吹き出しなどの小さな枠が表示され、補足の説明が表示される表現方法です。 今回は、Tooltips(吹き出し)を実...続きを読む

2015.03.03HTMLコーディング

新年あけましておめでとうございます。

あけましておめでとうございます。 昨年は格別 の御厚情を賜り、厚く御礼を申し上げます。 本年もデザインスタジオ・エフでは、皆様にご満足頂けるサービスを心がけていく所存でございますので、何とぞ昨年同様のご愛顧を賜わりますよう、お願い申し上げます。皆様のご健勝と皆様の...続きを読む

2018.01.04

【WP】イベントカレンダーを作成できるプラグイン『Event Organizer』

イベント情報を掲載するサイトを構築するとき、カレンダーで一覧を表示させたり会場の情報を掲載したい要望をいただきます。 カスタム投稿やカスタムフィールドを用いてイベント用の記事を作成したり、Googleカレンダーなどを読み込みカレンダーを表示することもできますが、管理や記...続きを読む

2015.02.23WordPress

【WP】プラグイン『Photospace』の利用方法

以前に紹介をした『Photospace』は、jQueryのサムネイル付のスライドショーギャラリーを実装できる「Galleriffic」を、WordPressの標準ギャラリーのショートコードに対応させることができるプラグインです。インストールと標準設定をご紹介しましたが、今回は...続きを読む

2015.06.29WordPress