
こんばんは。
画像をリンクボタンにして文字を重ねる方法を教えていただきたいのですが。
どういえば良いのかわからなかったので、こういう題名になりましたが、ちがうかもしれないので、まねしたいページのアドレスを置いときます。
http://open2.sesames.jp/bananag/html/_TOP/
このページの「サービス一覧」のランにある「JIFT」ですが、
画像の上に文字がかかってます。それでもって画像,文字をクリックするとURLへジャンプするみたいなのです。
これをまねしたいです。
やり方を教えてください。
No.3ベストアンサー
- 回答日時:
ボタン画像を用意して背景にします。
その中(上)にリンクテキストを書くだけ。ここの質問サイト画像を参考に初心者用に簡単にサンプル化してみましたので
意味がわかれば応用です。後は自分なりに綺麗に装飾して下さい。
以下をHTMLに貼り付け表示してみる。
<a href="[URL]" style="display:block; text-align:center; width:200px; height:30px;
background: url(http://oshiete1.goo.ne.jp/images/button_question … no-repeat;">リンク先へ</a>
No.2
- 回答日時:
そのサイトは、HTML的には参考にされないほうがよいと思います。
酷いソースです。Another HTML-lint gateway ( http://openlab.ring.gr.jp/k16/htmllint/htmllint. … )
それはさておき、これは簡単に出来ます。
たとえば、リンクの一覧(リスト)ですと、くかもりは正しくは、
<ol>
<li><a href="[URI]">リンク先1</a></li>
<li><a href="[URI]">リンク先2</a></li>
<li><a href="[URI]">リンク先3</a></li>
</ol>
となるべきですね。
それをスタイルシートで
ol{
width: 300px;
border: solid 2px red;
}
li{
display:block;
margin:5px,10px;
padding:0px;
}
ol>li>a{
display:block;
border:outset 4px red;
・・・・
と指定していけばよい。
とても良く使われる方法です。ポインターを上に乗せると色が変わったり、背景画像を入れ替えたり・・・
とても良く使われるテクニックなので
【参考サイト】
リンクリストを画像ボタンに CSS OR スタイルシート - Google 検索
http://www.google.co.jp/search?hl=ja&q=%E3%83%AA …
で検索してみてください。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
【至急お助け!】チェックボッ...
-
【Webサイト】画像が小さく表示...
-
コーディング中、右側に謎の余...
-
iframe内をクリックさせない方...
-
同じ画像 複数回使用
-
ページの上下に白い横線が入る
-
gif画像でたまに背景がグレーに...
-
画像の背景を透明にしたい
-
<hr>の縦バージョンはありますか?
-
lightbox2で画像を天地左右中央...
-
画像とその下にあるテキストの...
-
画像の上にテキスト配置で、拡...
-
画像で背景透明のテキストがに...
-
ドリームウィーバーで画像を縮小
-
background-sizeでcontainする...
-
submitボタンの上に重ねた画像...
-
画像上に文字を表示するとiPhon...
-
PDFの保存ボタンが表示されません
-
イラレで背景を透明にするやり...
-
テーブル内の画像がずれてしま...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
【至急お助け!】チェックボッ...
-
【Webサイト】画像が小さく表示...
-
画像とその下にあるテキストの...
-
background-repeat CSS で切れ...
-
<hr>の縦バージョンはありますか?
-
WEB上でディレクトリ内の画像を...
-
IMGタグで画像の繰り返し使用は…
-
画像の上にテキスト配置で、拡...
-
同じ画像 複数回使用
-
background-sizeでcontainする...
-
iframe内をクリックさせない方...
-
要素の幅をいろんな写真の幅に...
-
background-sizeの背景で最小値...
-
ページごとに背景画像を変更し...
-
lightbox2で画像を天地左右中央...
-
CSSのrepeatで切れ目が出る
-
画像の大きさに合わせて文字の...
-
フッターの背景に色を指定した...
-
Safariでのひどいレイアウト崩れ
-
CSSで背景画像をランダムに表示...
おすすめ情報