before疑似要素で画像を指定した場合の文字位置

2023/09/04 15:59

このQ&Aのポイント

before疑似要素を使って画像を指定した場合、画像の下に文字が配置されます。
画像の中央から文字を開始する方法を教えてください。
現在の指定方法はCSSとHTMLで行われています。

ベストアンサー

before疑似要素で画像を指定した場合の文字位置

2013/03/12 17:11

いつもいつもお世話になっています。 before 疑似要素で画像を指定した時、画像が文字サイズより大きいとすると次にくる文字の位置(縦)が画像の下のラインに合っています。画像の中央から文字を開始したいのですが、なかなかうまいこといきません。なにとぞ、ご教示ください。現在は、以下のように指定しています。 --------------------------------------------------------- CSS --------------------------------------------------------- .test{ border:1px solid #39C; color:#006699; } .test:before{ float:left; padding-top:0px; padding-right:10px; content: url("../img/icon.gif"); } --------------------------------------------------------- HTML --------------------------------------------------------- <p class="test"> あああああ </p>

poifulls
お礼率88% (16/18)

CSS
回答数1
ありがとう数1

みんなの回答 （1）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

ORUKA1951
ベストアンサー率45% (5062/11036)

2013/03/13 08:12 回答No.1

　画像は置換インライン要素ですから、contentプロパティで内容を追加すると、当然ベースラインを合わせて表示されます。　そこで、positionプロパティで位置を指定する必要があります。そのとき、absoluteを使用するなら、他の要素と切り離されて直近のstatic以外の親コンテナブロックの位置が基準になります。relativeを使用すると本来の位置からずらして表示させることが出来ますが、この場合本来表示されるべき位置・サイズにそれがあると他の要素が判断しますから注意してください。　floatはいくらなんでも使わないでしょう。

質問者

お礼 2013/05/20 13:11

お礼が遅くなってしまい申し訳ありませんでした。回答いただきありがとうございました。

関連するQ&A

フッターの画像の位置づけ指定方法がわからない
ヘッダー・メイン・サイドバー（左右）・フッターの５コマ組みのサイトを表現したいのですが、フッターに指定した画像を全体サイズでセンターに寄せて（画像の上に、真ん中寄せでテキストを乗せたい）反映させるにはどうしたらいいのでしょうか。フッターに指定しているjpg画像のサイズは、(○●.jpg);511×229pxです、よろしくお願いします。 <style type="text/css"> body /* コンテナ */ div#container{width: 100%; margin-left: auto; margin-right: auto} /* ヘッダー */ div#header{background-color: #ffffff; 　　　　　　　　　　　font-color:#4876ff; /*background-image: url(.jpg);*/ background-repeat: no-repeat; background-position: center top; 　　　　　　　　　/*padding: 28px 20px 150px*/ } div#header h1{margin: 0} div#header p{color: #ffffff; font-size: 0.50em; margin: 0} /* メイン */ div#main{width: 100%; float: left; margin-right: -230px} /* コンテンツ */ div#content{width: 100%; float: right; margin-left: -186px; margin-right: auto; margin-bottom: 25px} div#content h2, div#content h3, div#content p {margin-left: 186px; margin-right: 230px} div#content h2{background-color: #92c9ff; background-image: url(); background-repeat: repeat-x; border: solid 1px #84c2ff; font-size: 0.875em; color: #00688b; line-height: 32px; padding-left: 6px; margin-top: 0; margin-bottom: 0} div#content h3{background-color: #ffffff; background-image: url(); background-repeat: no-repeat; background-position: 0px 2px; font-size: 0.875em; line-height: 22px; padding-left: 26px; margin-top: 30px; margin-bottom: 0} div#content p{font-size: 0.75em; line-height: 1.6; margin-top: 10px} /* サイドバー */ div#sidebar{ background-image:url(.jpg); width: 170px; float: left; margin-bottom: 25px} ul.sidemenu{font-size: 0.90em; margin-top: 0; margin-left: 0; padding-left: 0; line-height: 0} ul.sidemenu li{list-style-type: none} ul.sidemenu li a{ 　　　　　　display: block; line-height: 25px; text-decoration: none; 　　 text-align:right background-img:url(.gif); 　　　　　　padding-left: 10px} ul.sidemenu li a:hover{background-color: #cdc1c5 　　　　　　　　　　　　　　color: #8b1c62 } ul.sidemenu ul {margin: 0; 　　　　　　padding: 0} ul.sidemenu ul li a {background-img:url(gif); color:#5d478b; border-bottom: solid 1px #ab82ff; 　　　　　　　line-height: 24px} ul.sidemenu ul li a:hover {background-color: #eee0e5; 　　　　　　　　　　　　　　　　　color:#ffffff; 　　　　　border-bottom: solid 1px #ab82ff; } p.feed{margin-bottom: 10px} p.feed a{font-size: 0.75em; color: #444444; text-decoration: none; line-height: 30px; border: solid 1px #888888; padding: 5px} p.feed img{border: none; vertical-align: middle} /* 右サイドバー */ div#sidebar-right{width: 150px; float: right} div.info{border: solid 1px #84c2ff; margin-bottom: 18px} div#sidebar-right h2{background-color: #c6e3ff; 　　background-image: url(); color: #3c5916; font-size: 0.75em; text-align: center; padding: 5px; margin-top: 0; margin-bottom: 3px} div#sidebar-right p.photo{text-align: center} div#sidebar-right p{font-size: 0.75em; margin: 10px 5px} div#sidebar-right ul{font-size: 0.75em; margin: 5px; padding: 0} div#sidebar-right ul li {background-image: url(); background-repeat: no-repeat; background-position: 0 6px; padding-left: 13px; list-style-type: none} /* フッター */ div#footer{background-image:url(○●.jpg); 　　　　　　background-repeat: no-repeat; width: 100%; margin-top: ; padding-top: 8px; clear: both} address{font-size: 0.75em; font-style: normal; text-align: center} </style> ・・・・・・・・ここまで指定ここから、html打ち込み↓  <div id="footer"align="center"> ～～テキスト文章～～<br> <address><big>～アドレスのテキスト～</address></big> <br>○○おなじくテキスト</div> <div align="center"> ～◆◆サイトの名前～　　 <img src="○○.jpg"border="0"bordercolor="#87ceeb"alt=""> <br><br> </body> </html> 少しいじると、おかしな反映になります、お助け下さい。
- 締切済み
- CSS
CSSで画像配置の垂直方向指定
画像をいくつも展示するページを製作しているのですが、画像の垂直方向指定がうまくいきません。縦長の画像と、横長の画像(サイズは同じ)を二枚横に並べたときに添付画像の下の方のように表示させたいのです。タグはそれぞれしたのようなかんじです。 *****************CSS***************** #photo { margin:0 0 0 30px; padding:0; background: transparent; text-align:center; font-size : 1em; color:#69788A; } .image { font-size : 0.9em; margin : 0; padding : 10px 0 10px 0; float:center; width : 800px; border-bottom:2px solid #CFDEEF; } .left-img { float: left; width : 50%; } .right-img { float: right; width : 50%; } *****************HTML***************** <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta NAME="ROBOTS" CONTENT="NOINDEX,NOFOLLOW,NOARCHIVE"> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> <meta http-equiv="Content-Style-Type" content="text/css"> <link rel="stylesheet" href="style.css" type="text/css"> <title>***********</title> <style type="text/css"> body { background: transparent; } </style> </head> <body id="photo"> <div class="image"> <p class="left-img"><img src="016.jpg" border="0"></p> <p class="right-img"><img src="017.jpg" border="0"></div> </body> </html> よろしくお願いします。
- ベストアンサー
- HTML
borderの範囲
cssコーディングに関しての質問です。現在以下のようなスタイルとHTMLを組んでいます。 ==css============ #style1 { 　width:500px; 　padding: 15px 0 0 15px; 　border-left:1px solid #ccc; 　border-top: 1px solid #ccc; } #style1 p { 　margin:0; 　padding:0; } .style2 { 　float:right; 　clear:both; 　margin:0 0 20px 30px; } .style2 img{ 　margin:0; 　padding:0; } ==html============ <body> 　<div id="style1"> 　　<div class="style2"><img src="sample.jpg" width="200" height="200"></div> 　　<div class="style2"><img src="sample.jpg" width="200" height="200"></div> 　　<p>サンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプル</p> 　</div> </body> イメージをfloat:right;に指定し、縦並びにしたいので、clear:both;を入れた所、 border-left:1px solid #ccc;のborderが文字までは表示されるのですが、画像の延長上は無くなって表示されてしまいます。右に画像を配置し borderを伸ばしたい時はどのようにすればよいのでしょうか？よろしくお願いします！
- ベストアンサー
- HTML
hover擬似要素をかけるとfloatでの段組が崩れる
宜しくお願い致します。以下の様なHTMLとCSSで、hover擬似要素でボタン押下を表現したリストのリンクが、IE6（他ブラウザは現在確認出来ていません）でマウスを乗せると、floatした段組が崩れそのリストメニューの高さまで段組の親要素が縮んでしまいます。原因にお気付きの方は、どうかご指摘頂けます様、お願い致します。 <!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"> <meta http-equiv="Content-Style-Type" content="text/css"> <style type="text/css">  </style> </head> <body> <div id="container"> <h1>ページタイトル</h1> <div id="contents"> <div id="main"> <p>段落</p> <p>段落</p> <p>段落</p> <p>段落</p> <p>段落</p> <p>段落</p> <p>段落</p> <p>段落</p> <p>段落</p> <p>段落</p> <p>段落</p> <p>段落</p> <p>段落</p> <p>段落</p> <p>段落</p> <p>段落</p> <p>段落</p> <p>段落</p> </div> <div id="navigation"> <ul> <li><a href="" title="">Home</a></li> <li><a href="" title="">abc</a></li> <li><a href="" title="">def</a></li> <li><a href="" title="">ghi</a></li> <li><a href="" title="">jkl</a></li> <li><a href="" title="">mno</a></li> <li><a href="" title="">pqr</a></li> </ul> </div> </div> <address id="footer">フッター</address> </div> </body> </html>
- ベストアンサー
- CSS
CSSでの画像サイズ指定について
本などでCSSを練習中です。画像サイズを自動的に指定したサイズに縮小するCSSはありますでしょうか？以下のよな商品紹介のサムネイルを作りました。画像部分は常に120×120pxに収まってほしいのですが、横幅が高さより大きい画像を入れた場合、高さは指定した120pxになりますが(縦横比率は同じ)、横は飛び出してデザインが崩れてしまいます。正方形の画像はそのまま120×120pxになります。何かアドバイスをお願い致します。また、他のおかしいところもご指摘下さい。【HTML】 <div id="itemBox"> <div class="itemPhoto"><a href="#"><img src="#" alt="商品名" width="120" height="120" /></a></div> <p><a href="#">商品名</a></p> </div> 【CSS】 div#itemBox{ border: 1px solid #9f9f9f; width: 120px; margin: 10px; float: left; text-align: center; padding: 10px; height: 150px; } div#itemBox p{ float: left; text-align:left; width: 120px; margin-top: 5px; } div#itemPhoto{ margin: 0; padding: 5px; text-align: center; width:120px; height:120px; }
- 締切済み
- CSS
cssでtableを指定したい
教えてください。 cssでテーブルを指定しているのですが、別の幅のテーブルを指定したいときはどうすればよいのでしょうか。現在はこういうふうに書いています。ちょっと汚いですが。。。 ----------------------------- #content #main p{ margin:10px 18px 25px; font-size:12px; } #content #main table { border-collapse: collapse; background-color: #FFFFFF; width: 480px; margin:0px padding; border: 0px #000000: 1px; } #content #main caption{ text-align: right; padding-right: 5px; font-size:12px; } #content #main th { 　　　　border: #999999 1px solid; font-size:12px; font-weight: normal; background-color: #D8EAFC; 　　　　　padding: 5px; } #content #main td{ border-right: #999999 1px solid; border-top: #999999 1px solid; border-left: #999999 1px solid; border-bottom: #999999 1px solid; font-size:12px; text-align: left; 　　　　　padding: 5px; } ----------------------------- 実際にタグを書くときは、こう書いています。 ----------------------------- <table> <tr> <th>aaaa</th> <td>5555555555555555555555555555</td> </tr> </table> ----------------------------- これをmaintable　subtable　というふうに幅が違うものにしたいのですが、cssにmaintableを追加して、<table class=maintable">と指定しても、maintableではなく、tableで表示されます。こういう場合はどうすればよいのでしょうか？
- ベストアンサー
- XML
IE6に出る不具合
お世話になっております。角に丸みを持たせたボーダー（罫線）を作っているのですが、IE7、IE8、FireFoxでは描いたとおりの表示となったのですが、IE6だけ、4pxほどの隙間が出来てしまいます。 CSS側 .main-border-top{ width:660px; height: 8px; float: right; background-image: url(http://localhost/public_html/type2/image/border-line-660-top.gif); /*この画像は、ボックスの蓋？になる左右が回り込んだ形状の画像です。660×8の大きさ*/ background-repeat: no-repeat; margin-bottom: 0px; padding-bottom: 0px; } .main-border{ margin-top: 0px; padding-top: 0px; width:658px; border-left: 1px solid #969696; border-right: 1px solid #969696; float: right; text-align:left; } .main-border-bottom{ width:660px; height: 8px; float: right; margin-bottom: 20px; background-image: url(http://localhost/public_html/type2/image/border-line-660-bottom.gif); /*この画像は、ボックスの底？になる受け皿状の画像です。660×8の大きさ*/ background-repeat: no-repeat; } html側 <div class="main-border-top"> </div> <div class="main-border">  <p><b>お知らせ</b></p> <p>ホームページリニューアル・ホームページリニューアル・ホームページリニューアル・ホームページ</p> <p>テスト・テスト・テスト・テスト・テスト・テスト・テスト</p>  </div> <div class="main-border-bottom"> </div> 言葉だけでうまく説明できないので、画像も添付しますが、画像の通り、上の蓋の下に隙間が出来てしまい、高さは8pxと指定しているにもかかわらず14pxの幅（高さ）を占領しており、画像との差、6pxの幅の隙間が出来てる状況です。お忙しい中恐縮ですが、アドバイスのほど宜しくお願いいたします。
- ベストアンサー
- HTML
このHTMLとCSSをひとつにするのはどうすれば？
WordpressのAddQuickTagを使うために別れたままでは使うことができません＞＜ https://saruwakakun.com/html-css/reference/box ちなみに１９番のカギカッコを使いたいと思っています。何卒よろしくお願いいたします！！ HTMLが・・・ <div class="box19"> <p>ここに文章</p> </div> CSSが・・・ .box19 { position: relative; padding:0.25em 1em; } .box19:before,.box19:after{ content:''; width: 20px; height: 30px; position: absolute; display: inline-block; } .box19:before{ border-left: solid 1px #5767bf; border-top: solid 1px #5767bf; top:0; left: 0; } .box19:after{ border-right: solid 1px #5767bf; border-bottom: solid 1px #5767bf; bottom:0; right: 0; } .box19 p { margin: 0; padding: 0; }
- 締切済み
- HTML
JS 疑似要素のアイコンをアニメーション
JS 疑似要素のアイコンをアニメーション JavaScriptで疑似要素のアイコンをアニメーションさせます。テーブルヘッダーにソート用のアイコンを付けました。下記のような動作をさせるには、どのようなコードで書きますか？（添付図は動作例）＜仕様＞・アニメーションさせる項目名にクラス名「icon」を付けておく・初期状態は、三角形アイコンを薄い色で表示・項目名のクリックでアイコンが赤く変わる・もう一度クリックで青色の逆三角形に変わる・同じ項目名をクリックするたびにトグル・別の項目名のクリックで、直前のアイコンは初期状態に戻る・ソート機能は付けていない。 <style> table { border-collapse: collapse; } th { background-color: #ddd; } th, td { padding: 0 1em; height: 30px; line-height: 30px; font-size:1em; } thead th.icon { position: relative; padding-left: 30px; cursor: pointer; } thead th.icon::before { content: "▲"; display: inline-block; position: absolute; left: 4px; color: #eee; } tbody td:nth-child(n+3){ text-align: right; } </style> <table id="table4" border="1"> <thead> <tr> <th class="icon">No.</th> <th class="icon">NAME</th> <th class="icon">HEIGHT (cm)</th> <th class="icon">WEIGHT (Kg)</th> <th>BMI</th> </tr> </thead> <tbody> <tr><th>1</th><td>CHUBBY</td><td>160</td><td>90</td><td>37.1</td></tr> <tr><th>2</th><td>VICKY</td><td>156</td><td>60</td><td>24.7</td></tr> </tbody> </table>
- 締切済み
- JavaScript
スタイルシートのpositionでフッターを位置指定するには
こんにちは。今回ページレイアウトにテーブルではなくcssのpositionを使おうと思っているのですが、フッターの指定がうまくいきません。フッターの上のメインコンテンツや右カラム、左カラムが短い場合は問題ないのですが、長くなるとフッターにかかってしまいます。左カラム、メインコンテンツ、右カラムのどれが長くなっても常にフッターがページの最下部に下がるようにするにはどのように指定すればいいですか？ちなみに今こんな感じで指定しています。フッターをbottom:0px;で指定すれば常に一番下に来ると思ったのですが…。スクロールしない範囲での一番下にしか来ません…。 /* 左カラム */ #left_column { position: absolute; top: 130px; left: 10px; background-color: #FFFFFF; width: 150px; /* height: 500px; */ border: 1px solid #000; padding: 0px; } /* メインコンテンツ */ #main_contents { position: absolute; top: 130px; left: 165px; background-color: #FFFFCC; width: 490px; /* height: 500px; */ border: 1px solid #000; padding: 10px; } /* 右カラム */ #right_column { position: absolute; top: 130px; left: 660px; background-color: #FFFFFF; width: 200px; /* height: 500px; */ border: 1px solid #000; padding: 10px; } /* フッター */ #footer { position: absolute; bottom: 0px; left: 10px; background-color: #EEE; width: 850px; border: 1px solid #000; padding: 20px; }
- 締切済み
- その他([技術者向] コンピューター)