WeBlogZine

CSSで設定したバックグランドをクリッカブルボタンにする - 2/2

「CSSで設定したバックグランドをクリッカブルボタンにする - 1/2」では、CSSレイアウトにより、ボタンを作成しました。

しかしこのままでは、クリック可能なエリアは「テキスト」が書かれたのみなので、知らずに文字が書かれていないエリアをクリックすると、「あれっ」という感じになってしまいます。

今回は、前回作成した、バックグラウンドに張られたイメージまでクリッカブルにする方法を、ご紹介します。

続きを読む "CSSで設定したバックグランドをクリッカブルボタンにする - 2/2"

CSSで設定したバックグランドをクリッカブルボタンにする - 1/2

SEO対策をすすめていくと、どうしてもメニューボタンを画像ではなく、「HTMLの構造化 - テキストボタン編」で紹介したような、リストタグとCSSレイアウトを使ったデザインをします。

しかし、バックグランドに色を指定するだけでは、どうしてもデザイン単調になり、面白みに欠けてしまいます。

そんな場合に使うテクニックが、「background-image」属性にバックグラウンドになる画像を指定する方法です。
もちろん、ボタンに使う文字は画像ではなく「テキスト」を使用します。

続きを読む "CSSで設定したバックグランドをクリッカブルボタンにする - 1/2"