CSSで角丸ボタンを実現する|TechRacho(テックラッチョ)〜エンジニアの「?」を「!」に〜|BPS株式会社エンジニアの「?」を「!」に。toolkitはデフォルトで各種ウィジェットが付いていて便利ですが、現時点ではまだテーマが充実していません。実質的に使えるのは、tundraとsoriaくらいだと思います。どちらもコントロールが角張っているので、丸くしたくなることがあります。使えば簡単にできますが、IEなどにも対応しようと思うと、ウィジェットテンプレートを書き換えたりJavaScriptで要素を書き換えたりしないといけません。ボタン(高さ固定)は、IEを含め比較的簡単に角丸にできますので、今回はこちらを紹介します。手順テーマの自作になりますので、まずはsoriaあたりをコピーして、これを上書きしていくことにします。一括置換(手抜き)してしまいましょう。角丸実現のために以下のような記述をCSSに追加します。left;}button_leftは左側の丸い画像、button_rightは右側の丸い画像、button_backは中央の矩形部分の画像です。これらのファイルは自分で作ってimagesディレクトリに入れておきます。これだけで丸くなります。やるときは、soriaテーマをきちんと解読して矛盾が無いようにすべきですが、小規模ならこんな安易な改造も可能です。シェアツイートブックマークLINEこの記事を書いた人babaゆとりプログラマー。BPS設立初期に在学中から参加している最古参メンバーの一人。Rails、PHP、Androidアプリ、Windows/Macアプリ、超縦書の開発などを気まぐれにやる。Gold、AWSソリューションアーキテクト(アソシエイト)、日商簿記2級、漢検準1級などを保有。Storageを使ってはいけない(翻訳)#Tags#会社紹介#自社サービス#勉強会#Rails#PHP#デザイン#実績#週刊RailsウオッチCONTACTお気軽にご相談ください。(翻訳)CONTACTTechRachoでは、パートナーシップをご検討いただける方からのご連絡をお待ちしております。お気軽にご意見・ご相談ください。