[CSS] 角丸は便利だけど理解に苦しむ時もある

公開日: : 最終更新日:2014/08/09 CSS, Web制作 ,

一般的な角丸の使い方

よく使う角丸は、divを角丸にしたり、画像を角丸にしたりすることでしょう。
borderを付けて枠線を入れたり、box-shadowで影を付けたりもします。

昔は、画像を切って四隅に入れたり、繰り返しで伸ばしたり、それはそれは面倒なものでした。

よく使われる角丸、つまりborder-radiusは下記のようなものでしょう。

.kadomaru{
 border-radius:5px;
 border:1px solid #CCC;
 padding:10px;
}

そして、htmlは下記です。

<div class="kadomaru">
ああああああああああああああああ
</div>

こういった感じがよく使われている方法です。

ここが変だよ角丸さん!

CSSのborder-radiusは、内包している要素には関係ありません。
つまり、外のdivを角丸にしたからといって中にあるものまで角丸にならないのです。
ちょっとわかりずらいので、例を上げましょう。

例えば、先ほどの角丸にしたdiv class=”kadomaru”。
これのpaddingを0にして、画像を入れます。
結果が下記の様になります。

img_20140807_01

.kadomaru{
 border-radius:30px;
 border:1px solid #F90;
 width:200px;
}

わかりやすい様に角丸を大きめに設定してありますので、途中で枠線が消えているのがわかると思います。
これが内包している要素には関係ない状態です。

本当に角丸を使い始めた当初は、なぜ中身を無視するのか理解出来ませんでしたが、そういうものだと納得せざるをえませんでした。

本当は内包している要素も無視しない!

実は、ただ角丸にしているだけだから中身が角丸にならないだけなんです。
ちゃんと設定してあげれば、内包している要素も無視しません。

意外と知られていないのか、divを角丸に、中の画像も角丸にと設定する人が多いです。
それでなれている人はいいですけど、もったいないといえば、もったいない。

では、ソースを見て行きましょう。

.kadomaru{
 border-radius:30px;
 border:1px solid #F90;
 width:200px;
 overflow:hidden;
}

一番したのoverflowが増えただけですけど、これで中身も角丸になるんです。

img_20140807_02

ほらね、ちゃんと収まってます。
こんなことだって出来るんです。

img_20140807_03

わざわざ中の画像にまでborder-radiusを設定しなくてもいいんです。

ソースはこちら。

.kadomaru{
 border-radius:100px;
 border:5px solid #F90;
 width:200px;
 overflow:hidden;
 box-shadow:0 0 4px #666666;
}

一応、htmlも。

<div class="kadomaru">
 <img src="sample.png" width="200" height="200" alt="" />
</div>

これだけです。
角丸の性質とoverflowの使い方をしっかりと覚えておけば、簡単に出来る事です。

余談ですけど、画像に最初からこのクラスを付ければいいじゃんってこともあるんですが、こういう動きをするよっていう例ですのであしからず。

まとめ

CSS3も本格的に採用され始めてきていますし、これからどんどん角丸を使う機会も増えていくでしょう。
そんな時に、しっかりと理解しているのとしていないのでは雲泥の差があります。

使いと時と、使い方で無駄なソースをなくして、快適なCSSライフを楽しみましょう!

ad

関連記事

[html5] おさらいがてらWordPressのテーマを作るためにHTML5で一から作るよ![第2回]

忙しくて忘れてました。僕です。 さて、今回はもうちょっと見栄えもよくしたいなーなんて考

記事を読む

[HTML]デザインは、やはり大切だった!

デザイン無しでのサイト制作には限界がある 見切り発車で、 おさらいがてらWordPressのテーマ

記事を読む

[jQuery] Block Scrollプラグイン

今回は、ブロック毎にスクロールするjQueryプラグインのご紹介です。 Block Scroll

記事を読む

[CSS]印刷用CSSの設定方法

印刷用のCSSは、設定が簡単! 普通にサイトを作っていると、結構印刷用のCSSの設定もお願いされま

記事を読む

[jQuery] OSX風のスクロールバーにするプラグイン!

trackpad-scroll-emulator trackpad-scroll-emulator

記事を読む

[CSS] animationを使ってみる!

色の変化をCSSのみで実装できる! CSS3のキーフレームアニメーションでは、JSで出来る、背景色

記事を読む

[javascript] Google Maps javaScript API v3の使い方(応用編:マーカーを変更する)

いろんなことが出来るようになったv3 昨日、基本編を書きましたが、今回は応用編です。 v3に

記事を読む

[Dreamweaver] オプション領域を極める!テンプレート上級編

オプション領域は、難しい! これまで、数回に渡りDreamweaverでのテンプレートの使い方を紹

記事を読む

[html5] おさらいがてらWordPressのテーマを作るためにHTML5で一から作るよ![第3回]

ブログの存在すら忘れてました、僕です。 完全放置プレイだったこの連載?を再開しなきゃと思い、重

記事を読む

[WordPress] 管理画面にカラーピッカー(wp_color_picker)を表示する

カラーピッカー 管理画面でプラグインの設定などでカラーピッカーを表示したい場合、wp_color_

記事を読む

ad

Comment

  1. オバーフロー より:

    overflow:hidden;の存在知りませんでした。
    中の要素がはみ出てたので、どうしようかと困っていましたが、解決できました。
    クリッピングマスクみたいなコードですね。
    ありがとうございました。

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

ad

[PHP] curl転送してみる(googleに)

curlでgoogle画像検索APIにアクセスしてみます。 cu

[PHP] PDOでMySQLの接続確認をする

PDO PHPでMySQLに接続する際には、mysql_connec

[PHP] ランダムな英数字を生成する

便利系メソッド 今回はPHPでランダムな英数字を作成してみます。

[Swift] プロパティリスト(plist)の値を取得

plistからデータを取得してみます。 こちらのエントリーも参考にし

[Swift] Asset Catalogについて

XCode5から追加されたAsset Catalog。 いままで標準

→もっと見る

  • 1978年の七夕生まれ。 25才でweb業界の門を叩き、28才でフリーランスに。 現在は、フリーランスでマークアップ中心に、wordpressのカスタマイズやデザインをしております。 また、iPhoneアプリの開発もしております。
PAGE TOP ↑