- 締切済み
補足・修正・訂正あればお願い致します。
windowsのIE9ではきれいに表示することができました。 しかし、横幅やマージン、パディングの箇所の数値がいまいち 理解できていないため完璧にできたという実感がありません。 もっと論理的にきれいな値をプログラムできると思っています。 私のプログラムで補足・修正・訂正あればお願い致します。 ＊＊＊＊＊＊＊＊＊＊＊＊index.html＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis" /> <title>無題ドキュメント</title> <link rel="stylesheet" type="text/css" href="css/base.css" > </head> <body> <div id="page"> <div id="header"> <p>header</p> <!-- /#header--></div> <div id="contents"> <!--メインコンテンツ（商品リスト）--> <div id="main"> <div class="products"> 商品1 </div> <div class="products"> 商品2 </div> <div class="products"> 商品3 </div> <div class="products"> 商品4 </div> <div class="products"> 商品1 </div> <div class="products"> 商品2 </div> <div class="products"> 商品3 </div> <div class="products"> 商品4 </div> <!-- /#main--></div> <!--メインコンテンツ（商品リスト）--> <div id="sub"> <p>sub</p> <!-- /#sub--></div> <!-- /#contents--></div> <div id="footer"> <p>footer</p> <!-- /#footer--></div> <!--/#page --></div> </body> </html> ******************base.css***************************** /* CSS Document */ body{ text-align:center; } #page{ width:860px; height:600px; margin:0 auto; background:#690; text-align:left; } #header{ width:860px; height:100px; background:#D1D1DE } #contents{ float:left; width:840px; height:380px; margin:10px; padding-left:0; background:#690; } *html #main{ width:560px; } #main{ float:right; width:570px; height:380px; background:#fff; } #sub{ float:left; width:260px; height:380px; background:#fff; } #footer{ width:860px; height:100px; clear:both; background:#fff; background:#D1D1DE } .products{ float:left; width:130px; margin-left:10px; margin:10px 0px 10px 10px; height:170px; background:#F3F59C }
- みんなの回答 （3）
- 専門家の回答
みんなの回答
- play_with_you
- ベストアンサー率37% (112/301)
プログラムがどこにも無いので回答不能ですね。
- ORUKA1951
- ベストアンサー率45% (5062/11036)
No1です。 補足ですが、質問で示されたソースは、とても良く出来ていると思います。リストと書かれていてリストとマークアップされていないことを除けば・・ 私が示したサンプルは、HTML5を念頭に置いたもので、かつ、検索エンジンを含めて、様々なユーザーエージェントに対応するようにすることを主眼においています。 【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから 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 )］より 参考になれば・・
- ORUKA1951
- ベストアンサー率45% (5062/11036)
いちど仕様書を読み直される事をお勧めします。マニュアルやサイトを参考にされているようですが、これらは、「このデザインのためにこうする」というノウハウになりますから、仕様書を理解していないと、おかしなものになってしまいます。 たとえば、<!--メインコンテンツ（商品リスト）-->と書かれていながらリストになっていません。 HTML4.01 ・DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 ) HTML5 ・HTML5 では、文書をよりよく構造化するために、次の要素が新しく追加されました。( http://standards.mitsue.co.jp/resources/w3c/TR/html5-diff/#new-elements ) とあるように、可能な限りその内容を示す要素でマークアップし、それでは構造を示しきれないときにDIVやSAPNをclass名やidを併用してマークアップします。 参考になるのは、HTML5 における HTML4 からの変更点( http://standards.mitsue.co.jp/resources/w3c/TR/html5-diff/#new-elements )にある新しい要素名をclass名に使用する事です。idは極力使いません。なぜならidは、そのページに一度しか使えないからです。header,section,footerはひとつの文書の中に何度も登場する要素です。 <article><!-- header,section,footerを持つであろう一塊の記事 --> <header></header> <section> <section> <article> <header></header> <section><?section> <footer></footer> </article> </section> <section></section> </section> <footer></footer> </article> のように!!! 端的に言うと、わざわざ、<!--メインコンテンツ（商品リスト）-->のようなコメントを入れなくても、分かるようにマークアップすれば良いのです。スタイルシートも分かりやすくなります。 div.section ol.ProductList{}で、本文中の製品リストだとすぐ分かります。 ★<div class="header">→<header>など、そのままHTML5に変更できます。 HTML5の練習になります。それぞれの名称や用途は上記リンクを参照。 ★CSSはCSS2以降、基点となるセレクタを書くことになりました。書いていない場合は*全称セレクタが省略されていると判断します。しかし、 .products よりは、 ol.products{} div.producs{} のほうが、後日絶対に分かりやすいでしょう。 サンプルです。是だけの簡単なソースでスマホから幅広ディスプレイに対応します(ウィンドウ幅を変えて確認)。印刷時にはこのデザインでは分かりにくいので適用されません。(印刷プレビューで確認) また項目がいくつ増えても、減っても良いです。 ★Another HTML-lint 5( http://www.htmllint.net/html-lint/htmllint.html# ) のDATAタブで検証済 ★タブは＿に置換してあるので戻すこと <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> ＿<meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> ＿<title>サンプル</title> ＿<meta http-equiv="Content-Style-Type" content="text/css"> ＿<link rel="START" href="../index.html"> ＿<style type="text/css" media="screen"> <!-- html,body{margin:0;padding:0;} h1,h2,h3,h4,p,li{margin:0;line-height:1.6em;} div.header,div.section,div.footer{ width:87%;min-width:440px;max-width:1000px; padding:5px 10px; margin:0 auto; } div.header,div.footer{ background-color:rgb(209, 209, 222); min-height:100px; } div.section{ background-color:rgb(102, 153, 0);position:relative; min-height:360px; } div.section h2,div.section ol.ProductList{ margin-left:280px } div.section h2{display:none;} div.section ol.ProductList,div.section ol.ProductList ol,div.section ol.ProductList li{ display:block;list-style:none;padding:0; } div.section:after{content:"";display:block;clear:left;width:100%;} div.section ol.ProductList li{ margin:0; width:130px;height:170px; float:left; background-color:rgb(243, 245, 156); border:5px solid white; } div.section ol.ProductList li ol li{ float:none; width:auto;height:auto; background-color:transparent; border:none; } #contentTable{ position:absolute;top:15px;left:10px; background-color:white; height:90%; width:260px; } --> ＿</style> </head> <body> ＿<div class="header"> ＿＿<h1>タイトル</h1> ＿＿<p>記事</p> ＿</div> ＿<div class="section"> ＿＿<h2>本文</h2> ＿＿<ol class="ProductList"> ＿＿＿<li>商品1 ＿＿＿＿<ol> ＿＿＿＿＿<li>写真</li> ＿＿＿＿＿<li>説明</li> ＿＿＿＿</ol> ＿＿＿</li> ＿＿＿<li>商品2 ＿＿＿＿<ol> ＿＿＿＿＿<li>写真</li> ＿＿＿＿＿<li>説明</li> ＿＿＿＿</ol> ＿＿＿</li> ＿＿＿<li>商品3 ＿＿＿＿<ol> ＿＿＿＿＿<li>写真</li> ＿＿＿＿＿<li>説明</li> ＿＿＿＿</ol> ＿＿＿</li> ＿＿＿<li>商品4 ＿＿＿＿<ol> ＿＿＿＿＿<li>写真</li> ＿＿＿＿＿<li>説明</li> ＿＿＿＿</ol> ＿＿＿</li> ＿＿</ol> ＿＿<ol class="ProductList"> ＿＿＿<li>商品5 ＿＿＿＿<ol> ＿＿＿＿＿<li>写真</li> ＿＿＿＿＿<li>説明</li> ＿＿＿＿</ol> ＿＿＿</li> ＿＿＿<li>商品6 ＿＿＿＿<ol> ＿＿＿＿＿<li>写真</li> ＿＿＿＿＿<li>説明</li> ＿＿＿＿</ol> ＿＿＿</li> ＿＿＿<li>商品7 ＿＿＿＿<ol> ＿＿＿＿＿<li>写真</li> ＿＿＿＿＿<li>説明</li> ＿＿＿＿</ol> ＿＿＿</li> ＿＿</ol> ＿＿<div id="contentTable"> ＿＿＿<h3>目次</h3> ＿＿</div> ＿</div> ＿<div class="footer"> ＿＿<h2>文書情報</h2> ＿＿<dl class="documentHistry"> ＿＿＿<dt id="FIRST-PUBLISHED">First Published</dt> ＿＿＿<dd>2012-08-10</dd> ＿＿</dl> ＿＿<address>© ORUKA1951 2012 - 2016 All Rights Reserved mailto:*****</address> ＿</div> </body> </html>
