- ベストアンサー
CSS ブロックの配置について
ヘッダの部分なんですが、左上にロゴ、その隣に少しスペースを空けて二つブロック要素を配置したいんですが、(テーブルで言うと2行3列と言った感じです)position: absoluteで指定すると絶対値で指定されてるので、ウィンドウ幅を変えたりしても、それに合わせてサイズが変わらないんですが、変わるようにはどう記述したらいいんでしょうか？position: absolute以外で記述すると思ったところに配置されません。どなたかアドバイスいただけませんか？宜しくお願い致します。
- takootie
- お礼率70% (24/34)
- その他([技術者向] コンピューター)
- 回答数3
- ありがとう数1
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
以下のソースでいかがでしょう? <html lang="ja"> <head> <style type="text/css"> <!-- #container { width:99%;←100%だとバグるかもしれないので overflow:hidden; } #container:after { content"."; display:block; clear:both; height:0; line-height:0; visibility:hidden; } #container .logo { float:left; } #container .rightBlock { float:right; } --> </style> </head> <body> <div id="container"> <div class="logo"><p><img src="logo.gif" width="200" height="50" border="0" alt="ロゴ" title=""></p></div>←ロゴの画像 <div class="rightBlock"> <p><img src="gazou.jpg" width="150" height="80" border="0" alt="" title=""></p>←右の画像1 <p><img src="sub.jpg" width="150" height="80" border="0" alt="" title=""></p>←右の画像2 </div> </div> </body> </html>
その他の回答 (2)
- gryfinndors
- ベストアンサー率18% (127/671)
ＷＩＮＤＷＯＳサイズでブロック幅が変わることは無いでしょう。文字サイズを変えて変わることはありますが。 どうしてもやるならｊａｖａｓｃｒｉｐｔ等でブラウザの情報を引っ張ってＣＳＳを排出するしか有りません。 文字で変えるなら単にＦＬＯＡＴ：ＬＥＦＴで出来るのではないかな。
- kuronekoyarou
- ベストアンサー率54% (30/55)
＞隣に少しスペースを空けて二つブロック要素を配置 とありますが、メニューを配置したいっていうことでしょうか？ 具体的なイメージが浮かばないので何ともいえません。 参考にしているサイトなど「こういうのを作りたい」っていう概要を書いてください。
補足
申し訳ないですが、参考サイトがちょっとすぐに見つからないんですが、800px×50pxほどの横幅に左端にボックス1つ(ロゴ)、右端ボックスを縦に2つ(画像とボタン)配置したいとゆうことです。float：leftとfloat：rightでできるんでしょうか？leftはうまく反映されるんですが、rightが上のボックスにしか効かずうまくいきません。 分かりにくくて申し訳ないです。。。
関連するQ&A
- ＣＳＳについて 初心者です。positionについて
勉強中です。 すいません。教えてください。 「親要素を基準に子要素の位置を指定するには、 親要素に position: relative を指定し (absoluteにする理由があるならそちらでも良い)、 子要素に position: absolute を指定すればよいと言うことになる。」 となりますが、この概念がさっぱりわかりません。 確かに、子要素の位置をposition: absoluteで配置しようとした際に、 親要素にposition: relative（しかも、値はなし）で設定しないとうまく行きませんでした。 ネットで調べても全く意味がわかりませんでした。 なぜ子要素の位置をposition: absoluteで配置しようとした際に親要素に、position: relativeをしかも値なしで設定しないと、うまくいかないのか 詳しく教えていただけないでしょうか？m(..)m
- ベストアンサー
- HTML
- css:positionの挙動について
いつもお世話になっております。 positionの挙動で詰まっています。 ・absoluteを指定すると、fixedのように振る舞う ・relativeを指定すると、ウィンドウ幅が伸縮することで位置が可変する それぞれ同じ<header>を親としています。 親にはrelativeを与えてあります。 また、ひとつはpotisionプロパティを削除すると、 他の配置してある要素の位置が変わってしまいます。 親さえ違い、私には関連性の見出せない要素です。 現象の法則性が見出せず、苦戦しております。 何卒ご教示頂けませんでしょうか。 よろしくお願いいたします。
- ベストアンサー
- CSS
- CSSでの表の作成について
CSSでの表の作成方法を教えてください。 table要素使わずCSSのみで表の作成は可能でしょうか？ 作成したい表は 2列10行の表で、列幅は それぞれ違った幅を指定、行の高さも それぞれの行によって 高さを変えたいと思っています。 背景色の指定、ボーダーの指定もしたいです。 table要素使わずCSSのみで表を作成するには、どうしたらいいのか教えてください。 初心者なので、CSSの内容とHTMLの内容（ソース）を書いたものがあると助かります。 どうかよろしくお願いします。
- 締切済み
- その他([技術者向] コンピューター)
- CSSに関する質問です。position absolute Blockのセンタリングについて
position: relative; 指定されたBlockについては、margin:0 auto; 指定によって、IEバグ対策も施した上でセンタリングすることに成功しました。ところが、ある別のIEバグ対策のためにそのブロック指定をabsoluteに変更した所、CSSはそれ以外何も変えないのに、今までセンタリング出来ていたブロックが途端に左寄せになってしまいました。 そこで質問です。そもそもabsolute指定されたブロックは、上記の方法ではセンタリング出来ないのでしょうか？ どうすればabsolute指定されたブロックをCSSによってセンタリング出来るのでしょうか？ どうかお教えください。
- ベストアンサー
- ブラウザ
- 要素の配置方法について・・・
要素を直接配置する方法として、 CSSのpositionで指定する方法がありますよね。 今、XHTML1.0Trasionalでホームページを作っているのですが、 position:relative; top:0px; left:0px; と指定してもうまくいきません。（ピクセルは今だけ0にしました） position:absolute;でもやってみたのですが、 変わりませんでした。 だれか、この解決策を知っている方はおらっしゃるでしょうか？ 知っていたのなら、ぜひお教えください。 ただ単に、私が間違っていたと言う事もありえますので、 うちでは、ちゃんとなったよ！ という人もおられましたら、 是非ご回答お願いします。
- 締切済み
- HTML
- レイヤーを画面の左右中央に重ねて配置したい
質問No.1083158：レイヤーを画面の中央に配置したい を見て、おお、これだ！と思って試してみましたが、レイヤーを重ねることはできませんでした。 "position:absolute;"を指定しないとレイヤーを重ねられない（ですよね？）、でもそうするとセンタリングできない、ということでしょうか？ 現在は、レイヤーの幅を100％にして「中身」をセンタリングしたものを重ねていますが、これだと他の要素（特にリンク）の上に重ねられないのでレイアウトに制約があります。 上下方向の位置とサイズを指定した複数のレイヤーを重ねる方法はないのでしょうか？
- ベストアンサー
- HTML
- positionについて下記の認識で正しいでしょう
positionについて下記の認識で正しいでしょうか？ ・relativeは動かしたい要素自体にpositionプロパティをつける。親要素にpositionプロパティはいらない。 { position: relative; top:100px; left:10px } ・absolute; 絶対。 親要素の背景 { width: 100%; position: relative; background: url(../img01.jpg) no-repeat left top; } 子要素の動かしたい要素 .box.box02 p{ position: absolute; left: 0; top: 0; } ＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿ ・absoluteは、親要素も何も関係なしにブラウザ上の上から何PX左から何PXと指定して、要素を配置でできる。 ただし例外として、 親ボックスにpositionプロパティのstatic以外の値が指定されている場合には、親ボックスの左上が基準位置となります。 親ボックスにpositionプロパティのstatic（初期値）以外の値が指定されていない場合には、ウィンドウ全体の左上が基準位置となります。（個人的に単独で使う事はほぼないです） ・relativeは、親要素から、何PX左から何PXと指定して、要素を配置でできる 補足また、まとめて指定する方法はマージンのようにないのでしょうか？
- ベストアンサー
- CSS
- Tableレイアウトで寸分の狂い無くできていた配置をCSSレイアウトでおこなう術とは？
Tableレイアウトでは寸分の狂い無くできていた配置ですが、 久しぶりにHPを制作しようとしたら今はCSSレイアウトな世界になってきて いるので今回はそれでやろうとして手法を調べていますが、 Tableレイアウトと比べて画像の配置がブラウザによって狂ってどうにもなりません。 IE7ではOKでもFirefoxやIE6では配置がずれるなど。 やりたいのは、ヘッダーエリア(width:750px,height:100pxくらい)の配置なのですが、このヘッダーエリアの中に「お問い合わせ」や「サイトマップ」という画像での名称兼リンクボタンを配置させたいのですが、 ・「お問い合わせ」は左から536px、上から15px ・「サイトマップ」は左から639px、上から15px の位置に寸分の狂い無く配置を希望しています(その上でマウスオーバーで画像入れ替えも行う)。 position:absoluteを使用すると可能ですが、これですと他の全ての箇所もabsoluteにしなくてはならなくなり、非常に制作に手間がかかってしまいます。 abloluteでなくピシッと配置させる方法はないものでしょうか。
- ベストアンサー
- HTML
- 可変幅でabsolute指定で中央配置できません
可変幅でabsoluteを指定すると中央配置できなくなります。 ブラウザの幅に合わせて中身のサイズも合わせて伸縮するサイトを構築したくて色々試しているのですが、どうしてもうまくできません。 どのように指定したらできるのでしょうか？困っています、どなたかお助けください。 例えば画像が固定のサイズであれば width:500px; position:absolute; left:50%; margin-left:-250px; 見たいな形で中央配置できるのですが、可変の場合、、伸縮させたいので、横幅は常に500ｐｘとはなりません。 よろしくお願い致します。
- ベストアンサー
- CSS
- アメブロｃｓｓ 画像を好きなところに配置
アメブロをやっています。 新cssを使用しているんですが、画像を好きなところに配置（添付画像の水色のハートの位置とかに）しようとするため各サイトをまわり、探しています。 画像はリンクなし、固定にしたいです。 新ｃｓｓ用の画像を好きなところに配置するタグを見つけて実行したんですがF５を押しても、何回やっても画像の半分が記事欄の後ろに行きます。 そこから位置をいじっても動きません。 貼り付けているのはこのタグです。 ｃｓｓへは↓ /* ------------------------------------------------------- */ /* 絶対配置起点を設定 画面の大きさを変えて同じ位置に */ /* ------------------------------------------------------- */ .skinFrame2{ width:1000px;/* コンテンツ幅を設定 */ margin:auto;/* 自動中央寄せ */ position:relative;/* 起点指定 */ } #bk001{ position:absolute; top:220px; left:200px; z-index:99;/*重なりの順序*/ } #aifurex1{ position:absolute; top:220px; left:200px; width:130px; height:150px; overflow:auto; background-color:transparent; z-index:100;/*重なりの順序*/ } フリースペースには↓ <img src="画像のＵＲＬ" id="bk001"> <div id="aifurex1"> 文章 </div> 画像URLはアメブロの画像フォルダ→画像URLをコピーからペーストしています。 今までいろんなタグでやってきましたがいい加減できないので詳しく教えていただけると助かります。
- 締切済み
- ブログ
補足
回答ありがとうございます。 例えば、テーブルデザインで％のテーブルで枠を作った時に、ウィンドウの幅によってテーブルが可変すると思うんですが、それはブロックとゆうかテーブルなしではできないんでしょうか？