例えば
<body>
<header>
<h1>サイトタイトル</h1>
</header>
<section>
<h2>ページタイトル</h2>
</section>
</body>
をdivで囲むと
<body>
<div>
<header>
<h2>サイトタイトル</h2>
</header>
<section>
<h3>ページタイトル</h3>
</section>
</div>
</body>
に書き換えるべきですか?
それともdivで囲んでもdivが存在しないものとして振舞いますか?
ちなみにスタイルシートを無効にして実際に書き換えずにやってみるとh1の大きさが変わりませんでした
やっぱり書き換えなくてもいいんでしょうか?
ご回答よろしくおねがいします
ここから下は関係ないですけど
html5とcssってホントにややこしいですね。見出しのランクなんてcssがあればもはや何の意味もないし(だからh1で統一できるようにしたんでしょうkど)、cssでは特にpositonとfloatは頭がおかしいと思うし、この二つがクソなので結局シマンティックセクションとか関係なくdivで囲まざるを得ない。html5のセクションはユーザーじゃなくてロボットに対して役に立つもの
なんでもっと柔軟に直感的なレイアウトができるようにしなかったんでしょうね?
じゃあhtml4使えよってのはなしで
あとjavascriptで各セクションの高さを取得して足し合わせたものを左サイドバーの高さに代入してレイアウトを綺麗にするのとかもどれか1つのセクションにposition:absoluteがあるとおかしくなるしブラウザによってはいけたりするし本当に頭がおかしい
A 回答 (1件)
- 最新から表示
- 回答順に表示
No.1
- 回答日時:
>ここから下は関係ないですけど
のほうが重要で、それがわかると、その前の質問の答えが見えてくるでしょう。
>じゃあhtml4使えよってのはなしで
HTML4.01を復習されることを強く勧めます。HTML5はHTML4.01の反省の元で作られたのですら・・。
実はHTML4.01にも随所にHTML5とまったく同じことが書かれています。
A) 構造とプレゼンテーションの分離 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )
B) DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )
C) スタイルシートの概説( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )
など、特にDIVやSPANは文書構造を補完するために使用し、その文書構造を元にスタイルシートでプレゼンテーションを指定していく・・・ということ。
HTML4.01には、文書構造を補完するためにDIVを使わざるを得ませんでした。すなわち
<body>
<div class="header">
<h1>見出し</h1>
<div class="nav">
</div>
</div>
<div class="section">
<h2>本文見出し</h2>
<p>・・・・</p>
<div class="section">
</div>
<div class="aside">
</div>
</div>
<div class="footer">
</div>
</body>
のようにマークアップしろと書かれています。上記(B)に!!明確に!!
しかしながら、現実には理解できる人は少なく、相変わらず形は変わっても(C)で例示されているのと、内容的には変わらない使われ方がされてきました。
<div class="content">
<div id="leftMenue">
とかね。HTMLをデザイン(プレゼンテーション)のためのものと思われてきたのが最大の原因だと思います。
その反省から「HTML5 では、文書をよりよく構造化するために、・・・要素が新しく追加されました。( http://standards.mitsue.co.jp/resources/w3c/TR/h … )」
そのため、上記は
<body>
<header>
<h1>見出し</h1>
<nav>
</nav>
</header>
<section>
<h2>本文見出し</h2>
<p>・・・・</p>
<section>
</sectin>
<aside>
</aside>
</section>
<footer>
</footer>
</body>
と書けるようになりました。これは、著者にとってもとってもメンテナンスが容易になり、スタイルシートもずっと簡単に書けるようになりました。
★最初の質問
HTML5では、DIVは安易に使えません。
【引用】____________ここから
Authors are strongly encouraged to view the div element as an element of last resort, for when no other element is suitable. Use of more appropriate elements instead of the div element leads to better accessibility for readers and easier maintainability for authors.
 ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ここまで[4.5 Grouping content — HTML5( http://www.w3.org/TR/2012/CR-html5-20121217/grou … )]より
---著者は、 div 要素を、他により適切な要素がないときなど、最後の最後手段として使用することを強く推奨します。DIVでないより適切な要素を使うことは、読者にとってはアクセシビリティ向上に、ウェブ制作者にとってはメンテナンス性の向上につながる。---
もし、質問に書かれた場面で使うなら、<article></article>(header,section,fooerをもつであろう完結した記事を示す)で囲うべきです。
Q>それともdivで囲んでもdivが存在しないものとして振舞いますか?
『DIV要素とSPAN要素は、・・・【中略】・・・他のプレゼンテーション的語彙を示すことはない。 ( HTML4.01 http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … ) 』
Q>セクションをdivで囲むと見出しのランクは下がるの
HTML5でsectionは、文書のアウトライン(階層)を示すために使われますから、sectionの階層で見出しレベルを知ることが出来ます。
html
└body
├ header
├ section
│ ├ h1 または h2
│ └ section
│ ├ h1 または h3
| └section
│ ├ h1 または h4
├ section
├ h1 または h2
そのために、h1⇒h6で階層を示す必要がなくなったために
・sectionでアウトラインを示し、すべてh1を使う
・sectionと見出しのレベルを併用する。
のいずれかに統一することになります。示されたような書き方は間違いです。
この文書構造を利用してスタイルシートが書けますから
section{margin-left:1em;font-size:0.9em;}
section h1,section h2,section h3,section h4,section h5,section h6{font-size:1.2em;}
だけで、視覚系ブラウザには、階層を明示して表示されます。
>見出しのランクなんてcssがあればもはや何の意味もないし(だからh1で統一できるようにしたんでしょうkど)、
それは、あくまで視覚系ブラウザだけですよ。HTMLは、『どんな環境からもWebの情報を利用できるようにすべきだという方針の下に開発されている。以下略・・・( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )』
★HTMLはデザインのためではなく、様々なユーザーエージェント(検索エンジンも含む)のために、また再利用のために文書構造をマークアップする言語
★スタイルシートは、その文書構造を利用してプレゼンテーションを指定するもの
このふたつを明確に区別し活用してください。
>cssでは特にpositonとfloatは頭がおかしいと思うし、この二つがクソなので
HTMLやCSSに対して誤解されていること、よくご存じないことがそのような感想になるのだと思います。決してそんなことはありません。従来は、視覚系ブラウザのために、本文とは関係のないナビゲーションをページの最初に書く必要がありましたが、absoluteがあるために、footerに書いたナビゲーションをページトップに表示できるようになりました。
★HTML4.01の仕様書はHTML5のそれの十数分の一しかありません。一度全文に目を通して置かれることをお勧めします。
★CSSも古い仕様ですが、CSS2の邦訳があります。これもよく読むこと
たぶん、誤解が解消されると思います。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS テキストを画面の真ん中に配置したいです。 2 2022/11/25 16:11
- HTML・CSS ヘッダーの画像にメインエリアがかぶってしまいます 1 2022/11/28 14:06
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
- HTML・CSS HTML、cssのatomつぅーやつで 課題Ex1ってやつを表示させたいのですが、 私は課題Ex1が 2 2022/12/15 16:56
- HTML・CSS CSSが上手く反映されないみたいです 2 2022/11/21 16:19
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/07 21:04
- JavaScript jqueryを使ったスムーススクロールのコードを書いたのですが、HTMLコード内にある、a butt 2 2022/04/14 10:59
- HTML・CSS html/cssで要素が出てこなくて困ってます 1 2022/12/31 16:59
- JavaScript ①入力フォーム→②確認表示画面→③送信完了画面のコードを書いているのです、 入力フォームから受け取っ 2 2022/05/10 16:45
- HTML・CSS 吹き出し 下記の吹き出しのスタイルシートについて 下記のスタイルシートは左側にアイコンがでる使用にな 1 2022/11/12 17:55
関連するカテゴリからQ&Aを探す
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
ヘッダーとフッターだけ背景を...
-
HTML属性での「""」 「''」違い
-
1時間30分を簡単に表したいで...
-
htmlのolやulなどlistにtitleや...
-
div要素が重なってします
-
min-heightとheightの違いについて
-
3カラムレイアウトで「常に残り...
-
hタグの右横に画像を表示
-
1サイト内にHTML5とXHTMLが混在...
-
divの中に外部のHTMLを埋め込む
-
画面を縮小するとカラムが落ち...
-
スペースを使わず文字位置を揃...
-
複数のボタンを等間隔に、かつ...
-
SSIを利用してCSSレイアウトを...
-
hタグを使わずに小見出し
-
htmlの見出しタグ(<h1>)の次...
-
<div id="container">の使いか...
-
WEBデザイン ― ブラウザの横幅...
-
CSS: divタグ内のリンク表示に...
-
HTML5コメント欄の<article>に...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
htmlのolやulなどlistにtitleや...
-
HTML属性での「""」 「''」違い
-
<div id="container">の使いか...
-
複数のボタンを等間隔に、かつ...
-
html の divとtable の役割
-
div要素が重なってします
-
min-heightとheightの違いについて
-
ヘッダーとフッターだけ背景を...
-
1時間30分を簡単に表したいで...
-
divを横に並べる方法
-
html5でheaderの中にnav
-
スペースを使わず文字位置を揃...
-
セクションをdivで囲むと見出し...
-
divとpの使いわけ
-
ブログのサイドバーが下にくる
-
3カラムレイアウトで「常に残り...
-
グリッドレイアウトで"auto-fit...
-
iframeを使わずに上下50%ずつに...
-
ヘッダーを左右に二分割する方...
-
画面を縮小するとカラムが落ち...
おすすめ情報