CSS で要素の相対的な位置指定 のつづき
1. 四隅が丸い枠を作りたい
Drupal のサイトには、ウィンドウのサイズに合わせて要素がリサイズされる区画がある。下の写真における、薄いオレンジや灰色の部分。四隅は丸まっていて、小さな画像が配置されている。
このような要素は、以下のように相対指定したボックスが配置されている。
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 で伸縮する領域を作成 につづく…
0コメント:
コメントを投稿