ホームページ作成講座[CSS編]枠線のスタイル設定

作成日:
  1. HOME
  2. ホームページ作成講座
  3. 枠線のスタイル設定

このページでは枠線に関連したスタイルの指定方法について見ていきます。

  1. 枠線の一括指定
  2. 枠線の個別指定
  3. 枠線の太さ
  4. 枠線の色
  5. 枠線の種類
  6. 角の丸め

枠線の一括指定

上下左右の枠線を一括で指定するには、プロパティと値を次のように指定します。

border : 色 種類 太さ
枠線を付けるにはborderプロパティを用います。値は色・種類・太さの3つを記述します。
3つの値の順番は入れ替わっても大丈夫です。
値にnoneを指定すると枠線は引かれません。
線の種類については以下をご覧ください。

線の種類

solid
実線
double
二重線
ridge
隆起した線
groove
窪んだ線
dotted
点線
dashed
破線
inset
内側が窪んだ線
outset
内側が隆起した線

(サンプル)

<style>
div{
  width : 92px;  //横幅を92pxにする
  padding : 2px;  //内側の余白を2pxに
  margin : 2px;  //外側の余白も2pxに
  display : inline-block;  //横並びにするため
}
.sol{
  border : 2px solid green;  //幅2pxの緑の実線
}
.dash
{
  border : dashed fuchsia 2px;  //幅2pxのピンクの破線
}
.rid
{
  border : aqua 2px ridge;  //幅2pxの水色の隆起線
}
</style>

<div class="sol">solid</div>
<div class="dash">dashed</div>
<div class="rid">ridge</div>
<表示結果>

枠線の個別指定

上下左右の枠線を個別に指定することもできます。

border-top : 色 種類 太さ
上側の線のスタイルを指定します。
border-bottom : 色 種類 太さ
下側の線のスタイルを指定します。
border-left ; 色 種類 太さ
左側の線のスタイルを指定します。
border-right : 色 種類 太さ
右側の線のスタイルを指定します。
<style>
h1{
  border-top : 5px double red;  //上側に二重線を引く
  border-bottom : 5px double red;  //下側に二重線を引く
  text-align : center;  //中央揃え
}
</style>

<h1>枠線の個別指定</h1>
<表示結果>

枠線の太さ

線の太さだけを指定する方法もあります。もちろん線種や色も指定しないと線は引かれないので、後から太さを変えたりする時に使うことができます。

border-width : 太さ
4方向の線の太さを一括指定します。
border-top-width : 太さ
上側の線の太さを指定します。
border-bottom-width : 太さ
下側の線の太さを指定します。
border-left-width : 太さ
左側の線の太さを指定します。
border-rigth-width : 太さ
右側の線の太さを指定します。

(例)

<style>
p{
  border : 1px solid silver;  //1pxで銀色の実線
  border-left-width : 10px;  //左側の線の太さだけ10pxに変更
}
</style>

枠線の色

線の色だけを指定する方法もあります。もちろん線種や太さも指定しないと線は引かれないので、後から色を変えたりする時に使うことができます。

border-color : 色
4方向の線の色を一括指定します。
border-top-color : 色
上側の線の色を指定します。
border-bottom-color : 色
下側の線の色を指定します。
border-left-color : 色
左側の線の色を指定します。
border-right-color : 色
上側の線の色を指定します。

(例)

<style>
p{
  border : 1px solid blue;  //1pxの青の実線
  border-right-color : navy;  //右側の線色を紺色に変更
  border-bottom-color : navy;  //下側の線色を紺色に変更
}
</style>

枠線の種類

線の種類だけ指定する方法もあります。もちろん色や太さも指定しないと線は引かれないので、後から線種を変えたりする時に使うことができます。

border-style : 種類
4方向の線の種類を一括指定します。
border-top-style : 種類
上側の線の種類を指定します。
border-bottom-style : 種類
下側の線の種類を指定します。
border-left-style : 種類
左側の線の種類を指定します。
border-right-style : 種類
上側の線の種類を指定します。

(例)

<style>
div{
  border-color : teal;  //線の色を青緑にする
  border-width : 2px;  //線幅を2pxにする
  border-style : groove;  //線のスタイルを窪み線にする
</style>

角の丸め

border-radius : 丸めの半径
4隅の角を指定した値で丸くします。
値は複数指定することもできます。
値が2つなら、1つ目の値は左上と右下、2つ目の値は右上と左下になります。
値が3つの場合、左上→右上&左下→右下に適用されます。
値が4つなら、左上→右上→右下→左下の順になります。

(サンプル)

<style>
div{
  width : 7em;  //横幅7文字分に制限
  padding : 3px 1em;  //上下3px,左右1文字分の余白
  margin : 2px;  //枠線の外側に2pxの余白
  display : inline-block;  //横並びにする
  border : 2px solid gray;  //線幅2pxの灰色の実線を付ける
}
.one{
  border-radius : 10px;  //4隅の角を半径10pxに丸める
}
.two{
  border-radius : 10px 5px;  //左上・右下は10px,右上・左下は5pxに丸める
}
</style>

<div class="one">値が一つの場合</div>
<div class="two">値が二つの場合</div>
<表示結果>
data-matched-content-rows-num="4,2" data-matched-content-columns-num="1,3" data-matched-content-ui-type="image_stacked,image_card_sidebyside">