のはこごと

モノヅクリノハコの中の人の雑記です

【HTMLとCSSの基礎の基礎講座】その24:番外編!border-radiusを愛でる会

 

24日目です。いよいよ終盤が近づいてきましたが、この記事は

CSS Property Advent Calendar 2013 - Adventar 24日目投稿postです。

 

一人AdventCalendarを始めて24日目、本日はちょっと変わったことを書きますのでご了承ください。

改めまして初めましてのかた、こんにちは。id:nohakoと申します。

HTML5 Advent Calendar 2013 - Adventar にも参加しておりますので、良かったら覗いてみてくださいね!

 

さて、タイトルにもありますが、【border-radiusを愛でる】…。誰でしょうそんな変態は。

('∇')ノわたしだ。

 

そもそもborder-radiusってなーに?

早い話、角丸指定です。四角を書いた時に、角っこを丸くできるプロパティです。

  • 水平方向と垂直方向の半径をセットで。
  • 指定するのはborderの外側

「/」で区切る事によって、水平と垂直それぞれの半径を指定する事ができます。

img1

では、border-radius:50%;と書いてみるとどうなるか?

border-radiusのtopとbottomだけ色を変えてみたらどうなるか?

各辺の角丸具合を変えてみたらどうなるか?

それぞれ見てみましょう。

 

まずは、適当にHTMLを書きます。

img2

次に、それぞれのborder-radiusを設定していきます。

img3

さて、どうなるか???

img4

おおお、みごとにヘンテコになりましたね!可愛いですねぇ(´∀`)

四方の辺それぞれを指定する場合は、左上から時計回りに数値を設定していく事になるので、間違えないようにしましょう。

 

それにしても、border-radiusかわいい。

これ、可変とかもできちゃうんですよ。

カーソルを青い丸の上に持っていくと、うにょーん色が変わったりしてね。

デモページ

 

今回は、さすがに古いブラウザで見る人もいないだろうという判断でベンダープレフィックスを付けておりませんが、もし古いブラウザにも対応させたいのであればつけてくださいね!

ベンダープレフィックスとはなんぞ?と思った方はググってください。

 

おさらい。

border-radiusとは、

  • ボーダーの角を丸める。かわいい。
  • 角の曲線を1つか2つの半径で定義し、角の形を円や楕円にする。
  • このプロパティが指定されると、backgroundに与えた背景も丸まる。
  • アニメーション:可
  • IE8とかCSS3非対応ブラウザでは見れない。

こんなかんじですかね。

何が可愛いって、普通にborder指定するよりも、ちょこっと角を丸めてあげるだけで無限に広がる形の世界がもう、それだけで可愛いじゃないですか!!!

 

そんな訳で、これ以上変態が露呈する前に最終日の方にたすきを渡して終わりたいと思います。

 

私が勝手にやっている一人AdventCalendarもついに最終回、floatをやってみようになりますのでお楽しみに!

ではでは('∇')ノ