- 締切済み
HTML、ＣＳＳ が、なかなかうまくいきません。
お世話になります。 HTMLを始めたばかりですので、 ご教授いただけたら幸いです。 以下の図のような感じに並べたいのですが、 なかなかうまい具合にいきません。 黄色は、全てボタンになります。 赤は、ボタンについた吹き出し部分となります。 上段の２つのボタンは、やや大きい感じのボタン。 下段の３つのボタンは、上段に比べて、少し小さい感じのボタンになります。 ボタンは、上段(A)と下段(B)で、 HTML と CSS は、分けようかと考えています。 【HTML】 <div class="Button"> <div class="contents"> <div class="Button_boxA clearfix"> <div class="Yellow_Btn_01"><img src="img/Yellow_Btn_01.png" width="200" height="75" /> </div> <div class="Yellow_Btn_02"><img src="img/Yellow_Btn_02.png" width="200" height="80" /> </div> </div> <div class="btn_boxB clearfix"> <div class="Yellow_Btn_03"><img src="img/Yellow_Btn_03.png" width="100" height="60" /> </div> <div class="Yellow_Btn_04"><img src="img/Yellow_Btn_04.png" width="100" height="65" /> </div> <div class="Yellow_Btn_05"><img src="img/Yellow_Btn_05.png" width="100" height="60" /> </div> </div> </div> </div> 【 CSS 】 div.Button{ width:600px; margin-top:20px; margin-right:auto; margin-left:auto; padding-right:25px; } div.btn_boxA{ width::500px; margin-left:auto; margin-right:auto; margin-bottom:10px; } div.low_btn_01{ width:200px; height:75px; margin-left:auto; margin-right:auto; margin-bottom:10px; float:left; } div.low_btn_02{ width:200px; height:80px; margin-left:auto; margin-right:auto; padding-left:25px; margin-bottom:10px; float:left; } div.btn_boxB{ width::500px; margin-left:auto; margin-right:auto; margin-bottom:10px; } div.low_btn_03{ width:100px; height:60px; margin-left:auto; margin-right:auto; margin-bottom:10px; padding-left:25px; float:left; } div.low_btn_04{ width:100px; height:65px; margin-left:auto; margin-right:auto; margin-bottom:10px; padding-left:25px; float:left; ] div.low_btn_05{ width:100px; height:60px; margin-left:auto; margin-right:auto; margin-bottom:10px; padding-left:25px; float:left; } 長ったらしくなってしまいましたが、 ご教授いただけたら、幸いです。 宜しくお願いします。
- moonstar_xxx
- お礼率54% (6/11)
- CSS
- 回答数1
- ありがとう数0
- みんなの回答 （1）
- 専門家の回答
みんなの回答
- ORUKA1951
- ベストアンサー率45% (5062/11036)
＞HTMLを始めたばかりですので、 それは書かれなくてもすぐ分かります。 最初に仕様書を通読されることをお勧めします。スタイルシートを導入すると言う事は、すなわち、「構造とプレゼンテーションの分離( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.4.1 )」をすると言う事です。リンク先を読んでください。HTMLにはデザインに関する事は書かない。ひたすら文書構造だけをマークアップするのです。 [例] <div class="nav"> <ol> <li><a href="/">トップ</a></li> <li><a href="/Products">製品</a></li> <li><a href="/Books">書籍</a></li> <li><a href="/Manual">マニュアル</a></li> <li><a href="/contact">問合せ</a></li> </ol> </div> 程度しかマークアップしないのです。navというclass名は、 「DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )」だから、ナビゲーションのブロックだと明示するためです。HTML5では、<nav></nav>となる予定です。 ⇒HTML5の新しい要素( http://standards.mitsue.co.jp/resources/w3c/TR/html5-diff/#new-elements ) HTML4.01のこの説明が理解されなかったために、機械に文書構造が分からない反省からHTML5では要素になり、DIVは原則使わなくなります。 このように書かれていたら、HTML自体の製作も改訂も楽ですし、デザインも独立しているので自由に変更できますね。 ⇒ナビゲーションリストを様々にデザインしてみよう。( http://www.ichiya.com/WebService/Howto/sample/HTML/nav/navigation1.html ) で、ブラウザの[表示]メニューからスタイルシートに進み色々な物を選択してみましょう。文書構造しか書かれていないシンプルなHTMLでしたらデザインの自由度も高くなるのです。 [サンプル] ★タブは＿に置換してあるので戻す。 ★Another HTML Lint - Gateway( http://www.htmllint.net/html-lint/htmllint.html# ) でチェック済みのHTML4.01strict+CSS2.1のウェブ標準です。 ★35px×35pxの赤丸を./images/redwheel.gifを用意する。 ★IE8以降に対応。 <!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"> <!-- div.header div.nav{/* header内のnav */ width:600px;margin:20px auto; height:200px; position:relative; text-align:center; line-height:70px; } div.header div.nav ol{list-style:none;} div.header div.nav ol li a{ display:block;position:absolute; width:100px;height:60px; border:outset 5px yellow; background-color:yellow; top:120px; text-decoration:none; } div.header div.nav ol li a:hover,div.nav ol li a:focus{background-color:rgb(255,180,180);} div.header div.nav ol li a:active{border-style:inset;} /* メッセージのあるリンクについての指定 */ div.header div.nav ol li a[title]:before{content:url(./images/redwheel.gif);position:absolute;top:-20px;left:0px;} div.header div.nav ol li a[title]:after{content:attr(title);position:absolute;top:-30px;left:3px;font-size:0.8em;} /* 以下、リンク先によって位置やサイズを指定 */ div.header div.nav ol li a[href="/"]{top:10px;left:10px;width:200px;height:75px;} div.header div.nav ol li a[href="/Products"]{top:10px;left:250px;width:200px;height:75px;} div.header div.nav ol li a[href="/Books"]{left:10px;} div.header div.nav ol li a[href="/Manual"]{left:180px;} div.header div.nav ol li a[href="/contact"]{left:350px;} --> ＿</style> </head> <body> ＿<div class="header"> ＿＿<h1>タイトル</h1> ＿＿<div class="nav"> ＿＿＿<ol> ＿＿＿＿<li><a href="/">トップ</a></li> ＿＿＿＿<li><a href="/Products" title="新着">製品</a></li> ＿＿＿＿<li><a href="/Books">書籍</a></li> ＿＿＿＿<li><a href="/Manual" title="新着">マニュアル</a></li> ＿＿＿＿<li><a href="/contact">問合せ</a></li> ＿＿＿</ol> ＿＿</div> ＿</div> ＿<div class="section"> ＿＿<h2>見出し</h2> ＿＿<p>・・・</p> ＿</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>
