【html/CSS】divやtableのborder(枠線)に色をつける方法

「tableの線の色を変えたいけどどうやるんだろう？」

border(枠線)に色をつける方法を解説します。

【結論】枠線の色を変える「border-color」

枠線の色はCSS「border-color」で指定します。

値はカラーコードを指定します。

カラーコードについて詳しくはこちら↓

しかし枠線を指定するときborder-colorだけでは枠線がつきません。

枠線は「border-width」で線の太さ、「border-style」で線の種類を指定する必要があるためです。

枠線を指定するときはこの3つを必ず指定しましょう。

<style>
.example{
    border-width: 3px;
    border-style: solid;
    border-color: #cc4343;
}
</style>
<div class="example">
    border-width: 3px;<br>
    border-style: solid;<br>
    border-color: #cc4343;
</div>

borderを一行で記述する

枠線を指定するたびに「border-color」「border-width」「border-style」3つを指定するのはちょっとメンドウです。

下記のように一行で指定してしまいましょう。

<style>
.example2{
    border: 3px solid #cc4343;
}
</style>
<div class="example2">border: 3px solid #cc4343</div>

borderのあとに 「border-color」「border-width」「border-style」 それぞれの値を連続で記述します。順番は問いません。値の間には半角スペースをいれます。

borderについて詳しくはこちら↓

tableの枠線の色を変える

セル	セル	セル
セル	セル	セル
セル	セル	セル

<style>
.example3{
    border-collapse: collapse;
}
.example3 td{
    border: 2px solid #ff7500;
}
</style>

<table class="example3">
    <tr>
        <td>セル</td><td>セル</td><td>セル</td>
    </tr>
    <tr>
        <td>セル</td><td>セル</td><td>セル</td>
    </tr>
    <tr>
        <td>セル</td><td>セル</td><td>セル</td>
    </tr>
</table>

「border-collapse: collapse」はtableとtdの線を共有させるCSSです。

これにより枠線の指定がカンタンになります。

そのうえでtdにborderを指定します。

色などの指定方法は先述した通りです。

htmlだけでtableの色を変える

セル	セル	セル
セル	セル	セル
セル	セル	セル

<table bgcolor="#ff7500" cellspacing="2">
    <tr>
        <td bgcolor="#FFF">セル</td><td bgcolor="#FFF">セル</td><td bgcolor="#FFF">セル</td>
    </tr>
    <tr>
        <td bgcolor="#FFF">セル</td><td bgcolor="#FFF">セル</td><td bgcolor="#FFF">セル</td>
    </tr>
    <tr>
        <td bgcolor="#FFF">セル</td><td bgcolor="#FFF">セル</td><td bgcolor="#FFF">セル</td>
    </tr>
</table>

html属性であるbgcolorは要素の背景色を指定できます。

bgcolorでtable全体の色を指定します。これが線の色となります。

cellspacingはセル間の隙間をpx指定します。これが線の太さとなります。

tdにbgcolorでマスの色を指定します。

これでhtmlだけでtableの色を変えることができます。

しかし、htmlが長くなりますし、マスが増えるたびにbgcolorを指定するのはメンドウウです。

そもそもCSSでできることはCSSで指定することが推奨されています。

基本的にCSSでの指定をオススメします。

【まとめ】枠線に色をつける方法

border-colorで指定する。

ただし、border-colorだけでは線にならないため下記のように太さと種類を同時に指定する。

以上、border(枠線)に色をつける方法でした。