ベストアンサー

この並びの最適なコーディングに関して

2012/02/20 10:22

お世話になります。コーディングの勉強をしているものなのですが、画像のような並びの場合、最適（シンプルで見栄えがいい）なコーディングはどのようにしたらいいでしょうか。初めは、ADEとBCのdivとFGHのdivで分け、さらにBCのdivに分けて行ったのですが、他に何かいい方法もしくは、綺麗な書き方はないでしょうか。

puhui
お礼率34% (112/329)

HTML
回答数3
ありがとう数2

みんなの回答 （3）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

ORUKA1951
ベストアンサー率45% (5062/11036)

2012/02/21 08:36 回答No.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>

質問者

お礼 2012/04/22 09:19

ご丁寧にありがとうございました。意図していた回答と違いましたため、再度質問いたします。ありがとうございました。

ログインすると、全ての回答が全文表示されます。

その他の回答 (2)

ORUKA1951
ベストアンサー率45% (5062/11036)

2012/02/20 15:07 回答No.2

　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 )』とあわせて読むこと。

質問者