ダウンロードボタンを CSS で自作する

New books
photo credit: laRuth via photopin cc

いろいろなサイトやブログでファイルなどのダウンロード用にボタンが実装されているのを見て、自分も作りたいなと思いました。といっても画像でかっこいいボタンをデザインできるほどのセンスもないので、勉強がてら CSS で自作してみました。

目次

  1. CSS って?
  2. 作成のための参考資料
  3. HTML のコード
  4. CSS のコード

1. CSS って?

CSS については HTMLクイックリファレンス さんの CSSの基本 > CSSとは? で次のように説明されています。

CSS(Cascading Style Sheets、カスケーディング・スタイル・シート)とは、ウェブページのスタイルを指定するための言語です。 ……HTMLやXHTMLなどで作成されるウェブページにスタイルを適用する場合には、スタイルシート言語の1つであるCSSが一般的に利用されています。

言ってみれば、Web ページの内容を記述する HTML と、そのデザインを担当するスタイルシート、といった形で役割分担がされているわけですね。上記のページでは、この役割分担の重要性にも触れられていました。以下に引用します。

HTML4.01 や XHTML1.0 の仕様では、 HTML 文書から見栄えに関する指定を分離することが望ましいとされています。 HTML では文書構造のみを定義して、 スタイルについてはスタイルシートで指定することが推奨されています。

せっかくボタンを自作するなら、後々に応用が効くように CSS の知識を学んで作ってみようと思いました。

CSS で作る方法は、後で色などを変えたくなったとしても簡単に変更できることや、画像を使う場合よりページの容量を抑えられることがメリットのようです。一方で、RSS リーダーの中では CSS の設定が反映されず、表示が崩れてしまうというデメリットもあるので、この辺は痛し痒しですね。

2. 作成のための参考資料

作成に当たっては、Webデザインレシピ さんの次のページを参考にさせていただきました。ボタンのグラデーションやボックスシャドウのサンプルコードがいろいろと載っているので、それをお借りして組み合わせて作ってみました。

運営者の高橋のりさんの書籍 『現場のワークフローで覚える Webサイト制作教室』 もすごく参考になりました。

こちらが出来上がったボタンです。

3. HTML のコード

ボタンを設置するための HTML コード は次の通り、すごくシンプルです。

<a class="button blue" href="#">Download</a>

このコードを記事中のボタンを表示したい場所に記述します。「#」には、リンク先の URL を入れます。

4. CSS のコード

続いて、CSS のコード。Webデザインレシピさんで紹介されていたサンプルコードをもとに、こんな風にスタイルシート(WordPress であれば style.css)に書き込みました。

/* ボタン */
.button {
  display: block;
  max-width: 320px;
  padding: 10px;

  /* テキスト */
  font-size: 18px;
  text-align: center;
  text-decoration: none;
  text-shadow: 0 -1px 3px rgba(0, 0, 0, .3);

  /* 角丸 */
  border-radius: 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;

  /* ドロップシャドウ */
  box-shadow: 0 3px 5px 0 rgba(0, 0, 0, .3);
  -webkit-box-shadow: 0 3px 5px 0 rgba(0, 0, 0, .3);
  -moz-box-shadow: 0 3px 5px 0 rgba(0, 0, 0, .3);
}

/* ボタンの色を指定 */
.blue {
  color: #f5f5f5;
  border: solid 1px #0078a5;

  /* グラデーション */
  background: -webkit-gradient(linear, left top, left bottom, from(#00adee), to(#0078a5));
  background: -moz-linear-gradient(top, #00adee, #0078a5);
}

HTML の方で “button”, “blue” と2つクラスを指定してあるので、スタイルシートでも分けて記述しています。

順に説明しますと、まず “button” クラスでボタンの内側の余白サイズ(padding: 10px;)や文字の中央揃え(text-align: center;)、リンクの下線の非表示(text-decoration: none;)、テキストシャドウ(text-shadow: 0 -1px 3px rgba(0, 0, 0, .3);)を指定。角丸でボタンの角を丸め、ドロップシャドウでボタンの下に影をつけています。

“blue” クラスでは色を指定しています。color: #f5f5f5; は文字の色。border: solid 1px #0078a5; が枠線のスタイルと太さ、色で、グラデーションの部分がボタン全体の色です。

CSS の用語や書式については、この記事の冒頭で紹介しました HTMLクイックリファレンス さんに詳しいリファレンスがあります。

CSS でボタンを作るのはなかなか大変でしたが、CSS の知識はブログのデザインにも活かせるので、これからも少しずつ勉強していきたいと思います。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です