全部組み合わせてページにしてみる

8.全部組み合わせてページにしてみる

サンプルなトップページ

では、今までにやった内容を組み合わせてサンプルページを作ってみます。

株式会社サンプル商事

明日の未来を支えるサンプル商事のホームページ

どうでしょうか？今までの組み合わせでこのような基本的なホームページが作成できます。
あとは写真やイラストなどを使ってデザインしていけば、もう立派なホームページになるでしょう。

ではこのページのソースコードを覗いてみましょう。

						<style type="text/css">
.sample-base {
  border: 3px solid #ccc;
}
.base-header {
  background-color: #0063a4;
  height: 80px;
  position: relative;
  margin-bottom: 10px;
}
.box1 {
  position: absolute;
  top: 20px;
  left: 20px;
  font-size: 26px;
  color: #fff;
}
.box2 {
  position: absolute;
  top: 5px;
  right: 10px;
  font-size: 13px;
  color: #fff;
}
.base-menu {
  text-align: center;
  font-size: 0px;
  margin-bottom: 10px;
}
.base-menu li {
  width: 197px;
  background-color: #eee;
  text-align: center;
  display: inline-block;
  font-size: 16px;
  margin: 0 3px;
}
.base-menu li a {
  display: block;
  padding: 10px 0;
  text-decoration: none;
  color: #333;
}
.base-content {
  background-color: #f0f0f0;
  height: 600px;
}
.base-footer {
  background-color: #ccc;
  height: 130px;
  position: relative;
}
.base-footer .comp {
  position: absolute;
  top: 20px;
  left: 10px;
  line-height: 120%;
  font-size: 13px;
}
.base-footer .comp .cname {
  font-size: 16px;
  margin-bottom: 5px;
}
.base-footer .links {
  position: absolute;
  top: 80px;
  left: 10px;
}
.base-footer .copyrights {
  position: absolute;
  bottom: 5px;
  right: 10px;
  font-size: 13px;
  color: #888;
}
</style>

<div class="sample-base">
  <div class="base-header">
    <div class="box1">株式会社サンプル商事</div>
    <div class="box2">明日の未来を支えるサンプル商事のホームページ</div>
  </div>
  <ul class="base-menu">
    <li><a href="index.html">ホーム</a></li>
    <li><a href="products.html">製品紹介</a></li>
    <li><a href="company.html">会社概要</a></li>
    <li><a href="contact.html">お問い合わせ</a></li>
  </ul>
  <div class="base-content">
  </div>
  <div class="base-footer">
    <div class="comp">
      <div class="cname">株式会社サンプル商事</div>
      〒225-0024 神奈川県横浜市青葉区市ケ尾町1153-4-405<br>
      045-979-0106
    </div>
    <div class="links">｜<a href="#">ホーム</a>｜<a href="#">製品紹介</a>｜<a href="#">会社概要</a>｜<a href="#">お問い合わせ</a>｜</div>
    <div class="copyrights">Copyright(C)2015 SAMPLE SHOJI All Rights Reserved.</div>
  </div>
</div>
						
					

どうでしょうか？
おそらくそれほど難しいタグやプロパティは出て来ていないと思います。
要はデザインとは、隙間や色や大きさをバランスよく配置することでしっかりしてくるものなのですね。

無料で作成講座へ

「7.レイアウトを構成するためのタグ」へ戻る

全部組み合わせてページにしてみる～無料ホームページの作り方～

無料ホームページの作り方
弊社では「自分で作成してみたい！」という方も応援しています

8.全部組み合わせてページにしてみる

サンプルなトップページ

無料ホームページの作り方弊社では「自分で作成してみたい！」という方も応援しています

8.全部組み合わせてページにしてみる

サンプルなトップページ

無料ホームページの作り方
弊社では「自分で作成してみたい！」という方も応援しています