お二人は、CSSのborderを使いこなしていますか？
borderって線のこと……だよね？
そうそう、borderで線が引けるんですよね。見出しの装飾で使ってるところを見ました
そうですね。前回は「入門5：【CSS/important】の基本的な使い方と注意点〜初心者向」としてやや実践的な内容を解説しましたが、今回もより実践的なborderについて解説していきます。
CSSのborderは要素の境界を指定するプロパティです。見出しの装飾だけでなく、領域を区切ったり、目立たせたりするときにも使えます。
このページではCSSのborderプロパティの基本的な使い方から、覚えておきたいborderのポイントを解説します。実際の記述例も紹介するので試しながら読むとより理解が深まるでしょう。
CSSのborderって何？
borderはCSSプロパティの1つです。要素の境界線についてのデザイン定義を行うのですが……borderプロパティには定義できる項目が3つあります
- border-style
- border-width
- border-color
3つも種類があると難しそうに感じますが、内容はシンプルです。スタイルやカラーなど、英語表記そのままの意味合いで覚えられます。
スタイルはきっと二重線とか点線のことですね。あとは、太さと色でしょう。 たしかに英語表記そのままの意味で覚えれば良さそうですね
飲み込みが早いですね。 では、それぞれを詳しく紹介していきましょう
border-style
まずは、border-styleです。border-styleは文字通り境界線の種類を指定するものですよ
solid：1本線のボーダーを生成します。
double：2本線のボーダーを生成します。
dashed：1本線のボーダーを破線で生成します。
dotted：1本線のボーダーを点線で生成します。
groove：立体的に窪んだボーダーを生成します。
ridge：立体的に隆起したボーダーを生成します。
inset：囲われた空間が窪んで見えるように色の明るさに差をつけて表示します。上側と左側のボーダーが暗い色で表示され、下側と右側のボーダーが明るい色で表示されます。
outset：囲われた空間が隆起して見えるように色の明るさに差をつけて表示します。上側と左側のボーダーが明るい色で表示され、下側と右側のボーダーが暗い色で表示されます。
none：境界線を表示しません。境界線の太さが0になります。境界が他の要素と重なり合っているときは他の要素のスタイルが優先されます。
hidden：こちらも境界線を表示しません。境界線の太さが0になります。noneとは違い境界が重なり合ったときでもhiddenの値が優先されます。
以上がborderで指定できる境界線の種類です
border-width
続いては、border-widthです。これは、線の太さを指定するプロパティですね。数値やキーワードで太さを指定します
指定する数値にはピクセルのほか、フォントサイズを基準としたemやexという単位が使えます。
キーワードのにはthin、medium、thickが使えます。thinsが細い線、mediumが普通の線、thickが太い線の扱いです。キーワード指定した場合、表示される太さはブラウザに依存します。環境によって見栄えが変わってしまうので、一般的にはあまり使いません。
border-color
最後にborder-colorですが……これは線の色を指定するプロパティです
色を指定する際は#FF0000のように16進数のカラーコードを使います。また、transparentを指定すると、線の色を透明にすることもできます。
線の太さを指定した状態で色をtransparentにすると領域の余白のように表示されます。領域のスペースを確保したいときはmarginという別のCSSプロパティが存在するのでそちらを使いましょう。
二人とも、ここまでは大丈夫ですか？
ちょっと不安だけど、なんとかついていけています
実際にやってみないと、なんとも言えませんね
borderプロパティでの装飾のやり方：4つの具体例
では、ここからはborderプロパティを使った具体例を4つ紹介しますね
いよいよ実践編ですね……全部覚えられるかなぁ……
余裕、余裕
ここで紹介するborderプロパティでの装飾の具体例は、以下の4つです
- 見出しの装飾
- 文章を囲む
- ボタンを目立たせる
- 領域をハッキリさせる
具体例①：見出しの装飾
まずは、見出しの装飾をしてみましょう。いろいろなサイトで見出しの装飾は行われていますね
borderを指定して見出しを装飾します。以下はh2タグにborderを指定しているサンプルです。
h2 { border : solid 3px #FF0000; }h2見出しに1本の境界線が3ピクセルの太さで表示されます。色は赤色を指定しています。
具体例②：文章を囲む
borderプロパティは文章に対しても使うことができます。
段落を示すpタグに指定すれば段落が境界線で囲われますし、強調を示すstrongタグに指定すれば強調したい文字部分だけが境界線で囲われます。以下はpタグに指定した例です。
p { border : double 4px #00FF00; }段落が太さ4ピクセルの2重線で囲われます。色は緑色を指定しています。
具体例③：ボタンを目立たせる
border-styleをoutsetにすることで立体的なボタンのように表示できます。以下の例では、divで囲われたボタンという文字列に灰色の立体的なボーダーを表示しています。
HTMLの記述
<div class=”button”>ボタン</div>CSSの記述
.button { border : outset 4px #999999; }具体例④：領域をハッキリさせる
border-colorを使い分けることで領域をハッキリさせる使い方もできます。1つ目の段落と2つ目の段落を明確に区切りたい場合、以下の例のように境界線の色変更で区切りを強く表現できます。
HTMLの記述
<p class=”d1”>これは1つ目の段落です</p>
<p class=”d2”>これは2つ目の段落です</p>CSSの記述
d1 { border : solid 1px #FF0000; }
d2 { border : solid 1px #0000FF; }1つ目の段落は赤線で囲われ、2つ目の段落は青線で囲われます。
はい。以上が、borderプロパティを使った4つの具体例です
ちょ……ちょっと難しかったかも（汗
同じく……なにがなにやら……
そうですね。慣れないうちは実践的なコードを見てもなかなか覚えられません。でも、慣れて仕舞えば、そんなに難しい部分ではないんですよ。以下で、書き方の基本を改めて解説するので、そちらをしっかり覚えましょう
書き方の基本
CSSでborderを指定するときの書き方には、まとめて記述する方法とプロパティごとに分けて記述する方法があります
プロパティ……なんだっけそれ
この前やったばかりですよ。 たしか「入門4：【CSSのセレクタ基礎】をマスターしたい方へ【チートシート付】」で出てきたはずです
そうですね。猫田さんは改めて確認してきましょう。ここでは色々なborder指定の書き方を解説しますよ
まとめて記述する
border指定の基本となるのはまとめて記述する方法です。以下のように線の種類、線の太さ、線の色を一括指定できます。
h2 { border : solid 1px #123456; }プロパティごとに分けて記述する例
以下はプロパティごとに分けて記述する場合の例です。
h2 {
border-style : solid;
border-width : 1px;
border-color : #123456;
}どっちの書き方がおすすめですか？
慣れないうちは1つずつ書いたほうが、後で見たときにわかりやすいですよ。 でも、慣れてきたら改行せずに1行にまとめて書いたほうが早いので、1行で書く人も多いです。 ちなみに、セミコロンまでが1つのプロパティとして扱われるので覚えておいてくださいね
borderの位置を指定する
ここまでは特定の要素をボーダーで囲む方法について紹介しました。実はborderにはそれ以外にも使い道があります。要素の上下左右の任意の場所にだけborderを表示させる方法です
縦線も設定できるんですね？
さらにその線も点線にできるってわけかぁ……可能性は広がるなぁ
上下左右の任意の位置にボーダーを表示
borderの位置を指定したいときは、プロパティに位置を付け加えます。
位置の指定の仕方は以下のとおりです
border-top：上辺のボーダー指定
border-bottom：下辺のボーダー指定
border-left：左辺のボーダー指定
border-right：右辺のボーダー指定いくつか例を紹介します。まずはh2見出しの下辺にだけボーダーを表示する例です。
h2 { border-bottom : solid 6px #0000FF; }見出しの下辺に太さ6ピクセルの青いボーダーが表示されます。
また、位置の指定を行っているときでもプロパティごとに分けて記述する方法が使えます。今度はh2見出しタグの下辺だけを対象に、線の種類を変更してみます。
h2 { border-bottom-style : dotted; }これで下辺の線の種類だけが点線に変更されました。もちろん線の種類だけでなく、太さや色を指定する際にもプロパティごとに分けて記述する方法が使えます。
borderを使った応用デザイン
ここからはborderプロパティの応用です。border指定を使ったよくあるデザインについて解説します
こういうのを待ってたのよね！ これならスラスラ覚えられそう
左にだけ太い線がついている見出し
Webサイトやブログなど広いメディアで見られる見出しの装飾方法です。このデザインは以下のようにborder指定することで作れます。
h2 { border-left : solid 6px #4568E6; }見出しの左側にだけ青い太線が表示されます。
左に太い線があり下に細い線がある見出し
左と下それぞれに別のスタイルを指定することでL字型のボーダーを表示します。
h2 {
border-left : solid 6px #4568E6;
border-bottom : solid 1px #4568E6;
}左に青い太線が表示され、下には同じ色の細い線が表示されます。
outsetを使わずにボタンを作る
border-styleプロパティのoutsetを使えば、要素が隆起して見えるようにボーダーが付きます。しかし、outsetでは色指定の自由度が低くなってしまいます。そんなときには、outsetを使わずにボタン表現をする方法を試してみましょう。
上と左、下と右のそれぞれに異なるボーダー色を指定して、ボタンのようなデザインを作ります。
.button {
border-top : solid 1px #879def;
border-right : solid 1px #1c44d3;
border-bottom : solid 1px #1c44d3;
border-left : solid 1px #879def;
}上と左のボーダーに明るい青、下と右のボーダーに暗い青を指定して立体を表現しています。また、明るくするボーダーと暗くするボーダーを逆にすると、今度は立体的ではなく凹んでいるボタンを表現できます。
こうやって、工夫をしながらデザインしていくんですね。 これ、難しいけれど面白いですよ
radiusプロパティで角丸を作る
borderのデザインとして忘れてはいけないのが、border-radiusプロパティです。このプロパティは要素の境界線の角を丸めるときに使います。スマートフォンのアイコンなどで身近になった角丸のデザインを表現できますよ
角がふんわりと少し丸くなっているデザインですよね
そうです。border-radiusの指定方法は、難しい部分があるので1つ1つ順番に解説しますね
border-radiusの記述方法
border-radiusはピクセルやパーセントなどの値を入力することで角を丸める度合いを指定します。
ふむふむ。 どのくらい丸めるのか……を指定するのね
例1 border-radius : 10px;
例2 border-radius : 5%;
例3 border-radius : 1em;ピクセルは絶対値での指定、パーセントはボーダーで囲った領域の広さに対しての割合、emはフォントサイズを基準にした相対値での指定です。
指定したピクセル数は角からの距離を表しています。10pxであれば、角から内側に向かって縦横10px進んだ位置です。この位置を中心として円を描いたときの円の丸まりの度合いが角丸として再現されます。
4角に別々の角丸を設定する
border-radiusプロパティでは上下左右の4角に別々の丸まり度合いを設定できます。例を見てみましょう。
border-radius：1px 2px 3px 4px;
border-radius：1px 2px 3px;
border-radius：1px 2px;
border-radius：1px;値を4つ記述すると4角の丸まりの度合い指定となります。左の値から順番に、左上、右上、右下、左左の丸まりを指定しています。
値を3つ記述すると左上、右上と左下、右下への指定となります。
値を2つ記述すると左上と右下、右上と左下への指定となります。
値を1つ記述したときは最初に紹介したように全ての角丸に共通の値が適用されます。
便利なんだろうけど、慣れるまで大変だね。これ
自分の中でいちばん使いやすいものを決めて、まずは1つ使いこなせるようにするといいですよ。その上で慣れてきたら、別の指定の仕方にも挑戦してみましょう
radiusで正円を作る
border-radiusを50％にすることで正円を表現できます。
まずは対象となる要素のwidth（横幅）とheight（高さ）を同じ長さにして正方形とします。正方形の要素に対して50％のborder-radiusを指定します。以下の例では100pxの正円が表示されます。
.circle {
width : 100px;
height : 100px;
border-radius : 50%;
border : solid 1px #000000;
}radiusで楕円を作る
radiusで楕円を作るのは簡単です。正円を作るときは正方形の要素に対してradiusを指定しましたが、今度は長方形の要素にradiusを指定します。
.ellipse {
width : 200px;
height : 100px;
border-radius : 50%;
border : solid 1px #000000;
}widthを長くすると横長の楕円に、heightを長くすると縦長の楕円になります。
これもちょっと難しいなー
最初から全てを丸暗記ではなく、仕組みを覚えることが大切です。実際に書いてみて値を変えながらどの部分を変えたらどう表示が変わるのか確認してみましょう
CSSのborder設定まとめ
さて、今回学んだのはCSSのborderでしたね。 要素の境界線について指定するプロパティでした。 線の種類や指定位置を工夫することでボーダーだけでもさまざまなデザインを作れますのでマスターしましょう
とくにborder-radiusプロパティを使った正円や楕円の作り方は、ぜひ覚えておきたいテクニックでしたね
あとは、borderプロパティにまとめて書く方法だよなぁ。ここが使いこなせたら、楽になりそうよね
プロパティごとに記述する方法もデザインの一箇所だけを変更したい時によく使いますよ
今回はborderについてより実践的に解説していきました。ホームページ上でよく使われますのでしっかりと覚えていきましょう。今回のborderの書き方の基本を押さえていけば、そのほかのいろいろなCSS要素も基本は同じ書き方です。
次回もより実践的な「【CSS/margin】マージンの基本と応用を徹底マスターしよう」をお届けします。今回は「線」にまつわる内容でしたが、次回は「余白」にまつわるお話しです。