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

枠の設定

枠の太さ

<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

無料サーバー

FC2WEB無料ホームページ

お薦めサーバー

さくらインターネット / 500M 月額125円から / 初めてのサーバー選びならここ
ハッスルサーバー / 1G 月額208円から / MT&WPを使うならここで十分
レンタルサーバー Xserver / 5G 月額1,050円から / この金額で多機能
ファーストサーバ / 40G 月額2,940円から / 高性能&高機能サーバー
ＣＰＩ / 50G 月額3,990円から / 高性能&高機能サーバー

ネットショップ

CMSブログソフトウェア

Movable Type (ムーバブル・タイプ）

サイトマップ