CSS 枠線BORDERタグの使い方の基本

CSS

【初心者向け】CSS 枠線borderタグの使い方の基本を解説

2019年1月21日

今回は、CSSの枠線borderタグの基本と注意点や角の丸さを設定するborder-radiusについて説明します。
 

borderで枠線の設定
 

borderの基本を使ったレイアウトの調整は、Webデザインする上で必須といえるくらいよく使うのでぜひ覚えておきましょう。

 

 

枠線 borderの使い方

枠線 borderの基本的な使い方

borderは、要素に枠線を設定するCSSプロパティです。枠線の色、枠線の種類、そして枠線の太さと3つの値を指定して利用します。
 

borderで枠線の設定
 

「border:red solid 5px」のように3つの値は半角スペースで区切ります。順番は順不同でどれから先に書いても構いません。
 

■表示例
h1に赤色・実線・太さ5pxの枠がついている
 

■上記例のソースコード

 

指定できる値は、主に下記の通りです。

項目内容
redなどの色指定、または#ff0000などの16進数表記
種類
  • なし(初期値)「none」
  • 1本の実線「solid」
  • 2本の実線「double」
  • 点線「dotted」
  • 破線「dashed」など
枠線の太さ2pxなど pxで設定(%は不可)

 

例 枠線の種類が実線 solid
枠線の種類 solid 実線
 

例 枠線の種類が点線 dotted
枠線の種類 dotted 点線
 

例 枠線の種類が破線 dashed
枠線の種類 dased 破線
 

例 枠線の種類が二重線 double
枠線の種類 double 二重線
 
 

borderで要素の各辺を直接指定する方法

前述の説明ではborderを指定することで、要素の上下左右の全てに枠線をつける例で説明しましたが、辺を指定して個々の辺に設定することもできます。
 

各辺を指定する場合は、borderの代わりに「border-xxx(辺)」を指定します。

項目内容
border-left:色 種類 太さ;要素の左側の枠線を指定します。
例 border-left:red solid 5px;
左側の枠 border-left
border-right:色 種類 太さ;要素の右側の枠線を指定します。
例 border-right:red solid 5px;
右側の枠 border-right
border-top:色 種類 太さ;要素の上側の枠線を指定します。
例 border-top:red solid 5px;
上側の枠 border-top
borderg-bottom:色 種類 太さ;要素の下側の枠線を指定します。
例 border-bottom:red solid 5px;
下側の枠 border-bottom

 
 

枠線の色・種類・太さを個別に指定する場合

borderでは、色・種類・太さと3つの値をまとめて設定しましたが、3つの値をそれぞれ個別に設定することもできます。
 

各設定値を個別に指定する場合は、「border-color」「border-style」「border-width」でそれぞれ設定します。
 

項目内容
枠線の色:border-color枠線の色を指定します。
例 border-color:red;
枠線の種類:border-style枠線の種類を指定します。
例 border-style:solid;
枠線の太さ:border-width枠線の太さを指定します。
例 border-width:5px

 

■表示例
border-style、border-width、border-colorをここに設定した表示の例
 

■上記のソースコード

 
 

border設定時に適用されるボックス大きさの算出方法 border-box

枠線border(や内部余白padding)を設定する際に、枠線の大きさを横幅や高さに含めるかどうかのボックスの算出方法を指定するプロパティで「box-sizing:border-box」を指定する方法があります。
 

CSS box-sizingを設定するときとしない時の違い
 

■box-sizingプロパティで使う設定値と意味

項目内容
box-sizing:content-box枠線「border」や内部余白「padding」を横幅と高さに含めない(初期値)
box-sizing:border-box枠線「border」や内部余白「padding」を横幅と高さに含める

 

■表示例


 

■上記のソースコード

 

基本的に、box-sizing:border-boxの方がレイアウトの大きさの計算が楽になるので、ユニバーサルセレクタ*などで、box-sizing:border-boxを初期値として設定しておくことも多いです。
 
 

枠の丸さを指定するborder-radius

border-radiusは、枠線および要素の角の丸さを指定するCSSプロパティです。
 

borderプロパティと合わせて利用することでborder-radiusを利用するとborderで作った枠線の角を丸くする事ができます。
 

border-radius:30px とした場合、すべての角が30pxになります。
border-radius:30px
 

■上記のソースコード

 

border-radius:50%と指定した場合は、50%=円の半径で下記のように円になります。
border-radius:50%
 

■上記のソースコード

 

また、border-top-left-radius(左上の箇所):xxxなどのように場所を指定すると下記のように左上だけ丸くすることもできます。
border-top-left-radius:50%
 

■上記のソースコード

 

また、border-radiusは、枠線だけでなく画像や要素に対しても指定することができます。
 

■正方形の画像にborder-radius:50%を適用した例
border-radius設定ありの場合の正方形の画像
 

■上記のソースコード

 

■正方形のdiv要素にborder-radius:50%を適用した例
正方形のdiv要素にborder-radius:50%を適用した例
 

■上記のソースコード

 

※なお、長方形の場合は、正円ではなく、楕円になります。
 
 

まとめ

まとめです。今回は、CSSの枠線borderの使い方の基本や注意点およびborder-radiusについて説明しました。
 

h1に赤色・実線・太さ5pxの枠がついている
 

borderの基本を使ったレイアウトの調整は、Webデザインする上で必須といえるくらいよく使うのでぜひ覚えておきましょう。
 

なお、CSSを使った装飾の仕方全般については「【CSSの基本】CSSの基本とプロパティ一覧」をご参照ください。
 

今回は以上になります。最後までご覧いただきありがとうございました。
 


弊社は、自分でホームページを作ることを推奨しています。「業者に任せたけど、更新ができない」「本で独学は時間がかかりすぎる・・」そんなお悩みの方も多いのではないでしょうか。

個別指導形式のスクールでは、自分の知りたいことをピンポイントで学習・達成でき、自分で更新もできるというメリットもあります。
無料事前相談もしておりますので、まずはお気軽にご登録ください。

詳細はこちら


 

検索して記事を見つけたい方はこちら

検索して記事を見つけたい方はこちらにキーワードを入力してお探しください。

おすすめ記事3選

【WordPressの始め方総まとめ】ワードプレスブログの作り方9STEP

WordPress(ワードプレス)でブログを始めようと思った時に、サーバー・ドメインの手続きなどわからないことだらけで困っているというお悩みをお持ちの方も多いのではないでしょうか。本記事では、WordPressでブログやアフィリエイトを始めたい初心者を対象にWordPressの始め方をご紹介していきます。

【WordPressホームページの作り方総まとめ 12STEPで解説】

WordPressでホームページを自作しようと思った際に、「ドメイン?サーバー?たくさん調べることがあって何から手をつけたら良いのかわからない」というかたも多いのではないでしょうか。この記事ではWordPress初心者の方を対象にWordPressでホームページを作る方法をご紹介していきます。

【2020年版WordPress(ワードプレス)の使い方総まとめ】

今回は、これからWordPress(ワードプレス)を使ってホームページまたはブログサイトを作りたい初心者の方向けに、WordPressの導入から使い方までまとめて説明していきます。 (※)WordPress5.0から実装された最新のブロックエディター(グーテンベルグエディター)にも対応しています。

-CSS
-

© 2020 WEBST8のブログ Powered by AFFINGER5