- ベストアンサー
この並びの最適なコーディングに関して
お世話になります。 コーディングの勉強をしているものなのですが、画像のような並びの場合、最適（シンプルで見栄えがいい）なコーディングはどのようにしたらいいでしょうか。 初めは、ADEとBCのdivとFGHのdivで分け、さらにBCのdivに分けて行ったのですが、他に何かいい方法もしくは、綺麗な書き方はないでしょうか。
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
画像であっても、変わりません。 必ず代替テキストがあるはずです。 『テキストを画像に置き換えて表現する。 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/present/styles.html#h-14.1 )』 と名指しで否定されているし、 『alt属性は、IMG要素とAREA要素では必ず指定しなければならない。 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/objects.html#h-13.8 )』 ですから・・ もし画像がまったく読み込まれなくても、テキストが同じように表示されるはずですから。 altは、いくら長くても構いませんし、各セクションには見出しなどが例に挙げたように書かれていても構いません。 <body> ＿<div class="article"> ＿＿<div class="header"> ＿＿＿<h1><img src="" width="" height="" alt="このページの見出し"></h1> ＿＿＿<p>A</p> ＿＿</div> ＿＿<div class="section"> ＿＿＿<h2>本文</h2> ＿＿＿<p><img src="" width="" height="" alt="D"></p> ＿＿＿<div class="figure"> ＿＿＿＿<h3>挿絵</h3> ＿＿＿＿<p><img src="" height="" width="" alt="E"></p> ＿＿＿</div> ＿＿</div> ＿＿<div class="aside"> ＿＿＿<div class="nav"> ＿＿＿＿<h2><img src="" height="" width="" alt="サイトマップ"></h2> ＿＿＿＿<ul> ＿＿＿＿＿<li><a href=""></a></li> ＿＿＿＿＿<li><a href=""></a></li> ＿＿＿＿</ul> ＿＿＿</div> ＿＿＿<div class="memo"> ＿＿＿＿<h2>メモ</h2> ＿＿＿＿<p><img src="" height="" width="" alt="C"></p> ＿＿＿</div> ＿＿</div> ＿＿<div class="footer"> ＿＿＿<h2>文書情報</h2> ＿＿＿<p class="logo"><img src="" height="" width="" alt="ロゴ(F)"></p> ＿＿＿<div class="profile"> ＿＿＿＿<h3>会社情報</h3> ＿＿＿＿<p><img src="" height="" width="" alt="G"></p> ＿＿＿</div> ＿＿＿<div class="documentInfo"> ＿＿＿＿<h3>更新履歴</h3> ＿＿＿＿<p><img src="" height="" width="" alt="H"></p> ＿＿＿</div> ＿＿</div> ＿</div> </body>
その他の回答 (2)
- ORUKA1951
- ベストアンサー率45% (5062/11036)
HTML(Hyper Text Markup Langage)は、文書構造がわからないとコーディング(マークアップ)はできません。 ★決してデザインを目的にコーディングしてはなりません。 著者は、文書の内容を読み取って、その文書がどういう要素(Element)で組み立てられているか？をマークアップ(mark up)していきます。 そして、その文書構造を元にどのようにプレゼンテーションするかをスタイルシートで指定します。 たとえば、示された図から想像できるのは・・・ <body> ＿<div class="article"> ＿＿<div class="header"> ＿＿＿<h1>このページの見出し</h1> ＿＿＿<p>A</p> ＿＿</div> ＿＿<div class="section"> ＿＿＿<h2>本文</h2> ＿＿＿<p>D</p> ＿＿＿<div class="figure"> ＿＿＿＿<h3>挿絵</h3> ＿＿＿＿<p>E</p> ＿＿＿</div> ＿＿</div> ＿＿<div class="aside"> ＿＿＿<div class="nav"> ＿＿＿＿<h2>サイトマップ</h2> ＿＿＿＿<p>B</p> ＿＿＿</div> ＿＿＿<div class="memo"> ＿＿＿＿<h2>メモ</h2> ＿＿＿＿<p>C</p> ＿＿＿</div> ＿＿</div> ＿＿<div class="footer"> ＿＿＿<h2>文書情報</h2> ＿＿＿<p class="logo">ロゴ(F)</p> ＿＿＿<div class="profile"> ＿＿＿＿<h3>会社情報</h3> ＿＿＿＿<p>G</p> ＿＿＿</div> ＿＿＿<div class="documentInfo"> ＿＿＿＿<h3>更新履歴</h3> ＿＿＿＿<p>H</p> ＿＿＿</div> ＿＿</div> ＿</div> </body> のような文書構造ではないかと思います。 ★重要なことは、文書構造を理解して、それをマークアップ--コーディングすることです。そうすれば、期待通りのデザインができるだけでなく、将来、どのようにもデザインは変更できますし、端末に合わせてデザインを変えることもできます。 そしてねなによりも、 【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから HTMLは、どんな環境からもWebの情報を利用できるようにすべきだという方針の下に開発されている。例えば、様々な解像度や色深度のグラフィックディスプレイを持つPCや、携帯電話、モバイル機器、音声入出力機器、帯域が広いコンピュータや狭いコンピュータ、等の環境である。 ￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［Introduction to HTML 4 (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.2.1 )］より の基本に忠実ですから、検索エンジンを含めて誰にも優しいものになるでしょう。 ★使用したクラス名は、HTML5の「新しい要素 ( http://standards.mitsue.co.jp/resources/w3c/TR/html5-diff/#new-elements )」とその意味を参考にしています。 HTML4.01の『DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )』とあわせて読むこと。
補足
大変ご丁寧にありがとうございました。ただ、こちらの説明不足でした。全体の構造ではなく、これはすべて画像で一つの区画です。
- 神崎 渉瑠（@taloo）
- ベストアンサー率44% (1016/2280)
Aに何が書かれているか、Bに何が書かれているか、Cに何が書かれているか、、、で変わってきます。 スタイルシートを消した時にどう言う順番ならページの全体が読みやすくなり、理解しやすくなるか。 その読みやすくなる順番で決めることをお勧めします。
補足
こちらの説明不足でした。全体の構造ではなく、これはすべて画像で一つの区画です。
お礼
ご丁寧にありがとうございました。意図していた回答と違いましたため、再度質問いたします。ありがとうございました。