スタイルシート(CSS)レイアウト

Home>編集方法(カスタマイズ)目次>簡易スタイルシートリファレンス目次>枠の設定

枠の設定

枠の太さ

<div>のBOXを太さ1pxに指定する


div{
border-width: 1px 1px 1px 1px;
border-style: solid solid solid solid;
border-color: black black black black;
}
---------------------------------------
div{
boeder-top: 1px solid black;
boeder-right: 1px solid black;
boeder-bottom: 1px solid black;
boeder-left: 1px solid black;
}
---------------------------------------
div{
border: 1px solid black;
}

並びの順番は左から上・右・下・左となります。上下を5pxに指定すると


div{
border-width: 5px 1px 5px 1px;
border-style: solid solid solid solid;
border-color: black black black black;
}
---------------------------------------
div{
boeder-top: 5px solid black;
boeder-right: 1px solid black;
boeder-bottom: 5px solid black;
boeder-left: 1px solid black;
}

枠の色

上記サンプルのカラー部分を変更して下さい。⇒色見本

枠（線）の種類

上記サンプルのborder-style部分を変更して下さい。⇒線の種類

　　　

幅と高さ

上記サンプルで幅100px高さ100pxに指定する


div{
width: 100px;
height: 100px;
border: 1px solid black;
}

▲このpageの上へ|目次

Home