- ベストアンサー
画像だけを端に寄せる方法
マージンを０にして画像をウィンドウいっぱいに寄せたときに、回り込みの文字も画面端によって読みずらくなリます。パディングを使うと、画像ごと隙間が開きます。SPANで区切ったりもしたのですが、うまくいきません。よろしくおねがいします。
- HTML
- 回答数1
- ありがとう数2
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
次のような感じで作れば、画像のみを左に寄せることができます。 ●ＣＳＳ body { margin: 0; padding: 0; } .img_left { float: left; margin: 0 10px 10px 0; } .space { margin: 0 0 0 1em; } ●ＨＴＭＬ <body> <img class="img_left" src="image.jpg" width="" height="" alt="" /> <div class="space"> <p>文章です。</p> </div> 説明しますと、 <body>はmargin、paddingともに「0」です。 <img>は左寄せ回込みで、marginが上「0」右「10px」下「10px」左「0」です。 <div>～</div>の中は、marginが左側のみ「1em」であとは「0」です。 <img>と<div>は、classでスタイルを指定していますので、適度な場所にのみスタイルを設定できます。
関連するQ&A
- swfファイルの下に隙間ができる
firefoxとNNだけはswfファイルの下に5px程度の隙間ができてしまいます。 CSSでマージンもパディングも0にしていますが消えません。 IEではその隙間はなく、次の要素とぴったりとくっついているんですが…。 この隙間を埋める方法をご教授ください。
- ベストアンサー
- CSS
- ページの端に画像を貼る
サイトに画像を貼りたいと思っています。 単に画像を貼ることなら出来るのですが、 その画像をページの端に合わせて貼ることができません。 どうしても隙間が出来ます。 ページの左右、または上下にぴったり合わせて貼ることは出来ないのでしょうか？ 宜しいくお願いします
- ベストアンサー
- その他（インターネット・Webサービス）
- クリッカブルマップで画像と画像の間に隙間が出来てしまう
現在、ホームページを作ってみようと思い作成しているのですが、クリッカブルマップを使い、画像の特定の場所からリンクをさせようと思っているのですが、 クリッカブルマップを使っている画像Aと同じくクリッカブルマップを使っている画像Bを上下に隙間なく並べようとすると数pxほど隙間が開いてしまいます。 単なる画像データを上下に並べた時にはぴったりとくっついていたので、マージンやパディングの設定がおかしい訳ではないだろうと思っているのですが、これはクリッカブルマップを追加した事によって何か追加でスタイルシートを設定してあげなければいけないのでしょうか？ それとも、クリッカブルマップを使った時はどうしても隙間を埋める事ができないのでしょうか？ 1つの画像でやればいいのですが、HPのデザイン上・管理上の都合(画像データの差し替え頻度)どうしても分けて使いたいと思っています。 ご回答お願いします。 該当部分のHTMLソースです。 <img src="top.jpg" alt="ようこそ" usemap="#map1" width="600" height="200" /> <map name="map1"> <area shape="rect" coords="0,0,200,200" href="auto.html" /> </map> <img src="top.jpg" alt="ようこそ" usemap="#map2" width="600" height="200" /> <map name="map2"> <area shape="rect" coords="400,0,600,200" href="auto.html" /> </map>
- ベストアンサー
- HTML
- 画像にカーソルを載せると文字（説明が表示される方法）
お願いします。 リンク文字にカーソルを載せると説明が現れるのは下記のような感じでしょうが <span title="マウスのカーソルが重ねると表示される文字">ここだよ</span> これを画像表示の上にカーソルをさすと説明が現れるのはどうすればよろしいのでしょう？
- ベストアンサー
- JavaScript
- inputタグの下の隙間をCSSで消すには
下記のように inputのタイプをイメージにしてボタンを画像表示にすると、 ボタンの下に隙間ができてしまいます。 IEで4ｐｘ、Firefoxで3pxです。 inputのマージンやパディングをゼロにしても効果なしです。 <div> <input type="image" src="../images/btn.gif" name="" value="" /> </div> どなたかお分かりの方がいらっしゃいましたら教えてください。 よろしくお願い致します。
- ベストアンサー
- デザイナー・クリエイティブ職
- cssでロールオーバーした画像が、一部だけずれてしまいます。
cssで、ulやdisplay:blockを使って、画像が８個横に並んだメニューを作り、ロールオーバーさせていたのですが、横に並んだメニューの一番左の画像だけが、マウスのオンオフに関係なく、なぜか3pxほど下に沈んでしまうのです。 始めは普通に表示されていたのですが、メニューより下の項目を色々いじっている間に、いつの間にやら下がっていました。 もしや、変なマージンやパディングがいけないのではと思い、メニュー以下の項目を全部消してみたのですが、元には戻りませんでした。 cssバグなども色々調べてみたのですが、もう本当にわかりません。 cssやhtmlをここに書きたいのですが、文字数制限にひっかかってしまうので、何かこういった現象の原因になりそうな要因、できれば解決方があれば教えていただけると幸いです。 お力を貸していただければと思います。 よろしくお願いします。
- 締切済み
- HTML
- 編集用に開いた画像を、一度に切り取る方法
ダウンロードした画像を「ウインドウズ画像とファックスビュア」で開き、「編集用に画像を開く」と、画面一杯に画像が映し出されます。年賀状を作るのに、全体を切り取りたいのですが、パソコン画面一杯までしか切り取れません。(画面が下へスクロールしません。）表示で「拡大」はあるのですが、「縮小」がないので、２回に分けて切り取らざるを得ないのでしょうか。一度に切り取る方法があれば教えてください。
- ベストアンサー
- 画像・動画・音楽編集
- 画像が見れない!!
かなり前からネット上の一部の画像が見れません。 ブログのヘッダーやyahoo画面のyahoo japanと書いてある文字の左右の画像もみれなくなってます。どうやったら治りますか？ちなみにwindows7です。よろしくお願いします。
- 締切済み
- その他（インターネット・Webサービス）
- 画像とその下にあるテキストの隙間を小さくする方法
ワードプレスで画像を挿入し、その画像の下にテキストを表示させたいと思っています。 管理画面にある「メディアを挿入」の画面で「キャプション」にテキストを記入しました。 これで画像の下にテキストが表示されましたが、画像とテキストの間に広い隙間が出来てしまっています。 この隙間をなくそうと、テキストの部分にクラスを設定し、そのクラスに対してCSSから「margin-top: 0px;」などと記述したのですが、変化がありませんでした。 また、imgタグの最後に「style="margin-bottom: 0px;"」を追加しても変化がありませんでした。 画像とその下にあるテキストの隙間を小さくするためにはどうすればよいのか教えて下さい。
- 締切済み
- CSS
- 画像を横に並べると隙間ができてしまいます
メニューを作るために画像画像画像画像画像画像と並べた所、一番右端に隙間ができてしまいます。画像画像画像画像画像画像□←こんな感じの半角スペースです。画像と画像の間の余白はマージンを０に指定して削除できましたが、右端の余白はどうすれば削除できるんでしょうか？ちなみにメニューに使用した画像６個分の大きな画像を１つ貼った場合このような余白はできませんでした。
- ベストアンサー
- ブログ
お礼
出来ました。早い回答いただけたのでたいへん助かりました。ありがとうございました。