今回は、CSSの枠線borderタグの基本と注意点や角の丸さを設定するborder-radiusについて説明します。
もくじ
枠線 borderの使い方
枠線 borderの基本的な使い方
borderは、要素に枠線を設定するCSSプロパティです。枠線の色、枠線の種類、そして枠線の太さと3つの値を指定して利用します。
「border:red solid 5px」のように3つの値は半角スペースで区切ります。順番は順不同でどれから先に書いても構いません。
■表示例
■上記例のソースコード
|
1 2 3 4 5 6 7 8 9 10 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>はじめてのCSSセミナー</title> </head> <body> <h1 style="border:red solid 5px;">これは見出し。赤の枠内にあります。</h1> </body> </html> |
指定できる値は、主に下記の通りです。
| 項目 | 内容 |
|---|---|
| 色 | redなどの色指定、または#ff0000などの16進数表記 |
| 種類 |
|
| 枠線の太さ | 2pxなど pxで設定(%は不可) |
例 枠線の種類が実線 solid
例 枠線の種類が点線 dotted
例 枠線の種類が破線 dashed
例 枠線の種類が二重線 double
borderで要素の各辺を直接指定する方法
前述の説明ではborderを指定することで、要素の上下左右の全てに枠線をつける例で説明しましたが、辺を指定して個々の辺に設定することもできます。
各辺を指定する場合は、borderの代わりに「border-xxx(辺)」を指定します。
| 項目 | 内容 |
|---|---|
| border-left:色 種類 太さ; | 要素の左側の枠線を指定します。 例 border-left:red solid 5px; 
|
| border-right:色 種類 太さ; | 要素の右側の枠線を指定します。 例 border-right:red solid 5px; 
|
| border-top:色 種類 太さ; | 要素の上側の枠線を指定します。 例 border-top:red solid 5px;  |
| borderg-bottom:色 種類 太さ; | 要素の下側の枠線を指定します。 例 border-bottom:red solid 5px;  |
枠線の色・種類・太さを個別に指定する場合
borderでは、色・種類・太さと3つの値をまとめて設定しましたが、3つの値をそれぞれ個別に設定することもできます。
各設定値を個別に指定する場合は、「border-color」「border-style」「border-width」でそれぞれ設定します。
| 項目 | 内容 |
|---|---|
| 枠線の色：border-color | 枠線の色を指定します。 例 border-color:red; |
| 枠線の種類：border-style | 枠線の種類を指定します。 例 border-style:solid; |
| 枠線の太さ：border-width | 枠線の太さを指定します。 例 border-width:5px |
■表示例
■上記のソースコード
|
1 |
<h1 style="border-color:red;border-style:solid;border-width:5px">これは見出し</h1> |
border設定時に適用されるボックス大きさの算出方法 border-box
枠線border(や内部余白padding)を設定する際に、枠線の大きさを横幅や高さに含めるかどうかのボックスの算出方法を指定するプロパティで「box-sizing:border-box」を指定する方法があります。
■box-sizingプロパティで使う設定値と意味
| 項目 | 内容 |
|---|---|
| box-sizing:content-box | 枠線「border」や内部余白「padding」を横幅と高さに含めない（初期値） |
| box-sizing:border-box | 枠線「border」や内部余白「padding」を横幅と高さに含める |
■表示例
■上記のソースコード
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>CSS</title> <link rel="stylesheet" href="style.css"> <style media="screen"> .box1{ background:skyblue; width:400px; height:300px; padding: 100px; box-sizing: border-box; } </style> </head> <body> <div class="box1"> 横幅400 x 高さ300pxのボックス </div> </body> </html> |
基本的に、box-sizing:border-boxの方がレイアウトの大きさの計算が楽になるので、ユニバーサルセレクタ*などで、box-sizing:border-boxを初期値として設定しておくことも多いです。
枠の丸さを指定するborder-radius
border-radiusは、枠線および要素の角の丸さを指定するCSSプロパティです。
borderプロパティと合わせて利用することでborder-radiusを利用するとborderで作った枠線の角を丸くする事ができます。
border-radius:30px とした場合、すべての角が30pxになります。
■上記のソースコード
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>はじめてのCSS</title> </head> <body> <div style="width:300px;height:300px;border:red solid 2px;border-radius: 30px;"> </div> </body> </html> |
border-radius:50%と指定した場合は、50%=円の半径で下記のように円になります。
■上記のソースコード
|
1 2 3 4 5 6 7 8 9 10 11 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>はじめてのCSS</title> </head> <body> <div style="width:300px;height:300px;border:red solid 2px;border-radius: 50%;"> </div> </body> </html> |
また、border-top-left-radius（左上の箇所）:xxxなどのように場所を指定すると下記のように左上だけ丸くすることもできます。
■上記のソースコード
|
1 2 3 4 5 6 7 8 9 10 11 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>はじめてのCSS</title> </head> <body> <div style="width:300px;height:300px;border:red solid 2px;border-top-left-radius: 50%;"> </div> </body> </html> |
また、border-radiusは、枠線だけでなく画像や要素に対しても指定することができます。
■正方形の画像にborder-radius:50%を適用した例
■上記のソースコード
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>はじめてのCSS</title> </head> <body> <h2>border-radius設定なしの場合の正方形の画像</h2> <p> <img src="https://webst8.com/blog/wp-content/uploads/2020/01/bird-hollow.jpg" alt=""> </p> <h2>border-radius設定ありの場合の正方形の画像</h2> <p> <img src="https://webst8.com/blog/wp-content/uploads/2020/01/bird-hollow.jpg" alt="" style="border-radius:50%;"> </p> </body> </html> |
■正方形のdiv要素にborder-radius:50%を適用した例
■上記のソースコード
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>はじめてのCSS</title> </head> <body> <h2>border-radius設定なしの場合の正方形</h2> <div style="background-color:pink;width:150px;height:150px;"> </div> <h2>border-radius設定ありの場合の正円</h2> <div style="background-color:pink;width:150px;height:150px;border-radius:50%;"> </div> </body> </html> |
※なお、長方形の場合は、正円ではなく、楕円になります。
まとめ
まとめです。今回は、CSSの枠線borderの使い方の基本や注意点およびborder-radiusについて説明しました。
borderの基本を使ったレイアウトの調整は、Webデザインする上で必須といえるくらいよく使うのでぜひ覚えておきましょう。
なお、CSSを使った装飾の仕方全般については「【CSSの基本】CSSの基本とプロパティ一覧」をご参照ください。
今回は以上になります。最後までご覧いただきありがとうございました。
個別指導形式のスクールでは、自分の知りたいことをピンポイントで学習・達成でき、自分で更新もできるというメリットもあります。
教室の無料事前相談もしておりますので、まずはお気軽にご登録ください。
YouTubeチャンネル開設しました！
最大月間50万PVの当ブログをベースに、Youtube動画配信にてWordPress、ホームページ作成、ブログのことについてお役立ち情報を随時配信していきます。
ご興味ある方はぜひチャンネル登録をしていただけますと幸いです。
