タグ: ウェブサイト作成

トップページ > サイト作成 > スタイルシート（CSS）の基本とプロパティの一覧 > スタイルシート（CSS）で枠線を設定する方法

スタイルシート（CSS）で枠線を設定する方法

[最新更新] 2022年07月23日
[初回公開] 2013年05月22日

スタイルシート（CSS）はウェブサイトの装飾やレイアウトの位置付けに利用されるプログラムの一種で、その CSS でデザイン可能な中から枠線の色や太さを設定する使い方と実際に指定するプロパティを紹介する。

1. スタイルシート（CSS）で枠線を設定するメリット

スタイルシート（CSS）で枠線に対して太さや色やを設定するメリットとしては、段落を明確化させたり、見やすさの向上につながる。
例えばあるページに目次を付けたり、まとめ（要約）を掲載する場合に本文と区別させたい時に枠線を用いると閲覧者は一目見ただけで内容が変わっている箇所であることが認識しやすくなる。

また、デザインにおいては DIV タグや P タグといった段落を示す HTML タグで全体を枠線で囲ったり、下線のみ付けることができるため装飾で用いられることも多い。

2. スタイルシートの枠線に関するプロパティ

スタイルシートの枠線に関するプロパティは、主に太さと形式、そして色の 3 つに分類される。
これら 3 つをそれぞれプロパティとして設定できるとともに、1 つのプロパティとしてまとめることも可能である。

2-1. 枠の太さを変える（border-width）

スタイルシートで枠線の太さを変えたい場合はプロパティ「border-width」を次のように利用する。
{太さ} には medium といった指定の他、2px といった数値と単位で指定する。

border-width : {太さ}

• thin　：　細い
• medium　：　中
• thick　：　太い
• 単位付きの数値　：　2px などの数値

2-2. 枠の色を変える（border-color）

スタイルシートで枠線の色を変えたい場合はプロパティ「border-color」を次のように利用する。
{Web カラー} には #FF0000 や red といった HTML タグでも用いられる値を入力する。

border-color : {Web カラー}

2-3. 枠の形式を変える（border-style）

スタイルシートで枠線の形式を変えたい場合はプロパティ「border-style」を次のように利用する。
{形式} には直線を示す solid や、反対に線を非表示にする場合は none を入力する。

border-style : {形式}

• none ： 無し
• solid ： 直線
• double ： 二重線
• groove ： 押下
• ridge ： 隆起
• inset ： 右上方に影
• outset ： 左下方に影
• dotted ： 丸点
• dashed ： 破線

2-4. 枠の設定を 1 行で行う方法

スタイルシートで枠線の設定は前述の通り、border-width、border-color、border-style の 3 種類あるが、これらを 1 行にまとめて指定する場合は次のようにする。

border: {太さ} {形式} {Web カラー}

{太さ} と {形式}、そして {Web カラー} は半角スペース区切りで入力する。

関連記事