A.T-MOON

contents

パンくずリスト

メッセージエリア



    BOXの枠線の種類と色の指定

メッセージエリア

マーク BOXの枠線の種類の指定

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


border属性を使ってBOXの枠線の色を指定します。
Aにはどのラインを指定するのかを記述します。それぞれtopbottomleftrightで指定します。
Bには枠線の種類を指定します。

A ラインの指定
top
bottom
left
right
記述なし※1 上下左右一括
B 枠線の種類
none(デフォルト) 表示なし
hidden※2 表示なし
solid 実線
dashed 破線
dotted 点線
groove へこんだように見える線線
ridge 浮き上がったように見える線
inset 内側がへこんだように見える線
outset 内側が浮き上がったように見える線

※1 Aの記述なしの場合はborder-styleとだけ記述し、一括指定となります。
※2 Bの「hidden」は「none」と同じく表示なしとなりますが
    「none」の場合は他の値を優先し(テーブルのセルの枠線として重なり合った場合など)
    「hidden」の場合は自身の値を優先します。

※例)
これが埋め込みスタイルシートで指定したBOXです
border-style:はsolidです

これがインラインスタイルシートで指定したBOXです
border-style:はdashedです
<html>
 <head>
 <style type="text/css">
 <!--

 .sample_box2{
  border-style: solid;
  }
 -->
 </style>
  <title>ココにタイトル</title>
 </head>
 <body>
  <font color=red>※例</font>
  <div class="sample_box2">
  これが埋め込みスタイルシートで指定したBOXです<br>
  border-style:はsolidです
  </div>

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

 </body>
</html>

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

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


マーク BOXの枠の色の指定

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


color属性を使ってBOXの枠の色を指定します。
Aにはどのラインを指定するのかを記述します。それぞれtopbottomleftrightで指定します。
Bにはカラーコードまたはカラーネームで指定します。

A ラインの指定
top
bottom
left
right
記述なし※1 上下左右一括

※1 Aの記述なしの場合はborder-colorとだけ記述し、一括指定となります。

※例)
これが埋め込みスタイルシートで指定したBOXです
border-colorは#ff3300、border-styleはdottedです

これが埋め込みスタイルシートで指定したBOXです
border-colorは#aaaaaa、border-styleはgrooveです
<html>
 <head>
 <style type="text/css">
 <!--

 .sample_box3{
  border-color: #ff3300;
  border-style: dotted;
  }
 -->
 </style>
  <title>ココにタイトル</title>
 </head>
 <body>
  <font color=red>※例</font>
  <div class="sample_box3">
  これが埋め込みスタイルシートで指定したBOXです<br>
  border-colorは#ff3300、border-style:はsolidです
  </div>

  <br>
  <div style="border-color:#aaaaaa; border-style:groove;">
  これがインラインスタイルシートで指定したBOXです<br>
  border-colrorは#aaaaaa、border-style:はdashedです
  </div>

 </body>
</html>

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

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

ページTOP

BOXのサイズの指定 BOXの枠の太さの設定