画像上に文字を乗せる方法とリンクを設定する方法
- CSSとHTMLを使用して画像の上に文字を乗せる方法と、ボックス全体にリンクを設定する方法について質問があります。
- 現在、position:relative;を使用して画像上に文字を配置していますが、この方法では文字の上にリンクを設定することができません。
- 検索してdisplay:block;を試しましたが、position:relative;のためうまくいきませんでした。どのようにすれば画像上の文字にリンクを設定できるでしょうか？
- ベストアンサー
画像の上に文字をのせ、ボックス全体にリンクを設定したい CSS&HTM
画像の上に文字をのせ、ボックス全体にリンクを設定したい CSS&HTML お世話になっております。 ある画像の上にposition:rerative;を使って文字をのせています。 この画像にリンクを設定したいのですが、文字の上になるとリンクが効かなくなってしまいます。文字も含めた全体にリンクをかけることはできるのでしょうか？ 下記ソースです。 /*css*/ img.button{/*画像*/ margin:0px 0px 8px; padding:2px; border:#999999 1px solid; } .text{/*画像上の文字*/ margin:0px; padding:0px; font-size:14px; text-align:left; } <!--html--> <div style="position:relative;"> <a href="index.html"><img src="image/photo1.jpg" alt="" width="346" height="98" border="0" class="button"/></a> <div style="position:absolute; left: 24px; top: 13px; width: 217px;"> <p class="text">画像上の文字</p> </div></div> 検索してdisplay:block;などのやり方を試してみたのですが、position:relative;を使っているからか？うまくいきませんでした。 お知恵をお借りできれば幸いです。どうかよろしくお願いいたします。 表現の仕方や言葉の使い方を間違っていたらすみません…。
- HTML
- 回答数4
- ありがとう数15
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
だって、「画像上の文字」と書いてある段落はリンクに含まれてま せんからね。場所を重ねただけじゃダメですよ。</a>の位置をもっ と後ろ、最後の</div>の直前に移動しましょう。 <p class="text">画像上の文字</p> </div></a></div> それだけです。
その他の回答 (3)
- ORUKA1951
- ベストアンサー率45% (5062/11036)
＞下記の通り、今回はNo.1さまの方法で対応させていただきました。 それは絶対にダメ。最悪の対処です。説明したように他のブラウザでは表示できません。文法的に間違っているからです。
お礼
度々ご回答ありがとうございます。 ベストアンサーがどうのこうのと書いておきながら締め切るのを忘れていて今見にきたらこんなメッセージが！ 締め切らなくて良かったです。 ＞<a href="[URL]"><div></a>なんてことは、さすがにHTMLを少しでも知っていれば、できないことは自明です。 これはそういう意味だったのですね。失礼しました。 もう一度勉強して出直します。 ありがとうございます。 No.1さまにも申し訳ありません。皆さんにとても感謝しています。
- ORUKA1951
- ベストアンサー率45% (5062/11036)
<a href="[URL]"><div></a>なんてことは、さすがにHTMLを少しでも知っていれば、できないことは自明です。 <!ELEMENT A - - (%inline;)* -(A) -- anchor --> 12.2 A要素 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/links.html#edef-A ) ブラウザは、次に<div>や<p>が現れたとき、その直前で</a>と閉じられていると解釈するでしょうが・・(IEは間違った解釈をする)・・・。 ですから、「ボックス全体にリンクを設定したい」はできませんが、画像は行内(inline)要素 <!ELEMENT IMG - O EMPTY -- Embedded image --> ですから、画像全体にリンクを埋めることはできます。 この場合、ソースの｛class="button"/>｝から、リンクのための画像ボタンですから、 <p class="anchorIMG"> <a href="[URL]"><img src="[URL]" width="346" height="98" alt="・・へのリンク"><span>文字</span></a> </p> ですね。他の段落と区別したいので<p class="anchorIMG">としてある。 CSSは、 p.anchorIMG{position:relative;} p.anchorIMG a span{display:block;position:absolute;left:24px;top:13px;} とすればよいです。 他の場所のspanには適用しないので、 p.anchorIMG └a └span のspanに対して適用されるようにセレクタを記述した。 また詳細度は1+10+1+1=13である。
お礼
ご回答ありがとうございます。 下記の通り、今回はNo.1さまの方法で対応させていただきました。 ORUKA1951さまがお教えくださった方法も試してみたいと思うのですが、恥ずかしながらぱっと拝見した段階では私に理解できそうにないです…。 でも、一つずつ確認しながらトライしてみますね。 勉強させていただき、ありがとうございます。 いただいた3つのアドバイス、どれも本当に勉強になったのですがやむを得ず先着順にベストアンサーをつけさせていただきました。申し訳ありません。どうかご勘弁下さい。 また機会がありましたらよろしくお願いいたします。
- zeff
- ベストアンサー率69% (137/198)
そういう場合は背景画像にしましょう。 aをdisplay:blockにして、 height:100%;でリンクを画像全体に反応させます。 <style type="text/css"> <!-- div{ width:346px; height:98px; border:#999999 1px solid; background-image:url(image/photo1.jpg); background-position:left top; background-repeat:no-repeat; margin:0 0 8px; } div a{ display:block; height:100%; padding-top:13px; padding-left:24px; text-decoration:none; } --> </style> </head> <body> <div> <a href="index.html">画像上の文字</a> </div> </body> </html>
お礼
ご回答ありがとうございます。 今回はNo.1の方の方法が手軽だったので、そちらにさせていただいたのですが、これも試させていただきました。 背景画像は1/3位模様があるので、文字は2/3までしか載せられません。そのため div a{ display:block; height:100%; padding-top:13px; padding-left:24px; text-decoration:none; } ここにwidth:217px;と追加したところ、当たり前ですが模様部分にはリンクが反応しなくなってしまいました。 私の少ないCSS知識ではここまでしかできず、せっかく教えて下さったのに申し訳ありません。 もっと勉強がんばりたいと思います。 お忙しいところご丁寧にお教えくださり、ありがとうございました。
関連するQ&A
- テキストの揃え方について
CSSの勉強を始めて間もないのですが、下記のようにホームページを作成し、左右に均等の間隔を指定して、テキストも中央揃えになっています。<div id="01">を5段、<div id="02">で1段、この後<div id="03">と<div id="04">で合わせて2段にしたいと考えています。そのうえで、<div id="03">以降は左右に均等の間隔になっている幅の中(<div id="01">や<div id="02">が配置されている400pxの位置)で、テキストを左揃えにして配置したいと考えています。text-align: left;をCSSのいろいろなところに書いているのですが、ウィンドウの左端に配置されてしまいます。どのようにCSSに書いたら実現できるのでしょうか。CSSレベル2までの書き方でお教えください。 【HTMLの<body>内】 <div id="01_05"> <div id="01"> <ul> <li><a href="link01.html">リンク01</a></li> <li><a href="link02.html">リンク02</a></li> <li><a href="link03.html">リンク03</a></li> <li><a href="link04.html">リンク04</a></li> <li><a href="link05.html">リンク05</a></li> </ul> </div> <div id="02"> <img src="gazou01.jpg" alt="画像01" width="400" height="300" border="0"> </div> <div id="03"> </div> <div id="04"> </div> </div> 【CSS】 body { margin: 0; padding: 0; width: 100%; text-align: center; overflow: hidden; } #01_05 { margin: 0 auto; padding: 0; width: 400px; } #01 { position: relative; margin: 0; width: 100%; } ul { position: relative; left: 50%; float: left; margin: 0; padding: 0; } li { position: relative; left: -50%; float: left; display: inline; margin: 0; padding: 0; } li a { float: left; width: 80px; display: block; margin: 15px 0; padding: 15px 0; } #02 { clear: left; width: 100%; } #03 { float: left; margin: 0; width: 200px; } #04 { float: left; margin: 0; width: 200px; }
- ベストアンサー
- CSS
- IE6,7で画像の上に載せた文字がずれる
HTMLなのですが、 画像が縦に3つつながって1つの画像のようになった状態で表示しようとしています。 さらに上と下の画像にはテキストを上にかぶせて表示します。 画像全体にリンクを貼ってあります。 下記のようなコードで作成した所、IE6,7でのみ、下記のバグが出てしまいました。 ・画像とテキストの縦位置のズレ ・画像間に2px程度の空白が生じる ・画像に設定したリンクが開かない 大変困っています。 どなたか原因と修正方法を教えていただけますでしょうか。 <a href="test.html"> <div style="position: relative; width: 183px; height: 265px; "> <img src="images/top.jpg" width="183" height="36" /> <div style="position: absolute; top: -11px; left: 55px;" class="font16b"> <p align="center">text1</p> </div> <img src="images/main.jpg" width="183" height="193" border="0" /> <img src="images/bottom.jpg" width="183" height="36" /> <div style="position: absolute; top: 218px; left: 4px; width: 181px;" class="font13"> <p align="left">text2</p> </div> </div> </a>
- ベストアンサー
- CSS
- 初心者です 画像横に文字を入れたい ｃｓｓ
web制作を始めたばかりの初心者です。 画像右側に文字を入れたいのですが、うまくいきません。 本当にはじめたばかりでなんとなくcssの意味が分かりかけたところです。 どうぞご教示ください。 html <ul> <li><a href="index.htm"><img src="画像"width=""height=""></a></li> <div class="text">文字列</div> <li><a href="index.htm"><img src="画像" width=""height=""></a></li> <div class="text">文字列</text> </ul> </div> css .site ul {margin: 0; padding: 0; list-style: none} .site li a {display: block; padding: 5px; font-size: 14px; text-decoration: none} .site li a img {border: none } .site a:after {content: ""; display: block; clear: both} .site img {float: left; width: 250px} .site .text {float: none; width: auto; margin-left: 60px; padding-left: 15px; color: #000000; font-size: 18px}
- ベストアンサー
- その他（インターネット・Webサービス）
- 【CSS】画像を重ねたいのですが動きません
ウェブサイトを作っているのですが、 positionを使って、ひとの写真と影の画像を重ねたいのですが、影がピクリとも動いてくれません。 ちなみに他のスタイルはCSSから読み込めているので、 CSSのインポートエラーではないようです。 難しいことをしているわけではないと思いつつも、 二時間くらいここで止まっておりまして、悲しいです・・・。 下記のコードを書いております。 ご教示頂ければ幸いです。 よろしくお願いいたします。 ☆HTML <div id="staffphoto"> <img src="写真.jpg" width="160" border="0"> <img src="影.gif" border="0" width="160" class="shadow"> </div> ☆CSS #staffphoto{ position: relative; } #staffphoto img.shadow{ position: absolute; top: 5px; left: 5px; }
- ベストアンサー
- CSS
- CSSで画像を同じ位置に重なり合わせるには？
お世話になります。 2枚のTOP画像(一枚は差し替え可能なJPG、もう一枚はその画像の上に位置するフレーム枠のような役割を果たすGIF画像)をぴったり重ね合わせて配置したいと考えています。 調べたところz-indexという方法があるらしく、position:relativeしてtop,left指定でいろいろ試してみたのですが、上に重なる画像の分だけ、下部コンテンツに空きが出ます。（添付画像のような現象です） これはCMS化して画像を差し替える時のためにページなのですが、こういう現象をなくして普通のWebサイトページのように配置することはできないのでしょうか？ 素人ゆえおかしな質問しているかもしれませんが、どうかご教授お願いします。 現時点のHTML/CSSはこんな感じです。 HTML--- <div id="contens"> <div id="top_img_a"> <p class="img_top"><img src="images/dammy_img02.jpg" alt="新規投稿ダミー画像" /></p> <p class="flame"><img src="images/new_entries_img_flame.gif" alt="新規投稿フレーム枠" /></p> </div> CSS---(本意ではありませんが、やむなくtop,left調整で位置を作っている段階です。) #top_img_a { width:900px; margin:0; padding:0; position:relative; top:0px; } .img_top { position:relative; z-index:1; top:0; left:25px; } .flame { position:relative; z-index:2; top:-216px; left:25px; }
- ベストアンサー
- CSS
- CSS/HTML で画像 2枚重ねた上に文字。
最近ホームページを作成しているのですが、画像 2 枚を重ねて、その上にリンク付きの文字を のせるにはどのようにしたらよいでしょうか。 CSS を構い始めたのは 1 週間程度なので、基礎的なこともわかってない部分があります。 いろいろ試して、(3)が近いような気がしますが、(1)、(2)に付け加える形でもよいので、 ご教授お願いします。 以下、私が試した 3 パターンの方法です。数値、画像は適当な値です。 (1) 画像 1 枚の上に文字を入れた形。※画像 2 枚目を重ねられませんでした。 --------------------------- --- CSS --- #img1 { background-image : url(img1) ; background-repeat : no-repeat ; width : 100px; height : 100px; /* -- 各ブラウザ対応用 -- */ transform: rotate(45deg); -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); } --- HTML --- <DIV class="img1">タイトルなどのテキスト</div> --------------------------- (2) 画像を 2 枚重ねた形。 ※文字を上に載せれませんでした。 --------------------------- --- CSS --- #img1 { background-image : url(img1) ; background-repeat : no-repeat ; width : 100px; height : 100px; /* -- 各ブラウザ対応用 -- */ transform: rotate(45deg); -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); } .img2 { padding: 50px 0 0 0px; /*2枚目の画像の位置調整*/ } --- HTML --- <div id="img1"> <img class="img2" src="red-star.png" width="横" height="高さ"> </div> --------------------------- (3) 画像 2 枚を重ねた上に文字を載せた場合。 ※思ったとおりに表示できました。が、何故か<a href="#">テスト</a> のリンクができません。。。 --------------------------- --- CSS --- #img1 { position: relative; bottom :-100px; left: -80px; width : 250px; height : 80px; transform: rotate( -15deg ); -webkit-transform: rotate(-15deg); -moz-transform: rotate(-15deg); -ms-transform: rotate(-15deg); -o-transform: rotate(-15deg); z-index: 2; } #img2 { position: relative; bottom :90px; left: 80px; width : 200px; height : 40px; transform: rotate( -15deg ); -webkit-transform: rotate(-15deg); -moz-transform: rotate(-15deg); -ms-transform: rotate(-15deg); -o-transform: rotate(-15deg); z-index: 1; } #MENU { position: relative; bottom :725px; left: -25px; transform: rotate( -15deg ); -webkit-transform: rotate(-15deg); -moz-transform: rotate(-15deg); -ms-transform: rotate(-15deg); -o-transform: rotate(-15deg); z-index: 3; } --- HTML --- <div id="img1"><img src="img1" width="100" height="100"></div> <div id="img2"><img src="img1" width="100" height="100"></div> <div id="MENU"><a href="#">テスト</a></div> ---------------------------
- 締切済み
- HTML
- CSSで画像の横に余計な余白が・・・
質問させて下さい。 以下のようなソースを書いた時のことです。 HTML部分------------------------------- <DIV id="box-s"> <img src="********" width="290" height="140" border="0" > </DIV> <DIV id="box-s"> <img src="********" width="290" height="140" border="0" > </DIV> CSS部分------------------------------- #box-s{ width:300px; float:right; text-align:left; border: 1px solid #000000; clear: none; margin: 2px; padding: 4px; } と書くと、IEだと問題ないのですが、firefoxでみると画像の 右側の余白がかなり不自然に開くんです。 少しぐらいの崩れは良いのですが、、、あまりに違いすぎる のでどなたかお助け願えないでしょうか。
- 締切済み
- HTML
- HTMLでトップページの画像およびリンクのランダム表示について
どなたかお力を貸して下さい。 現在ＨＰを作成中なのですがそのＨＰのトップページに表示される画像と、 それとセットで商品名、購入ページへのリンクを更新する度にランダム表示になるようにできればと思っています。 添付画像の販売ページへ飛ぶという所でリンクをつけたいと思っています。 HTMLは <h2>New!!新着製品</h2> <div class="itemlist"> <div class="img"><a href="#"><img src="images/sampleimg1.jpg" alt="item name" width="250" height="188" /></a></div> <h3>機種名</h3> <p>販売ページへ飛ぶ</p> </div> スタイルシートは #main .itemlist { border: 1px solid #CCCCCC; /*１個あたりのボックスのボーダー設定*/ padding: 5px; overflow: hidden; margin-bottom: 0.5em; width: 673px; /*段落タグ（p）の横幅とサイズを合わせる設定です。この下二つのmarginも。*/ margin-right: auto; margin-left: auto; } #main .itemlist h3 { color: #000000; border-bottom: 1px solid #cccccc; border-left: 4px solid #CCCCCC; padding: 0px 0px 0px 5px; margin-bottom: 0.5em; font-size: 100%; } #main .itemlist p { padding: 0px; } #main .itemlist p, #main .itemlist h3 { margin-left: 265px; /*画像の幅に合わせてここは変更する*/ } #main .itemlist a img { padding: 5px; /*写真と外線との余白*/ border: 1px solid #CCCCCC; } #main .itemlist a:hover img { border: 1px solid #999999; } #main .itemlist div.img { float: left; } なのですが相当難しいでしょうか？
- ベストアンサー
- HTML
- webページの画像の配置(CSS/HTML)
webページ作成をしていて、ヘッダーに画像と動画を計４つ配置したいと思っています。 画像右/画像左/画像上/動画を 画 画像上 画 像 動 像 左 画 右 のような配置をすべく、 ・HTML <div id="top"> <div id="header"> <ul> <li><img border="0" src="left.jpeg" width="190" height="415" alt=""/></li> <li><img border="0" src="top.jpeg" width="560" height="100" alt=""/><iframe width="560" height="315" align="left" src="//www.youtube.com/....(略)..." frameborder="0" allowfullscreen></iframe></li> <li><img border="0" src="right.jpeg" width="190" height="415" alt=""/></li> </ul> </div> (略)</div> ・CSS div#top { width:960px; margin:0 auto; } div#header { position:relative; width:960px; } div#header ul{ margin:0; padding:0; float:left; } div#header li{ margin:0; padding:0; float:left; } 幅の調節など、色々試してみましたが、どうしてもうまくいかず、 画像左 画像上 動画 画像右 のようになってしまいます。 何が原因でどのように改善すればいいのか、アイデアおよび知識があれば教えて頂きたいと思います。 よろしくお願いします！ ※初投稿なので、御無礼・不明瞭な点などありましたら、ご指摘頂けると幸いです。 また、不足した情報なども、あれば教えてくださいませ。
- 締切済み
- CSS
- cssでボックスを横並びにし、横幅指定してもくっついてしまう。
こんにちわ！ 只今CSS課題に取り組んでいるのですが、 フロートを使用し、写真（A）、テキスト（B）、写真（C）、テキスト（D）、と並べたいのですが、（B）に横幅指定しているにもかかわらず、（C）がＩＥではＯＫなのですが、FIREFOXではぴたっとくっついてしまいます。 【html】 <div class="box"> <div class="photo"><img src="img/photo_01.jpg" width="132" height="85"></div> <div class="txt">第23回こまったな<br>どうしたのかな賞<br>受賞</div></div> <div class="box"> <div class="photo"><img src="img/photo_02.jpg" width="132" height="85"></div> <div class="txt">第23回どなたかー<br>助けてください賞<br>受賞</div></div> </div> .box{ width : 258 px; margin: 0px; float:left; } .photo{ width : 132 px; margin: 0px; float:left; } .txt{ width : 123 px; color: #555555; font-size: 12px; text-align: left; margin: 0px 0px 0px 3px; padding: 0px ; line-height:18px; float:left; } となっております。 何故、ＩＥでは大丈夫でFirefoxでは内容によって横幅が変わってしまうのでしょうか？ ご教授願いませんでしょうか～？ 宜しくお願い致します。
- ベストアンサー
- HTML
お礼
早速のご回答ありがとうございます！ </a>の位置を移動するだけでできるとは感激です。 こんなにスマートに解決して下さってありがとうございます。 とても勉強になりました。もっとがんばります。 また機会がありましたらどうぞよろしくお願い致します。 ありがとうございました。