- ベストアンサー
CSSで画像の裏にテキストの文字が隠れてしまいます
shigatsuの回答
こんな感じでいけてると思うんですけど・・・ （→参考URL） ソース見て参考にしてください。
noname#25358
- noname#25358
関連するQ&A
- CSSにおいて、画像とテキストの配置（回り込み）について
ＣＳＳ＋ＨＴＭＬによって、ＨＰを作成しております。 ＨＰ作成ソフトはDream Weaver8です。 画像をテキストの左に回りこませる技術。 （例） ■■■■ テキストテキスト ■画像■ テキストテキスト ■■■■ テキストテキスト はスタイルシートで、画像にスタイルシートの ボックスのfloat定義でleftをつけて <div class="header" id="pageName"> <div id = "left"></div> <span class="style3">テキスト</span><br/> </div> このように設定すればよいのかと思ったのですが （headerは外部スタイルシートで、読み込み） 十分に画像をおくスペースがないと、 画像に、テキストがかぶってしまう場合や、（レイヤーが働いてしまう。）うまく、回り込まないのですが、どの設定が足りないのでしょうか。 ちなみにたっぷりとスペースをとった、ｄｉｖですと、 回り込ませることができたりしましたが、メニューdivなど 小さいスペースや縦幅が足りないとだめなのでしょうか。 画像のレイヤーの解除指定などをした方がよろしいのでしょうか。 まだ、初心者ですが、もし、ヒントだけでも、教えていた だけますと幸いです。
- ベストアンサー
- HTML
- box の左端と右端に書いた文字の下端を揃えるにはどうすれば
box の左端と右端に書いた文字の下端を揃えるにはどうすれば よいでしょうか。 <div style="width:200px;"> <span style="float:left;font-size:80%;">左端</span> <span style="float:right;font-size:150%;">右端</span> </div> float を指定しなければ下端は揃っているのですが、 float をつけると下端ではなく上端が揃います。
- ベストアンサー
- CSS
- テーブル内のスタイルシートについて。
カテゴリHTMLでよいのか、ちょっとビクビクしているのですが。 テーブルのひとつのセル内で左揃えの文字列と右揃えの文字列を作りたいのです。 スタイルシートを使おうと思ったのですが、 それぞれの文字列に <SPAN STYLE="text-align:left;">むにゃむにゃ</SPAN> <SPAN STYLE="text-align:right;">うにょうにょ</SPAN> と指定をしても全く反映されません。 一つのセル内で左右に文字を振ることは不可能なのでしょうか？
- ベストアンサー
- HTML
- cssで一部の文字や画像を中央に寄せる方法
よろしくお願いします。 まずhtmlに以下の記述をしております。 <p class="font"> スタイルシート <span class="color2">レッスンブック</span> パソコン <img src="img/hoge.gif" alt="テスト" width="250" height="130" /> インターネット プリンター </p> レッスンブックについてのみ文字色を変えたいため<span>を使用しております。 <p class="font">～</p>にはtext-align:leftを;適用しており 当然ですが、左に寄ります。 ですが一部の文字や画像のみを中央揃えにしたいのですが、きっとclass名を入れれば良いのだと思うのですが、具体的にどこに記述したら良いのか分かりません。 上記のimgと「レッスンブックのみを中央揃えにしたいと思っております。 ご指導よろしくお願いします。
- ベストアンサー
- HTML
- ｃｓｓで見出しの両側に文字を表示したい
ｃｓｓ+ｈｔｍｌでWebページを作成しています。 その中で見出し(H3タグ)の両側に、右寄せ左寄せで文字を表示したいのです。 （完成イメージは画像参照）。 ソース全文載せましたが、見出しの下に右寄せと左寄せの文字が、表示されてしまいます。 見出しの両側に表示させるにはどうしたらよいですか？ よろしくお願いいたします。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.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"> <title></title> <STYLE TYPE="TEXT/CSS"> <!-- div.heading { width: 450px; background-color: #e0e0e0; border: #e0e0c0 solid; border-width: 1px 1px 2px; margin-left: auto; margin-right: auto; } /* --- 見出し --- */ div.heading h3 { margin: 0; padding: 7px 7px 4px; border-bottom: 4px #9825e1 solid; font-size: 100%; line-height: 100%; text-align: center; } span { float: left; width: 100px; text-align: center; } span.back { float: left; } span.next { float: right; } }--> </STYLE> </head> <body> <!--全体(wrapper) Start--> <div class="all-wrapper"> <div class="main-wrapper"> <div class="heading"> <h3>見出し</h3> <span class="back"><a href="#">BACK</a></span><span class="next"><a href="#">NEXT<aa></span> </div> </div> </div> </body> </html>
- ベストアンサー
- HTML
- CSSの文字指定
<style type="text/css"> <!--A:link {color:#000055; text-decoration:none; } A:visited {color:#000055; text-decoration:none; } A:hover {color:#ff3300; text-decoration:underline; }--></style> 上部はcssのリンクですが、これに加えて文字のサイズ指定とフォントのフェイス指定もしたいです。 たとえば、MSゴシック,平成角ゴシックなど。 どう加えればよいですか？ <style type="text/css"> font:16px "ＭＳ Ｐゴシック",平成角ゴシック,</style>とやってもダメでした と
- ベストアンサー
- HTML
- ホームページからWordへコピペしたテーブルの書体を事前に設定する方法？
MS Officeのスレッドで質問していたのですが、解決しなかったのでこちらに移動しました。以前のスレッドは、締め切っています。 http://oshiete1.goo.ne.jp/qa3831369.html?ans_count_asc=0 ホームページのテーブルをWordにコピペした場合、テーブルのセル内の文字がWord上ではいつもMS Pゴシックになっています。 Wordのテーブル以外の文章部分はMS明朝なので、ホームページからWordにコピペしたテーブルの文字の書体もそれにあわせてMS明朝にしたいと思い、ホームページのテーブル内の文字の指定をスタイルシートのfont-familyなどを利用してMS明朝とするのですが、そのテーブルをブラウザーからWordにコピペすると結局MS Pゴシックになっています。 テーブルを表示しているブラウザの文字の指定がMS Pゴシックになっているからでしょうか？ どうにかして、”ブラウザの文字の書体の設定に依存せず”にホームページからWordにコピペしたテーブル内の文字の書体がMS明朝となるように、ホームページのHTMLコード側でスタイルシートなどを使用して（スタイルシート以外の方法も可能）設定する方法はありませんか？ 注意:テーブルをホームページからWordへコピペした後で、Word側で書体をMS PゴシックからMS明朝へ変更する操作をお聞きしているのではありません。 よろしくお願いします。
- ベストアンサー
- HTML
- cssで、全体を中央寄せ、文字は左寄せにする方法
CSSで、全体を中央寄せにしつつ、全ての文字を左寄せにする方法を教えてください。 bodyにtext-align: centerを設定し、 #outline{ width:1200px; margin-right:auto; margin-left:auto; text-align:left; } .content{ float:left; width: 1200px; } と書き、<div id="outline"><div class="content">で全体を囲みました。 すると、大方できたのですが、h要素のみずれてしまいます。 （h1は全体に対する左寄せ、h2は全体に対する中央寄せとなってしまいました・・・） h要素は色とフォントサイズを指定したのみです。 CSSについて自体あまり詳しくないので、なぜこうなってしまっているのかわかりません。 どのようにすれば、他と同じく中央左寄せにすることができるでしょうか？ よろしくお願いいたします。
- ベストアンサー
- CSS
- 画像とテキストのレイアウト
左に画像、その画像の右に複数行のテキストを、画像高さの中央に配置したいと思っています。 <table><tr><td><img></td> <td style="vertical-align:middle"> 文１<br> 文2<br> 文3<br> </td></tr></table> をテーブルを用いないでレイアウトしたいということです。 <img src="loc"> 文１<br> 文2<br> 文3<br> では、文１ のみが画像右に表示されます。 <img src="loc" style="float:left"> 文１<br> 文2<br> 文3<br> では、文全体が画像のtop位置から表示されます。 どのようにスタイルシートで指定すればいいのでしょうか？
- ベストアンサー
- HTML
お礼
すばらしい回答を有難うございました。 教えていただいたURLでソースを参考にしてやってみたら見事に制御できました｡これまで散々悩まされていたのがうそのようにうまくいったので思わず拍手をしてしまいました。私にとってはそれぐらい感激的だったのです。 これで大きな山を越せたような気がして今は最高の気分です｡なんだか今日はとてもいいことがありそうです。 今回はお世話になりまして､まことに有難うございました。