- ベストアンサー
divタグで位置を指定したい
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
基本的なこと 『DIV要素(とSPAN要素)は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )』ためにあるのです。 よって 「divによって新着情報であるとマークアップされている要素をウィンドウの左下に常に表示したい」 と考えましょう。 新着情報は通常footer内に存在することが多いでしょう。とすればマークアップはHTML5的に記述すると <body> <header> </header> <section> </section> <footer> <aside> <h3>新着情報</h3> <ol> <li></li> <li></li> </ol> </aside> </footer> </body> とかになっていると思います。HTM4.01,XHTML1.0,XHTMLでしたら、それぞれ<div class="header">のようになるでしょう。 [HTML4.01]でしたら、 <body> <div class="header"> </div> <div class="section"> </div> <div class="footer"> <div class="aside" id="latestInformation"> <h3>新着情報</h3> <ol> <li></li> <li></li> </ol> </div> </div> </body> として、スタイルシートは #lastInformation{ width:360px; osition:fixed; bottom:0; } #lastInformation h3{ font-size:1.1em; margin:0;line-height:1.4em; } とかになります。 ★ただし、この場合div.footerのpositionがstaticであることが必要です。
関連するQ&A
- 横長のコンテンツを含む場合のdivタグの指定方法
教えてください。横スクロールが発生するぐらい横に長い表組みを含むページがあるのですが、 そのテーブルを包むタグがdivの場合とtableの場合で、 見え方が異なるため困っています。 サンプル01（divタグで囲むと、横スクロール時に背景色が表示されない） http://www.oreryu.sakura.ne.jp/test/test01.html サンプル02（tableタグで囲むと、横スクロール時も背景が表示される） http://www.oreryu.sakura.ne.jp/test/test02.html やりたいことは ・divタグで囲んだ場合でも、tableタグ（サンプル02)のように、 横スクロール時に背景が見えるように設定できないか。 ということです。 divのwidth 100%はウィンドウサイズに合わせるため、挙動として正しいのは理解していますが、 このような場合はtableタグを使うしか方法はないのでしょうか。 現在作成中のページで、ヘッダーとフッターが消えてしまうため、 修正を求められており困っています。 そもそも横スクロールが発生しないようにすべきという回答は不要です。 ご存知の方がいましたら教えていただけますか。よろしくお願いいたします。
- ベストアンサー
- HTML
- Web勉強中の初心者です。pタグとdivタグの区別
こんにちは。 web勉強を初めて３ヶ月の初心者です。 よく、コーディングしていて、imgタグを入れる際に、pタグを使うべきかdivタグを使うべきか迷ってしまいます。 最初は、わけもわからずdivで括ればいいのだと思っていましたが、そうでもないと気づき始めて、改めて本やネットで調べたらpタグは「段落」、divタグは「まとまり」となっていました。自分としては、ある程度のグループとして入れる場合はdivで囲んで、ある程度の量がある文章ではpタグという認識です。 ただ、そうすると画像を１枚入れたりとか、少しの文章と背景だけを入れたいときは、divではないだろうから、pタグなのかな？とか、それともタグを入れずに、前後のdiv間に、文章やimgだけで入れるべきなのかな？と考えていくと正直混乱してしまいます。 もしくは、そういう場合は前後のdivも含めた自分のグループの分け方自体が、おかしいのかもしれません。 わかりにくい文章ですいません。 いいアドバイスありましたら、よろしくお願いします。
- ベストアンサー
- インターネットビジネス
- divタグの名前の付け方
基金訓練でWeb制作をしていて、今、ドリームウィーバー(以下、Dw)で自分で作ったWebページのレイアウトを組んでいます。 やっていて疑問に思ったのですが、container、menu、containts、footer・・・有名なものは全て使ってしまったのですが、この他にdivタグをつけたい文章のかたまりや画像などが10個以上(フロートをかけたいので)あります。どのような名称をつければ良いのでしょうか？いくつか省略化(Dwのdivタグ挿入のところ)したものをそのまま名称にすれば良いのでしょうか・・・
- ベストアンサー
- CSS
- 画像はDIVタグとPタグの両方で囲むの？
クラブのホームページを作っているんですが 分からない事がありますので質問させていただきます。 勉強している本で画像もPタグで囲むのが正しいと載ってましたので ------------------------------------------------------- <div><p><img src="○○" alt="なし"></p></div> ------------------------------------------------------- と記述していたんですが、 色々勉強していくとPタグではなく、 ブロックレベル要素で囲むのが正しいとの事ですので <div>も<p>もブロックレベル要素なので ------------------------------------------------------- <div><img src="○○" alt="なし"></div> ------------------------------------------------------- とか ------------------------------------------------------- <p><img src="○○" alt="なし"></p> ------------------------------------------------------- みたいに無理に<div>と<p>の2つではなく <div>だけ、または<p>だけで、囲むのも問題はないのでしょうか？ ※スタイルシートでレイアウトしています。 ※画像はスペースを空ける為だけですので<div>～</div>に文章はありません。 同じくaltの指定もしていません。 ※画像でスペースを空けるは、あまり良くない事は分かっていての質問です。 別の質問ですけど、あるホームページでH2（見出しタグ？）で ------------------------------------------------------- <div><h2>タイトル</h2></div> <div><p>文章</p></div> ------------------------------------------------------- が正しいと載っていたんですが ------------------------------------------------------- <div> <h2>タイトル</h2> <p>文章</p> </div> ------------------------------------------------------- では間違っているんでしょうか？ すいません、もう1つ質問です。 http://openlab.ring.gr.jp/k16/htmllint/htmllint.html でチェックしてみると98点でした。 私のパソコンや、友達のパソコンでは、ちゃんと表示されてるんですが 100点じゃないと、表示されないパソコンもあるんでしょうか？ 学校が短大で男子がいないので HTMLやCSSが苦手な子ばかりです。 私と副部長で頑張ってほぼ完成しましたが、 はじめてホームページを作った初心者で 細かい事を教えてもらえる人がいなくて困ってます。 初心者の質問で申し訳ありませんが よろしくお願いします。
- 締切済み
- HTML
- ホームページ製作において、テーブルタグとdivタグのどっちを使うか選択
ホームページ製作において、テーブルタグとdivタグのどっちを使うか選択についてです。 テーブルタグはレイアウトには使ってはいけない（推奨しない）というのが 書かれていますが、例えば、以下の画像のように複数の画像を整列させて 配置する（商品画像一覧や写真一覧など）のような場合、 テーブルタグで画像とテキストをぶち込むのは駄目なんでしょうか？ まさか、画像１つに対してdiv１個、テキスト１個に対してdiv１個みたいに 対応させ、段組にしていくほうがSEO対策とかプロっぽいんですかね？ 基本的なことですいません。
- ベストアンサー
- ホームページ作成ソフト
- DIVタグでの表のセンタリング
ウインドウズXPプロ、ホームページビルダーV6.5でページを作成しています。エクスプローラーでの表示は全く問題ないのですが、ネットスケープ7.1やオペラ7.54で表示すると、DIVタグでセンタリングした表やHタグの背景がセンタリングされません。左寄りに表示されます。テキストや画像はセンタリングされています。 <DIV align="center"> や <DIV style="text-align:center"> ではネットスケープやオペラで表やHタグの背景をセンタリングすることは出来ないのでしょうか。
- 締切済み
- ホームページ作成ソフト
- <H>タグの見出しと<P>タグの本文の間隔について
初めてのホームページ作成に挑戦してます。 スタイルシートでデザインを調整しているのですが、 <H>タグの見出しと<P>タグの本文の間隔をＣＳＳで二つの要素のマージンを0、パディング0にしても文字一つ分の間隔が空きます。ある一定の間隔以上縮めることができません。 また<H>タグと<TABLE>タグの間隔も<P>タグ以上に大きく間隔が開いてしまいそれ以上縮めることができなくて困ってます。 こういうものなんでしょうか？ <DIV>タグなら間隔を好きなように調節でます。全て<DIV>タグで見出しも本文も書きたいくらいです。表は無理ですが・・・。
- ベストアンサー
- HTML
- floatさせたdivタグを折り返させたくない
Javascriptで開いた子ウィンドウ内のページについて レイアウトで困っております。 以下のようなブロック要素の配置について <div> <div style="float; left"> コンテンツA </div> <div style="float; left"> <div> コンテンツB </div> <div> コンテンツC </div> </div> <div style="clear: both"> </div> 以上のような配置になっており、 コンテンツ３の中身をJavascriptで書き換えています。 その際、コンテンツCの横幅が変動し右に大きく広がる場合があります。 それにより、ウィンドウサイズによってはコンテンツBCがコンテンツAに回りこんでしまいます。 何故こうなるかは理解出来るのですが、対策が思い浮かびません。 ●思いついたが避けたい対応策 ・親のdivタグに想定出来る最大値のwidthを設定する ・tableタグによるレイアウト 良い対応策はございませんでしょうか？ よろしくお願いします。
- 締切済み
- HTML
- どこをテーブルで作るべきか、divタグで作るべきかの境目というか、考え
どこをテーブルで作るべきか、divタグで作るべきかの境目というか、考え方が 微妙で困っています。 サイトレイアウト大まかな段組は<div>でできるだけ行うように、みたいにCSSデザインの勉強をしていると書いてあり、その意味は分かりますが、<div>タグで概観をレイアウトしても、結局は、divで定義したコンテンツBOXの中身だったりメニューの中身だったりは テーブルで配置したほうが更新作業的にやりやすいし、テーブルほうがよいのでは？ みたいに、なってしまいます。 左に画像、右にコメント（文字列）などの関係のものが、以下に複数続いたりする場合、 どう考えてもテーブルのほうがよくない？って思うんですよね。 その場合でも無理やりdivタグでテーブル構造を作るもんなんですかね？ divタグだとコード量が少なくなるからSEO対策的に良いっていうのは理解できますが、 divタグはここまで作る、テーブルタグの使い分けが微妙です。 このときはテーブルにしないといけない。とかないんでしょうから ある意味センスなんでしょうが。。。。 製作の効率と、コンテンツの管理の仕方を考えると divタグとテーブルの使い方の境目が分からなくなってしまいます。 そのへんの考え方ノウハウを教えてください。
- ベストアンサー
- ホームページ作成ソフト
- DIVタグでの擬似インラインフレーム
<DIV>タグで擬似インラインフレームを実現させようと思っています。 <DIV>タグ内に<table>タグがあって、<td>タグ内に<A>タグテキストリンクがある場合に、そのリンクを右クリックしてプロパティを表示させると、 <DIV>タグの位置がずれてしまいます。 ・動作テスト OS：WindowsXP SP１ ブラウザ：IE6 ・テキストリンク<a>タグを右クリックしてプロパティを表示させたときのみ発生する。 ・NN7.1では発生しません。 原因がまったくわかりません。 簡単な例↓ <DIV style="width:640px;height:350px;overflow:scroll;"> <table width=620px><tr><td><A href=http://www.yahoo.co.jp>YAHOO</A></td></tr></table> </DIV> 以上のような感じです。 しかし、実際に操作していただくと、何が問題なのかがわかると思いますので、以下のページを参照してください。 http://members3.jcom.home.ne.jp/takokko/divframetest.html 大変困っております。なにとぞ、宜しくお願いいたします。
- ベストアンサー
- HTML
