
こんばんは。
画像をリンクボタンにして文字を重ねる方法を教えていただきたいのですが。
どういえば良いのかわからなかったので、こういう題名になりましたが、ちがうかもしれないので、まねしたいページのアドレスを置いときます。
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で質問しましょう!
似たような質問が見つかりました
- HTML・CSS リンクバナーのHTMLタグ。画像を変えたり、設置位置を変えるとバナー貼付け側はどう見える? 2 2023/02/01 12:01
- HTML・CSS HTMLとCSSによるWebページ生成について。この絵で「ochawan」の文字を枠全体の上から10 4 2023/02/28 23:17
- WordPress(ワードプレス) ワードプレスで、左寄せ画像と文字を横並びにせず、画像の下に文字を表示される方法を教えてください 1 2022/04/24 11:06
- その他(ブログ) シーサーブログのタイトル文字位置とブログ説明文字位置の変更方法 2 2022/09/22 20:55
- 数学 高一数学 集合と命題 画像あり 〔 チャート 45ページ 練習50番 〕 再び申し訳ございません(> 2 2023/08/28 16:23
- HTML・CSS 要素の幅をいろんな写真の幅に合わせたい。 1 2022/07/25 20:11
- HTML・CSS CSSでサイトの背景に画像を組み込みたいのですが反映されません 2 2022/11/22 16:21
- Photoshop(フォトショップ) 画像編集ソフトPhotopeaのツールバーなどの文字の大きさを変える方法を教えてください。 1 2023/02/25 19:09
- マウス・キーボード NEC PC-9801とか、昔のパソコンのキーボード 2 2022/09/20 20:13
- Evernote Evernote(エバーノート)の文字化け 1 2022/04/05 19:30
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
画像とその下にあるテキストの...
-
IMGタグで画像の繰り返し使用は…
-
画像の上にテキスト配置で、拡...
-
要素の幅をいろんな写真の幅に...
-
<hr>の縦バージョンはありますか?
-
iframe内をクリックさせない方...
-
【Webサイト】画像が小さく表示...
-
HP作成 作成した画像を動画の上...
-
ホームページの背景について・・
-
大至急。webのシングルページを...
-
WEB上でディレクトリ内の画像を...
-
画像上に文字を表示するとiPhon...
-
インラインフレームが画面サイ...
-
background-repeat CSS で切れ...
-
ページごとに背景画像を変更し...
-
background-sizeでcontainする...
-
横罫線に文字を入れる方法
-
lightbox2で画像を天地左右中央...
-
画像の大きさに合わせて文字の...
-
background-sizeの背景で最小値...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
【至急お助け!】チェックボッ...
-
【Webサイト】画像が小さく表示...
-
画像とその下にあるテキストの...
-
background-repeat CSS で切れ...
-
<hr>の縦バージョンはありますか?
-
WEB上でディレクトリ内の画像を...
-
IMGタグで画像の繰り返し使用は…
-
画像の上にテキスト配置で、拡...
-
同じ画像 複数回使用
-
background-sizeでcontainする...
-
iframe内をクリックさせない方...
-
要素の幅をいろんな写真の幅に...
-
background-sizeの背景で最小値...
-
ページごとに背景画像を変更し...
-
lightbox2で画像を天地左右中央...
-
CSSのrepeatで切れ目が出る
-
画像の大きさに合わせて文字の...
-
フッターの背景に色を指定した...
-
Safariでのひどいレイアウト崩れ
-
CSSで背景画像をランダムに表示...
おすすめ情報