MB-Support

パソコン初心者のサポートページ

CSS:枠線の種類、太さ、色の指定方法

 枠線の種類(border-style)、太さ(border-width)、色(border-color)


DIV (ディビジョン)や P(パラグラフ)は、ソースに記述してもホームページで確認する事はできませんが、始まりと終わりの上下に空白が入ります。これらのブロックレベルに枠線を付ける方法をご紹介します。span、fontなど、文章中に記述しても折り返しや空白が入らないインラインレベルでは利用できません。



枠線の種類

dotted(点線)、dashed(破線)、solid(実線)、double(二重線)、groove(沈んだ線)、inset(沈んだ辺)、ridge(浮き上がり線)、outset(浮き上がり辺)、none(線無し)。括弧内は正式名称ではなく、管理人が見た目で決めた言葉です。


枠線の表示

基本となるHTMLソース

border-style:線の種類;

今回は枠線を表示するために、DIV の横幅 400 px 、縦幅 100 px 、マージンを上下に 10 px 指定しました。 線の種類は、solid(実線)を指定しましたが、ここを上の枠線の種類から選択して変更します。 none を指定した場合、枠線は無くなり、初期状態と同じになります。

HTMLソース

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>枠線の種類 サンプル2</title>
<style type="text/css">
<!--
div {
width:400px;
height:50px;
margin:10px 0px;
border-style:solid;
}
-->
</style>
</head>
<body>
<div><h3>solid</h3></div>
</body>
</html>

ブラウザ

枠線は上、右、下、左を個別に指定できます。

border-style-top:solid;	//上の枠線
border-style-right:double;	//右の枠線
border-style-bottom:dotted;	//下の枠線
border-style-left:dashed;	//左の枠線

上下、左右を個別に指定できます。

border-style:solid dotted;

上、左右、下を個別に指定できます。

border-style:solid dotted double;

枠線の太さ

基本となるHTMLソース

border-width:数字と単位、または、キーワード;

枠線の太さを指定するには、枠線を表示する必要があります。

HTMLソース

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>枠線の種類 サンプル3</title>
<style type="text/css">
<!--
div {
width:400px;
height:50px;
margin:10px 0px;
border-style:solid;
}
-->
</style>
</head>
<body>
<div style="border-width:thin;"><h3>thin</h3></div>
<div style="border-width:medium;"><h3>medium</h3></div>
<div style="border-width:thick;"><h3>thick</h3></div>
<div style="border-width:20px;"><h3>20px</h3></div>
</body>
</html>

ブラウザ

枠線の太さは、上、右、下、左を個別に指定できます。

border-top-width:10px;	//上の枠線
border-right-width:20px;	//右の枠線
border-bottom-width:30px;	//下の枠線
border-left-width:40px;	//左の枠線

上下、左右を個別に指定できます。

border-width:10px 20px;

上、左右、下を個別に指定できます。

border-width:10px 20px 30px;


枠線の色

基本となるHTMLソース

border-color:色;

枠線の色を指定するには、枠線を表示する必要があります。

HTMLソース

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>枠線の種類 サンプル3</title>
<style type="text/css">
<!--
div {
width:400px;
height:50px;
margin:10px 0px;
border-style:solid;
border-width:medium;
}
-->
</style>
</head>
<body>
<div style="border-color:#ff0000;"><h3>border-color:#ff0000;</h3></div>
</body>
</html>

ブラウザ

枠線の色は、上、右、下、左を個別に指定できます。

border-top-color:#000000;	//上の枠線
border-right-color:#ff00000;	//右の枠線
border-bottom-color:#008000;	//下の枠線
border-left-color:#808080;	//左の枠線

上下、左右を個別に指定できます。

border-color:#000000 #ff00000;

上、左右、下を個別に指定できます。

border-color:#000000 #ff00000 #008000;


枠線の種類、太さ、色を一括指定

border: に続けて、太さ、種類、色を半角スペースで区切ります。例えば、以下は太さ20px、実線、色#008000 の枠線を表示します。

基本となるHTMLソース

border:20px solid #008000;

HTMLソース

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>枠線の種類 サンプル4</title>
<style type="text/css">
<!--
div {
width:400px;
height:50px;
border:20px solid #008000;
}
-->
</style>
</head>
<body oncontextmenu="return false">
<div><h3>border:20px solid #008000;</h3></div>
</body>
</html>

ブラウザ

上、右、下、左の枠線の太さ、種類、色を個別に指定できます。

border-top:10px solid #008000;		//上の枠線
border-right:20px double #ff00000;	//右の枠線
border-bottom:30px dotted #008000;	//下の枠線
border-left:40px dashed #080808;	//左の枠線



戻る 一覧表示 次へ


Copyright © 2018 MB-Support パソコン初心者のサポートページ All Rights Reserved.

管理人サイト閲覧方法プライバシーポリシー著作権/免責事項