Webデザインの勉強と製作 | あかとんぼ

フェリカテクニカルアカデミーの学習をベースに、Webについての勉強と製作の過程をまとめています。

[HTML][CSS][自由課題]企業系サイトを制作①

HTML CSS 制作物

サイト説明

  • 授業課題で制作した企業サイト
  • 写真を自由に選び、それを元にカラー設計
  • 写真は今回パブリックドメインのものを使用
  • テーマカラー青、アソートカラーオレンジ
  • バリデーション済


f:id:akatonbo_web:20150506214859j:plain

ソースコード

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>サンプルスタイルシートカンパニー</title>
<link rel="stylesheet" href="style.css">
</head>

<body>
<div id="container">
<div id="header">
<h1>サンプルスタイルシートカンパニー</h1>
<div id="nav">
<ul>
<li id="top"><a href="#">トップページ</a></li>
<li id="solution"><a href="#">ソリューション</a></li>
<li id="archive"><a href="#">実績紹介</a></li>
<li id="pertners"><a href="#">パートナー</a></li>
<li id="customers"><a href="#">カスタマー</a></li>
<li id="company"><a href="#">会社概要</a></li>
<li id="contact"><a href="#">お問い合わせ</a></li>
</ul>
</div>
<p>あなたにとっての最高のパートナーであるために</p>
</div>
<div id= "wrapper">
<div id= "content">
<h2>弊社について</h2>
<h3>スタイルシートによるレイアウトで、表現力と機能性が共存したサイトを構築。</h3>
<p>サンプルスタイルシートカンパニーでは、ウェブサイトの構築にスタイルシートによるレイアウトを採用しています。そのため、視覚的に美しい表現力だけでなく、ユーザーにとって使いやすい機能性とを合わせ持ったウェブサイトを提供することができます。</p>
<p class="border"><a href="#">ソリューションへ</a></p>
<h3 id="success">ウェブサイトを成功に導く、構造設計とインターフェース構築を武器に。</h3>
<p>100件あまりのウェブサイト構築経験から培った企画・開発力をバックボーンにもつ、サンプルスタイルシートカンパニー。競争に勝ち抜くための構造設計と、インターフェース構築を武器に、お客様のウェブサイトを成功に導くお手伝いをします。</p>
<p class="border"><a href="#">実績紹介へ</a></p>
</div>
<div id="sidebar">
<h2>ニュースリリース</h2>
<dl>
<dt><a href="#">2015年3月23日</a></dt>
<dd>サンプルスタイルシートカンパニーの<br>ウェブサイトがリニューアルしました。</dd>
<dt><a href="#">2015年3月23日</a></dt>
<dd>サンプルスタイルシートカンパニーの<br>ウェブサイトがリニューアルしました。</dd>
<dt><a href="#">2015年3月23日</a></dt>
<dd>サンプルスタイルシートカンパニーの<br>ウェブサイトがリニューアルしました。</dd>
<dt><a href="#">2015年3月23日</a></dt>
<dd>サンプルスタイルシートカンパニーの<br>ウェブサイトがリニューアルしました。</dd>
<dt><a href="#">2015年3月23日</a></dt>
<dd>サンプルスタイルシートカンパニーの<br>ウェブサイトがリニューアルしました。</dd>
</dl>
</div>
</div>
</div>
<div id="footer">
<p>Copyright © Sample Stylesheet Company All Rights Reserved.</p>
<ul>
<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 class="last"><a href="#">お問い合わせ</a></li>
</ul>
</div>
</body>
</html>



@charset "UTF-8";

/* reset */
html, body, div, h1, h2, h3, h4, h5, h6,p, ul, ol, li, dl, dt, dd {
  margin: 0;
  padding: 0;
  line-height: 1.0;
  font-family:
    "Lucida Grande",
    "Hiragino Kaku Gothic ProN",
    Meiryo, 
    sans-serif;
}
ul, dl {
  list-style: none;
}
a {
  text-decoration: none;
}
img {
  border: 0;
}
body {
  font-size:16px;
  background: #e8e3dc url(img/top_bg.png) repeat-x;
}
#container {
  width: 980px;
  margin: 0 auto;
  background: white;
}
#header{}
#header h1{
  height: 75px;
  overflow:hidden;
  text-indent: 100%;
  white-space: nowrap;
  margin-left:10px;
  background:url(img/logo.png) center left no-repeat;
}
#nav{
    margin-bottom:20px;
}
#nav ul{
  overflow: hidden;
  width: 980px;
}
#nav li{
  float:left;
  width:140px;
  height: 50px;
}
#nav li a{
  line-height:50px;
  display: block;
  white-space: nowrap;
  text-indent: 100%;
  overflow: hidden;
  background:url(img/nav.png) no-repeat 0px 0px;
}
#nav li#solution a{
  background:url(img/nav.png) no-repeat -140px 0px;
}
#nav li#archive a{
  background:url(img/nav.png) no-repeat -280px 0px;
}
#nav li#pertners a{
  background:url(img/nav.png) no-repeat -420px 0px;
}
#nav li#customers a{
  background:url(img/nav.png) no-repeat -560px 0px;
}
#nav li#company a{
  background:url(img/nav.png) no-repeat -700px 0px;
}
#nav li#contact a{
  background:url(img/nav.png) no-repeat -840px 0px;
}
#nav li#top a:hover{
  background:url(img/nav.png) no-repeat 0px -50px;
}
#nav li#solution a:hover{
  background:url(img/nav.png) no-repeat -140px -50px;
}
#nav li#archive a:hover{
  background:url(img/nav.png) no-repeat -280px -50px;
}
#nav li#pertners a:hover{
  background:url(img/nav.png) no-repeat -420px -50px;
}
#nav li#customers a:hover{
  background:url(img/nav.png) no-repeat -560px -50px;
}
#nav li#company a:hover{
  background:url(img/nav.png) no-repeat -700px -50px;
}
#nav li#contact a:hover{
  background:url(img/nav.png) no-repeat -840px -50px;
}
#header p{
    width: 940px;
    height:320px;
    margin:0 auto;
    background:url(img/title.jpg) no-repeat left top;
    white-space: nowrap;
    text-indent: 100%;
    overflow: hidden;
    margin-bottom: 20px;
}
/* wrapper */
#wrapper{
  width: 940px;
  margin: 0px auto;
  overflow: hidden;
  }
/* content */
#content{
  width: 630px;
  float: left;
  }
#content h2{
  white-space: nowrap;
  text-indent: 100%;
  overflow: hidden;
  height: 42px;
  background: url(img/about.png) no-repeat top left;
  margin-bottom: 10px;
}
#content h3{
  white-space: nowrap;
  text-indent: 100%;
  overflow: hidden;
  background: url(img/h3_1.png) no-repeat top left;
  height: 38px;
  margin: 18px 0 15px 14px;
}
#content h3#success{
  background: url(img/h3_2.png) no-repeat top left;
}
#content p{
  font-size: 0.9em;
  margin: 0 32px 5px 14px;
  line-height: 1.6;
}
#content p a{
  color: #006EB3;
  background: url(img/icon.png) no-repeat left 2px;
  padding-left: 20px;
}
#content p.border{
  border-bottom: solid 1px #AAA;
  padding-bottom: 10px;
}
/* sidebar */
#sidebar{
  width: 308px;
  float: right;
  border-left: 1px dotted #AAA;
  margin-bottom: 20px;
  }
#sidebar h2{
  white-space: nowrap;
  text-indent: 100%;
  overflow: hidden;
  height: 42px;
  background: url(img/release.png) no-repeat top right;
  margin-bottom: 10px;  
}
#sidebar dl{
  margin: 20px 0 0 30px;
}
#sidebar dt{
  font-size: 0.85em;
  margin-bottom: 8px;   
}
#sidebar dt a{
  font-weight: bold;
  color: #ee9b20;    
}
#sidebar dd{
  margin: 0 15px; 
  font-size: 0.8em;
  line-height: 1.5;
  margin-bottom: 15px;   
}
/* footer */
#footer{
  padding-top: 20px;
  color: white;
  height: 160px;
  background: #262219;
}
#footer p{
  color: #AAA;
  font-size: 0.8em;
  width: 960px;
  margin: 0 auto;
  text-align: center;
  margin-bottom: 20px;
}
#footer ul{
  font-size: 0.9em;
  width: 960px;
  margin: 0 auto;
  text-align: center;
}
#footer li{
  display: inline;
  padding: 0px 10px 0px 5px;
  border-right: 1px solid white;
}
#footer li.last{
  border-right: none;   
}
#footer li a{
  color: white;   
}
#footer ul li a:hover,#footer ul li a:active{
  color: #FFBE5E;
}