具体例ありがとうございます。
文字で書くよりソースで示した方が絶対わかりやすいと思います。
みんな仕様書なんて見ずにソースとコメントしか見ないんですよ。
↓従来の超ダサいと言われるソース
html
1<div id="header">
2 <div id="logo">
3 <h1><a href="index.html"><img src="logo.jpg" alt="○○のお部屋">○○のお部屋</a></h1>
4 <p>なんとかかんとか</p>
5 </div>
6
7 <div id="nav">
8 <form>
9 <input type="text" name="txt"><input type="submit" value="検索">
10 </form>
11 <a href="help.html">ヘルプ</a>
12 </div>
13</div>
css
1#header,#nav{
2 float: left;
3 width: 50%;
4}
いまこんな感じという事ですよね?
デザインとしては変更しないが,これをセマンティックでセンスにあふれてスマートな感じにコーディングしたいということでよろしいでしょうか。
webpageさんの考えるコードは以下でよろしいでしょうか。
html
1<header>
2 <section id="logo">
3 <h1><a href="index.html"><img src="logo.jpg" alt="○○のお部屋">○○のお部屋</a></h1>
4 <p>なんとかかんとか</p>
5 </section>
6
7 <section id="nav">
8 <form>
9 <input type="text" name="txt"><input type="submit" value="検索">
10 </form>
11 <a href="help.html">ヘルプ</a>
12 </section>
13</header>
css
1#header,#nav{
2 float: left;
3 width: 50%;
4}
5@media (min-width: 641px) {/* PCサイズの時 */
6 #nav{
7 display: none;
8 }
9}
私だったらこうするかなーというのが下記です。
html
1 <header>
2 <h1><a href="index.html"><img src="logo.jpg" alt="○○のお部屋">○○のお部屋</a></h1>
3 <p>なんとかかんとか</p>
4 </header>
5
6 <aside>
7 <form>
8 <input type="text" name="txt"><input type="submit" value="検索">
9 </form>
10 <a href="help.html">ヘルプ</a>
11 </aside>
12<nav class="globalNav">....</nav>
css
1header,aside{
2 float: left;
3 width: 50%;
4}
5#globalNav{
6 clear: both;
7}
まずロゴとかページタイトルとかあるやつをheaderにします。
スマホ表示だと消すって言ってるやつは,ページの捕捉情報って意味になるのかなと思ったのでasideでまとめました。
で,あえてそれらをdivなどでまとめず,直下の要素でclear:bothしました。これにより余計な包括要素をなくしました。
htmlとcssは今適当に書いたので,ミスタイプや変なところがあれば脳内で修正していただけると助かります。