A.T-MOON

contents

パンくずリスト

メッセージエリア



    BOXの枠の太さの指定

メッセージエリア

マーク BOXの枠の太さの指定 border-A-width:B

 埋め込み: {border-A-width:B;}
 インライン: <○○ style="border-A-width:B;">ここに文字</○○>


border属性を使ってBOXの枠の太さを指定します。
Aにはどのラインを指定するのかを記述します。それぞれtopbottomleftrightで指定します。
Bには単位付数値またはthinmediumthickで指定します。

A ラインの指定
top
bottom
left
right
記述なし※1 上下左右一括
B※2 ラインの太さ
thin 細い枠線
medium 中くらいの枠線
thick 太い枠線
※1 Aの記述なしの場合はborder-widthとなります。
※2 Bの「thin」「medium」「thick」で指定した場合、実際の太さはブラウザによって異なるので注意して下さい。

※例)
これが埋め込みスタイルシートで指定したBOXです
border-styleはridge、border-widthはthickです
忘れずに線の種類を指定しないと線が出ませんよ

これがインラインスタイルシートで指定したBOXです
border-styleはinset、border-widthはmediumです
忘れずに線の種類を指定しないと線が出ませんよ
<html>
 <head>
 <style type="text/css">
 <!--

 .sample_box4{
  border-style: ridge;
  border-width: thick;
  }
 -->
 </style>
  <title>ココにタイトル</title>
 </head>
 <body>
  <font color=red>※例</font>
  <div class="sample_box4">
  これが埋め込みスタイルシートで指定したBOXです<br>
  border-styleはridge、border-widthはthickです<br>
  忘れずに線の種類を指定しないと線が出ませんよ <br>
  </div>

 <br>
  <div style="border-style: inset; border-width: medium;">
 これがインラインスタイルシートで指定したBOXです
 </div>

 </body>
</html>

まずは埋め込みスタイルシートです。
要素名を付けましょう。ここではsample_box4と名付けました。
セレクタの種類の所で説明しましたが
クラスセレクタはひとつの文章内で重複して使用することができますが
IDセレクタはひとつの文章内で重複して使用することはできません。
よってここではクラスセレクタを使用します。
埋め込みスタイルシート内のsample_box4で枠の幅の指定をします。
この時枠線の種類を忘れず指定しましょう。記述しないとデフォルトが適用され、枠線が表示されません。
body内の表示したい所に範囲を指定して記述します。(範囲の指定はコチラ→範囲の指定

次にインラインスタイルシートです。
body内の表示したい所に範囲を指定して記述するのは同じなのですが、指定範囲に直接、styleの記述します。
<style="">という形で記述していきます。
それぞれのプロパティを;(半角セミコロン)で区切って記述します。

ページTOP

BOXの枠線の種類と色の指定 BOXの外側の余白を指定