[CSS] 枠線を引く(border)

CSSで枠線を引くには、名前にborderが付いたCSSを使用します。

枠線に関するCSS

CSS名にborderが付いたプロパティ(枠線に関するプロパティ)には、以下のものがあります。

【borderプロパティ】
プロパティ説明設定例
border-width枠線の太さを指定する
数値(px)または キーワードで指定します
 細:thin
 中:medium
 太:thick
border-width:1px
border-width:thick;
border-style枠線のスタイルを指定する
→詳細は以下をご覧ください。
 [CSS] 枠線スタイル一覧
border-style:solid;
border-style:dashed;
border-color枠線の色を指定する
→色は以下をご覧ください。
 [CSS] 主要色一覧
border-color:red;
border-color:#ff0000;
border枠線の太さ、スタイル、色を同時に指定する
※3つ同時に指定する場合に使用できます。
border:1px solid #808080;
border:thin double blue;

枠線を表示させる場合は、上記プロパティのうちスタイルの指定は必須です。

枠線を引くサンプル

例)枠線(実線)を引く

あいうえお

例)太さ1pxの実線を引く

あいうえお

例)青色の2重線を引く

あいうえお

例)太さ3px、赤色の点線を引く

または

あいうえお

上下左右を指定して枠線を引く

上下左右を指定して枠線を引くこともできます。
やり方としては上記プロパティのborderを、
border-leftborder-rightborder-topborder-bottom に指定替えをすればOKです。

【上下左右のみに枠線を指定するCSS】
指定説明
border-left左側の枠線を指定border-left
border-left-style
border-left-width
border-left-color
border-right右側の枠線を指定border-right
border-right-style
border-right-width
border-right-color
border-top上側の枠線を指定border-top
border-top-style
border-top-width
border-top-color
border-bottom下側の枠線を指定border-bottom
border-bottom-style
border-bottom-width
border-bottom-color

例)左側のみ実線を引く

あいうえお

例)左側と下側に実線をを引く

あいうえお

例)上(実線)、右(二重線)、左(点線)、下(波線)を引く

あいうえお

関連項目


スポンサーリンク

CSS

Posted by tora