※ ChatGPTを利用し、要約された質問です（原文：ＣＳＳレイアウトの２カラム左メニューでコンテンツを先にＨＴＭＬに記述できる方法をおしえてください。）
CSSレイアウトで2カラム左メニューを先に記述する方法について
このQ&Aのポイント
CSSレイアウトで2カラム左メニューを実現するための方法を教えてください。現在のコーディングでは、HTMLの記述順序によってメニューが右に配置されてしまっています。
HTMLのコードを変更せずに、CSSでメニューを左に配置する方法を教えてください。試行錯誤してもう一週間が経ちますが、解決できない状況です。
趣味で作成しているウェブサイトで、2カラム左メニューのレイアウトを実現したいのですが、HTMLの記述順序によってメニューが右に配置されてしまいます。どのように修正すればよいでしょうか？
ＣＳＳレイアウトの２カラム左メニューでコンテンツを先にＨＴＭＬに記述できる方法をおしえてください。
趣味でＨＰを作成しております。
一般的なＣＳＳレイアウト２カラム左メニューにしたいのですが、
ＨＴＭＬ部分で左メニューよりコンテンツを先に記述し、
ＣＳＳで左メニューで右にコンテンツがくるようにしたいです。
現在のＣＳＳは
* {
margin:0;
padding:0;
}
.wrapper {
width: 750px;
margin: 0 auto;
}
.header {
width: 750px;
height: 100%;
}
.main {
width: 750px;
}
.menu {
float: left;
width: 200px;
}
.contents {
float: left;
width: 550px;
}
.footer {
clear: both;
width: 750px;
height: 100%;
}
.menu ul {
list-style: none;
}
このような記述です。
つづきましてＨＴＭＬ部分は
<body>
<div class="wrapper">
<div class="header">
ヘッダー部分
</div>
<div class="main">
<div class="contents">
コンテンツ部分
</div>
<div class="menu">
メニュー部分
</div>
</div>
<div class="footer">
フッター部分
</div>
</div>
</body>
このような感じです。
しかしこれだとＨＴＭＬ部分はコンテンツが先にきておりますが、
メニューが右になってしまいます。
これをＨＴＭＬ部分を変えずにＣＳＳでメニューを左に配置する方法はありますでしょうか？
１週間くらい試行錯誤したのですが、できませんでした。
お詳しい方教えてください。
お礼
やってみたらできました！ 今までfloatの意味がわからなかったのですが、 これって寄せて回り込ませるって意味だったんですね。 ありがとうございました。