- ベストアンサー
CSSでイメージ配置について
こんにちわ。 同じ <div></div> 内に二つのイメージ画像を別々のルールーで配置したいのですがどのようにしたら良いのかわかりません。 (1)のイメージにはfloat: left; (2)のイメージにはfloat: right; としたいのですがどのようにしたらいいのかアドバイスください。 ちなみにCSSはすべて外部リンクになっています。 よろしくお願い致します。
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
その他の回答 (1)
- reverie013
- ベストアンサー率18% (26/143)
関連するQ&A
- CSSを使った全体の配置
サイト全体の配置指定を外部スタイルシートを使い、 ホームページ作成をしております。 CSS初心者なので、変な質問になるかもしれませんが宜しくお願いします。 全体のぺージの構造は上にヘッダー、下にフッター 真中は3つに分け、3カラムの状態で配置しております。 今回、ヘッダー部分を2つに分けたいと思っております。 今のヘッダー部分は、最初にh1（テキスト）を左配置に表示し、その右側にテキストで「サイトマップ」のテキストリンクを配置。 その下に width="850" height="200" の大きめな画像を置き、 画像の下に右配置でh2（テキスト） 上記のような配置になっているので、外部スタイルシートコードは・・・ /* ヘッダーコンテンツ */ .header { text-align:left; padding-bottom:0.5em; width:830px; float:left;} .header h1{ font-size:12px; padding:0; float:left;} .header h2{ font-size:12px; float:right;} /* ヘッダーサイトマップ */ .headersite{ float:right;} ・・・としています。 HTMLタグの方は・・・ <!-- ヘッダー開始 --> <div class="header"> <h1>ｈ1題名</h1> <div class="headersite"><a href="sitemap.html">サイトマップ</a></div> <a href="index.html"><img src="%/logo.jpg" width="850" height="200" border="0"/></a> <h2>h2題名</h2></div> <!-- ヘッダー終了 --> 画像部分を真中から分け、左に画像を置き右はテキストにし回り込ませたいと思っておりますが、なかなか上手くいきません（汗） 画像を2つにわけるCSSコードを .header left .header right とするならば、 HTMLタグ部分は・・・ <!-- ヘッダー開始 --> <div class="header"> <h1>ｈ1題名テキスト</h1> <div class="headersite"><a href="sitemap.html">サイトマップ</a></div> <div class="header left"><a href="index.html"><img src="%/logo.jpg" width="300" height="200" border="0"/></a> <div class="header right">テキストテキストテキスト <h2>h2テキスト</h2></div> <!-- ヘッダー終了 --> にしたいのですが、CSSコードはどのように指定したら良いでしょうか？ 自分なりにCSSコードを筆記したのですが、 回り込みがうまくいかないのか、真ん中から分けた左画像の右にテキストが並んでくれなくて下に配置されてしまいます。 ちなみに全体横幅は850pxにしております。
- ベストアンサー
- その他（プログラミング・開発）
- HTMLのCSS(float)の設定がよくわかりません
HTMLのCSS(float)の設定がよくわかりません 画像のように各配置はうまく表示されているのですが footerのCSSを #footer { width: 100%; float: left; clear: both; } と表記するとwrapperのCSSで表記した外枠のボーダーが footerの前で切、footerの左横に1px～2pxの隙間が できてしまうのですが、その理由をわかる方いらっしゃいますか。 宜しくお願い致します。 footerの表記を #footer { width: 100%; clear: both; } とすると、ボーダーも1pxの隙間もなく正常に表示されます。 宜しくお願い致します。 ■HTML <html> <body> <div id="wrapper"> <div id="header"></div> <div id="container"> <div id="left"></div> <div id="right"></div> </div> <div id="footer"></div> </div> </body> </html> ■CSS #wrapper { width: 700px; border-right-width: 1px; border-left-width: 1px; border-right-style: solid; border-left-style: solid; border-right-color: #000; border-left-color: #000; } #container { overflow: hidden; } #left { float: left; } #right { float: left; } #footer { width: 100%; float: left; clear: both; } わかる方いらっしゃいましたら 宜しくお願い致します。
- ベストアンサー
- HTML
- CSSでの配置方法
今学校の課題でCSSをやっています。 画像を「position」のタグで自分のやりたいように配置できません。 本やHPを参考にまねをしてみているのですが、それでもうまく配置できません。 -------------------------------------- <html> <head> <title>MY RADIO FLYER</title> <link rel="stylesheet" type="text/css" a href="stop.css"> </head> <h1><div class="section"> <img id="top" src="image/myradioflyer.gif"> </div></h1> <h2><div class="section2"> <img id="spec" src="image/spec.gif"> <img id="photo" src="image/photo.gif"> <img id="top photo" src="my radio flyer/a.jpg" alt=""> </div></h2> </html> ------------------------------------------ body {background-color: #ff0000;} div.section{align:center;} div.section2{align:left;} img#top photo{ position: absolute; right:80px; top:40px;} ------------------------- 今こんな感じでやっています。 ひとつひとつの画像それぞれを操りたいのですが、全くできません。 また、配置には関係の無いはずのタグを追加しただけでも、配置が換わってしまったりと、全くもってわからなくなってしまいました。 どなたかよろしければ配置方法教えてください。
- ベストアンサー
- HTML
- CSSのfloatについて
ホームページを作成していて、CSSが効かなくて困っています。 ２カラムで左側にメニュー 右側にメインのコンテンツを作成しております。 メインのコンテンツは floatでrightに設定していて その中にさらに ２つの内容を入れようと （メインコンテンツ内に左側に画像で右側に画像の詳細をいれたい） floatタグでleftとrightに設定したのですが CSSが効かなくて 左側に画像が配置され その下に画像の詳細文が配置されてしまい 全部左側に配置されてしまいました。 色々と試したみたのですが やっぱりCSSが効きませんでした。 すいません誰かお分かりになられましたら 教えてください。宜しくお願い致します。
- 締切済み
- その他([技術者向] コンピューター)
- CSSのbackground-imageについて
CSSのbackground-imageについて質問です。 前回「CSSでメイン部分が80%ぐらいに表示するには？ http://okwave.jp/qa/q7728293.html 」で質問した者です。 ＿＿＿＿＿＿ ｜｜ ｜｜ ｜｜main ｜｜ ｜｜ ｜｜ ｜｜ ｜｜ ～～～～～～ background-imageでメイン部分以外をパターン画像を使いたいと思いました。 そこでふと疑問が沸いたので質問させてもらいます。 sidebar-left, main, sidebar-rightをdivで区切っていると、 background-imageで背景画像を指定するにはsidebar-leftとsidebar-rightの2カ所に同じ画像を指定しないといけません。 divで区切るたびにbackground-imageを指定するのはは間違っているのでしょうか？ 背景画像を何か所も指定するやり方は間違っているような気がしたので質問します。
- ベストアンサー
- CSS
- CSSでDIVを複数囲むには
CSSでレイアウトをしているのですが、<div>で囲んだ画像Aと画像Bがあります。この2つの<div>を更にもう1つの<div>（以下、大DIV）で囲んでまとめたいのですが、うまくできません。その2枚の画像はそれぞれfloatでleftとrightに寄せているのですが、floatを適用させると大DIVの外に出てしまいます。 2つの画像を左右に寄せることは必須です。その後で、大DIVでまとめておけばあとでレイアウトの変更があったときに作業がスムーズに進むと思ったのですが。 これはどのようにすればよいのでしょうか？
- 締切済み
- HTML
- 文字の両側に画像を配置するCSSのやり方
●AAAAA● ●BBBBB● ●CCCCC● 上記のように文字の両側に●画像をCSSにて配置したいのですが。 HTML <div class=R> <a href=".html">AAAAA</a> <a href=".html">BBBBB</a> <a href=".html">CCCCC</a> </div> CSS div.R a { background-image: url("●.gif"); background-repeat: no-repeat; background-position: left center; margin-right: 12px; padding-left: 7px } この状態では、左に●は表示されるます。 もうひとつ重ねればとおもい <div class=R>の中に<div class=R2>なるものを配置し、 div.R2 a { background-image: url("●.gif"); background-repeat: no-repeat; background-position: right center; margin-left: 12px; } を重ねてみたんですが、うまくいきません。 右にも表示させてい場合は、どのような記述にすれば表示されるのでしょうか？
- ベストアンサー
- CSS
- CSSがわかりません！
やりたいことは 一般の画像に「transition: 0.3s;」を適用 hogeクラスの画像に「float: left;、height: 100px;」を適用 です。 CSSには img { transition: 0.3s; } img.hoge { float: left; height: 100px; } と記述しました。 これだと、<div class="hoge"><img （画像）></div> の、（画像）の部分に「float: left;、height: 100px;」が適用されませんでした。 試しに img { float: left; height: 100px; transition: 0.3s; } としてみたところ、すべての画像に float: left;、height: 100px;、transition: 0.3s;が適用されました。 ということは img { transition: 0.3s; } という、書き方がまずかったのでしょうか？ transition: 0.3s;は、すべての画像に適用したかったので あえてクラスを設定することはしませんでしたが この度のfloat: left;、height: 100px;を、一部の画像にクラスを指定し 追加することは可能ですか？
- 締切済み
- CSS
- menuのHTMLタグとCSSが上手くいかない
画像(1)が現状です。イメージは(2)です。何故HTMLタグを別々にするかというとスマホにしたらsubメニューをボトムに配置したいのです。 メニューとsubメニューの背景がくっつかないのです。 (1)を(2)にするにはどうすれば良いでしょうか？ 以下がHTMLタグとCSSになります。 アドバイスをお願いします。 HTMLタグ <div class="div1"><ul><li>メニュー1</li><li>メニュー2</li><li>メニュー3</li><li>メニュー4</li></ul></div> <div class="div2"><ul><li>sab1</li><li>sub2</li></ul></div> CSSスタイル ul li { list-style: none; } .div1 { background: #ccc; float: left; } .div2 { width: 240px; background: #999; float: right; } li { float: left; padding: 5px 15px; }
- 締切済み
- HTML
- CSS 配置 Absolute、Margin
お世話になります。 CSSを使用してWebサイトを作成しているのですが、ある画像の上にもう一つの画像を重ねたいと思っています。そんな時まず後ろの画像を配置し、その次に上に重ねる画像をPosition:absolute; margin:xxpx; として表示させています。IE以外で表示されるのと、IEで表示される位置が違うので困っています。 とりあえず画像の表示方法は以下のよう HTML <div id="a"> <img src="aaa.jpg"> <div id="b"></div></div> CSS #a {float:left; overflow:hidden;} #b {position:absolute; margin:-40px; height:10px; width:20px; background:url(aa.jpg);} IEすべて同じように表示されるのかと思いましたが、今日学校のPCで見たところ、IE以外のブラウザで表示されるのと同じように表示されていました。 今のところはIEのみのCSSとその他のCSSとの設定でやりくりしていますが、すべてのブラウザでどんな場合も同じように（まったく同じは無理だとは思いますが）表示させる方法を教えてください。 CSSを使い分けたりするのではなく。一つのCSSだけで；
- ベストアンサー
- その他([技術者向] コンピューター)
お礼
ありがとうございます。 クラス指定でやってみます。