CSS - Tips3

3. ブロックを好きなところへ

HTMLにはブロックレベル要素とインライン要素が存在しますが、 CSSではこれらを「display」プロパティによって指定できます（ただし、ブラウザが対応していなければ意味がないが　．．．ここの実例はNN4では正常表示できない）。

ここで紹介する方法は上記のブロックレベル要素に対してのもので、「display」プロパティで「block」に指定するか、ブロックレベル要素に対してのみ有効です。前後関係の文法的なことを考慮しなければ、DIV要素を用いることで対応ができます。

「position」プロパティを用いて、画面上（出力先）の任意の座標（位置）にブロックレベル要素を配置します。これを使うことで、TABLE要素を用いることなく自由にレイアウト表現が可能になります。ただし、ユーザー側の環境（解像度など）に影響を受けるので、１００％自由というわけではありません。 CSS2対応ブラウザのみご使用になれます。（IE4,IE5とNN4が一部。実例はIE4,IE5のみ対応）

▼実例▼

センス無いけどこんなことも出来ますよ

[position] Property

absolute

relative

自由なレイアウト表現が可能になり、Web作成の自由度が向上

▼手引き▼

難しいこと抜きに考えると、下のようなプロパティを使うだけでなんとかなります。

HTMLの文書構造が存在しなくなる書き方はあまり奨められません。（実例も含む）本来は、HTML文書が存在し、それに対してCSSを適用する方法が奨められています。つまり、CSS無しでも正常に文書の閲覧が可能なようにするべきです。

position

位置指定の方法を決める

absolute: 絶対値指定。親要素左上を基準（０，０）として、そこからの横、縦方向の座標を指定。
relative: 相対値指定。親要素に対する位置を指定。同じ親要素内に複数の要素があれば、前の要素の位置の影響も受ける。

top

要素の上座標。

left

要素の左位置。

width

要素の幅。

height

要素の高さ。

上の実例のサンプルを下に示します。

<HTML>
  <HEAD>
    <META HTTP-EQUIV="Content-Type" CONTENT="text/html;charset=Shift_JIS">
    <META Http-Equiv="Content-Style-Type" Content="text/css">
    <STYLE Type="text/css">
    <!--
    DIV.example1{
      position:         relative;
      top:              0px;
      left:             0px;
      width:            450px;
      font:             900 24pt monospace;
      color:            red;
      background-color: #ccccff;
      border:           5pt ridge #0000ff;
      margin:           0.2em;
      padding:          0em;
    }
    DIV.example2{
      position:         relative;
      top:              0%;
      left:             10%;
      width:            50%;
      font:             800 16pt monospace;
      color:            black;
      text-align:       center;
      background-color: #ccffff;
      border:           2pt ridge #00ffff;
    }
    DIV.example3{
      position:         relative;
      top:              0%;
      left:             30%;
      width:            50%;
      font:             800 16pt monospace;
      color:            black;
      text-align:       center;
      background-color: #ccffff;
      border:           2pt ridge #00ffff;
    }
    DIV.example4{
      position:         absolute;
      top:              35px;
      left:             370px;
      width:            300px;
      font:             800 14pt monospace;
      color:            white;
      background-color: #000000;
      border:           4pt ridge #00ff88;
    }
    -->
    </STYLE>
  </HEAD>

  <BODY>
    <DIV Class="example1">
      [position] Property
      <DIV Class="example2">absolute</DIV>
      <DIV Class="example3">relative</DIV>
      <DIV Class="example4">自由なレイアウト表現が可能になり、Web作成の自由度が向上</DIV>
    </DIV>
  </BODY>
</HTML>

CSS Tips

Samples

3. ブロックを好きなところへ

▼実例▼

▼手引き▼