質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

3回答

9541閲覧

aside/mainの組み方について

hiroakitajima

総合スコア27

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2018/03/11 06:37

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}

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答3

0

ベストアンサー

とりあえず、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が求めていた書き方です! 今後このような組み方を試してみます。 ありがとうございました。
guest

0

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
退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

タグの並びが綺麗でなくなってしまいます。

そうは思いませんが、CSS Grid Layout というものがあるのでそれを利用すれば div を利用しないでもレイアウトが可能です。

【CSS Grid Layout を極める!(基礎編) - Qiita】
https://qiita.com/kura07/items/e633b35e33e43240d363

【CSS Grid Layout入門。対応ブラウザが出揃った新しいレイアウト仕様 - ICS MEDIA】
https://ics.media/entry/15649

【5分で完璧に分かる!CSS Gridの基本的な使い方を解説 | コリス】
https://coliss.com/articles/build-websites/operation/css/learn-css-grid-in-5-minutes.html

投稿2018/03/11 07:16

kei344

総合スコア69364

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問