- 締切済み
ＣＳＳ <li> ＨＰデザイン
ＨＰ作成初心者です。 下記のようなデザインと言うか、配置を考えています。赤枠と青枠はfloat left,righitで分ければいいと思います。 赤枠の中をテーブルを使わずに<li>で作りたいのですが、どのようにすればいいでしょうか？ 横1列ごとに<div>で囲み、横に並べればと考えていますが、他に今後も増やしていく場合に便利なやり方などはありますでしょうか？ よろしくお願いいたします。 <div id="test"> <li>画像</li> <p>テキスト、説明</p> <li>画像</li> <p>テキスト、説明</p> </div>
- hatamoto177
- お礼率0% (0/3)
- CSS
- 回答数3
- ありがとう数0
- みんなの回答 （3）
- 専門家の回答
みんなの回答
- ORUKA1951
- ベストアンサー率45% (5062/11036)
実際のHTMLとCSSの例です。なお、ソース中のタブは＿に置換してありますから、実際にはタブ(または半角スペース)に置換してください。 ★青枠と赤枠を左右に並べたいとのことで高さをそろえるため、HTMLはNo.1のHTMLより、文書構造を壊さないように最小限変更しています。写真のsample01.kpg～sample05.jpgは、400px×300px程度のものを別途用意して、HTMLと同じ階層のimagesフォルダーへ入れてください。 ★ウィンドウ幅は1026px程度ものを標準としてありますが、それよりもずっと小さくても、ずっと大きくても対処してあります。ウィンドウ幅解像度を様々に変更してみてください。 ★W3C Validator・CSS Validator ・anotheHTML Lintで検証済み こんなシンプルな(慣れるまではそうは言えないが・・・)CSSで可能です。そのためにはHTMLが正しいこと。 <!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 name="author" content="ORUKA1951"> ＿<meta http-equiv="Content-Style-Type" content="text/css"> ＿<link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" > ＿<link rel="START" href="../index.html"> ＿<style type="text/css"> <!-- html,body{margin:0;padding:0;} p,dd{text-indent:1em;} div.header,div.section,div.footer{margin:0;width:100%;max-width:950px;} div.header,div.footer,div.library{padding:0 10px;} div.section{position:relative;} div.library{border:solid red 1px;margin-left:150px;margin-right:0;} div.nav h2{display:none;} ol.photoList{display:block;width:auto;} div.library hr{clear:both;visibility:hidden;} ol.photoList li{list-style:none;display:block; width:210px;margin-left:10px;float:left;position:relative;} ol.photoList li img{width:200px;height:auto;border:solid 5px white;} ol.photoList li img:hover{width:auto;height:auto; position:absolute;top:-120px;left:-120px;z-index:10;} div.section div.nav{width:140px;position:absolute;top:0px;left:5px; height:100%;border:blue solid 1px;} --> ＿</style> </head> <body> ＿<div class="header"> ＿＿<h1>見出し</h1> ＿＿<p>このサイトは、むにゃむにゃについてのサイトです。</p> ＿</div> ＿<div class="section"> ＿＿<div class="library"> ＿＿＿<h2>写真の紹介</h2> ＿＿＿<p>今年の４月以降にみつけた野草です。</p> ＿＿＿<ol class="photoList"><!-- リストでマークアップする。--> ＿＿＿＿<li> ＿＿＿＿＿<img src="./images/sample01.jpg" width="400" height="300" alt="何とかの写真"><br> ＿＿＿＿＿これは、何月何日に見つけたオオイヌフグリの写真です。 ＿＿＿＿</li> ＿＿＿＿<li> ＿＿＿＿＿<img src="./images/sample02.jpg" width="400" height="300" alt="何とかの写真"><br> ＿＿＿＿＿これは、何月何日に見つけたオオイヌフグリの写真です。 ＿＿＿＿</li> ＿＿＿＿<li> ＿＿＿＿＿<img src="./images/sample03.jpg" width="400" height="300" alt="何とかの写真"><br> ＿＿＿＿＿これは、何月何日に見つけたオオイヌフグリの写真です。 ＿＿＿＿</li> ＿＿＿＿<li> ＿＿＿＿＿<img src="./images/sample04.jpg" width="400" height="300" alt="何とかの写真"><br> ＿＿＿＿＿これは、何月何日に見つけたオオイヌフグリの写真です。 ＿＿＿＿</li> ＿＿＿＿<li> ＿＿＿＿＿<img src="./images/sample05.jpg" width="400" height="300" alt="何とかの写真"><br> ＿＿＿＿＿これは、何月何日に見つけたオオイヌフグリの写真です。 ＿＿＿＿</li> ＿＿＿</ol> ＿＿＿<hr> ＿＿</div> ＿＿<div class="nav"> ＿＿＿<h2>ナビゲーションリスト</h2> ＿＿＿<ol> ＿＿＿＿＿<li><a href="../index.html">トップへ</a></li> ＿＿＿＿＿<li><a href="../essayis/index.html">随筆</a></li> ＿＿＿＿＿<li><a href="../siteMap.html">サイトマップ</a></li> ＿＿＿</ol> ＿＿</div> ＿</div> ＿<div class="footer"> ＿＿<h2>文書情報</h2> ＿＿<dl><!-- リスト --> ＿＿＿<dt>初版</dt> ＿＿＿<dd>2011/06/14 15:00</dd> ＿＿</dl> ＿</div> </body> </html>
- ORUKA1951
- ベストアンサー率45% (5062/11036)
HTMLが無茶苦茶なのでイメージがつかめません。 HTML(Hyper Text Markup Language)は、文字通り文章をその構造にしたがって、要素としてマークアップするものです。 思いっきり想像をたくましくして考えると、写真とその説明からなるリストを赤枠で囲んで右側におきたいと考えて見ます。その場合、デザインには一切惑わされずに文書構造をHTMLでマークアップします。 【例】全角スペースはタブか半角スペースに置換すること!! <body> <div class="header"> <h1>見出し</h1> <p>このサイトは、むにゃむにゃについてのサイトです。</p> </div> <div class="section"> <h2>写真の紹介</h2> <p>今年の４月以降にみつけた野草です。</p> <ol><!-- リストでマークアップする。--> <li> <img src="./images/photo1.jpg" width="480" height="360" alt="何とかの写真"><br> これは、何月何日に見つけたオオイヌフグリの写真です。 </li> <li>以下同様に写真と説明をリストにして並べる。</li> </ol> </div> <div class="nav"> <h2>ナビゲーションリスト</h2> <ol> <li><a href="../index.html">トップへ</a></li> <li><a href="../essayis/index.html">随筆</a></li> <li><a href="../siteMap.html">サイトマップ</a></li> </ol> </div> <div class="footer"> <h2>文書情報</h2> <dl><!-- リスト --> <dt>初版</dt> <dd>2011/06/14 15:00</dd> </dl> </div> </body> ここまではデザインは考慮しない。可能な限りしてはならない。その上で、スタイルシートで ページ全体はウィンド幅いっぱいに、ただし広すぎると読みづらいので最大で800pxくらいにする。 headerを最上部に、 nav(ナビゲーション)を左端のスペースに150px位の幅で section(本文)を残りに、 footerはその下に ・・・これだと検索エンジンは無論、誰でも、もちろん自分も後で理解できるでしょう。 この段階で、 The W3C Markup Validation Service ( http://validator.w3.org/#validate_by_input ) Another HTML-lint gateway ( http://openlab.ring.gr.jp/k16/htmllint/htmllint.html ) などでチェックしておきます。 その上で、スタイルシートを作ります。CSSは W3C CSS 検証サービス ( http://jigsaw.w3.org/css-validator/#validate_by_input ) でチェック・・ 後で実際のものをあげて見ます。今から食事とお風呂・・・
- hinananana
- ベストアンサー率69% (16/23)
まず赤枠と青枠がわかりません・・・。 画像が貼れなかったのでしょうか・・・？； あとHTMLがめちゃくちゃです <li>は<ul>または<ol>の中に書くものです。 詳しい説明はHTMLリファレンスを見てください。 あと画像というのはどういったものですか？ 表示で □テキストテキスト～～ という感じの画像でしょうか？ それとも写真とか大きいものの画像でしょうか？
