A.T-MOON

contents

パンくずリスト

メッセージエリア



    BOXのサイズの指定

メッセージエリア


マーク BOXのサイズ指定

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


BOXタグというものはありません。周りとの余白や枠線などを指定して、そのエリアをBOXと呼びます。
またBOXは埋め込みスタイルシートスタイルファイルに記述するものとインラインスタイルシートに記述するものとがあります。

まずはwidth属性height属性を使ってBOXのサイズを指定します。
A及びBには単位付数値またはパーセントまたはautoで指定します。

ココ大事!!


ここで注意しなくてはいけないのが適用範囲です。
Windows版のInternetExplorer5.5までと6.0以降の互換モードでは
内容の周りの空間と枠線も含んだ範囲に対して幅や高さが設定されてしまうのです。
本来はボックスの内容部分の幅も含んだ領域の幅や高さとして設定されますが
InternetExplorerでは枠線と内容の周りの空間も含んだ領域の幅や高さとして設定されます。
特にボックスの枠線を太くしたり、内側の余白を日r区取っている場合には
正しい表示をするブラウザとは全く異なった表示結果となりますので注意して下さい。

※例)
埋め込みスタイルシートで指定したBOXです
わかりやすいように背景に色をつけました

インラインスタイルシートで指定したBOXです
わかりやすいように背景に色をつけました
width250px; height200pxのBOXです
<html>
 <head>
 <style type="text/css">
 <!--

 .sample_box1{
  width: 250px;
  height: 200px;
  background: #ff3300;
  }
 -->
 </style>
  <title>ココにタイトル</title>
 </head>
 <body>
  <font color=red>※例</font>
  <div class="sample_box1">
  これが埋め込みスタイルシートで指定したBOXです
  わかりやすいように背景に色をつけました
  </div>

 <br>
  <div style="width:250px; height:200px; background-color:#aaaaaa;">
 これがインラインスタイルシートで指定したBOXです
  わかりやすいように背景に色をつけました
  </div>

 width250px; height200pxのBOXです
 </body>
</html>

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

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

ページTOP

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