実践演習課題H12C12
HTML
<!doctype html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>H12C12</title> <link rel="stylesheet" href="css/H12C12.css"> </head> <body> <div id="container"> <div id="header"> <h1><img src="img/12/logo.gif" width="290" height="38" alt="サンプルスタイルシートカンパニー"></h1> <div id="nav"> <ul> <li id="indexSelected"><a href="#">トップページ</a></li> <li id="solution"><a href="#">ソリューション</a></li> <li id="result"><a href="#">実績紹介</a></li> <li id="customer"><a href="#">カスタマー</a></li> <li id="partner"><a href="#">パートナー</a></li> <li id="company"><a href="#">会社概要</a></li> <li id="contact"><a href="#">お問い合わせ</a></li> </ul> </div><!-- /nav--> <div id="billboard"> <img src="img/12/main_copy.jpg" width="740" height="272" alt="あなたにとって最高のパートナーであるために。"> </div><!--/billboard--> </div><!--/header--> <div id="wrapper"> <div id="content"> <h2><img src="img/12/title_about.gif" width="107" height="42" alt="弊社について"></h2> <div class="section"> <h3><img src="img/12/section_01.gif" width="292" height="38" alt="スタイルシートによるレイアウトで、表現力と機能性が共存したサイトを構築。"></h3> <p>サンプルスタイルシートカンパニーでは、ウェブサイトの構築にスタイルシートによるレイアウトを採用しています。そのため、視覚的に美しい表現力だけでなく、ユーザーにとって使いやすい機能性とを合わせ持ったウェブサイトを提供することができます。</p> <p class="link"><img src="img/12/arrow.gif" width="11" height="11" alt=""><a href="#">ソリューションへ</a></p> </div> <div class="section"> <h3><img src="img/12/section_02.gif" width="297" height="38" alt="ウェブサイトを成功に導く、構造設計とインターフェース構築を武器に。"></h3> <p>100件あまりのウェブサイト構築経験から培った企画・開発力をバックボーンにもつ、サンプルスタイルシートカンパニー。競争に勝ち抜くための構造設計と、インターフェース構築を武器に、お客様のウェブサイトを成功に導くお手伝いをします。</p> <p class="link"><img src="img/12/arrow.gif" width="11" height="11" alt=""><a href="#">実績紹介へ</a></p> </div> </div><!--/content--> <div id="sidebar"> <h2><img src="img/12/title_news.gif" width="119" height="42" alt="ニュースリリース"></h2> <dl> <dt>2013年7月1日</dt> <dd>サンプルスタイルシートカンパニーのウェブサイトがリニューアルしました。</dd> <dt>2013年7月1日</dt> <dd>サンプルスタイルシートカンパニーのウェブサイトがリニューアルしました。</dd> <dt>2013年7月1日</dt> <dd>サンプルスタイルシートカンパニーのウェブサイトがリニューアルしました。</dd> <dt>2013年7月1日</dt> <dd>サンプルスタイルシートカンパニーのウェブサイトがリニューアルしました。</dd> <dt>2013年7月1日</dt> <dd>サンプルスタイルシートカンパニーのウェブサイトがリニューアルしました。</dd> </dl> </div><!--/sidebar--> </div><!--/wrapper--> <div id="footer"></div><!--/footer--> </div><!-- /container--> </body> </html>
@charset "UTF-8"; /* CSS Document */ body , div, h1, h2, h3, p, ul, li, img, dl, dt, dd { margin: 0; padding: 0; } ul{ list-style: none; } body { font-family: "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; color: #333333; background: url(../img/12/body_bg.gif) repeat-x 0 0; } #container{ width:740px; margin: 20px auto; } #header{ } h1 { height: 38px; margin-bottom: 15px; } #nav{ height: 33px; background: url(../img/12/global_nav_bg.gif) repeat-x; } #nav ul{ overflow: hidden; } #nav li{ float: left; } #nav li a { width: 94px; height: 33px; display: block; background: url(../img/12/global_nav.gif) no-repeat; white-space: nowrap; text-indent: 100%; overflow: hidden; } #nav li#index a:link { background: url(../img/12/global_nav.gif) 0 0; } #nav li#index a:hover { background: url(../img/12/global_nav.gif) 0 -33px; } #nav li#indexSelected a{ background: url(../img/12/global_nav.gif) 0 -66px; cursor: default; } #nav li#solution a:link { background: url(../img/12/global_nav.gif) -94px 0; } #nav li#solution a:hover { background: url(../img/12/global_nav.gif) -94px -33px; } #nav li#solutionSelected a{ background: url(../img/12/global_nav.gif) -94px -66px; cursor: default; } #nav li#result a:link { background: url(../img/12/global_nav.gif) -188px 0; } #nav li#result a:hover { background: url(../img/12/global_nav.gif) -188px -33px; } #nav li#resultSelected a{ background: url(../img/12/global_nav.gif) -188px -66px; cursor: default; } #nav li#partner a:link { background: url(../img/12/global_nav.gif) -282px 0; } #nav li#partner a:hover { background: url(../img/12/global_nav.gif) -282px -33px; } #nav li#partnerSelected a{ background: url(../img/12/global_nav.gif) -282px -66px; cursor: default; } #nav li#customer a:link { background: url(../img/12/global_nav.gif) -376px 0; } #nav li#customer a:hover { background: url(../img/12/global_nav.gif) -376px -33px; } #nav li#customerSelected a{ background: url(../img/12/global_nav.gif) -376px -66px; cursor: default; } #nav li#company a:link { background: url(../img/12/global_nav.gif) -470px 0; } #nav li#company a:hover { background: url(../img/12/global_nav.gif) -470px -33px; } #nav li#companySelected a{ background: url(../img/12/global_nav.gif) -470px -66px; cursor: default; } #nav li#contact a:link { background: url(../img/12/global_nav.gif) -564px 0; } #nav li#contact a:hover { background: url(../img/12/global_nav.gif) -564px -33px; } #nav li#contactSelected a{ background: url(../img/12/global_nav.gif) -564px -66px; cursor: default; } #billboard{ width:740px; height:272px; } #wrapper{ overflow: hidden; } #content h2,#sidebar h2{ height:42px; margin: 0 0 15px -16px; } #content{ width: 468px; background: url(../img/12/title_bg.gif) repeat-x; padding: 0 16px; float: left; } #content .section{ border-bottom: 2px solid #dfdfdf; margin-bottom: 15px; } #content h3{ height:38px; margin-bottom: 10px; } #content p{ font-size: 12px; letter-spacing: 0.5px; margin-bottom: 10px; } #content p.link img{ margin-right:3px; } #sidebar{ width: 206px; border-left: 2px solid #dfdfdf; background: url(../img/12/title_bg.gif) repeat-x; padding: 0 16px 20px 16px; float: right; } #sidebar dt{ font-size: 14px; color:#888888; } #sidebar dd{ font-size: 12px; margin-bottom: 10px; } #footer{ height:33px; background: #323232 url(../img/12/copyright.gif) no-repeat; clear:both; }