目次
メリハリのあるWebページを作成するに当たって、枠線の存在は重要です。枠線で要素を囲むことで、見やすくユーザビリティの高いWebページが作れます。
この記事では、CSSのborderプロパティで枠線を引く方法を解説します。丸みを帯びた枠線や吹き出しなどの応用的な使い方も紹介するため、ぜひ最後までチェックしてみてください。
CSS のborderで枠線を引くには？
CSSで枠線を引く方法を解説します。
borderプロパティを使用
CSSで枠線を表示するためには「border」プロパティを使用します。borderプロパティとは、要素の境界に枠線を引くためのものです。具体的には、HTMLの要素を線で区切ることで枠線を作成します。
例えば枠線で要素を囲ってボタンを作成したり、見出しや本文のデザインとして枠線を挿入したりborderプロパティの使用用途は様々です。そのため、使用用途によって個性的なWebページを作成できます。
borderの基本書式
borderプロパティの基本書式は、以下のとおりです。
セレクタ{
border : 線のサイズ 線の種類 線の色 ;
}
borderプロパティでは、サイズ・種類・色の3つの値を指定します。順番に指定はないため、値を入れ替えても大丈夫です。なお、各値の間には半角でスペースを挿入します。
一括設定と個別指定
borderプロパティを使用する際、一括設定と個別設定が行えます。一括設定とは、線のサイズ・線の種類・線の色を一括で設定する方法です。一般的に使われる方法で、記述は以下のように行います。
セレクタ{
border : 線のサイズ 線の種類 線の色 ;
}
枠の上下左右で枠線を変えたいという場合は、個別でプロパティを設定することで対応できます。個別設定で使用されるプロパティは、以下のとおりです。
| プロパティ | 効果 |
| border-top-〇〇 | 枠線の上側の〇〇を設定する。 |
| border-bottom-〇〇 | 枠線の下側の〇〇を設定する。 |
| border-right-〇〇 | 枠線の右側の〇〇を設定する。 |
| border-left-〇〇 | 枠線の左側の〇〇を設定する。 |
上記の〇〇には、以下のような値が入ります。
- width : 幅を設定する。
- style : 線の種類を設定する。
- color : 線の色を設定する。
例えば枠線の右側の線の色を赤に設定する場合、記述方法は以下のようになります。
セレクタ{
border-right-color : #ff0000（スタイルを記述） ;
}
CSS のborderで枠線を引く方法
実際にどのような値をborderプロパティに設定するのか、色・種類・太さの3つにわけて紹介します。
枠線の色を指定する
枠線の色を設定する場合、設定できる値の例を紹介します。
| 設定値 | 説明 | 設定の例 |
| named-color | カラーネーム | black、red、yellow |
| hex-color | カラーコード | #0000、#808000、#c66faa00 |
| rgb() | RGB値で色を表すCSSの関数 | rgb(255 215 0)、rgb(255,218,185)、rgb(198 111 170/80%) |
| hsl() | HSL値で色を表すCSSの関数 | hsl(50deg 100% 50%)、hsl(348deg,83%,47%)、hsl(319deg 43% 60%/20%) |
枠線の種類を指定する
枠線の種類を設定する場合、設定できる値の例を紹介します。
| 設定値 | 説明 |
| none | 枠線は表示されない。 |
| hidden | 枠線は表示されない。 |
| dotted | 点線が表示される。 |
| dashed | 破線が表示される。 |
| solid | 1本の直線、実線が表示される。 |
| double | 2本の直線、実線が表示される。 |
| groove | 凹んだように見える、立体的な枠線が表示される。 |
| ridge | 出ばったように見える、立体的な枠線が表示される。 |
| inset | 枠線で囲まれた全体が凹んだように見える枠線が表示される。 |
| outset | 枠線で囲まれた全体が>出ばったように見える枠線が表示される。 |
枠線の太さを指定する
枠線の太さを設定する場合、設定できる値の例を紹介します。
| 設定値 | 説明 | 設定の例 |
| px | 線の太さをpxで指定する。 | 10px、20px |
| em | 親要素を基準にして線の太さをemで指定する。 | 1em、1.5em |
CSS のborderの応用的な使い方
CSSのborderプロパティの応用的な使い方として、以下の3つの場合の記述方法を紹介します。
- 余白を作る
- 角を丸くする
- 吹き出しを作る
様々な枠線を駆使して、よりユーザビリティの高いWebサイトを作成しましょう。
余白を作る
ただ単純にborderプロパティを設定すると、枠線と要素が詰まってしまい見づらいWebページになってしまいます。そのため、適切に余白を取ることが重要です。
余白を設定するためには「padding」プロパティ、もしくは「margin」プロパティを設定します。
paddingプロパティの場合、線の内側に余白が生まれます。borderプロパティとpaddingプロパティを同時に設定する場合、記述方法は以下のとおりです。
セレクタ{
border : 線のサイズ 線の種類 線の色 ;
padding : 20px ;
}
上記のように記述すると、枠線と要素の上下左右の間に20pxの余白が生まれます。
marginプロパティの場合、線の外側に余白が生まれます。borderプロパティとmarginプロパティを同時に設定する場合、記述方法は以下のとおりです。
セレクタ{
border : 線のサイズ 線の種類 線の色 ;
margin : 20px ;
}
上記のように記述すると、枠線の上下左右の外側に20pxの余白が生まれます。
角を丸くする
丸みを帯びた角度の枠線で要素を囲みたい、そんなときは「border-radius」プロパティを使用します。枠線の角を丸くすると、一気にWebページのデザイン性を高めることが可能です。
borderプロパティとborder-radiusプロパティを同時に設定する場合、記述方法は以下のとおりです。
セレクタ{
border : 線のサイズ 線の種類 線の色 ;
border-radius : 20px ;
}
上記のように記述すると、角が20px丸まった枠線が表示されます。またborder-radiusの値を4つ記述することで、上下左右の角の丸さを調整することが可能です。具体的な記述方法は、以下のとおりです。
セレクタ{
border : 線のサイズ 線の種類 線の色 ;
border-radius : 10px 20px 5px 15px ;
}
上記のように記述すると、左上が10px・右上が20px・右下が5px・左下が15px丸まった枠線が表示されます。バラバラの角度を設定することで、個性的な枠線を作成できるためおすすめです。
吹き出しを作る
枠線と三角形に加工した枠線を組み合わせることで、吹き出しを作成することも可能です。三角形は、四角の枠線から不必要な分を透明にすることで作成できます。以下は、赤色の下向きの三角形を作成する際の記述です。
セレクタ{
border-top: 50px solid #FF0000;
border-right: 50px solid transparent;
border-bottom: 50px solid transparent;
border-left: 50px solid transparent;
}
上記で作った三角形を通常の枠線にピッタリとくっつけて配置すると、吹き出しのような形も作れます。
CSS のborderを使いこなして見やすいページをデザインしよう！
CSSのborderプロパティを使用することで、枠線を作成できます。線の種類・太さ・色を一括で変更できる、便利なプロパティです。個別で枠線を設定することも可能で、個性的な枠線も作れます。
枠線を使いこなすことで、見やすくメリハリのあるWebページを作成できます。角度を変えたり透明にする部分を変えたりすることで、応用的な使い方も可能です。ユーザビリティの高いWebページを作成するためにも、borderプロパティをしっかりと身に付けましょう。
■関連記事
CSSで背景色を指定するbackground-colorの使い方を解説！
CSSで行間を指定するline-heightの使い方を解説！おすすめの値も紹介
CSSでフォントサイズを指定するfont-sizeの使い方を解説！
