フルCSSでバナーを作りたい

質問

フルCSSでレイアウトをしています。今までだと画像を貼付けてリンクを貼ってというかんじでバナーを作っていたのですが、CSSで画像を貼るのではなくてバナーみたいに作っているサイトがいくつかあって、それをやりたいのですが、やり方がわかりません。画像はまったく使わないでもバナーっぽくできるんでしょうか。オーバーオールも可能なんでしょうか。そのバナーをクリックするとそのバナーだけではなく、左側の余白も点線で選択されます。

回答No.1

Muller3 · ベストアンサー

「オーバーオール」というのが何のことか謎なのですが（ロールオーバーのこと？）、要はHTMLにimgタグでバナー画像を設置するのではなく、CSSで設置したい、ということでしょうか？
「ロールオーバー」で検索すれば方法が解説された記事がいろいろ出てくると思いますが、とりあえず概要としては

<p id="banner"><a href="">バナー</a></p>

#banner a
{
background-image: url("バナー画像URL");
width: バナー画像の幅px;
height: バナー画像の高さpx;
display: block;
text-indent: -2000px;
}

#banner a:hover
{
background-image: url("マウスオンの時のバナー画像URL");
}

CSSで背景画像としてバナー画像を設定、バナー分の大きさの高さと幅を設定します（aタグに指定することになると思うので、display: block;でブロック要素化します）
aタグはHTML上ではテキストリンクにしますが、テキストが表示されないように、text-indentをマイナスの値にするなどして飛ばします。
ロールオーバーを設定する場合は、a:hoverに背景画像を設定します。

サイドメニューやグローバルナビゲーションなどでよく使われる手です。

補足

すみません、オーバーオールじゃなくて、ロールオーバーでした(笑)。
text-indent:-2000pxというのはどういう意味なんですか?

回答No.2

Muller3

試しに「text-indent: -2000px;」を消してみて下さい。意味がわかると思います。
もしくは「text-indent」で検索してみてもいいと思います。（text-indent自体はどういうものだかおわかりですよね？）

「検索して下さい」というのは、実はこういったノウハウにはいろんな意見があって、それぞれに「この方法がベスト」と主張する方法が違うからなのです。（「text-indent」を使わない方がいい、という意見もあります）

こちらに書いたのは、一般的に使われている方法の概要です。実は「text-indent」を使って文字列を飛ばす（見えなくする）方法が効かない環境もあります。しかし、そういったクロスブラウザの話まで書くと、わかりにくくなると思いましたので、#1には敢えて入れてないです。

あとはいろんな意見を見る中で、どんな問題があるかを知り、自分なりの方法を探られた方がいいと思います。

お礼

返事が遅れてしまってすみません
アドバイスどおりやってみたらできました
本当にありがとうございました