質問: 以下のサイトのCSSをベースにCSSについて勉強しているのですが、以下の点を実現する方法を教えてください。 ■cssベース ttp://www.s-hoshino.com/web2/responsive_006/index.html ■参考にさせて頂いているサイト ttp://www.htmq.com/csskihon/index.shtml ■実現したいこと。 1.ディスプレイがスマホサイズ表示(760未満)での上メニュー(メニュー一覧 表示する▼)を、 PCサイズ(950以上)のときのサイドメニュー(Site Menu)と同列に入れたい。 試したこと:g_navi、menu、gl_menuの名称を変えたコピーを @media screen and (min-width: 950px){配下に追記したが、フォームが崩れメニューの開閉が作動しなかった。 2.ディスプレイPCサイズ時の「コンセプト」を「採用情報」の下に入れたい。 試したこと:htmlのコンセプトを採用情報下にコピーしたが、h3部分が大きくなり失敗。
回答: せっかく補足を頂いたのですが、それでも分からない とりあえず2.については後回しにして・・ >ベースにしているcssでのメニュー表示は以下のようになっています。 >■スマホ用表示 > 上メニュー:折り畳みメニュー > 左メニュー:非表示 >■PC用表示 > 上メニュー:横並び表示 > 左メニュー:縦並び表示 あくまで文書構造とデザインを分けて考えてください。--それが分からなくなる理由 「上メニュー/左メニューではない」ということです。そのナビゲーションがなんであるかです。 例えば、サイト全体のナビゲーション--サイト内ナビゲーション--は通常のHTMLでは文書のヘッダ部やフッタに入るはずです。本文ではない。一方本文内の細目を示す目次のナビゲーションは本文ブロックに書きますね。 ★分かりやすいようにHTML5で書くと下記の様になります。 HTML4では、の様にマークアップすることになっていた。 ・・・文書の見出しや要約等・・・ サイトナビゲーション ・・・本文記事(章)・・・ ・・・本文記事(項)・・・ ・・・本文記事(項)・・・ 目次 ・・・文書のフッタ・・・ 著作権とか更新日とか かんたんなナビゲーションは、でマークアップしなくて良い そのうえで、 幅の狭いスマホ---screenメディアには■スマホ用表示 サイトナビゲーションは、普段は畳んでおいて、必要なとき広げて表示する。 目次は:非表示にする。 幅の広いディスプレイには■PC用表示 サイトナビゲーションは横並びに広げておく 目次:本文右横に縦並び と言う説明でしたら、誰にでもされたいことが分かりますよね。もちろん上/左じゃないですから、 ★サイトナビゲーションはページ最下段に固定して貼り付けて・・ ★目次は右において必要なときにプルダウン とか、いつでも変更できる。 先に紹介した ナビゲーションリストを様々にデザインしてみよう。( ) を再度確認して、されたい事を補足してください。