スポンサーリンク
スポンサーリンク

枠線の形、太さを指定したい。

CSS

今回、触れるのは「border」プロパティです。コンテンツ領域と
前回の記事で紹介した「padding」の「外側」を囲む4辺です。

borderは線を表すので、太さ、色、形を指定することができます、
borderに関連するプロパティは以下の通りです。

プロパティ
border-style-top 上の枠線を表示
border-style-bottom 下の枠線を表示
border-style-left 左に枠線を表示
border-style-right 右に枠線を表示
border-style 上下左右の枠線をまとめて表示する。

設定値
none borderを表示しない。 ほかのセルが重なる時に、
   ほかのセルの値が優先。初期値
hidden borderを表示しない。
    ほかのセルが重なる時に、この値が優先。
dotted 点線
solid 実践
dashed 破線
double 二重線
groove くぼんだ線
ridge 隆起した線
inset 内側にくぼんだ線
outset 内側が隆起した線

noneとhiddenの違いは、テーブルを作成したときにセル同士の
枠線が重なった場合の処理が異なる・・・確か。この辺りは
記憶が曖昧です。

borderの太さを設定したい

枠線の太さを指定するときは
「border-width-**」プロパティを使います。

プロパティ
border-width-top 上辺の線の太さ
border-width-bottom 下辺の線の太さ
border-width-left 左辺の線の太さ
border-width-right 右辺の線の太さ
border-width 4辺の線の太さ

設定値
数値 px
キーワード 「thin」,「medium」,「thick」が指定できます。

borderの色を指定したい

勘が良い方なら気づいたかと思います。
border-colorプロパティを使います。

設定値
色 #ff000やblue,green,yellowなどを指定します。
transparent 透明になります。

4辺をまとめて設定する。

長々と説明してきましたが、
「border」プロパティを使うと
四方まとめて設定できます。
例:「border:5px solid #ff0000」
これの意味は、幅5px 実線 赤色 という
意味です。私はこの書き方で書いています。
楽だからです。

上記を踏まえたサンプルコードを書きます。

コメント

タイトルとURLをコピーしました