aside/mainの組み方について

asideとmainが並ぶレイアウト時にどのような指定が理想的でしょうか（レスポンシブ想定）。
現状flexを使用して並べていますが、その場合asideとmainを囲むdivタグが増えてしまうためタグの並びが綺麗でなくなってしまいます。
よろしくお願いいたします。

HTML
1<header>ヘッダー</header>
2<div class="wrap">
3  <aside>アサイド</aside>
4  <main>メイン</main>
5</div>
6<footer>フッター</footer>

CSS
1header,
2footer {
3  width: 100%;
4}
5.wrap {
6  display: -webkit-flex; display: flex;
7  -webkit-flex-wrap: nowrap; flex-wrap: nowrap;
8}
9aside {
10  -webkit-flex: 0 0 200px; flex: 0 0 200px;
11}
12main {
13  -webkit-flex: 1 1 auto; flex: 1 1 auto;
14}

行動規範の内容に同意します

回答3件

ベストアンサー

とりあえず、aside要素とmain要素を囲むdiv要素を使わずに質問文のコードの実行結果を再現できないか考えてみましょう。

1. CSS Grid Layout

CSSグリッドレイアウトとは、要素の配置を行と列の両方でコントロール出来る機能です。これを使うことで、ページ全体のレイアウトが簡単でわかりやすく記述出来るようになります。実際に質問文のコードをCSS Grid Layoutで書き換えると、以下のようになります。

HTML
1<!DOCTYPE html>  
2<html lang="ja">  
3<head>  
4    <meta charset="UTF-8">  
5    <title>タイトル</title>  
6    <style>  
7        body {  
8            display: grid;  
9            width: 100vw;  
10            height: 100vh;  
11            margin: 0;  
12            padding: 0;  
13            grid-template-rows: 200px 1fr 200px;  
14            grid-template-columns: 300px 1fr;  
15            grid-template-areas: 'header header header' 'aside  main   main' 'footer footer footer';  
16        }  
17  
18        header {  
19            background: #faa;  
20            grid-area: header;  
21        }  
22  
23        aside {  
24            background: #afa;  
25            grid-area: aside;  
26        }  
27  
28        main {  
29            background: #aaf;  
30            grid-area: main;  
31        }  
32  
33        footer {  
34            background: #ffa;  
35            grid-area: footer;  
36        }  
37    </style>  
38</head>  
39<body>  
40<header>ヘッダー</header>  
41<aside>アサイド</aside>  
42<main>メイン</main>  
43<footer>フッター</footer>  
44</body>  
45</html>

2. flexbox

的外れかもしれませんが、今回の場合は、以下のようにすることで質問者さんが実現したいことを行えると思います。

HTML
1<!DOCTYPE html>  
2<html lang="ja">  
3<head>  
4    <meta charset="UTF-8">  
5    <title>タイトル</title>  
6    <style>  
7        body {  
8            display: flex;  
9            margin: 0;  
10            padding: 0;  
11            flex-wrap: wrap;  
12        }  
13  
14        header,  
15        footer {  
16            width: 100%;  
17        }  
18  
19        header {  
20            background: #faa;  
21        }  
22  
23        aside {  
24            background: #afa;  
25            flex: 0 0 200px;  
26        }  
27  
28        main {  
29            background: #aaf;  
30            flex: 1;  
31        }  
32  
33        footer {  
34            background: #ffa;  
35        }  
36    </style>  
37</head>  
38<body>  
39<header>ヘッダー</header>  
40<aside>アサイド</aside>  
41<main>メイン</main>  
42<footer>フッター</footer>  
43</body>  
44</html>

とりあえず、この回答ではdiv要素で囲まずにaside要素とmain要素を並べる方法を書きましたが、「HTMLファイル中で使われるタグが増えてしまうこと」が必ずしも「コードが綺麗ではなくなること」に繋がるとは限らないことに注意してください。HTMLの構造を変更したくないがために黒魔術のようなCSSを駆使していると、コードを修正するときに何がなんだかわからなくなり、ダークサイドに堕ちてしまいかねません。また、HTML5で数多くのセマンティック要素が多く追加されたからといって、非セマンティック要素はもう使わなくて良いということはありません。セマンティック要素の種類は豊富ですが、意味的に適切な要素が存在しない場合もあり、そのようなときに非セマンティック要素は活躍します。今回の質問文のコードのdiv要素は、スタイリングのための要素であり、これに該当する意味を持つセマンティック要素は存在しないので、div要素を適切に使用していることになります。

投稿2018/03/11 10:43

s8_chu

総合スコア14731

hiroakitajima

2018/03/13 06:38

ご丁寧にご回答いただきありがとうございます。私の質問の仕方がよくなかったのかもしれません。端的にいうと現状よりスリムな書き方を知りたいということです。 divが不要だとも思いませんが、より少ないコードで組める方法を知識として保有するに越した事はないと思っております。ご回答いただいたGridLayoutが求めていた書き方です！今後このような組み方を試してみます。ありがとうございました。

行動規範の内容に同意します

divタグが増えてしまうため、タグの並びが綺麗でなくなってしまいます

これは具体的にどういうことでしょうか？
それによって何か2018年現在、困りますか？

エンドユーザーは困る？ -> No
検索エンジンは困る？ -> 昔はさておき、今はNo

となると、もはや美学の領域な気がします。

The div element has no special meaning at all. It represents its children. It can be used with the class, lang, and title attributes to mark up semantics common to a group of consecutive elements. https://www.w3.org/TR/2011/WD-html5-author-20110809/the-div-element.html

w3cのdivの説明を読むと、divタグには特別な意味は全くないとされているので、特にdivタグが他の意味ある要素をまとめる為に増える分には良いのではないでしょうか？

投稿2018/03/11 07:19

編集2018/03/11 07:33