枠線あれこれ

HTML4のtable要素に指定できるborder属性を使って、表の枠線の太さを指定することができますが、太さだけで形状や色を指定することはできません。このとき、CSSの「borderプロパティ」を使用すると、さまざまな枠線のスタイルを指定することができます。ここでは、CSSを利用した枠線の表示方法をご紹介します。

「borderプロパティ」で指定できるのは、枠線の色、枠線の太さ、枠線の形状です。枠線の色はborder-color、枠線の太さはborder-width、枠線の形状はborder-styleで指定し、borderではこれら3つを同時に指定することができます。

これらを組み合わせることで様々な枠線を表示することができます。ここでは、二重のテーブルに対して枠線と背景色 (background-color) を変更させて表示結果を確認できるようにしてみました。生成されたコードは、コントロール画面下に表示されます。

borderプロパティとbackground-colorの詳しい解説は下記を参照してください。

• border-color (枠線の色)
• border-width (枠線の太さ)
• border-style (枠線の形状)
• border (枠線の設定をまとめて指定)
• background-color (背景色)

　

■ 使い方

画面左側に選択できる項目が表示されますので、それぞれの値を変化させます。ここではいくつかの値を選択できるようになっていますが、Border-Style以外は別の値を指定することができますので、表示されたコードを適宜変更して使ってくださいね。

Border Style Demo

外枠と内枠の線の種類と、背景色を指定できます。あれこれ試してみてくださいね。 なお、枠線の幅と色、背景色は選択肢にないものも指定できます。適宜変更して使ってください。 Border-width : 枠線の幅 Border-Style : 枠線の形式 Border-Color : 枠線の色 Background-Color : 背景色