? 枠線の設定(border) - ボックスプロパティ - スタイルシート入門

枠線の設定

広告

ここまでに枠線の太さ(border-width)、色(border-color)、種類(border-style)の設定方法について見てきましたが、この3つをまとめて設定することができます。定義式は下記のようになります。

border : width style color

プロパティは"border"です。指定できる値は個別に設定する場合と同じです。

border : 2px solid #ff0000;
border : 1px dotted red;

"border"プロパティは上下左右の枠線の設定を一括で指定するものしか用意されていません。

では実際に試してみます。

sample6.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html lang="ja">
<head>
<meta http-equiv="Content-Type" Content="text/html;charset=UTF-8">

<title>スタイルシートサンプル</title>

<link rel="stylesheet" href="./css/sample6.css" type="text/css">

</head>
<body>

<p class="test1">
ボーダーの設定です border:2px solid #cc0000;
</p>

<p class="test2">
ボーダーの設定です border:thin dashed blue;
</p>

</body>
</html>

sample6.css

@charset "Shift_Jis";

p{
padding:10px;
}

p.test1{
border:2px solid #cc0000;
}

p.test2{
border:thin dashed blue;
}

実行結果は下記の通りです。

枠線のサンプル

( Written by Tatsuo Ikura )

関連記事 (一部広告含む)