- ベストアンサー
【Html CSS】<a>の上に文字を配置したい
- 【Html CSS】<a>の上に文字を配置する方法を教えてください。
- 「ＳｏｌｄＯｕｔ」の文字を一番上に配置したいです。
- <a>のリンクもhover効果も有効にしたまま、添付の画像のような配置を実現したいです。
- 小林 K太郎（@kingfruits）
- お礼率66% (211/319)
- CSS
- 回答数4
- ありがとう数3
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
A要素中に「Sold Out」を入れておけば、たとえそれが最前面に表示されていても、clickや hoverに影響を与えません。 また Sold Outを SPAN要素として記述し、position:absoluteを適用すると、既存のテキストや画像に乗る形で表示されます。 位置付けは CSSをご覧ください。 (HTML) Sold Outを SPAN要素で追加 <li><div class='out'><a href='…'>hoge<br><img src='…'><br>… <span>Sold Out</span></a></div></li> (CSS) .box a { … position: relative; /* 追加（position:absolute用）*/ } /* 以下追加 */ .box a span { position: absolute; /* 位置付けと最前面表示 */ left: 0; top: 50%; /* 垂直位置調整 */ margin-top: -0.5em; /* 行の高さの半分上へ */ width: 100%; /* 水平位置調整 */ text-align: center; /* 水平位置調整 */ color: #f00; } ※ SPAN要素が複数行になる場合は、margin-topの変更が必要です。 ※ フォントにより垂直位置に若干の異動が生じる場合があります。
その他の回答 (3)
- ORUKA1951
- ベストアンサー率45% (5062/11036)
とりあえず、持ち合わせのものを少し変更 [ポイント] 1) 文字は<a></a>内に書けばリンクされる。 2) 内容の追加は:before,:after擬似要素とcontent:プロパティを使う。 位置を合わせるには親をrelative;にしてから・・absolute;で 3) 本来は、この様なマークアップでないほうが良い。面倒くさくても <ul> <li><a href="">商品名</a> <ol> <li><a href="">画像</a></li> <li><a href="">説明</a></li> </ol> </li> </ul> とすべきでしょう。また、 <ul> <li><a href="">商品名</a> <ol> <li>画像</li> <li>説明</li> </ol> </li> </ul> でも、まったく同じできます。(発想の転換が必要) ★Another HTML-lint gateway ( http://openlab.ring.gr.jp/k16/htmllint/htmllint.html ) ★W3C CSS 検証サービス ( http://jigsaw.w3.org/css-validator/#validate_by_input+with_options ) ※オプションでCSS3を選択 でチェック済み 【class名は、内容を示すほうが後々絶対に楽です。--class名やidは「文書構造を示すもの( http://www.asahi-net.or.jp/~sd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )」】 売れたものだけ<li class="soldOut">と書き換える。 ★タブは＿に置換してあるので戻す。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> ＿<meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> ＿<title>サンプル</title> ＿<meta name="author" content="ORUKA1951"> ＿<meta http-equiv="Content-Style-Type" content="text/css"> ＿<link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" > ＿<link rel="START" href="../index.html"> ＿<style type="text/css"> <!-- body{background-color:gray;} /* 商品一覧 */ div.merchandise{width:90%;margin:0 auto;background-color:white;} div.merchandise a,div.merchandise a img{text-decoration:none;border:none;outline:none;} div.merchandise ul, div.merchandise li, div.merchandise ul li span{ display:block;list-style:none;margin:0;padding:0; text-align:center; } div.merchandise ul li{ /* float:left;*/ /* IE7以前を無視してよいならこちら */ display:inline-block;/* IE8以降でよければこちら */ width:200px;height:300px; margin:5px; text-align:center; position:relative; border:solid 1px red; } div.merchandise ul li a{ display:block; width:100%;height:100%; background-color:silver; } div.merchandise ul li a:hover{background-color:#ccc;} div.merchandise ul li span.image{position:relative;width:150px;height:200px;margin:0 auto;} div.merchandise ul li span.image img{display:block;width:150px;height:200px;} div.merchandise ul li.soldOut span.image:after{ font-size:2em; content:"Sold Out"; font-weight:bold; color:red; position:relative; left:-10px;top:-50px; text-shadow:5px 5px 5px black; } div.merchandise ul li.soldOut img{ ＿opacity:0.5; } div.merchandise hr{clear:left;visibility:hidden;margin:0;} --> ＿</style> </head> <body> ＿<div class="header"> ＿＿<h1>サンプル</h1> ＿</div> ＿<div class="section merchandise"> ＿＿<ul> ＿＿＿<li><a href="#1">商品名1 ＿＿＿＿<span class="image"><img src="./images/thumbnail/1.jpg" width="300" height="400" alt="黒Lサイズ"></span> ＿＿＿＿<span class="price">300円</span> ＿＿＿</a></li><!-- ＿＿＿--><li><a href="#2" class="soldOut">商品名2 ＿＿＿＿<span class="image"><img src="./images/thumbnail/2.jpg" width="300" height="400" alt="黒Mサイズ"></span> ＿＿＿＿<span class="price">300円</span> ＿＿＿</a></li><!-- ＿＿＿--><li class="soldOut"><a href="#3">商品名3 ＿＿＿＿<span class="image"><img src="./images/thumbnail/3.jpg" width="300" height="400" alt="黒Sサイズ"></span> ＿＿＿＿<span class="price">300円</span> ＿＿＿</a></li><!-- ＿＿＿--><li><a href="#4">商品名1 ＿＿＿＿<span class="image"><img src="./images/thumbnail/4.jpg" width="300" height="400" alt="白Lサイズ"></span> ＿＿＿＿<span class="price">300円</span> ＿＿＿</a></li><!-- ＿＿＿--><li><a href="#5">商品名2 ＿＿＿＿<span class="image"><img src="./images/thumbnail/5.jpg" width="300" height="400" alt="白Mサイズ"></span> ＿＿＿＿<span class="price">300円</span> ＿＿＿</a></li><!-- ＿＿＿--><li><a href="#6">商品名3 ＿＿＿＿<span class="image"><img src="./images/thumbnail/6.jpg" width="300" height="400" alt="白Sサイズ"></span> ＿＿＿＿<span class="price">300円</span> ＿＿＿</a></li> ＿＿</ul> ＿＿<hr> ＿</div> </body> </html>
お礼
ORUKA1951さん、ご回答ありがとうございました。 とても参考になりました。
- ORUKA1951
- ベストアンサー率45% (5062/11036)
もうひとつ、 画像の表示サイズは？ a要素にサイズが指定してあるけど、なぜ？ リスト項目ひとつのひとつのサイズはどの程度を想定しているのですか？ (w)100,(H)120じゃえらく小さいけど・・
補足
heightに深い意味はありません。が、widthは私なりの意味があります。 マウスが<a>の上では指先マークで、となりとの境目では矢印カーソルにしたいと思ってます。 なので、<a>を.box .outでくるんで、「border-right: 10px solid #fff;」としてます。 ＞(w)100,(H)120じゃえらく小さいけど・・ 大きさに深い意味はありません。 a要素の隣に10pxのボーダがあればそれでよいです。 疑問にお答えできてますでしょうか？ なにか不可思議なことがありましたら、質問ください。
- ORUKA1951
- ベストアンサー率45% (5062/11036)
Sold Outの文字は、すべてではないのですか？ Sold Outの文字はHTMLのソースに書くのですか？それとも、HTMLでsoldOutであることは、class名だけで示すのですか？
補足
ORUKA1951さん、ご回答ありがとうございます。 ＞Sold Outの文字は、すべてではないのですか？ 「すべて」と言う意味は、３つすべてといういみでしょうか？ で、あれば、左の一つだけ、そうしたいです。 ＞Sold Outの文字はHTMLのソースに書くのですか？ ソースをいじってもらって結構です。 それとも、HTMLでsoldOutであることは、class名だけで示すのですか？ ソースもclassも変えてもらって結構です。 ただ、リンクの機能、hoverはそのまま残したいです。 よろしくお願いいたします。
![その他([技術者向] コンピューター) イメージ](https://gazo.okwave.jp/okwave/spn/images/related_qa/c205_3_thumbnail_img_sm.png)
お礼
Questaさん、ご回答ありがとうございました。 とても参考になりました。