2008年9月1日月曜日

CSS で要素の相対的な位置指定 (2)

CSS で要素の相対的な位置指定 のつづき

1. 四隅が丸い枠を作りたい

Drupal のサイトには、ウィンドウのサイズに合わせて要素がリサイズされる区画がある。下の写真における、薄いオレンジや灰色の部分。四隅は丸まっていて、小さな画像が配置されている。

このような要素は、以下のように相対指定したボックスが配置されている。

080901-005

 

2. HTML と CSS による表現

詳しくは、ネストした div  要素があり、四隅に背景となる「角の丸み」の画像を表示するようにしてある。各要素は、相対位置指定で微妙にずらすことにより、伸縮可能なボックスが実現されている。

上図は、以下の HTML と CSS により描くことができる。ネストされている div 要素はネストされているものほど、上に重なるように配置される。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional/EN">
<html>
  <head>
    <title>相対的な位置指定</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

    <style type="text/css">
    <!--
    #A{
        background-color: blue;
        width: 200px;
    }
    #B{
        position: relative;
        left: 20px;

        background-color: red;
    }
    #C{
        position: relative;
        top: 20px;

        background-color: yellow;
    }
    #D{
        position: relative;
        left: -20px;
        background-color: lime;
        
        padding: 0px 0px 20px 20px;
    }
    -->
    </style>
    
  </head>
  <body>
  
    <div id="A">
        <div id="B">
            <div id="C">
                <div id="D">
                    <p>hoge hoge hoge hoge </p>
                    <p>piyo piyo piyo piyo piyo piyo piyo piyo</p>
                    <p>fuga fuga fuga fuga</p>
                <div>
            </div>
        </div>
    </div>

  </body>
</html>
   なんか CSS の指定ってややこしいなぁ…。 (+_+)

CSS と JavaScript で伸縮する領域を作成 につづく…