- ベストアンサー
擬似フレームを中央に表示したい
- HTMLの擬似フレームを中央に表示する方法について質問しています。
- 現在、擬似フレームを使ったHPのTOP画面を作成していますが、全体が左に寄ってしまっています。そこで、どのようにすれば擬似フレームを中央に表示させることができるのか質問しています。
- HTMLのスタイルシートを用いて、擬似フレームを中央に表示する方法を教えていただきたいです。
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
今までのことはすっぱり忘れて、本当に基礎からやり直してください。きついようですが、それが一番早くて上達への近道です。 1) HTMLは文書をそれを構成する要素に分解して、それがどのような要素であるかをタグを使ってマークアップするものです。!!!文書の構造であってデザインではありません。 たとえば、見出しはそのレベルによって<h1>～<h6>、段落は<p></p>で、リストは<ul>や<lol>と言う風に・・ これらで足りないときは、<div>(汎用ブロック要素)や<span>(汎用行内要素)にclassやidをつけてマークアップします。たとえば文書のヘッダでしたら<div class="header">、本文なら<div class="section">というふうに、 【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。 ￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［The global structure of an HTML document (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )］より <div id="top"><-- idはリンクのターゲットに使うことに限定するほうが良い --> <div id="tops"><!-- idなんて不要 --> <br style="clear:both" /><!-- brは通常は使わない使うべきではない --> <div id="left"><!-- leftなんて文書構造上意味のない名前はつけない --> <div id="menu1"> ・・・【中略】・・・ <div id="menu6"><!-- いちいちリンク先でもないのにidはつけない、またナビゲーションならclass名はnav --> <div id="middle">更新履歴など<!-- ならfooterでしょ --> <div id="right"><!-- これは更新履歴などフッタより前に登場すべき内容では?? <div id="under"><!-- こんなidはつけるな --> ★XHTMLではなく、HTML4.01のstrictをまなぴましょう。世の中XHTMLだといっていたのは遠い昔の話です。HTML5の登場で重要なのはHTML4.01strictです。 ★次の回答で、ウエブ標準の具体的な実例を挙げておきます。そのソースを見ればこれらの説明の意味がよくわかるでしょう。 なお、本気で最短で最善の方法をお探しなら ★はじめてのWebドキュメントづくり ( http://www.asahi-net.or.jp/%7Esd5a-ucd/www/ ) を一通り学んだ後 ★HTML 4.01 Specification (ja) ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/cover.html#toc )をすべて目を通すこと。覚えなくて良いです。とにかく通して読んでおくこと。そこにも書かれていますが、まずstrictだけを学ぶこと。決してtransitinalには目もくれないこと。(あなたはXHTML1.0transitinalですが、それはHTML4.01transitinalと実質同じもので、過去の遺物です) ★とても参考になるのは「HTML5 における HTML4 からの変更点 ( http://standards.mitsue.co.jp/resources/w3c/TR/html5-diff/ )」の新しい要素とその説明です。
その他の回答 (2)
- kuzumiHK
- ベストアンサー率72% (132/183)
具体的には下記で対応できると思います。 (1)cssを修正 body{ margin:0; padding:0; width:100%; } #hoge{ width:750px; margin:0 auto; } (2)body直下をdivで囲う <body> <div id="hoge"> ここに全コンテンツを入れる </div> </body>
お礼
大変遅れてしまいましたが、ご回答本当にどうもありがとうございました。 一度kuzumiHK様の教えて下さったとおりにやってみて、その部分は正されたのですが、他もあまりにも酷く、やっぱり一からやり直すことにしました。 しかし、今回教えて頂いたことをきちんと覚えて次にいかそうと思っております。
- dscripty
- ベストアンサー率51% (166/325)
う～ん。 突っ込みどころ在りすぎて、大変だから、一つだけね。 block 要素を中央に表示させたいなら、 block 要素 { margin-left:auto; margin-right:auto; } これは、回答じゃないけど…… 「疑似フレーム」じゃつたわらないよ？ CSS レイアウトとかのほうが一般的じゃないかなぁ……
お礼
大変遅れてしまって申し訳ございません。 ご回答どうもありがとうございました。 擬似フレームと勝手に言っておりましたが、確かにこれでは伝わりにくかったですね。 ご指摘どうもありがとうございます。 今回頂いたご回答を参考にして、これからに役立てたいと思っております。
お礼
ご丁寧に回答してくださってどうもありがとうございます。 ORUKA1951さまに指摘して頂いたように、全て1からやり直しました。 お陰さまでなんとかHPらしいものを作ることができました。 大変遅れてしまいましたが、どうもありがとうございました。 全ての回答をベストアンサーにしたいのですが、一つしか出来ない様なのでたくさん記述してくださったORUKA1951さんをベストアンサーにさせてもらいたいと思います。