A.T-MOON

contents

パンくずリスト

メッセージエリア



    BOXの基本

メッセージエリア


マーク BOXとは

BOXとは、テーブルと似たようなものなのですが、テーブルはあくまでも【表】であることを忘れてはいけません。
BOXとはその言葉通り【箱】です。大きさを決めた箱の中に物を入れると考えて下さい。
このBOXを使って、ブラウザに表示される大きさや位置を指定します。
サイトの表示サイズを指定したり、コンテンツの中身の文字を指定した場所に指定した大きさで表示できたりと
使い方は様々で、多用できると思います。

マーク BOXの注意点

確かにBOXは非常に便利で色々な使い方をすることができますが
大きな注意点があります。
ここではInternet Explorerを標準として記述しているのですが
Internet Explorerにおいてのwidthプロパティheightプロパティの適用される範囲が
標準的な仕様と異なっているということです。(FirefoxやOperaでは標準仕様が適用)
標準のしようは幅や高さに空間や枠線を含みません。
ところがInternet Explorerの場合は外側の空間(margin)以外の部分を含んでの高さや幅となりますので
標準仕様の表示をするブラウザでは、全く異なった表示をされてしまうということです。
それらをふまえてBOXを作ってみましょう。

マーク BOXを作る

BOXを作る時には、以下のような事が指定できます。
・BOXのサイズ
・BOXの枠の太さと色
・BOXの背景色
・BOX内の文字の位置
・BOX内の文字の大きさや色
・BOXの外周りの空間
・BOXの中身と枠までの空間
・BOXの表示位置
これらをふまえて、ひとつずつ理解していきましょう。
まずは例としてBOXとテーブルを表示してみます。
これがBOXです
これがテーブルです
<html>
 <head>
 <style type="text/css">
 <!--
 .sample_box{
  width: 250px;
  height: 200px;
  padding: 75 0;
  margin: 10 0 10 0;
  border: solid 15px #cccccc;
  background: #ff3300;
  text-align: center;
  font-size: 15px;
  color: #ffffff;
  font-weight: bold;
  }
 -->
 </style>
  <title>ココにタイトル</title>
 </head>
 <div class="sample_box">
 これがBOXです
 </div>

 <table cellspacing="0" border="15" bordercolor="#cccccc" width="250" height="200">
  <tr>
   <td bgcolor="#ff3300" align="center">
   <font style="font-size:15px;color:#ffffff;"><b>これがテーブルです</b></font>
   </td>
  </tr>
 </table>
 </head>
</html>

一件テーブルのように見えますよね。
でも、ソースをご覧いただくとわかるようにテーブルは組んでいません。
スタイルシートのみで設定して、クラスセレクタを利用して表示したい所に挿入しています。

これらを応用して色んなBOXを作るのですが
margiだのpaddingだの、色んなプロパティ(属性)があり、それらを理解しないといけないと同時に
表示するOSやブラウザによってはそれぞれのプロパティの定義が異なる場合があり
同じサイズで表示されないという場合もあるので注意しましょう。
次のページからは、BOXの細かい設定について記述していきます。

ページTOP

スタイルシートTOPに戻る BOXのサイズの設定