Tech Racho エンジニアの「?」を「!」に。
  • 開発

[dojo] CSSで角丸ボタンを実現する

dojo toolkitはデフォルトで各種ウィジェットが付いていて便利ですが、現時点ではまだテーマが充実していません。
実質的に使えるのは、tundraとsoriaくらいだと思います。

どちらもコントロールが角張っているので、丸くしたくなることがあります。

ダイアログの角丸は、-moz-border-radius / -webkit-border-radius を使えば簡単にできますが、IEなどにも対応しようと思うと、ウィジェットテンプレートを書き換えたりJavaScriptで要素を書き換えたりしないといけません。

ボタン(高さ固定)は、IEを含め比較的簡単に角丸にできますので、今回はこちらを紹介します。

手順

テーマの自作になりますので、まずはsoriaあたりをコピーして、これを上書きしていくことにします。

soria.css を mytheme.css にリネームして、.soria を .mytheme に一括置換(手抜き)してしまいましょう。

そして、角丸実現のために以下のような記述をCSSに追加します。

/* mytheme.css */
.mytheme .dijitButtonNode .dijitButtonContents {
    background: url(images/button_back.png) repeat-x 0 0;
}
.mytheme .dijitButton .dijitRight {
    background: url(images/button_right.png) no-repeat top right;
}
.mytheme .dijitLeft.dijitButton {
    background: url(images/button_left.png) no-repeat top left;
}

button_leftは左側の丸い画像、button_rightは右側の丸い画像、button_backは中央の矩形部分の画像です。
これらのファイルは自分で作ってimagesディレクトリに入れておきます。

これだけで丸くなります。

ちゃんとやるときは、soriaテーマをきちんと解読して矛盾が無いようにすべきですが、小規模ならこんな安易な改造も可能です。


CONTACT

TechRachoでは、パートナーシップをご検討いただける方からの
ご連絡をお待ちしております。ぜひお気軽にご意見・ご相談ください。