Q&A
コードはコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。
###前提・実現したいこと
htmlで1枚の画像の上に画像3枚を重ね
上の画像の中央に文字を表示させたい。
###発生している問題・エラーメッセージ
下の画像に中央に出てしまい
うまく上の画像の中央に文字が表示されない
どう、cssに書けばよいのでしょうか？
###該当のソースコード
<!doctype html> <html lang="ja"> <head> <meta charset="utf-8" /> <title>jQuery UI Draggable - Default functionality</title> <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css" /> <script src="http://code.jquery.com/jquery-1.8.3.js"></script> <script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script> <style> html { height: 100%;} body { height: 100%; margin: 0;} #draggable { width: 150px; height: 150px; padding: 0.5em; border-radius: 10px;} #containment-wrapper { width: 100%; min-width:100px; height:100%; min-height:100px; border: 2px solid #ccc; } #droppable { width: 200px; height: 200px; padding: 0; margin: 0; border-style: dashed; border-radius: 10px; text-align: center; } </style> <style type="text/css"> .life { position:absolute; bottom:0%; right:0%; } .attack { position:absolute; bottom:0%; left:0%; } .cost { position:absolute; top:0%; left:0%; } </style> <script> $(function() { $( "#draggable" ).draggable({ cursor: 'move', revert: "invalid", snap: '#droppable', snapMode: 'inner', containment: "#containment-wrapper", scroll: false }); $('#droppable').droppable({ accept: '#draggable', activeClass: 'ui-state-hover', hoverClass: 'ui-state-active', drop: function(event, ui) { $(this).addClass('ui-state-highlight').find('p').text(' '); ui.draggable.draggable("disable", 1); } }); }); </script> </head> <body> <div id="containment-wrapper"> <div id="droppable" class="ui-widget-content"> <p>スナップ</p> </div> <div id="draggable" class="ui-widget-content"> <img src="jpg/cost.jpg" class="cost"><p class="costText">3</p> <img src="jpg/attack.jpg" class="attack"><p class="attackText">2</p> <img src="jpg/life.jpg" class="life"><p class="lifeText">1</p> </div> </div> </body> </html>
###試したこと
###補足情報(言語/FW/ツール等のバージョンなど)
回答3件
0
やりたことはこれであっていますか？→サンプル
すでにjQueryのCSSが入っているようなので、そのソースとの兼ね合いもありますね。
jquery-ui.cssでセレクタの詳細度が高い指定をされている場合は、自由にスタイルを変更するのが難しくなります。
最悪、ゴリ押しですが自分の実現したいスタイルの指定部分のみ「!important」をつけるなどして上書きする必要が出てくるかもしれません。
JSの挙動が自分でわかるようであればHTML構造に合わせてJSのほうを修正したほうがいいですね。
提示されたHTMLの要素だけで求めることを実現するのはCSSのみでは無理だと思います。
いずれにしろJS側でいろいろ計算しないといけなくなるんじゃないかなと。
投稿2016/08/23 02:26
総合スコア1298
0
HTML
1 <div id="draggable" class="ui-widget-content"> 2 <img src="jpg/cost.jpg" class="cost"><p class="costText">3</p> 3 <img src="jpg/attack.jpg" class="attack"><p class="attackText">2</p> 4 <img src="jpg/life.jpg" class="life"><p class="lifeText">1</p> 5 </div>
この部分のimg画像の上に1,2,3というテキストをそれぞれの画像中央に配置したい、という意味でしょうか？
また、#draggableは縦横150pxの固定幅領域ということで大丈夫でしょうか？
もしそうであるなら、3つのp要素を全てposition:absolute;にして、ひとつひとつ目的の画像の上に配置されるように座標を調整してやればできなくはないです。画像とテキストの重なりがおかしくなるようであれば、z-indexでテキストの方に大きな数値を与えてあげてください。
もし、#draggableの領域が固定ではなく、幅可変になる可能性があったり、
画像の上にのるテキストの内容が変わる可能性があってベタに座標が指定できない（＝自動的に各画像の中央に常に配置されている状態を保つ必要がある）場合は、現状のマークアップでは（少なくともCSSだけでは）不可能です。
HTML
1 <div id="draggable" class="ui-widget-content"> 2 <div class="cost"><img src="jpg/cost.jpg"><p class="costText">3</p></div> 3 <div class="attack"><img src="jpg/attack.jpg"><p class="attackText">2</p></div> 4 <div class="life"><img src="jpg/life.jpg"><p class="lifeText">1</p></div> 5 </div>
とりあえずマークアップはこのような形（1つのdivの中に画像とテキストが入っている状態）にする必要があります。
この状態であれば、親要素である.cost,.attack,.lifeの領域を基準として、子要素を上下中央に配置することができます。
CSS
1.costText, 2.attackText, 3.lifeText { 4 position:absolute; 5 left: 50%; 6 top: 50%; 7 transform:translate(-50%,-50%); /*親領域の上下左右中央に配置*/ 8}
ただし、今回のものは親領域自体がposition:absolute;されているので、
画像サイズと同じwidth/heightを指定してやらないと上手く位置取りができないかもしれません。
その辺は調節してみてください。
投稿2016/08/31 04:02
総合スコア3763
0
発生している問題・エラーメッセージの内容がいまいち要領を得ないのですが、画像を重ねるというところであればz-indexというものがあります。
あるいは、ちょっと乱暴な手段ですがpaddingやmarginで調整するというのも手かも知れません。
文面からだとこう読み取れたのですが、質問の内容がこういうものではない場合は質問内容自体を整理して欲しいです。
投稿2016/08/22 19:14
総合スコア116
あなたの回答
tips
プレビュー
