- ベストアンサー
CSSによる3カラムレイアウトの実装方法
- HTMLの要素を用いてCSSによる3カラムレイアウトを実現する方法に悩んでいます。現在はfloatやpositionを使用しているが、ウィジェットを追加してもうまくいかない状況です。
- HTMLの要素の並びを変えずに3カラムレイアウトを実現したい。現在はfloatやpositionを使用しているが、ウィジェットを追加してもうまくいかない。
- CSSを使用してHTMLの要素を3カラムレイアウトにする方法を教えてください。floatやpositionを使用していますが、ウィジェットを追加してもうまくいかないです。
- HTML
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
＞HTMLを変えれば他にやり様は思いつくのですが、 そのとおり、そもそも文書木がおかしいから、CSSで配置しようにもうまく行かないのです。もちろん、無理やりabsoluteを使って配置はできますが、内容の伸縮や多様なウィンドウサイズに適合できなくなります。 【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから メモ: CSSスタイルシートを意図した通りに機能させるには、正しい文書解析木が必要です。つまり、正当なHTMLを用いるべきです。. ￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［W3C CSS 検証サービス( http://jigsaw.w3.org/css-validator/#validate_by_input )］より もちろん、SEOの上からも好ましくありません。 本来は、 <body> <div id="header"> <h1>タイトル</h1> </div> <div id="content">コンテンツ <h2>見出し</h2> <p>本文</p> <div id="navigation">ナビゲーション</div> <div id="widget">ウィジェット</div> </div>> <div id="footer"> <ul id="siteMap"> <li></li> <li></li> </ul> </div> </div> </body> とマークアップするべきではないですか？ そうすると、ユーザーエージェントに依存しなくて、かつ検索エンジンも理解しやすい(SEO)サイトになると思います。 余談ですが contentsという複数形はないのでは(^^)、content自体、すでに内容物で複数の意味を持っているのではなかったっけ。 content 複数形 - Google 検索 ( http://www.google.co.jp/search?hl=ja&source=hp&q=content+%E8%A4%87%E6%95%B0%E5%BD%A2&lr=&aq=0&oq=content+%E8%A4%87%E6%95%B0 )
お礼
とても丁寧な回答に感謝します。 仰る通りです。 ただ、単純な好奇心として試したい事でもあるので、遊び心半分でまた試行錯誤してみようと思います。 余談のcontentですが、間違えた覚え方をしていたみたいですね。 こちらも為になりました。 ありがとうございました。