角を丸めてみる
このようにブロック要素の四隅を丸める方法です。このサイト「ezorisu-web」のコメント欄は、フキダシっぽく見せるために色を付けて角を丸めてあります。（トラックバックは四角いままで区別している）
p要素内に疑似要素である;beforeと:afterを追加して、その中に角を丸める画像を入れています。一番シンプルだと思われるやり方です。
ただしIEでは疑似要素に対応していないのでうまくいきません。IEで見た場合は、角丸処理をした:beforeと:after部分が表示されないだけで、色つきの四角いブロックに囲まれた文章はきちんと読めます。
まずは四隅をまるく見せるための画像を用意。大抵は1/4円の画像で処理していると思いますが、ここでは1/4円の外側の画像を使っています。正方形に内接する円の外側部分四つをそれぞれ左上、右上、左下、右下画像とし、色は背景色に合わせます。このページは背景色が白なので、白い画像にします。
これだとページの背景色と同色でブロック要素の隅をまるく覆っているだけなので、ブロック要素の色をいろいろ変えても丸めるための画像は最初に作ったよっつのみ。そのつど色を合わせた角丸用の画像を作らなくてもいいです。ただし、この方法が有効なのは背景色が単色の場合だけですが…
とりあえず左上をmaru-tl.gif、右上はmaru-tr.gif、左下をmaru-bl.gif、右下をmaru-br.gifとしました。
HTMLは、p要素に適当なクラス名を付けます。ここではclass=”maru”にしました。
HTML<p class="maru">この部分が囲みたい文章の中身です。</p>
これだけ。余計な要素が付かないのでシンプル。
次にCSSです。クラス名”maru”を付けたp要素に対して文章が読みやすいように両サイド15pxほどパディングで横方向の余白を作りました。上下方向は角丸の処理でそのスペース分逃げることになるので0pxでOK。”maru”部分全体の色もここで設定。
p要素”maru”に対して:beforeと:afterを追加します。:beforeと:afterはパディングの内側に入ることになります。
次に:beforeの中にcontentプロパティを使って左側のmaru-tl.gif画像を挿入。display:blockを忘れずに。さらにバックグランドイメージで右のmaru-tr.gifを追加。リピートしないようにして、位置は右上。afterも同じように追加。
あとは、:beforeの左右をパディングでずれた分だけマージン-15pxで外側にずらしてあげます。
afterも同じ。
最終的なCSSは、このようになります。
CSSp.maru {
padding: 0 15px;
background-color: #fcdbb6;
}
p.maru:before {
content: url("images/maru-tl.gif");
display: block;
background-image: url("images/maru-tr.gif");
background-repeat: no-repeat;
background-position: top right;
margin: 0 -15px;
}
p.maru:after {
content: url("images/maru-bl.gif");
display: block;
background-image: url("images/maru-br.gif");
background-repeat: no-repeat;
background-position: bottom right;
margin: 0 -15px;
}
ポイントは、
- ブロック要素内の上と下に疑似要素:beforeと:afterを追加。
- contentとbackground-imageを使って、疑似要素内にふたつの画像を表示する。
- 疑似要素の位置をmarginを使って調整する。
いろいろと応用が利きそうですね。
あとはIEでは表示されないので、IE用に別枠で対策を考えるか、IEを潔く切り捨てるかです。
このようなさりげないデザインは、もちろんウェブサイトをきれいに見せますし、細かいところで印象も変わってくるでしょう。しかし、レイアウトが大きく狂うわけでもないし、もちろん文章が読めなくなるわけではありません。
「ezorisu-web」では、この辺の細かな印象の違いにはIE対応しない方針です。昨今、読む方としてはいろんなブラウザを選べるわけだし、これもIEの個性と思えばそれはそれでいいのかなと、最近私は考えています。
コメント:2