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

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

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

HTML CSS 制作物

説明

自主課題として制作した企業サイト
コピー、ロゴ等設計
写真は今回パブリックドメインのものを使用
テーマカラー青、アソートカラーピンク・黄
バリデーション済

f:id:akatonbo_web:20150506220444j:plain

ソースコード

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Sample-design Company</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="container">

<div id="header">
  <h1>Sample-design Company</h1>
<div id="wrapper1">
  <p><a href="#">English</a> | <a href="#">お問い合わせ</a> | <a href="#">サイトマップ</a></p>
  <p><img src="img/size.png" alt="文字サイズ"></p>
</div>
<div id="nav">
<ul>
  <li><a href="#" id="kigyou">企業情報</a></li>
  <li><a href="#" id="kokyaku">株主顧客向け情報</a></li>
  <li><a href="#" id="CSR">CSR情報</a></li>
  <li><a href="#" id="saiyou">採用情報</a></li>
  <li><a href="#" id="official">オフィシャルサイト</a></li>
</ul>
</div>
<img  src="img/mainImage.jpg" alt="いまを越える">
</div>

<div id="contents">
<div id="ir">
<h2>投資家情報<a href="#"><img src="img/list_ir.png" alt=""></a></h2>
  <dl>
    <dt>2015/05/01</dt>
    <dd class="category_csr">平成２７年度３月期　CSR情報を更新しました。</dd>
    <dt>2015/04/01</dt>
    <dd class="category_ir">IR情報を更新しました。</dd>
    <dt>2015/03/01</dt>
    <dd class="category_csr">平成２７年度２月期　CSR情報を更新しました。</dd>
    <dt>2015/02/01</dt>
    <dd class="category_kessan">決算情報を更新しました。</dd>
  </dl>
</div>
<div id="reliece">
<h2>リリース情報<a href="#"><img src="img/list_reliece.png" alt=""></a></h2>
  <dl>
    <dt>2015/05/01</dt>
    <dd class="category_ev">池袋プロジェクト、新規サービスをリリース！</dd>
    <dt>2015/04/01</dt>
    <dd class="category_ev">平成２７年度４月　月間スケジュールを更新しました。</dd>
      <dt>2015/03/01</dt>
    <dd class="category_ev">平成２７年度３月　月間スケジュールを更新しました。</dd>
    <dt>2015/02/01</dt>
    <dd class="category_ev">平成２７年度２月　月間スケジュールを更新しました。</dd>
  </dl>
</div>
<div id="info">
<h2>INFORMATION</h2>
  <dl>
    <dt>2015/05/01</dt>
    <dd class="category_other">トップページを更新しました。</dd>
    <dt>2015/04/01</dt>
    <dd class="category_other">オフィシャルサイトを更新しました。</dd>
      <dt>2015/03/01</dt>
    <dd class="category_other">採用情報を更新しました。</dd>
  </dl>
</div>
<div id="kabuka">
<h2>株価情報</h2>
<table>
  <tr><th>株価推移</th><th>2015/4</th><th>2015/3</th><th>2015/2</th><th>2015/1</th></tr>
  <tr><th>最高</th><td>500</td><td>500</td><td>500</td><td>500</td></tr>
  <tr><th>最低</th><td>300</td><td>300</td><td>300</td><td>300</td></tr>
</table>
<table>
  <tr><th>PER,PCFR,PBR</th><th>2015/4</th><th>2015/3</th><th>2015/2</th><th>2015/1</th></tr>
  <tr><th>株価収益率（PER）（倍）</th><td>-</td><td>10.0</td><td>10.0</td><td>10.0</td></tr>
  <tr><th>株価キャッシュ・フロー倍率（PCFR）（倍）</th><td>2.0</td><td>2.0</td><td>2.0</td><td>2.0</td></tr>
</table>
<p><a href="#">株価チャート</a></p>
</div>
</div>

<div id="footer">
<p><a href="#">ご利用規約</a>　｜　<a href="#">個人情報保護方針</a>　｜　<a href="#">よくあるご質問</a>　｜　<a href="#">お問い合わせ</a>　｜　<a href="#">サイトマップ</a></p>
<p id="copy">© Copyright 2015 Samle-design Company. これは練習用に作成した架空のウェブサイトです。</p>
</div>
</div>
</body>
</html>

@charset "utf-8";
html, div, body, h1, h2, h3, h4, p, dl, dt  dl{
  margin: 0;
  padding: 0;
  line-height: 1.0;
  font-family:
    "Hiragino Kaku Gothic ProN",
    Meiryo,
    sans-serif;
}
img {
  border: 0;
}
li {
  list-style: none;
}
a {
  text-decoration: none;
}
/* body */
body {
  font-size: 16px;
  background: url(img/back_bottom.png) repeat-x left bottom;
}
table, th, td {
  border-collapse: collapse;
  border: 1px solid #333;
}
/* container */
#container {
  width: 980px;
  margin: 0 auto;
}
/* header */
#header{
  width: 980px;
  overflow:hidden;
  margin-bottom: 20px;
}
#header h1{
  float: left;
  width: 580px;
  height: 80px;
  background:url(img/logo.png) no-repeat 25px 16px;
  white-space: nowrap;
  text-indent: 100%;
  overflow: hidden;
}
#wrapper1{
  width: 400px;
  float: right;
  height: 80px;
  text-align:right;
  margin-bottom:3px;
}
#wrapper1 p{
  font-size: 0.8em;
  color: #045E98;
  line-height: 40px;
  height: 40px;
}
#wrapper1 p a{
  color: #034E7E;
}
#wrapper1 p a:hover{
  color: #009DE2
}
/* nav */
#nav {
  clear: both;
  width: 980px;
  height: 33px;
  margin-bottom:20px;
}
#nav ul{
  width: 980px;
  overflow:hidden;
  margin-left:-40px;
}
#nav ul li a{
  float: left;
  width: 195px;
  margin-right:1px;
  height: 33px;
  background:url(img/nav.png) left top;
  white-space:nowrap;
  text-indent:100%;
  overflow: hidden;
}
#nav ul li a:hover{
  background:url(img/nav.png) left  33px;
}
#nav ul li a#kokyaku{
  background:url(img/nav.png) -196px  0px;
}
#nav ul li a#kokyaku:hover{
  background:url(img/nav.png) -196px  33px;
}
#nav ul li a#CSR{
  background:url(img/nav.png) -392px  0px;
}
#nav ul li a#CSR:hover{
  background:url(img/nav.png) -392px  33px;
}
#nav ul li a#saiyou{
  background:url(img/nav.png) -588px  0px;
}
#nav ul li a#saiyou:hover{
  background:url(img/nav.png) -588px  33px;
}
#nav ul li a#official{
  background:url(img/nav.png) -784px  0px;
}
#nav ul li a#official:hover{
  background:url(img/nav.png) -784px 33px;
}
/* contents */
#contents{
  width: 980px;
  overflow: hidden;
  margin-bottom: 20px;
}
#ir {
  float: left;
  width: 475px;
  margin-bottom:10px;
  overflow:hidden;
}

#contents h2{
  float: left;
  width: 470px;
  height: 30px;
  border-left: 8px solid #f3577c;
  border-bottom: 1px solid #a3adbb;
  background:url(img/h2_ir.png) no-repeat 5px 5px;
  white-space: nowrap;
  text-indent: 100%;
  overflow: hidden;
  margin-bottom: 10px; 
}
#contents h2 img{
  float: right;
  display: block;
  float: right;
  margin: -15px 10px 0 0;
}
dl{
  width: 470px;
  font-size: 0.8em;
  overflow: hidden;
}
dt{
  background:url(img/icon.png) no-repeat left 6px;
  padding-left:12px;
  clear: both;
  width: 53px;
  float: left;
  line-height:1.6;
}
dd{
  width: 265px;
  padding-left: 100px;
  float: right;
  line-height:1.6;
  margin-bottom:10px;
}
dd.category_csr{
  background: url(img/category_csr.png) no-repeat left 2px;
}
dd.category_ir{
  background: url(img/category_ir.png) no-repeat left 2px;
}
dd.category_other{
  background: url(img/category_other.png) no-repeat left 2px;
}
dd.category_kessan{
  background: url(img/category_kessan.png) no-repeat left 2px;
}
dd.category_ev{
  background: url(img/category_ev.png) no-repeat left 2px;
}

#reliece {
  float: right;
  width: 475px;
  margin-bottom: 10px;
}
#reliece h2{
  border-left: 8px solid #f3c008;
  background:url(img/h2_reliece.png) no-repeat 5px 5px;
}
#info{
  clear: both;
  float: left;
  width: 475px;
  margin-bottom: 10px;
}
#info h2{
  border-left: 8px solid #045e98;
  background:url(img/h2_info.png) no-repeat 5px 5px;
}
#kabuka {
  font-size: 0.8em;
  float: right;
  width: 475px;
  margin-bottom: 10px;
}
#kabuka h2{
  border-left: 8px solid #045e98;
  background:url(img/h2_stock.png) no-repeat 5px 5px;
}
#kabuka table{
  margin-left: 8px;
  width: 445px;
  text-align:center;
  line-height:1.6;
  margin-bottom:10px;
}
#kabuka table th{
  background-color: #eee
}
#kabuka p a{
  padding-left: 12px;
  background:url(img/icon.png) no-repeat left 3px;
  text-decoration:underline;
}
/* footer */
#footer {
  color: white;
  height: 30px;
  font-size:0.6em;
}
#footer p{
  line-height: 30px;
  float: left;
  margin: 0 auto;
  width: 490px;
}
#footer p#copy{
  text-align: right;
}
#footer a{
  color: white;
}
#footer a:hover{
  color: #bcddef;
}