スタイルシート(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;
}
----------------------------
厳密には
div{
  width: 98px;
  height: 98px;
  border: 1px solid black;
}

Home | 編集方法TOP | 簡易スタイルシートリファレンス目次 | Page Top

無料サーバー
お薦めサーバー
ネットショップ
CMSブログソフトウェア

サイトマップ