CSSについて勉強中のポイントと実現したいこと

質問

• CSSについて勉強中のポイントとして、以下のサイトのCSSをベースに学んでいます。
• 実現したいことの1つは、スマホサイズ表示での上メニューをPCサイズ時のサイドメニューと同列に入れたいことです。
• また、PCサイズ時に「コンセプト」を「採用情報」の下に配置したいと思っています。

回答No.2

Ogre7077 · ベストアンサー

1. 上メニュー

よくわかりませんが 950px の場合なら非表示にしている
サイドメニューを表示すればよいのではないでしょうか?
内容は同じでしょうから

これを削除
@media screen and (max-width:950px){
#side { display: none; }
}

ただし
* 760px 未満だとページ最下部に表示される
* 760px 未満での #side li にスタイル定義が必要

2. コンセプト

<!-- 段組を解除する場合 -->
<style>
div#content h3 { clear:both; }
</style>
<div id=content>
_ <h2> ... へようこそ</h2>
_ <div class=02_left> <h3>オススメ</h3> ... <h3>採用情報</h3> ... </div>
_ <div class=02_right> <h3>新着情報</h3> ... </div>
_ <h3>コンセプト</h3>
_ <div class=box_out><div class=box_in>...</div></div>
_ <div class=to_top> ... </div>
</div>

<!-- 段組内に入れる場合 -->
<div id=content>
_ <h2> ... へようこそ</h2>
_ <div class=02_left>
_ _ <h3>オススメ</h3> ...
_ _ <h3>採用情報</h3> ...
_ _ <h3>コンセプト</h3> <div class=box_in>...</div>
_ </div>
_ <div class=02_right> <h3>新着情報</h3> ... </div>
_ <div class=to_top> ... </div>
</div>

お礼

早速のご回答、ありがとうございます。
明日の朝までに熟読し返信させていただきます。

補足

とても詳細に書いてくださってありがとうございます。内容、確認しました。
おかげさまで2の方が解決しました。

ORUKA1951さんの方でも記載したのですが、
私の説明が悪く実現したいことに一部誤解を招いてしまったようです。
以下、同文になってしまいますが記載します。

ベースにしているcssでのメニュー表示は以下のようになっています。
■スマホ用表示
　上メニュー：折り畳みメニュー
　左メニュー：非表示
■PC用表示
　上メニュー：横並び表示
　左メニュー：縦並び表示

今回実現したいことは、
PC用表示の左メニューをスマホ用上メニューの
ような折り畳みメニューに変更したいと言うことです。

よろしくお願い致します。