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

枠線の一括指定

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

border : 色 種類 太さ

枠線を付けるにはborderプロパティを用います。値は色・種類・太さの３つを記述します。

３つの値の順番は入れ替わっても大丈夫です。

値にnoneを指定すると枠線は引かれません。

線の種類については以下をご覧ください。

線の種類

（サンプル）

<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隅の角を指定した値で丸くします。

値は複数指定することもできます。

値が２つなら、1つ目の値は左上と右下、2つ目の値は右上と左下になります。

値が３つの場合、左上→右上＆左下→右下に適用されます。

値が４つなら、左上→右上→右下→左下の順になります。

（サンプル）

<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>