cssについて

質問

以下のサイトの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部分が大きくなり失敗。

回答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用表示の左メニューをスマホ用上メニューの
ような折り畳みメニューに変更したいと言うことです。

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

回答No.4

ORUKA1951

せっかく補足を頂いたのですが、それでも分からない
　とりあえず2.については後回しにして・・

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

　あくまで文書構造とデザインを分けて考えてください。--それが分からなくなる理由
「上メニュー/左メニューではない」ということです。そのナビゲーションがなんであるかです。
　例えば、サイト全体のナビゲーション--サイト内ナビゲーション--は通常のHTMLでは文書のヘッダ部やフッタに入るはずです。本文ではない。一方本文内の細目を示す目次のナビゲーションは本文ブロックに書きますね。
★分かりやすいようにHTML5で書くと下記の様になります。
　HTML4では、<div class="header"></div>の様にマークアップすることになっていた。
<header>
　　・・・文書の見出しや要約等・・・
　　<nav>サイトナビゲーション</nav>
</header>
<section>
　　・・・本文記事(章)・・・
　　<section>
　　　・・・本文記事(項)・・・
　　</section>
　　<section>
　　　・・・本文記事(項)・・・
　　</section>
　　<nav id="contentTable">目次</nav>
</section>
<footer>
　・・・文書のフッタ・・・
　著作権とか更新日とか
　かんたんなナビゲーションは、<nav></nav>でマークアップしなくて良い
</footer>

　そのうえで、
幅の狭いスマホ---screenメディアには■スマホ用表示
　サイトナビゲーションは、普段は畳んでおいて、必要なとき広げて表示する。
　目次は：非表示にする。
幅の広いディスプレイには■PC用表示
　サイトナビゲーションは横並びに広げておく
　目次：本文右横に縦並び

　と言う説明でしたら、誰にでもされたいことが分かりますよね。もちろん上/左じゃないですから、
★サイトナビゲーションはページ最下段に固定して貼り付けて・・
★目次は右において必要なときにプルダウン
　とか、いつでも変更できる。
先に紹介した
ナビゲーションリストを様々にデザインしてみよう。( http://www.ichiya.com/WebService/Howto/sample/HTML/nav/navigation1.html )
　を再度確認して、されたい事を補足してください。

お礼

ご連絡が遅くなり大変申し分かりません。
お返事ありがとうございます。

実現したかったことが分かりづらかったので、画像を用意してみました。
http://dandy.nusutto.jp/sample_menu.jpg

今、少々時間が取りづらい状況のため連絡が遅れてしまう可能性がありますがご了承ください。

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

補足

＞ORUKA1951さん、Ogre7077さん
なかなか時間が取れないので一度、締め切らせて頂きます。
時間が取れましたら別途質問を設けさせて頂きたいと思います。
ありがとうございました。

回答No.3

Ogre7077

No.2 の補足に対して

この手の全体的に良くデザインされたテンプレートの場合、
下手な改造を加えるのは良くないので、
素直に提供元に発注するのをオススメします。

それでもやるならば

-- html
<header><nav id="g_navi">
_ <a class="menu">メニュー一覧<span></span></a>
_ <ul class="gl_menu"> ...メニュー... </ul>
</nav></header>
...
<div id="side">
_ <div class="side_box"> ... </div>
_ <h3 class="menu">Site Menu<span></span></h3>
_ <div class="side_box gl_menu"> ...メニュー... </div>
_ <div class="side_box"> ... </div>
</div>

-- css
@media screen and (min-width: 760px){
#side h3.menu span { ... }
#side h3.menu span:after { content: "表示する ▼"; }
#side h3.menuOpen span:after { content: "閉じる ×"; }
}

-- js
$(function(){
$(".gl_menu").hide();
$(".menu").click(function(){
$(this).toggleClass("menuOpen").next('.gl_menu').slideToggle();
});
});

お礼

ご連絡が遅くなり大変申し分かりません。
お返事ありがとうございます。

実現したかったことが分かりづらかったので、画像を用意してみました。
http://dandy.nusutto.jp/sample_menu.jpg

今、少々時間が取りづらい状況のため連絡が遅れてしまう可能性がありますがご了承ください。

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

補足

※済みません。以下のお礼を書く相手を間違えました。

ご連絡が遅くなり大変申し分けありません。
お返事ありがとうございます。

ご教授頂いたもので概ね実現できたのですが、あまり時間が取れておらず詰めきれていませんので、もう少し自分で考えてみます。

今、少々時間が取りづらい状況のため連絡が遅れてしまう可能性がありますがご了承ください。

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

回答No.1

ORUKA1951

なぜリンク先をちゃんと書かないのですか？？(とても不便です。)
＞試したこと：g_navi、menu、gl_menuの名称を変えたコピーを
　根本的な原因は明白で、基本ができていない状態で、デザイン目的でHTMLを書いてしまうからです。15年前の1999年のHTML4.01の勧告以来、強く強く言われている事は「構造とプレゼンテーションの分離( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.4.1 )」でしたね。
　HTMLには文書構造しか書かないのです。プレゼンテーションは全面的にスタイルシートに任せます。
＞1.ディスプレイがスマホサイズ表示（760未満）での上メニュー（メニュー一覧　表示する▼）を、
　PCサイズ（950以上）のときのサイドメニュー（Site Menu）と同列に入れたい。
　メニューの位置を変えたいだけですよね。

[例]
<body>
　<div class="header">
　　・・・
　　<div class="nav">
　　　<ol>
　　　　<li><a href="/">Top</a></li>
　　　　<li><a href="/Books">Books</a>
　　　　　<ol>
　　　　　　<li><a href="/Books/book1">book1</a></li>
　　　　　　<li><a href="/Books/book1">book1</a></li>
　　　　　</ol>
　　　　</li>
　　・・・【中略】・・・
というようにHTMLが文書構造だけでマークアップされていると思います。
なお、HTML5だと
<body>
　<header>
　　・・・
　　<nav>
　　　<ol>
　　　　<li><a href="/">Top</a></li>
　　　　<li><a href="/Books">Books</a>
　　　　　<ol>
　　　　　　<li><a href="/Books/book1">book1</a></li>
　　　　　　<li><a href="/Books/book1">book1</a></li>
　　　　　</ol>
　　　　</li>
　　・・・【中略】・・・

　これを
div.header{position:relatve;}
div.header div.nav ol,div.header div.nav ol li{list-style:none;margin:0;padding:0;text-align:center;}
div.header div.nav ol li{display:inline-block;width:20%;}
でヘッダーブロックの下に横に並びますし
div.header div.nav{position:absolute;top:100%;width:20%;left:0;}
でヘッダーの下の左にぶら下がるはずです。

　デザインのためではなく、HTMLでは文書構造だけを徹底的にマークアップすること、そして差の文書構造を元にセレクタを書いて、プレゼンテーションを指定するという基本をまず身につけましょう。そうすると自由自在にデザインできるようになります。

サンプル
ナビゲーションリストを様々にデザインしてみよう。( http://www.ichiya.com/WebService/Howto/sample/HTML/nav/navigation1.html )
　このサイトで、ブラウザの[表示]⇒[スタイルシート]でスタイルシートを色々選んだり、ウインドウ幅を変えたり、印刷プレビューで印刷を確認してみると良いでしょう。HTMLには文書構造しか書いてありませんから、デザインの自由度が高くなります。視覚障害者がスクリーンリーダーを利用して読むことも点字プリンターで点字にしても・・・もちろん検索エンジンにも内容が正確に伝わります。

お礼

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

補足

とても詳細に書いてくださってありがとうございます。内容、確認しました。
私の説明が悪く実現したいことに一部誤解を招いてしまったようです。

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

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

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