シンプルで分りやすい角丸を作る:CSS小技

ブログが作りたい!CSSの小技 > シンプルで分りやすい角丸を作る:CSS小技

シンプルで分りやすい角丸を作る:CSS小技

シンプルで分りやすい角丸を作る:CSS小技

CSSの小技(25)

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

「角丸」と言われても、何だか分らないかしら。四角いボックスの角っこを、丸っこくしたものを「角丸」などと呼びます。

仁鶴師匠もいろいろと「まぁ~るくおさめて」くれているようなので、負けじとあちこち角丸にしていきましょう。


シンプルで分りやすい角丸とは?

角丸にする方法は、いろいろとあるんですけれども、今回ご紹介するのは、最も分りやすいシンプルな方法です。

シンプルで分りやすい角丸

divが上中下の三段になっており、真ん中のdivを、次の上部用の角丸画像と、下部用の角丸画像ではさんでいます。とてもシンプル。

上部用の角丸画像
下部用の角丸画像

そして、文章の箇所には、背景画像と同じ色を指定することで、ひとかたまりのグループに見えるわけです。

角丸の構成

これなら、たとえ文章が長くても、いくらでも下に伸張することが可能です。もちろん、文字だけを大きく表示しても、レイアウトは崩れません。

前述の画像と同じですけれど、良かったら、サンプルもご覧になってみてください


シンプルで分りやすい角丸を作る方法

1:ソースコード

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

2:ポイント解説

ポイントは、余計なmarginやpaddingが入らないようにすること、そして、widthとheightをちゃんと指定しておくことでしょうか。

並べているだけですから、分かり良いと思います。

ただ、ご覧いただいても分るように、背景画像を指定している<div>の中が空(から)なのは、あまり好ましくないですよね。

3:HTMLハック(?)

また、表示上の問題もあります。IE6では divと divの間に次のような余計なスペースが入ってしまう場合があるのです。

IE6では divと divの間にスペース

このような場合は、空の divの中に、コメントを入れておくと改善されるはずです。

前の記事へ
次の記事へ

次回予告

今回はシンプルで分りやすい角丸を作りました。ただ、中身のない<div>を使うのは、ちょっと気になりますよね。

そこで次回は、中身のない<div>なしで角丸を作る CSSの小技をご紹介したいと思います。


関連記事

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

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

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

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

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

No title

なるほど~
この角丸技はつかわさせていただきます!!
IE6のハックもそのまんま流用させていただきます。
上下の画像作成してdivで囲むというのは思いつかなかったです。
ありがとうございます。

角丸

fuminchuさん、こんばんは!(・∀・)/ぐいぶにん
コメントありがとうございます。


角丸の方法って、すんごいあるみたいです。
(私が知っているだけでも、4通りくらいあります)

引き続き、あと 3つくらいご紹介させていただきますので、
状況にあわせて、より良いものを選んでくださいませ。(*'‐'*)

それでは、またー。(*´∀`)人(´∀`*)

コメントの投稿

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

トラックバック

http://kumacrow.blog111.fc2.com/tb.php/513-268fcc8e
 | トップページ | 

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
ありのごとくあつまりて