角丸ことborder-radiusさんの2016年・最新事情を現場からお届けします
デザイナーのすずきです。
会社の近くはコラッタとビードルしか出ないんですがどうなってるんですかこれは。
border-radiusとは
当ブログをご覧のみなさまにおかれましてはご存知のこととは思いますが、
border-radius – CSS | MDN – Mozilla Developer Network
CSS3 Border-radius (rounded corners) – Can I use…
の通り、CSSで角丸を再現できる素敵なプロパティちゃんですね。
柔らかいイメージを出したいときなんかに本当に大活躍のこの子なんですが、
意外と真剣に向き合ってないような気がしないでもないので、この機会に他のサイトさんなんかではどうしているのかな？と観察しにいってきました。
いろんなborder-radius
とくに深い意味はないのですが、今回はたべもの系のサイトさんを参考にさせていただきました。
以下敬称略です。
食べログ
// ヘッダー検索ボックス
.p-global-search__input-wrap.p-global-search__input-wrap--area>.p-global-search__input {
border-top-left-radius: 3px;
border-bottom-left-radius: 3px;
}
// レビュー吹き出し
.rvw-item {
border: 1px solid #e0dccc;
border-radius: 5px;
}
3pxか5pxが多く使われているみたいです。
私は奇数が嫌いなので2pxか4pxが多いんですが、世の中にはきっと偶数が嫌いな人もいるんでしょうね。
ホットペッパーグルメ
// 地域別検索ボタン
.areaSelectList dd {
border: 1px solid #D9D9D9;
border-radius: 3px;
}
// トピックコンテナ
.article {
border: 1px solid #E1E1DF;
border-radius: 4px;
}
こちらは3pxか4pxが多いですね。
1pxにこだわれる人ってほんとうに素敵ですね。
クックパッド
// ボックス全般
.box {
border-radius: 5px;
border: 1px solid #ded5c0;
}
// 画像全般
.box img {
border-radius: 5px;
}
セレクタの潔さが素敵ですね。概ね5pxで統一されているようです。
ぐるなび
// ヘッダー検索ボックス
.model-large label, .model-large input, .model-large .select, .model-middle label, .model-middle input, .model-middle .select {
border-radius: 3px;
}
// サイドバーホバー時ナビ
.contents-nav .clmBoxWpWhite {
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
}
ベンダープレフィクスがあったりなかったり不思議ですが、2px／3pxと比較的浅めの指定となっております。
ふんわりとしたまとめ
角丸加工自体は単純な矩形よりも柔らかい印象を与えたいときなんかには昔からよく使われていた手法なんですけれども、最近は面倒なベンダープレフィクスも付けずにCSSだけでかんたんに再現できるということもあり、いろんなところで頻繁に使われているのを目にしますね。
結論でいうとまあborder-radius: 2px〜5pxくらいでうまい具合にという身も蓋もない結論にはなってしまいましたが、
私が今回の記事を通して伝えたかったのは、よく使われているものだからこそ改めて見直してみようということでして、
普段通勤・通学している通い慣れた道の傍らにも目を配ればきっときれいな花は咲いているでしょうし、
少し辛い気持ちになったとしても、空を見上げてみれば自分の悩みなんかちっぽけなものだったんだと開き直ることもできると、そういうことなんです。
次回はbox-shadowあたりでも調査してみましょうか。もういいですか。
熱中症には気をつけましょう。
