WEBデザインの勉強

WEB制作初心者が1から勉強するブログ。

HTML/CSSのテスト課題

f:id:mmmmofu:20160921024050j:plain

訓練校1ヵ月目の課題
架空の会社サイトの制作(トップページのみ)
メインの画像の作成、スプライトナビゲーションの制作と
それに合わせパーツの色やサイトの全体の色彩設計をする

http://efu.sakura.ne.jp/web/company/

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>企業系サイト</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="container">
<div id="header">
<h1><img src="img/logo.png" alt="サンプルスタイルシートカンパニー"></h1>
<div id="nav">
<ul>
<li id="top"><a href="#">トップページ</a></li>
<li id="sol"><a href="#">ソリューション</a></li>
<li id="ach"><a href="#">実績紹介</a></li>
<li id="par"><a href="#">パートナー</a></li>
<li id="cus"><a href="#">カスタマー</a></li>
<li id="com"><a href="#">会社概要</a></li>
<li id="con"><a href="#">お問い合わせ</a></li>
</ul>
</div><!-- /#nav -->
<img src="img/billboard.jpg" alt="あなたにとっての最高のパートナーであるために">
</div><!-- /#header -->
<div id="wrapper">
<div id="content">
<h2><img src="img/h2a.png" alt="弊社について"></h2>
<h3><img src="img/h3a.png" alt="スタイルシートによるレイアウトで、表現力と機能性が共存したサイトを構築。"></h3>
<div class="section">
<p>サンプルスタイルシートカンパニーでは、ウェブサイトの構築にスタイルシートによるレイアウトを採用しています。そのため、視覚的に美しい表現力だけでなく、ユーザーにとって使いやすい機能性とを合わせ持ったウェブサイトを提供することができます。</p>

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

<p class="link"><a href="#">実績紹介へ</a></p>
</div><!-- /#section -->
</div><!-- /#content -->
<div id="sidebar">
<h2><img src="img/h2b.png" alt="ニュースリリース"></h2>
<dl>
<dt><a href="#">2015年3月23日</a></dt>
<dd>サンプルスタイルシートカンパニーのウェブサイトがリニューアルしました。</dd>
<dt><a href="#">2015年3月23日</a></dt>
<dd>サンプルスタイルシートカンパニーのウェブサイトがリニューアルしました。</dd>
<dt><a href="#">2015年3月23日</a></dt>
<dd>サンプルスタイルシートカンパニーのウェブサイトがリニューアルしました。</dd>
<dt><a href="#">2015年3月23日</a></dt>
<dd>サンプルスタイルシートカンパニーのウェブサイトがリニューアルしました。</dd>
<dt><a href="#">2015年3月23日</a></dt>
<dd>サンプルスタイルシートカンパニーのウェブサイトがリニューアルしました。</dd>
</dl>
</div><!-- /#sidebar -->
</div><!-- /#wrapper -->
</div><!-- /#container -->
<div id="footer">
<p><small>Copyright © Sample Stylesheet Company All Rights Reserved.</small></p>
</div><!-- /#footer -->

</body>
</html>
@charset "utf-8";
/* CSS Document */

/* reset */
html,body,div,ul,li,dl,dt,dd,h1,h2,h3,p {
  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;
}

/* body */
body {
  font-size: 16px;
  color: #333;
  background-color: #CACE82;
}

#container {
  width: 980px;
  margin: 0 auto;
  background-color: #FFF;
}
#wrapper{
  overflow: hidden;
  padding-bottom: 20px;
}
#content {
  width: 600px;
  float: left;
  margin-left: 20px;
}
#sidebar {
  width: 290px;
  float: right;
  margin-right: 20px;
}
#header img {
  padding: 20px;
}
#footer {
  height: 140px;
  text-align: center;
  width: 100%;
  background-color: #2b2d04;
 color: #FFF;
}
#footer p {
 padding-top: 20px;
}

#content h3 {
  padding: 0 20px;
}
#content p {
  padding: 10px 20px 0 20px;
  font-size: 14px;
  line-height: 1.6;
}
.section {
  border-bottom: #CCC solid 1px;
  margin-bottom: 20px;
}
#content h2 {
  margin-bottom: 20px;
}
#content p a {
  padding-left: 20px;
    color: #C90;
}
p.link {
  background: url(img/btn.png) no-repeat 20px 12px;
    margin-bottom: 10px;
}
#sidebar dl {
  padding: 0 20px 0 20px;
  font-size: 13px;
}
#sidebar dt a {
  color: #36F;
  font-weight: bold;
}
#sidebar dd {
  margin: 5px 0 10px 0;
  padding-left: 15px;
  line-height: 1.6;
}
#sidebar h2 {
  margin-bottom: 20px;
}
#nav li {
  float:left;
  width: 140px;
  height: 50px;
}
#nav li a {
  display: block;
  background: url(img/nav.png) no-repeat left top;
  line-height: 50px;
  white-space: nowrap;
  text-indent: 100%;
  overflow: hidden;
}
/* 疑似クラス */
#nav li#top a:hover {
  background: url(img/nav.png) no-repeat left -60px;
}
#nav li#sol a {
  background: url(img/nav.png) no-repeat -140px top;
}
#nav li#sol a:hover {
  background: url(img/nav.png) no-repeat -140px -60px;
}
#nav li#ach a {
  background: url(img/nav.png) no-repeat -280px top;
}
#nav li#ach a:hover {
  background: url(img/nav.png) no-repeat -280px -60px;
}
#nav li#par a {
  background: url(img/nav.png) no-repeat -420px top;
}
#nav li#par a:hover {
  background: url(img/nav.png) no-repeat -420px -60px;
}
#nav li#cus a {
  background: url(img/nav.png) no-repeat -560px top;
}
#nav li#cus a:hover {
  background: url(img/nav.png) no-repeat -560px -60px;
}
#nav li#com a {
  background: url(img/nav.png) no-repeat -700px top;
}
#nav li#com a:hover {
  background: url(img/nav.png) no-repeat -700px -60px;
}
#nav li#con a {
  background: url(img/nav.png) no-repeat -840px top;
}
#nav li#con a:hover {
  background: url(img/nav.png) no-repeat -840px -60px;
}