CSS3一般的な角丸の使い方よく使う角丸は、divを角丸にしたり、画像を角丸にしたりすることでしょう。borderを付けて枠線を入れたり、box-shadowで影を付けたりもします。昔は、画像を切って四隅に入れたり、繰り返しで伸ばしたり、それはそれは面倒なものでした。使われる角丸、つまりborder-radiusは下記のようなものでしょう。padding:10px;}そして、htmlは下記です。class="kadomaru">ああああああああああああああああ</div>こういった感じがよく使われている方法です。ここが変だよ角丸さん!CSSのborder-radiusは、内包している要素には関係ありません。外のdivを角丸にしたからといって中にあるものまで角丸にならないのです。わかりずらいので、例を上げましょう。class=”kadomaru”。これのpaddingを0にして、画像を入れます。結果が下記の様になります。width:200px;}わかりやすい様に角丸を大きめに設定してありますので、途中で枠線が消えているのがわかると思います。これが内包している要素には関係ない状態です。本当に角丸を使い始めた当初は、なぜ中身を無視するのか理解出来ませんでしたが、そういうものだと納得せざるをえませんでした。本当は内包している要素も無視しない!実は、ただ角丸にしているだけだから中身が角丸にならないだけなんです。設定してあげれば、内包している要素も無視しません。意外と知られていないのか、divを角丸に、中の画像も角丸にと設定する人が多いです。それでなれている人はいいですけど、もったいないといえば、もったいない。ソースを見て行きましょう。overflow:hidden;}一番したのoverflowが増えただけですけど、これで中身も角丸になるんです。ほらね、ちゃんと収まってます。こんなことだって出来るんです。中の画像にまでborder-radiusを設定しなくてもいいんです。#666666;}一応、htmlも。/></div>これだけです。角丸の性質とoverflowの使い方をしっかりと覚えておけば、簡単に出来る事です。余談ですけど、画像に最初からこのクラスを付ければいいじゃんってこともあるんですが、こういう動きをするよっていう例ですのであしからず。まとめCSS3も本格的に採用され始めてきていますし、これからどんどん角丸を使う機会も増えていくでしょう。そんな時に、しっかりと理解しているのとしていないのでは雲泥の差があります。FlickerPlateを紹介します。かっこいいプラグインで、フリックにも対応します。Scrollプラグイン今回は、ブロック毎にスクロールするjQueryプラグインのご紹介です。テンプレート機能初級編!まずはベースとなるHTMLを作成しましょう。PMoverflow:hidden;の存在知りませんでした。中の要素がはみ出てたので、どうしようかと困っていましたが、解決できました。クリッピングマスクみたいなコードですね。ありがとうございました。コメントをキャンセルメールアドレスが公開されることはありません。curl転送してみる(googleに)curlでgoogle画像検索APIにアクセスしてみます。今回はPHPでランダムな英数字を作成してみます。プロパティリスト(plist)の値を取得plistからデータを取得してみます。→もっと見るプロフィール1978年の七夕生まれ。25才でweb業界の門を叩き、28才でフリーランスに。現在は、フリーランスでマークアップ中心に、wordpressのカスタマイズやデザインをしております。iPhoneアプリの開発もしております。