休み　テスト課題の修正とHTML5へ書き換え

f:id:chawannmusi:20160222160815p:plain

・会社ロゴ位置の修正とニュースリリースのリンク部分とfooterのnavの開き

メイン画像とHPの色合いの関係を修正

・html5の新要素へ書き換え

f:id:chawannmusi:20160222161016p:plain

html--------------------------------------------------------------------------------------

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>豊永希_0120 クラス_習熟度試験１回目提出</title>
<link rel="stylesheet" href="style.css">
</head>

<body>
<div id="container">

<header>
<h1 class="logo">サンプルスタイルシートカンパニー</h1>
<nav>
<ul>
<li class="top"><a href="#">トップページ</a></li>
<li class="solutions"><a href="#">ソリューション</a></li>
<li class="achievement"><a href="#">実績紹介</a></li>
<li class="partner"><a href="#">パートナー</a></li>
<li class="customers"><a href="#">カスタマー</a></li>
<li class="company"><a href="#">会社概要</a></li>
<li class="contact"><a href="#">お問い合わせ</a></li>
</ul>
</nav>
</header>

<section class="content">
<h1 class="img">新しい価値をあなたに</h1>

<div id="wrapper">

<section class="main">
<h2><img src="img/h2a.png" alt="弊社について"></h2>

<div class="box">
<h3><img src="img/h3a.png" alt="スタイルシートによるレイアウトで、表現力と機能性が共存したサイトを構築。"></h3>
<p>サンプルスタイルシートカンパニーでは、ウェブサイトの構築にスタイルシートによるレイアウトを採用しています。そのため、視覚的に美しい表現力だけでなく、ユーザーにとって使いやすい機能性とを合わせ持ったウェブサイトを提供することができます。</p>
<p class="btn"><a href="#" class="btn2">ソリューションへ</a></p>
</div>

<div class="box">
<h3><img src="img/h3b.png" alt="ウェブサイトを成功に導く、構造設計とインターフェース構築を武器に">。</h3>
<p>100件あまりのウェブサイト構築経験から培った企画・開発力をバックボーンにもつ、サンプルスタイルシートカンパニー。競争に勝ち抜くための構造設計と、インターフェース構築を武器に、お客様のウェブサイトを成功に導くお手伝いをします。</p>
<p class="btn"><a href="#" class="btn2">実績紹介へ</a></p>
</div>
</section>

<section class="side">
<h2><img src="img/h2b.png" alt="ニュースリリース"></h2>
<dl>
<dt><a href="#">2016年2月1日</a></dt>
<dd>サンプルスタイルシートカンパニーのウェブサイトがリニューアルしました。</dd>
<dt><a href="#">2016年2月1日</a></dt>
<dd>サンプルスタイルシートカンパニーのウェブサイトがリニューアルしました。</dd>
<dt><a href="#">2016年2月1日</a></dt>
<dd>サンプルスタイルシートカンパニーのウェブサイトがリニューアルしました。</dd>
<dt><a href="#">2016年2月1日</a></dt>
<dd>サンプルスタイルシートカンパニーのウェブサイトがリニューアルしました。</dd>
<dt><a href="#">2016年2月1日</a></dt>
<dd>サンプルスタイルシートカンパニーのウェブサイトがリニューアルしました。</dd>
</dl>
</section>
</div>
</section>
</div>

<footer>
<p><small>Copyright © Sample Stylesheet Company All Rights Reserved.</small></p>

<ul class="nav2">
<li><a href="#">トップページ</a></li>
<li><a href="#">ソリューション</a></li>
<li><a href="#">実績紹介</a></li>
<li><a href="#">パートナー</a></li>
<li><a href="#">カスタマー</a></li>
<li><a href="#">会社概要</a></li>
<li><a href="#">お問い合わせ</a></li>
</ul>

</footer>

</body>
</html>

-----------------------------------------------------------------------------------------------

stylesheet--------------------------------------------------------------------------------

@charset "UTF-8";

/* reset */
html, body, h1, h2, h3, p, ul, li, dl, dt, dd {
margin: 0;
padding: 0;
line-height: 1.0;
font-family:
"Hiragino Kaku Gothic ProN",
Meiryo,
sans-serif;
}

ul {
list-style: none; /* マーカーを消す */
}
a {
text-decoration: none; /* 下線を消す */
}
img {
vertical-align: bottom
}
/*body*/

body {
font-size: 16px;
background: url(img/bg.png) repeat-x left top #f0f7ff;
}

/*layout*/

h1, nav li a, #container .img {
white-space: nowrap;
text-indent: 100%;
overflow: hidden;
}

#container {
width:1008px;
margin:0 auto;
background: #FFF;
}

header {
width: 1008px;
background: #FFF
margin: 0 auto;
padding-top: 20px;
}

#wrapper {
width: 968px;
overflow: hidden;
}

/*logo*/

.logo {
width: 290px;
line-height: 38px;
background: url(img/logo.png) no-repeat left top;
margin-left: 20px;
margin-bottom: 20px;
}

/*nav*/
nav {
background:#b6da6c;
}

nav ul {
width: 1008px;
margin: 0 auto;
overflow: hidden;
}

nav li {
float: left;
}

nav li a {
display: block;
width: 144px;
line-height: 50px;
background: #FFF url(img/btn.png) no-repeat 0 0;
}
nav li.top a { background: #FFF url(img/btn.png) no-repeat left top; }
nav li.top a:hover { background: #FFF url(img/btn.png) no-repeat left -60px; }
nav li.solutions a { background: #FFF url(img/btn.png) no-repeat -144px 0; }
nav li.solutions a:hover { background: #FFF url(/img/btn.png) no-repeat -144px -60px; }
nav li.achievement a { background: #FFF url(img/btn.png) no-repeat -288px 0; }
nav li.achievement a:hover { background: #FFF url(img/btn.png) no-repeat -288px -60px; }
nav li.partner a { background: #FFF url(img/btn.png) no-repeat -432px 0; }
nav li.partner a:hover { background: #FFF url(img/btn.png) no-repeat -432px -60px; }
nav li.customers a { background: #FFF url(img/btn.png) no-repeat -576px 0; }
nav li.customers a:hover { background: #FFF url(img/btn.png) no-repeat -576px -60px; }
nav li.company a { background: #FFF url(img/btn.png) no-repeat -720px 0; }
nav li.company a:hover { background: #FFF url(img/btn.png) no-repeat -720px -60px; }
nav li.contact a { background: #FFF url(img/btn.png) no-repeat -864px 0; }
nav li.contact a:hover { background: #FFF url(img/btn.png) no-repeat -864px -60px; }

/*content*/

.content {
width: 968px;
padding: 20px;
margin: 0 auto;
}

.img {
width: 968px;
height: 300px;
background: url(img/head.png) no-repeat left top;
margin-bottom: 20px;
}

/*wrapper*/

.main {
width: 646px;
float: left;
}
.side {
width: 280px;
padding: 0 0 20px 20px;
border-left: 1px solid #999;
float: right;
}

/*main*/

.main h2 {
width: 646px;
height: 42px;
background: url(img/h2bg.png) repeat-x #FFF;
}

.box {
margin:20px;
border-bottom: 1px solid #999;
font-size: 16px;
}

.box h3{
margin-bottom: 15px;
}

.box p {
line-height: 1.5;
margin-bottom: 10px;
}

.btn{
padding-left: 20px;
background: url(img/arrow.png) no-repeat left center;
}

.btn2 {
color: #F90;
}

.btn2:hover {
color: #4682b4;
}

/*side*/
.side h2 {
width: 280px;
height: 42px;
margin-bottom: 20px;
background: url(img/h2bg.png) repeat-x #FFF;
}

dl {
padding: 10px;
line-height: 1.5;
}

dt {
font-weight: bold;
margin-bottom: 10px;
}

dt a {
color: #cc7001;
}

dt a:hover {
color: #4682b4;
}

dd {
margin-bottom: 10px;
padding-left: 16px;
font-size: 13px;
line-height: 1.5;
}

/*footer*/
footer {
background: #999;
color: #FFF;
}
footer p {
text-align: center;
padding: 20px;
}

.nav2 {
width: 740px;
margin:0 auto;
overflow: hidden;
padding-bottom: 30px;
}

.nav2 li{
float:left;
font-size: 12px;
width: 100px;
border-left: 1px solid #FFF;
text-align: center;
}
.nav2 li:first-child {
border-left: none;
}

.nav2 li a {
color: #FFF;
}

.nav2 li a:hover{
color: #ff9900;
}

-------------------------------------------------------------------------------

outline

f:id:chawannmusi:20160222161348p:plain

WEB、始めました

半年間WEB制作の学校に通います。その記録。

休み　テスト課題の修正とHTML5へ書き換え