Webデザインスキル強化計画 【 演習課題12 】
***** 演習課題-12 *****
《html》
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>課題-12</title>
<link rel="stylesheet" href="kadai-12.css" madia="all">
</head>
<body>
<div id="container">
<div id="header">
<img src="images-12/logo.gif" alt="サンプルスタイルシートカンパニー">
</div>
<div id="nav">
<ul>
<li id="top"><a href="#"><span>トップページ</span></a></li>
<li id="solution"><a href="#"><span>ソリューション</span></a></li>
<li id="battle-result"><a href="#"><span>実績紹介</span></a></li>
<li id="partner"><a href="#"><span>パートナー></span></a></li>
<li id="custamer"><a href="#"><span>カスタマー</span></a></li>
<li id="histry"><a href="#"><span>会社概要</span></a></li>
<li id="contact"><a href="#"><span>お問い合わせ</span></a></li>
</ul>
</div>
<p id="main-space"><img src="images-12/main_copy.jpg" alt="あなたにとっての最高のパートナーであるために"></p>
<div id="wrapper">
<div id="content">
<div id="sub-header-1">
<p id="about"><span>弊社について</span></p>
</div><!--*********** sub-header-1 おわり ************-->
<div class="sub-header-2">
<h2>スタイルシートによるレイアウトで、<br>表現力と機能性が共存したサイトを構築。</h2>
</div><!--********** sub-header-2 おわり ************-->
<div class="sub-content">
<p class="explanation">サンプルスタイルシートカンパニーでは、ウェブサイトの構築にスタイルシートによるレイアウトを採用しています。そのため、視覚的に美しい表現力だけでなく、ユーザーにとって使いやすい機能性とを合わせ持ったウェブサイトを提供することができます。</p>
<p class="warp"><a href="#">ソリューションへ</a></p>
</div><!--************* sub-content おわり *****************-->
<div class="sub-header-2">
<h2>ウェブサイトを成功に導く、<br>構造設計とインターフェース構築を武器に。</h2>
</div><!--********** sub-header-2 おわり ************-->
<div class="sub-content">
<p class="explanation">100件あまりのウェブサイト構築経験から培った企画・開発力をバックボーンにもつ、サンプルスタイルシートカンパニー。競争に勝ち抜くための構造設計と、インターフェース構築を武器に、お客様のウェブサイトを成功に導くお手伝いをします。</p>
<p class="warp"><a href="#">実績紹介へ</a></p>
</div><!--************* sub-content おわり ****************-->
</div><!--********************* content おわり ************************-->
<div id="sidebar">
<div id="sidebar-header">
<p id="release"><span>ニュースリリース</span></p>
</div><!--************ sidebar-header おわり ************-->
<div id="sidebar-dl">
<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-dl おわり *************-->
</div><!--********************** sidebar おわり *****************************-->
</div><!--****************wrapper おわり **************:********-->
<div id="footer">
<address>Copyright c Sample Stylesheet Company All Rights Reserved.</address>
</div><!--********************** footer おわり *****************************-->
</div><!--**************************** container おわり *******************************-->
<div id="sub-container">
</div><!--********************** sub-container おわり **************************-->
</body>
</html>
《css》-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
@charset "utf-8";
/* CSS Document */
/* css reset */
/* ///// IE6対策です //// */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,
form,fieldset,input,textarea,p,blockquote,th,td {
margin:0;
padding:0;
}
table {
border-collapse:collapse;
border-spacing:0;
}
fieldset,img {
border:0;
}
address,caption,cite,code,dfn,em,strong,th,var {
font-style:normal;
font-weight:normal;
}
ol,ul {
list-style:none;
}
caption,th {
text-align:left;
}
h1,h2,h3,h4,h5,h6 {
font-size:100%;
font-weight:normal;
}
q:before,q:after {
content:'';
}
abbr,acronym {
border:0;
}
body {
font-family:"メイリオ","ＭＳ Ｐゴシック", Tahoma, Arial, sans-serif;
line-height: 1.7;
color: #333;
font-size: 14px;
text-align: left;
}
#container{
width:740px;
border:solid 2px #6FF;
margin:0 auto;
}
/*---------------------- nav はじめ-------------------------*/
li{
float:left;
list-style-type:none;
}
#nav{
width:740px;
height:33px;
background-color:#6F6;
background-image:url(images-12/global_nav_bg.gif);
}
a{
display:block;
width:94px;
height:33px;
text-decoration:none;
}
#top{
background-image:url(images-12/global_nav.gif);
}
#solution{
background-image:url(images-12/global_nav.gif);
background-position:-94px 0;
}
#battle-result{
background-image:url(images-12/global_nav.gif);
background-position:-188px 0;
}
#partner{
background-image:url(images-12/global_nav.gif);
background-position:-282px 0;
}
#custamer{
background-image:url(images-12/global_nav.gif);
background-position:-376px 0;
}
#histry{
background-image:url(images-12/global_nav.gif);
background-position:-470px 0;
}
#main-space{
width:740px;
height:272px;
}
#contact{
background-image:url(images-12/global_nav.gif);
background-position:-564px 0;
}
span{
visibility:hidden;
}
#top a:hover{
background-image:url(images-12/global_nav.gif);
background-position:0 -66px;
}
#solution a:hover{
background-image:url(images-12/global_nav.gif);
background-position:-94px -66px;
}
#battle-result a:hover{
background-image:url(images-12/global_nav.gif);
background-position:-188px -66px;
}
#partner a:hover{
background-image:url(images-12/global_nav.gif);
background-position:-282px -66px;
}
#custamer a:hover{
background-image:url(images-12/global_nav.gif);
background-position:-376px -66px;
}
#histry a:hover{
background-image:url(images-12/global_nav.gif);
background-position:-470px -66px;
}
#contact a:hover{
background-image:url(images-12/global_nav.gif);
background-position:-564px -66px;
}
/*------------------------- nav おわり -------------------------------*/
#content{
width:500px;
height:600px;
float:left;
}
#sidebar{
width:240px;
height:550px;
float:right;
}
#sub-header-1{
width:500px;
height:42px;
background-image:url(images-12/title_bg.gif);
}
.sub-content{
border-bottom:solid 2px #6FF;
width:460px;
margin:0 auto;
}
#about{
background-image:url(images-12/title_about.gif);
background-repeat:no-repeat;
}
h2{
font-size:20px;
font-weight:bold;
line-height:1.2;
margin-top:20px;
margin-left:20px;
}
.explanation{
margin-top:20px;
}
.warp{
background-image:url(images-12/arrow.gif);
background-repeat:no-repeat;
width:500px;
height:15px;
margin-left:20px;
padding-left:15px;
margin-top:15px;
margin-bottom:15px;
}
.warp a{
width:500px;
height:15px;
}
#sidebar-dl{
border-left:solid 2px #6FF;
}
#sidebar-header{
width:240px;
height:42px;
background-image:url(images-12/title_bg.gif);
}
#sidebar-dl{
padding:10px;
}
dd{
margin-bottom:15px;
font-weight:bold;
}
dt{
font-weight:bold;
}
#release{
background-image:url(images-12/title_news.gif);
background-repeat:no-repeat;
}
#footer{
background-image:url(images-12/global_nav_bg.gif);
width:740px;
height:33px;
clear:both;
}
address{
background-image:url(images-12/copyright.gif);
background-repeat:no-repeat;
margin-left:200px;
}
