低価格・高品質・最速のHTMLコーディングはクロノドライブへ

お電話でのお問い合わせ・ご相談はこちら 03-6416-5813 [C-0]

お見積もりフォーム

CSS3で簡単にボタン風バナーを作る

CSS3から背景にグラデーションをつけたり、ボーダーを曲線にすることができるようになりました。それを用いて、画像を使わず簡単にボタン風のバナーを作成するテクニックです。

使うプロパティは下記の通り

  • border-radius(ボーダーに曲線をつける)
  • backgroundのgradientプロパティ(背景にグラデーションをかける)

CSS

01.sampleBtn {
02    display: block;
03    font-size: 14px;
04    color: #FFF;
05    padding: 10px 20px;
06    background:linear-gradient(#fff3db, #ff3c00);
07    background: -moz-linear-gradient (
08        top,
09        #fff3db 0%,
10        #ff3c00);
11    background: -webkit-gradient (
12        linear, left top, left bottom,
13        from(#fff3db),
14        to(#ff3c00));
15    border-radius: 5px;
16    -moz-border-radius: 5px;
17    -webkit-border-radius: 5px;
18    border: 1px solid #b85f00;
19}

HTML

1<a href="#" class="sampleBtn">サンプルボタン</a>

border-radiusは値を大きくするとそれだけ角が丸くなります。backgroundのgradientプロパティについては、後日詳しくご紹介します。

注意点として、gradientプロパティはIE8以前のブラウザには対応していないこと、また各ブラウザ用に、CSSプロパティを指定する必要があることです。(プロパティの頭に付いている-moz-や-webkit-が各ブラウザ向けに指定するためのものです。)

これらは、回線速度がそれほど速くなく、極力画像は使わない方がよいスマートフォン向けのコーディングに用いると効果的です。

「フロントエンドエンジニアの教科書」を出版しました!HTML・CSS・JavaScript+α 次世代コーダーのための仕事術

HTMLコーダーからフロントエンドエンジニアにステップするために必要な知識と技術を解説。
現場で求められる人材となるためには、何を知っていて、何ができなければいけないのか。
Web制作の最先端にいるクロノドライブだからこそ教えられるノウハウが満載です。

出版社名:ソフトバンククリエイティブ
著者:クロノドライブ

Amazon.co.jp詳細ページへ