- ベストアンサー
右下部分に配置
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
１．外側のDIVにposition:relativeまたはabsoluteを定義 ２．内側のDIVで、position:absolute;right:0;bottom:0とする
その他の回答 (1)
- Kuppycat
- ベストアンサー率50% (109/216)
画像の場合なら背景画像にして、 "background-repeat: no-repeat; background-position: right bottom;" でもよいかも。
お礼
なるほど！こんな方法もあったんですね。 ありがとうございます。
関連するQ&A
- 画像の横に1/2の高さの画像を2枚上下で並べて配置
HTML初心者です。 1枚の画像の横に、1/2の高さの画像を2枚上下で並べて配置する方法はありますか？ <!-- 画像を括るボックスのwidth値は画像サイズの単位である px を指定する --> <p style="width: 100px; padding: 10px;"><img width="100" height="100" src="./test.png></p> 他のサイトで上記がHITしたのですが。。 スタイルシート（？）ではなく、HTMLで出来るのであれば知りたいです。 すみませんが、ご確認よろしくお願いします。
- ベストアンサー
- HTML
- ホームページのブロック配置 Float
Float left のブロックの右に別のブロックを配置したいのですが float right 指定しても回り込んでくれません。一度は上手くいったようにみえたのですが。 原因と注意点をお教え下さい。 --------------------------------------------------------------------------- | header | |--------------------------------------------------------------------------- | dspbody (menuとtopを含む) | | ------------------------------------------------------------------------- | | menu | top | |--------------------------------------------------------------------------- | footer | ---------------------------------------------------------------------------- 【テスト中のスタイルシート】 * { margin:0; padding:0; } body { /* background-color:#ffffff; *//*内容全体の背景色*/ text-align:left; /*テキストの配置を左揃えにする*/ } div#pagebody { width:1000px; margin:0 auto; /*内容全体をセンタリング*/ text-align:left; /*テキストの配置を左揃えにする*/ } div#header { height:136px; /*背景画像のサイズに合わせてボックスの高さを指定*/ text-align:center; /*テキスト・画像の配置を中央揃えにする*/ background-image: url(img/FF054_change.png); background-repeat: repeat-x; } div#dspbody { width:1000px; height:800px; background-color: #999999; } div#menu { width:152px; height:800px; margin:0; float:left; /*内容全体を左に配置*/ text-align:left; /*テキストの配置を左揃えにする*/ /* background-color: "saddlebrown"; */ background-image: url(img/FF085_change.png); /* background-repeat: repeat-y; */ } div#top { /* width:700px; height:600px; */ float:right; text-align:center; /*テキストの配置を中央揃えにする*/ font-size: 9pt; background-color: #ccffcc; } div#top table { margin: auto; /*テーブルの配置を中央揃えにする*/ } div#footer { clear:both; text-align:center; /*テキストの配置を中央揃えにする*/ } a:link { color: yellow} a:visited { color: yellowgreen}
- ベストアンサー
- その他([技術者向] コンピューター)
- 見出しや左メニューのhtmlを後ろに置く時のスタイルシートの指定方法に
見出しや左メニューのhtmlを後ろに置く時のスタイルシートの指定方法について 見出しや左メニューの部分のhtmlをページ全体の後ろのほうに配置したいと考えています。 添付の画像のソースが以下のとおりです ----------------------------------------------------------------------- <div style="position:relative;margin:auto;width:800px;"> <div style="height:20px;width:100%;background-color:#ff0000;"> </div> <div style="margin:0px 0px 0px 150px;width:650px;background-color:#00ff00;"> ああああああ<br /> ああああああ<br /> ああああああ<br /> ああああああ<br /> </div> <div style="position:absolute;top:20px;left:0px;width:150px;background-color:#0000ff;"> いいいいい<br /> いいいいい<br /> いいいいい<br /> いいいいい<br /> いいいいい<br /> いいいいい<br /> いいいいい<br /> </div> <div style="height:20px;width:100%;background-color:#ffff00;"> </div> </div> ----------------------------------------------------------------------- 一応、左メニューについて実現できていて、見出しも同様にやれるのですが、 この方法では、absoluteで配置しているため、フッターの部分を重ならない ようにするためには、見出しとフッターの間のブロックについて高さを指定する しか方法を思いつきません。 ・absoluteで配置する以外の方法があるでしょうか。 ・absoluteで配置したとしても、高さを指定しない方法があるでしょうか。 よろしくお願いします。
- ベストアンサー
- HTML
- 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を組む際、今までレイアウトはtableタグで組んでいたのですが、CSSで組もうと思っています。 例えば、 <table align="center"> <tr> <td colspan="2" width="500" height="80">aaa</td> <td rowspan="2" width="300" height="200">bbb</td> </tr> <tr> <td colspan="2" width="500" height="20">ccc</td> </tr> <tr> <td width="200" height="100">ddd</td> <td width="300" height="100">eee</td> </tr> </table> をスタイルシートで配置しようと思い、 <div align="center" style="width:800px"> <div style="float:left;width:500px;height:80px;background-color:#ff9999">aaa</div> <div style="float:right;width:300px;height:200px;background-color:#9ff999">bbb</div> <div style="float:left;width:500px;height:20px;background-color:#9999ff">ccc</div> <div style="float:left;width:200px;height:100px;background-color:#99ffff">ddd</div> <div style="float:center;width:300px;height:100px;background-color:#ffff99">eee</div> </div> としたのですが、センタリングされないのと、eeeの箇所がdddの隣に来ないで次の行に移ります。 うまく出来ないので、どなたか教えて下さい。お願いします。
- ベストアンサー
- CSS
- css 画像の一部分をリンクにしたいです
画像の一部分だけをリンクにしたいです。 margin と width と height で指定したエリアをマウスオーバーすると、指定した部分だけ画像が変わってリンクになるという動作をさせたいのですが、うまくいきません。 最悪、画像が変わらなくても指定した部分のリンクができれば良いのですが画像全体がリンクになっているため、全体画像の上でマウスを動かしていると、リンク時のマウスカーソルになったり通常時のマウスカーソルになったりを繰り返しています。 html と css は以下のような記述をしています。 <html> <head> <style type="text/css"> div#menu a:hover { display:block; background-image:url(img/headerimg02.jpg); background-repeat:no-repeat; margin: 50px 468px 250px 50px; width:200px; height:100px; text-align:center; text-indent: -2000px; overflow: hidden; } </style> </head> <body> <div id="menu"> <a href="hoge.html"><img src="img/headerimg01.jpg" width="718" height="400"></a> </div> </body> </html>
- ベストアンサー
- CSS
- 画面の中央に配置しようとすると、レイアウトが崩れてしまいます（泣）
画面の中央に配置しようとすると、レイアウトが崩れてしまいます（泣） ajaxを使用した住所自動入力フォームをあるファイルに作ったのですが、それをコピーしてもう一つのファイルにペーストし、floatでフォームを横並び配置にするところまではうまく出来たのですが、それを画面の中央配置にプロパティでしようとして、ドリームウィーバー上ではちゃんとフォームは横並びに配置されているのですが、アップロードしてブラウザで確認した時になぜか縦配置になってしまっています。どうすればきちんとフォームが横並びになって画面の中央配置にできるでしょうか？ <style type="text/css"> div.exampleB table { width: 280px; margin-right: 10px; float: left; } .exampleB { position: absolute; left: 50%; width: 630px; height: 100%; margin-left: -315px; </style> <div class="exampleB"> <div align="center"> <table width="315" height="449" border="2" align="center" cellspacing="0" bordercolor="#006633"> <tr> <td width="315" height="449"><div align="center"><span class="style13"><span class="style15"><a href="/link/moto2.html" target="_blank"></a><img src="../image/dt_022_03.gif" alt="引越元のイラスト" width="290" height="200" /></span></span></div><p align="center"><span class="style13"><span class="style119">＜引越<strong>元</strong>住所＞</span></span><span class="style119"><br /> 郵便番号：（省略） 都道府県：（省略） 市区町村：（省略） 町域(大字)：（省略） 丁目番地：（省略） 建物名～号室:（省略） </span></p></td> </tr> </table> <table width="316" height="449" border="2" cellspacing="0" bordercolor="#006633"> <tr cellspacing="0"> <td width="301" height="449"><div align="center" class="style30"><img src="../image/dt_023_03.gif" alt="引越先のイラスト" width="290" height="200" /><br /> <p align="left"><span class="style123"><span class="style15"><span class="style118">＜引越<strong>先</strong>住所＞</span></span><span class="style118"><br /> 郵便番号：（省略） 都道府県：（省略） 市区町村：（省略） 町域(大字)：（省略） 丁目番地：（省略） 建物名～号室:（省略） </span></p> </div></td> </tr> </table> </div> </div>
- ベストアンサー
- HTML
- clear: bothの事で質問です。
XHTML+CSSを勉強してる初心者ですが。 この場を借りて質問させてもらいます。 判らない事は (1) <div style="background: #CCCCCC; height: auto; width: 700px;"> <div style="background: #888999; height: 100px;width: 300px;float:left;">画像</div> <div style="background: #999999; height: 300px;width: 400px;float:left;">画像の説明</div> <br style="clear: both;" /> (2) <div style="background: #CCCCCC; height: auto; width: 700px;"> <div style="background: #888999; height: 100px;width: 300px;float:left;">画像</div> <div style="background: #999999; height: 100px;width: 400px;float:left;">画像説明</div> <div style="clear: both;"></div> (1)と(2)では、 (1)は<br style="clear: both;" />と記入してますが (2)は<div style="clear: both;"></div>と記入してます。 この(1)と(2)は同じなのでしょうか？ それと使うとするならどちらのほうが有効的なのでしようか？ 教えていただければ光栄です。
- 締切済み
- CSS
- コンテンツの配置について
Yahoo!のようにコンテンツ全体を中央によせ、さらに、 それぞれのボックスの表示位置を縦横で指定したいのですが 以下のようなソースではうまくいきません。 対処方法をご教示下さい。 よろしくお願いします。 <STYLE TYPE="text/css"> <!-- #main{ position:relative; top:10px; text-align:center; width:100%; } #contentsA{ text-align:center; width:800px; } #contentsB{ position:relative; hight:200px; } --> </STYLE> <TITLE></TITLE> </HEAD> <BODY> <DIV id="main"> <DIV id="contentsA"> <DIV id="contentsB"> <IMG src="image3.gif" border="0" width="50" height="50"> <IMG src="image2.gif" border="0" width="50" height="50"> <IMG src="image1.gif" border="0" width="50" height="50"> </DIV> </DIV> </DIV> </BODY>
- ベストアンサー
- HTML
- onClickで画像を消し、下の部分を選択する方法
javascript超初心者です。 どなたか、解決法を教えて頂けないでしょうか？ ●解決したい事 onClickで画像を消し、position: absolute;で画像の下に配置した<div>コンテンツ</div>の部分を選択できるようにしたいのですが、どうも選択できません。 IEでは選択できるのですが、chrome、firefox、safariでは画像が被っていた部分は選択できず、画像が被っていない部分しか選択できない状態になります。 IEでは出来るので、他のブラウザでも出来るのではないかと思ってしまいます。 何を変えればいいのでしょうか？ どうか宜しくお願いします。 ソース抜粋 <body> <span onClick="this.style.visibility='hidden'"><img src="画像" width="1080" height="800" /></span> <div id="wrapper" style="position:absolute; top:0px" width="1080" height="1500"> コンテンツ </div> </body> 上記のソースのwrapper下側700px部分しか選択できないのです。 どうか宜しくお願いします！
- ベストアンサー
- JavaScript
お礼
できました！ありがとうございます。