- 締切済み
htmlとcss
以下のようにボタンを配置し、その横に文字を書きました。 水平線上で見ると、ボタンのほうが若干上に配置されてしまいます。 綺麗に平行にするためにcssの設定をしたいのですが、誰か教えてくれませんか？ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <style type="text/css"> ul li { list-style-image: url(img/bot01.gif); font-size: 12px; font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; } </style> </head> <body> <ul> <li>ああ</li> <li>あ</li> <li>あ</li> <li>あ</li> <li>あ</li> <li>あ</li> <li>あ</li> <li>あ</li> <li>あ</li> <li>あ</li> <li>あ</li> </ul> </body> </html>
- みんなの回答 （6）
- 専門家の回答
みんなの回答
- abacabu
- ベストアンサー率37% (250/663)
度々失礼します。 色々な回答が来ていますのでわざわざ私が回答する事も無いかもしれませんが、 私の回答への補足についてまず書いておきます。 padding-bottom: 1ex; /*bottom（下）から上方向へどの位上げるか*/ またはpadding-top: 0.5ex; などなど 単位もpx,em,ex辺りの相対単位が良いでしょう。他もあるが… その中でもemかex辺りで、かつこれらはfont-sizeからの相対単位になるので、 肝心のbody{font-size:100%;}などとしておいてユーザーが容易に文字サイズを変更できるように 対処するのが望ましいとされています。 で、このfont-sizeからのem(font-sizeの値と１emは等しい)、 ex(font-sizeで設定した小文字xの高さと等しい) とりあえず色々な回答者様の方法をご自分のサイトに反映して調整してみて下さい。 尚、CSSで /*この中の文字はコメントとみなされます*/ のでそのままコピペしても問題ないです。 あと :before疑似要素はliに含まれる物の前に何らかの内容を生成する為に使う物です。 後ろに生成したい場合は :after疑似要素があります。
- ORUKA1951
- ベストアンサー率45% (5062/11036)
No1さんのアドバイスの背景画像を使用する方法 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitio … <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <style type="text/css"> <!-- ul.menue1,ul.menue1 li{ padding:0;margin:0; /* リセット */ font-size: 20px; list-style:none; } ul.menue1 li{ height: auto; width:10em; background:url("./images/button1.gif") no-repeat 0% 50% rgb(200,200,255); padding: 20px 0px 0px 50px; margin-bottom:5px; } ul.menue2,ul.menue2 li{ padding:0;margin:0; /* リセット */ font-size: 20px; list-style:none; display:block; } ul.menue2 li{ height: auto; min-height:48px; width:10em; background:url("./images/button1.gif") no-repeat 0px 0px rgb(200,255,200); padding: 0px 0px 0px 50px; margin-bottom:5px; } --> </style> </head> <body> <ul class="menue1"> <li>ああ</li> <li>あ</li> <li>ああああああああああああああああああああああああああああああああああああああ</li> <li>あ</li> </ul> <ul class="menue2"> <li>あ</li> <li>あ</li> <li>ああああああああああああああああああああああああああああああああああああああ</li> <li>あ</li> </ul> </body> </html>
- ORUKA1951
- ベストアンサー率45% (5062/11036)
li:before {content[url();}を使う場合 ☆項目が長くなっても回り込む☆ テストはfont-size:20px; 画像サイズ48px×48px; listもブロック要素の一種なのでblockとしてデータを追加するだけ ★tabインデントは全角スペース２個で置き換えてある。★ botanじゃなくて、buttonですね。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitio … <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <style type="text/css"> <!-- ul.menue,ul.menue li{ padding:0;margin:0; /* リセット */ font-size: 20px; list-style:none; display:block; /* block要素に変換 */ } ul.menue{ margin-left: 90px; } ul.menue li{ width:10em; text-indent: -48px; } li:before{ content: url("./images/button1.gif") ;/* 48px×48pxの画像 */ position:relative; top:15px;/* 画像のサイズから算出 */ right:10px;/* 画像のサイズから算出 */ } --> </style> </head> <body> <ul class="menue"> <li>ああ</li> <li>あ</li> <li>あ</li> <li>あああああああああああああ</li> <li>あ</li> <li>あ</li> <li>あ</li> <li>あ</li> <li>あ</li> <li>あ</li> <li>あ</li> </ul> </body> </html>
- ORUKA1951
- ベストアンサー率45% (5062/11036)
list-style:image; 画像サイズを文字の高さと大きく異なるものにするとわかりやすいと思いますが、だけでは無理です。 No.1さんが指摘されているように背景画像で指定するか、list-style:none;、:beforeという擬似要素(詳細度1)を使ってcontent:"url();で追加します。その際には <li><span>項目</span></li>として ul,ul li{list-style:none;display:block;} ul li:before{content:(url);} ul li span{padding:***}/* サイズはex(小文字のxの高さ) */ で指定する必要があるでしょう。 背景画像の位置もexで指定するほうが無難です。 ただ、リストのマーカーを画像で指定するのはユーザービリティ上は感心しません。目が悪い人は文字のサイズを変更して見られているし、小さいとはいえ不必要な画像の読み込みを強制することになります。もっと配慮しなければならないことが・・
- abacabu
- ベストアンサー率37% (250/663)
独学でＷＥＢサイトを作成しているものです。 たぶんですがリストマーカー(リストの前にでる・など)を変更して その表示位置が文字と見比べるとどうしてもずれて見えるという質問だと 仮定します。 そういう微調整要素はリストマーカー側にはないので、 というよりも文字がボックスの（この場合liというボックス）したに文字があるため バランスが悪く見えます。 これを調整する為につかうのがpaddingです。 最初の回答者様が回答なされていますが ↑ -------------- | ↑ | ← | ← あ → | → | ↓ | -------------- ↓ 図がつたないですが「あ」からボックスの壁までの寸法をpaddingで指定します。 ボックス外の寸法を(隣り合うボックスとの間隔)marginで設定します。 数値の内訳(個別指定) padding: 上, 右, 下, 左; です。 上下と左右を設定する場合は padding: 上下, 左右; 値３つだと padding: 上, 左右, 下; 値１つで四方です。 これはpadding,marginその他共通です。
- outbrave
- ベストアンサー率60% (231/380)
list-style-image ではなく、backgroung-image を使用します。 ul { list-style: none; margin: 0; padding: 0 0 0 2em; } li { padding: 0 0 20px 40px; background: url(img/bot01.gif) no-repeat left center; } padding の値は調整してください。
補足
すいません。説明不足でした。 イメージと文字を水平にしたいのです。
補足
具体的にどのようなＣＳＳになりますか？ 詳しそうな方なのでよろしくお願いします。