重要なお知らせ

「教えて! goo」は2025年9月17日(水)をもちまして、サービスを終了いたします。詳細はこちら＞

電子書籍の厳選無料作品が豊富！

htmlでdivをなるべく使わないで

解決済

  • 質問者：GNseravee
  • 質問日時：
  • 回答数：2件

書く方法ってありますかね？もちろんゼロとはいいませんが、使うとしても４～５コ程度に抑えたいのです。どうも</div>って書きまくって、見てみたら不備があり無用なdivを見つけるのに苦労しました。別な人からもなるべく多くは使わない方がいいと言われまして、しかし、画像とかを挿入する際に
h1,h2,h3,h4・・・・とやるのは上手くないとお聞きしましたので、どうすればよいかなと思いまして回答お願いします。それとセクション要素もたくさん使うのですが、これら一覧が載っているサイトあればお願いします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (2件)

No.1ベストアンサー

  • 回答者： ORUKA1951
  • 回答日時：

　一言で説明しきれないのでリンクを含めて書きます。

リンク先も読んで理解してください。

まず、HTML4.01の仕様書を最初から最後まで流し読みしてください。ついでHTML4.01からHTML5への変更点を読むと良いでしょう。
　⇒HTML 4.01仕様書( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )
　⇒HTML5 における HTML4 からの変更点( http://standards.mitsue.co.jp/resources/w3c/TR/h … )

　「DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )」
　「HTML5 では、文書をよりよく構造化するために、次の要素が新しく追加されました。( http://standards.mitsue.co.jp/resources/w3c/TR/h … )」
　このふたつの文章が意味するところは、divは、「文書構造を補完するために使用する」のだが、抽象的で理解されなかったために「新しく文書構造を示す要素が追加された」と言う意味です。

　HTML4.01は、それ以前のHTMLで『著者はまた、表や画像を、ページレイアウトのための道具に流用していた。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )』『そのためのテクニックには思わぬ副産物があった。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )』への反省から、作られたものです。
　HTMLは、「どんな環境からもWebの情報を利用できるようにすべき( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )」であるはずが、そうでなくなってしまったためにHTML4.01が策定されたのでしたね。
　視覚ブラウザでなくても、どこがその文書のヘッダであり、どこが本文であり、どれが表で、どこが引用で、どこが見出しであるか・・・が理解できるようにマークアップすべきです。言い換えれば、HTMLで文書の構造を記述し、スタイルシートでプレゼンテーションを指定する『構造とプレゼンテーションの分離( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )』ということです。

＞ htmlでdivをなるべく使わないで書く方法
　という時点で、DIVの乱発とまったく同じ発想であることに気付いてください。
　　　　　　　　　^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
　私は、最近では次のようにマークアップすることが多いです。
<body>
　<div class="header">
　　<h1>タイトル</h1>
　　<div class="nav">
　　　目次
　　</div>
　<div class="section">
　　<h2>本文見出し</h2>
　　<p></p>
　　<div class="section">
　　　<h3></h3>
　　　<p></p>
　　　<p></p>
　　　<div class="note"></div>
　　　<div class="figure"></div>
　　　<div class="aside"></div>
　　</div>
　　<div class="section">
　　　<h3></h3>
　　　<div class="aside"></div>
　　</div>
　</div>
　<div class="footer">
　</div>
</body>
　一目見て、文書構造が分かります。HTML4.01では文書構造を示す要素が足りなかったためにclassやidをつけたdiv要素で文書構造を示しています。これがHTML5だと
<body>
　<header>
　　<h1>タイトル</h1>
　　<nav>
　　　目次
　　</nav>
　<section>
　　<h2>本文見出し</h2>
　　<p></p>
　　<section>
　　　<h3></h3>
　　　<p></p>
　　　<p></p>
　　　<div class="note"></div>
　　　<figure"></figure>
　　　<aside></aside>
　　</div>
　　<section>
　　　<h3></h3>
　　　<aside"></aside>
　　</section>
　</section>
　<footer>
　</footer>
</body>
となるでしょう。DIVを使う機会は大幅に減るでしょうね。しかし、DIVを減らすために書いているのではありません。
　文書構造を示す要素がない場合はDIVを(idやclassとともに)使って構造化する事が必要なことは変わりません。

＞画像とかを挿入する際にh1,h2,h3,h4・・・・とやるのは上手くない

　その画像が本文から参照される挿絵的な要素でしたら
<div class="figure">
　　<h3 class="figcpation">図1</h3>
　　<img src="" width="" height="" alt="">
</div>
　とされるでしょう。それが見出しでしたら
<h1><img src="" width="" height="" alt="何とかのページ"></h2>
　とマークアップされて良いでしょう。・・・ただしこの場合、画像に背景以上の意味がないなら
<h1>何とかのページ</h2>
　としてスタイルシートで背景をしてするほうが適切でしょう。

＞これら一覧が載っているサイトあればお願いします。
　それがないのは理解できると思います。確実なのは仕様書を読んで、それぞれがどのような意味を持ち、どこに使われるかを知っておくこと。そのためには全体を通読して概略を理解して、ここはどの要素でマークすればよいかを都度チェックすることです。
　⇒7.5.5 見出し: H1、H2、H3、H4、H5、H6要素( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )
　　「見出しの要素は、その章・節で述べられる話題を短く記すものである」

　高々、数十個の要素(タグ)です。すぐ覚えちゃいますよ。

＞無用なdivを？？
<div class="memo important">
　<p>
　　プレゼンテーション(スタイルシート)で使うが使うまいがに関わらず、文書構造をメモしておきたければ、書いておくべきです。
　</p>
</div>
　というふうにね。無用かそうでないかはその時点では分かりません。

★wrapper とか contentとか left-menueとかのclass,id名は、おかしいですね。
    • good
    • 1
    • 件
通報する

No.2

  • 回答者： k_kota
  • 回答日時：

まあ、基本は勉強してもらうとして、道具の方を変えたほうがいいんじゃないでしょうか。



わかりやすいソフトを使うとか、エディタにしても字下げとか色とかサポートしてくれるものを選ぶとか。
    • good
    • 0
    • 件
通報する

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報