角を丸くする方法
角を丸くする方法です。角に『丸く見える画像』を設置する事で可能になります。
使用する画像は以下の４種類です。それぞれ別々に設置します。
別々ではなく、１つの画像などを設置するだけでも可能ですが、その際には、『中身の大きさ』に変化があった場合には、それぞれ画像を用意する事になってしまいます。
よって、この様に角を丸くしたい場合には、『角だけ』に画像を置き、中身の大きさに左右されない様につくりましょう。
| 画像 | 設置場所 | 画像 | 設置場所 |
|---|---|---|---|
 | 左上 |  | 右上 |
 | 左下 |  | 右下 |
|  | |
| ホームページ作りに役立つ！ 角を丸くする方法です！ | |
| | |
ＨＴＭＬだけで角を丸くみせるには、テーブル(table)で行います。
テーブル全体の背景色を設定し、下記の様に各角のセルに対して画像を設置して角が丸くなる様に隠します。
| | |
| ホームページ作りに役立つ！ 角を丸くする方法です！ | |
| | |
↓ 罫線を無くすとこの様になります。 ↓
| | |
| ホームページ作りに役立つ！ 角を丸くする方法です！ | |
| | |
また、何も（角丸の画像や文章も）入らないセルに対しては、ブラウザによっては空白セルを表示しない場合がありますので、ダミーとして、１ｐｘ（高）×１ｐｘ（幅）の大きさの透明ｇｉｆ画像であるclear.gifを入れてあります。
余分な部分を無くす為に border="0" cellspacing="0" cellpadding="0" などの指定を忘れない様にしましょう
【注意】
下記の書き方は、横幅の表示範囲の問題で記述途中で改行して記述してます。このままで使用すると、記述途中で余分なスペース等が入り、テーブル自体のサイズ等に影響して正確に表示されません。よって、使用する際には、改行などの無い様にして下さい。
<table width="300" border="0" cellspacing="0" cellpadding="0"
bgcolor="#00ff66">
<tr>
<td width="14" height="14">
<img src="左上の画像" width="14" height="14" alt="">
</td>
<td width="272">
<img src="clear.gif" width="1" height="1" alt="">
</td>
<td>
<img src="右上の画像" width="14" height="14" alt="">
</td>
</tr>
<tr>
<td>
<img src="clear.gif" width="1" height="1" alt="">
</td>
<td>
ホームページ作りに役立つ！<br>角を丸くする方法です！
</td>
<td>
<img src="clear.gif" width="1" height="1" alt="">
</td>
</tr>
<tr>
<td width="14" height="14">
<img src="左下の画像" width="14" height="14" alt="">
</td>
<td width="272">
<img src="clear.gif" width="1" height="1" alt="">
</td>
<td><img src="右下の画像" width="14" height="14" alt="">
</td>
</tr>
</table>
ホームページ作成ＴＯＰ > レイアウト > 角を丸くする方法 > このページのＴＯＰ ▲
テーブルを使用しないで、スタイルシートにて角を丸くする為には、下記の様にそれぞれ角の画像が入るブロックを４個と、本文を入れるブロックを１個用意する事から行います。
ホームページ作りに役立つ！
角を丸くする方法です！
次に、角になるブロック同士を重ねるには、<div>〜</div>の中に<div>〜</div>を入れてしまい、<div><div>〜</div></div>にします。
<div><div></div></div>
<p>ここに本文</p>
<div><div></div></div>
そして、外側、内側両方のブロックに対して角が丸くなる背景画像を設定します。
背景色を#00ff66に設定する事で角が丸くの隠れたブロックが出来上がります。
画像の設置場所の指定は、background-position:左右 上下;を使用して指定します。
この↑↓２つのブロックを重ねて出来ます。
↓ 重ねて出来ます。 ↓
この際、外側、内側のブロックともにmargin,paddingともに０（ゼロ）にし、それぞれを隙間無く重ねます。
また、高さを画像と同じ大きさにして隙間なくします。さらにfont-size:0pxを設定して文字の大きさを無くしておきましょう。（これは、ieなどで自動的に行の高さを調整されてしまう事を無くす為です。）
最後に、本文の部分とブロック部分の隙間を無くして完成です。
【注意】
今回の様に、<div>等の縦横のサイズを正確に調整して配置する様な場合には、ドキュメントタイプは正確に記述してIE6
でもスタイルシートの標準表示になる様に設定しておく必要があります。
下記記述のドキュメントバージョンの記述のみ（<!DOCTYPE HTML PUBLIC 〜・・・〜 tml4/loose.dtd">）を削除して表示してみると下記の様になります。
,IE6,Opera7
の表示が違う！
ドキュメントバージョンを正確に記述しましょう。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<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">
<!--
.topl
{
font-size:0px;
margin:0px;
padding:0px;
width:300px;
height:14px;
background-image:url(左上の画像);
background-repeat:no-repeat;
background-position:left bottom;
background-color:#00ff66;
}
.topr
{
font-size:0px;
margin:0px;
padding:0px;
width:300px;
height:14px;
background-image:url(右上の画像);
background-repeat:no-repeat;
background-position:right bottom;
}
.main
{
margin:0px;
padding-left:14px;
width:286px;
height:40px;
background-color:#00ff66;
}
.bottoml
{
font-size:0px;
margin:0px;
padding:0px;
width:300px;
height:14px;
background-image:url(左下の画像);
background-repeat:no-repeat;
background-position:left bottom;
background-color:#00ff66;
}
.bottomr
{
font-size:0px;
margin:0px;
padding:0px;
width:300px;
height:14px;
background-image:url(右下の画像);
background-repeat:no-repeat;
background-position:right bottom;
}
-->
</style>
</head>
<body>
<div class="topl"><div class="topr"></div></div>
<p class="main">ホームページ作りに役立つ！<br>角を丸くする方法です！</p>
<div class="bottoml"><div class="bottomr"></div></div>
</body>
</html>
ホームページ作成ＴＯＰ > レイアウト > 角を丸くする方法 > このページのＴＯＰ ▲
