- エラーなし。
- ナビゲーション画像は授業で作った物を使いたかったので、サイズを直して構築しました。
- 文字の色・サイズなどがa・hover・stayで変わらないのであれば、縦ナビの課題CSS21のやり方がやり易い気もしたのですが。。
学習メモ
- visibility: hidden;→文字を不可視(透明)にする。
- float時に親ボックス内でclear: both出来なかった場合は、親ボックスにoverflow: hiddenを指定する事。
<!DOCTYPE HTML> <html lang="ja"> <head> <meta charset="utf-8"> <title>企業サイト</title> <style type="text/css"> * { margin: 0; padding: 0; } img { border: none; vertical-align: top; } body { font-family: "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", Meiryo, "メイリオ", Osaka, "MS P Gothic", "MS Pゴシック", sans-serif; text-align: center; /*IE6でブラウザの中央表示*/ background-color: #999; } #container { margin: 0 auto; /*ブラウザの中央表示*/ text-align: left; width: 742px; background-color: #FFF; padding: 0 10px; } #logo { padding: 15px 0 10px 0; } #content { overflow: hidden; background-image: url(images/content_bg.gif); background-repeat: repeat-y; padding-bottom: 20px; border-left: solid 1px #ccc; } #about { font-size: 0.8em; float: left; width: 493px; } h3 { background-image: url(images/title_bg.gif); background-repeat: repeat-x; } .adout_text { margin: 10px; } .adout_box { padding: 10px 0; border-bottom: solid 1px #ccc; } .p_text { margin: 5px 0; } .arrow { padding: 0 0 0 15px; background-image: url(images/arrow.gif); background-repeat: no-repeat; background-position: 0 3px; } #newRelease { float: left; width: 246px; padding-left: 1px; } #newRelease dt { font-size: 0.85em; margin-top: 10px; } #newRelease dd { font-size: 0.75em; } #footer { clear: both; width: 741px; height: 33px; background-color: #333333; } a { text-decoration: none; } a:link { color: #003399; } a:visited { color: #333333; } a:hover { color: #0066CC; } /* nav */ #nav { list-style-type: none; width: 742px; height: 33px; } #nav li { float: left; width: 106px; height: 33px; font-size: 0.7em; } #nav li a { display: block; width: 100%; height: 33px; background-image: url(images/global_nav.jpg); } em { visibility: hidden; } /*文字を不可視(透明)にする*/ /* 擬似クラス */ #nav01 a { background-position: 0 0; } #nav02 a { background-position: -106px 0; } #nav03 a { background-position: -212px 0; } #nav04 a { background-position: -318px 0; } #nav05 a { background-position: -424px 0; } #nav06 a { background-position: -530px 0; } #nav07 a { background-position: -636px 0; } /* オンマウス */ #nav01 a:hover { background-position: 0 -33px; } #nav02 a:hover { background-position: -106px -33px; } #nav03 a:hover { background-position: -212px -33px; } #nav04 a:hover { background-position: -318px -33px; } #nav05 a:hover { background-position: -424px -33px; } #nav06 a:hover { background-position: -530px -33px; } #nav07 a:hover { background-position: -636px -33px; } /* 現在位置 */ #nav01 a.stay { background-position: 0 -66px; } #nav02 a.stay { background-position: -106px -66px; } #nav03 a.stay { background-position: -212px -66px; } #nav04 a.stay { background-position: -318px -66px; } #nav05 a.stay { background-position: -424px -66px; } #nav06 a.stay { background-position: -530px -66px; } #nav07 a.stay { background-position: -636px -66px; } </style> </head> <body> <div id="container"> <h1 id="logo"><img src="images/logo.gif" alt="サンプルスタイルシートカンパニー" width="290" height="38"></h1> <ul id="nav"> <li id="nav01"><a href="index.html" class="stay"><em>トップページ</em></a></li> <li id="nav02"><a href="#"><em>ソリューション</em></a></li> <li id="nav03"><a href="#"><em>実績紹介</em></a></li> <li id="nav04"><a href="#"><em>パートナー</em></a></li> <li id="nav05"><a href="#"><em>カスタマー</em></a></li> <li id="nav06"><a href="#"><em>会社概要</em></a></li> <li id="nav07"><a href="#"><em>お問い合わせ</em></a></li> </ul> <div id="content"> <h2><img src="images/main_copy.jpg" alt="あなたにとっての最高のパートナーであるために" width="740" height="272"></h2> <div id="about"> <h3><img src="images/title_about.gif" alt="弊社について" width="107" height="42"></h3> <div class="adout_text"> <div class="adout_box"> <h4><img src="images/section_01.gif" alt="スタイルシートによるレイアウトで、表現力と機能性が共存したサイトを構築。" width="292" height="38"></h4> <p class="p_text">サンプルスタイルシートカンパニーでは、ウェブサイトの構築にスタイルシートによるレイアウトを採用しています。そのため、視覚的に美しい表現力だけでなく、ユーザーにとって使いやすい機能性とを合わせ持ったウェブサイトを提供することができます。</p> <a class="arrow" href="#">ソリューションへ</a> </div><!--adout_box--> <div class="adout_box"> <h4><img src="images/section_02.gif" alt="ウェブサイトを成功に導く、構造設計とインターフェース構築を武器に。" width="297" height="38"></h4> <p class="p_text">100件あまりのウェブサイト構築経験から培った企画・開発力をバックボーンにもつ、サンプルスタイルシートカンパニー。競争に勝ち抜くための構造設計と、インターフェース構築を武器に、お客様のウェブサイトを成功に導くお手伝いをします。</p> <a class="arrow" href="#">実績紹介へ</a> </div><!--adout_box--> </div><!--class="adout_text"--> </div><!--about--> <div id="newRelease"> <h3><img src="images/title_news.gif" alt="ニュースリリース" width="119" height="42"></h3> <div class="adout_text"> <dl> <dt>2006年4月1日</dt> <dd>サンプルスタイルシートカンパニーのウェブサイトがリニューアルしました。</dd> <dt>2006年4月1日</dt> <dd>サンプルスタイルシートカンパニーのウェブサイトがリニューアルしました。</dd> <dt>2006年4月1日</dt> <dd>サンプルスタイルシートカンパニーのウェブサイトがリニューアルしました。</dd> <dt>2006年4月1日</dt> <dd>サンプルスタイルシートカンパニーのウェブサイトがリニューアルしました。</dd> <dt>2006年4月1日</dt> <dd>サンプルスタイルシートカンパニーのウェブサイトがリニューアルしました。</dd> </dl> </div><!--class="adout_text"--> </div><!--newRelease--> </div><!--content--> <div id="footer"><address><img src="images/copyright.gif" alt="copyright" width="319" height="33"></address></div><!--footer--> </div><!--wrapper--> </body> </html>