空のdivを使わずに角丸を作る:CSS小技

ブログが作りたい!CSSの小技 > 空のdivを使わずに角丸を作る:CSS小技

空のdivを使わずに角丸を作る:CSS小技

空のdivを使わずに角丸を作る:CSS小技

CSSの小技(26)

今回も、角丸を作る CSSの小技をご紹介します。

前回の記事『シンプルで分りやすい角丸を作る:CSS小技』は、シンプルで分りやすいものでしたが、中身のない空(から)の divを使う方法でした。

これは装飾(デザイン)のために、divタグを書いているようなものですから、あまり好ましい方法とは言えないかもしれません。

そこで今回は、空(から)の divを使わずに、角丸を作る方法をご紹介いたします。


空のdivを使わない角丸とは?

ぱっと見た感じは、前回の角丸と似ていますが、今回は空(から)のdivを使っていません。

空divを使わない角丸

サンプルも用意しましたが、ご覧いただいても、とくに違いが分らないかもしれません。

ソースコードと、ポイント解説にて、ご説明いたします。読み進めていただくと、違いがよく分かるはずです。


空のdivを使わずに角丸を作る方法

1:ソースコード

(1)HTMLコード
(2)CSSコード

2:ポイント解説

まず、どういうお話かと言うと、divの中にdivが入っているのは、分かりますよね。(外側の「div.comment-outside」と、内側の「div.comment-inside」です)

これは、人の目で見ると、divは重なって見えます。

人の目で見るとdivは重なって見える

重なっていることが分りやすいように、上のように描きましたが、実際に見えているのは、前面の divだけです。まだ、marginもpaddingも入れていませんから、ピタリ重なっている状態です。

見えているのは前面

何となく状況はつかめたかしら?大丈夫でしょうか?それでは、段階的に説明していきます。

外側の「div.comment-outside」には、上側が角丸の画像を背景として topで入れてあります。内側の「div.comment-inside」には、下側が角丸の画像を背景として bottomで入れてあります。

背景画像の指定

しかし、これでは前面(内側のdiv)しか見えていません。そこで、外側の「div.comment-outside」にて、「padding-top」を入れています。

こうすることで、内側の「div.comment-inside」が押し込まれるような形になるため、上側の角丸が見えるようになります。

外側のdivにpadding-top

これで良さそうに見えますが、実は、内側の「div.comment-inside」に文字などを入れると、文字と背景がかぶってしまいます。

文字と背景がかぶる

そこで、内側の「div.comment-inside」に、「padding-bottom」を入れているわけです。

こうすることで、文章が押し込まれるような形になるため、下側の角丸に文章がかぶりません。

内側のdivにpadding-bottom

あとは忘れずに、背景色も設定しておきます。

背景色も設定する

このような形で、角丸にしています。いかがでしょうか?何だか、ちょっと狐につままれた感じがするかもしれませんが、できてしまうんですね、これが。

前の記事へ
次の記事へ

次回予告

次回も、また別な角丸を作る CSSの小技をご紹介したいと思います。


関連記事

CSSに関連する記事の一部を、ご紹介します。

作成日:2009/05/20 更新日:2009/05/20

コメントありがとうございます。

お手数ですが、コメント前に留意事項をご覧くださいませ。

また、現在ご質問にお答えする余裕がない状態にあります。よろしくお願いいたします。

コメントの投稿

内緒のときは、チェックしてください。

トラックバック

http://kumacrow.blog111.fc2.com/tb.php/514-d7b22ae2
 | トップページ | 

FC2ブログの作り方・作成

GIMP2で画像を編集しよう

イラストが描ける Inkscape

初心者のためのSEO対策

Google Analytics入門

アクセス解析QLOOK

アイデアの作り方

超ビギナー向けHTML入門

超ビギナー向けのCSS入門

FC2ブログのカスタマイズ

初心者向けのCSS小技

Web制作に役立つ本

ブログでお小遣い稼ぎ

これはうまい!

誰にでも才能はあるのです

RSSフィード

プロフィール

KumaCrow(クマクロ)

KumaCrow

FC2ブログによるブログの作り方をご紹介しています。「初心者の人にも分かりやすく!」がモットーです。

Twitter KumaCrow

リンクフリー♪
フォローも、ふりっふり~

伝わる文章を書くコツ

最近の記事

最近のコメント

パソコン入門

アクセスの多かった記事

先月アクセスが多かった記事を、ご紹介します。

【1位】
GIMP2の使い方
【2位】
プリントスクリーンの方法
【3位】
GIMP2 パスの使い方
【4位】
GIMPとは?
【5位】
レイヤーとは?

初心者のデジカメ撮影術

ホームページ制作にJimdo

このブログの評価

自分を見つめなおす

ブログランキング

クリックしちゃいなよ!You、クリックしちゃいなよ!そして、Canして、Doしちゃいなよ!

FC2ブログランキングに参加してみませんか?見に来てくれる人が少しだけ増える・・・かもしれません。

FC2カウンター

ブログ開始(2007年7月)から、ユニークユーザ数が「のべ240万人」に達しました。いつもご覧いただきまして、ありがとうございます。(2011/01/05、FC2カウンター故障・データ消失により、10万人分くらいマイナスとなりました)

子どもの教育

最近のトラックバック

+++ お友達のブログ・お世話になっているサイトさま +++

ふわふわふわりん
無料ウェブ素材 Tyto-Style
海外のSEO対策・SEOツールをわかりやすく解説するブログ
日南商工会議所による情報化支援ブログ
気になるけど
聞き捨てならん!!
かちびと.net
ありのごとくあつまりて