読者です 読者をやめる 読者になる 読者になる

Webデザインの勉強 ハロートレーニング 受講生のためのWebデザインの勉強補足ブログ

企業系サイト:トップページ

2カラムページ設計

f:id:web-0818:20170520224920p:plain

bodyの背景画像を設定する場合

f:id:web-0818:20170520223101p:plain

headerの背景画像を設定する場合

f:id:web-0818:20170520223658p:plain

定義

  • 全体は、.conatiner幅「980px」
  • ヘッダー情報とフッター情報の見栄えは、ブラウザ幅全体を利用する
  • 横幅「140px」ピクセルのナビゲーションボタンを7個作成
  • 高さは「50px」
  • 「トップページ TOPPAGE」「ソリューション SOLUTION」「実績紹介 ACHIEVEMENT」「パートナー PARTNERS」「カスタマー CUSTOMERS」「会社概要 COMPANY」「お問い合わせ CONTACT」
  • キャッチコピー「あなたにとって 最高のパートナー であるために。」
  • 色彩計画「基調色、強調色、アソートカラー」の3色は、事前に決定する
  • 大見出し、中見出しは画像にする
  • ページ遷移のための「矢印アイコン」は作成する
  • フッター部にもグローバルナビと同様のテキストリンクを作成する
  • テキストリンクは、すべて擬似クラスを設定する







サンプルスタイルシートカンパニー

    トップページ
    ソリューション
    実績紹介
    パートナー
    カスタマー
    会社概要
    お問い合わせ

あなたにとっての最高のパートナーであるために
弊社について
スタイルシートによるレイアウトで、表現力と機能性が共存したサイトを構築。

サンプルスタイルシートカンパニーでは、ウェブサイトの構築にスタイルシートによるレイアウトを採用しています。そのため、視覚的に美しい表現力だけでなく、ユーザーにとって使いやすい機能性とを合わせ持ったウェブサイトを提供することができます。

ソリューションへ
ウェブサイトを成功に導く、構造設計とインターフェース構築を武器に。

100件あまりのウェブサイト構築経験から培った企画・開発力をバックボーンにもつ、サンプルスタイルシートカンパニー。競争に勝ち抜くための構造設計と、インターフェース構築を武器に、お客様のウェブサイトを成功に導くお手伝いをします。

実績紹介へ
ニュースリリース

2017年05月1日
サンプルスタイルシートカンパニーのウェブサイトがリニューアルしました。
2017年05月1日
サンプルスタイルシートカンパニーのウェブサイトがリニューアルしました。
2017年05月1日
サンプルスタイルシートカンパニーのウェブサイトがリニューアルしました。
2017年05月1日
サンプルスタイルシートカンパニーのウェブサイトがリニューアルしました。
2017年05月1日
サンプルスタイルシートカンパニーのウェブサイトがリニューアルしました。

Copyright © Sample Stylesheet Company All Rights Reserved.



<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>課題 - スタイルシートカンパニー</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">

<header class="header">
<h1><img src="img/logo.png" alt="サンプルスタイルシートカンパニー"></h1>
</header>
<nav class="nav">
<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><a href="#">お問い合わせ</a></li>
</ul>
</nav>

<div class="content">
<h2><img src="img/main.png" alt="あなたにとっての最高のパートナーであるために"></h2>
<main class="main">
<h3><img src="img/h3_a.png" alt="弊社について"></h3>
<h4><img src="img/h4_a.png" alt="スタイルシートによるレイアウトで、表現力と機能性が共存したサイトを構築。"></h4>
<p>サンプルスタイルシートカンパニーでは、ウェブサイトの構築にスタイルシートによるレイアウトを採用しています。そのため、視覚的に美しい表現力だけでなく、ユーザーにとって使いやすい機能性とを合わせ持ったウェブサイトを提供することができます。</p>
<p class="more"><a href="#">ソリューションへ</a></p>
<h4><img src="img/h4_b.png" alt="ウェブサイトを成功に導く、構造設計とインターフェース構築を武器に。"></h4>
<p>100件あまりのウェブサイト構築経験から培った企画・開発力をバックボーンにもつ、サンプルスタイルシートカンパニー。競争に勝ち抜くための構造設計と、インターフェース構築を武器に、お客様のウェブサイトを成功に導くお手伝いをします。</p>
<p class="more"><a href="#">実績紹介へ</a></p>
</main>
<aside class="aside">
<h3><img src="img/h3_b.png" alt="ニュースリリース"></h3>
<dl>
<dt>2017年05月1日</dt>
<dd>サンプルスタイルシートカンパニーのウェブサイトがリニューアルしました。</dd>
<dt>2017年05月1日</dt>
<dd>サンプルスタイルシートカンパニーのウェブサイトがリニューアルしました。</dd>
<dt>2017年05月1日</dt>
<dd>サンプルスタイルシートカンパニーのウェブサイトがリニューアルしました。</dd>
<dt>2017年05月1日</dt>
<dd>サンプルスタイルシートカンパニーのウェブサイトがリニューアルしました。</dd>
<dt>2017年05月1日</dt>
<dd>サンプルスタイルシートカンパニーのウェブサイトがリニューアルしました。</dd>
</dl>
</aside>
</div><!-- /.content -->

</div><!-- /.container -->

<footer class="footer">
<p><small>Copyright &#169; Sample Stylesheet Company All Rights Reserved.</small></p>
</footer>

</body>
</html>



@charset "utf-8";

/* reset
----------------------------------------- */
html,body,h1,h2,h3,h4,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;
  color: #333;
  background: url(img/bg.png) repeat-x #E7EFF7;
}

/* layout
----------------------------------------- */
.container {
  width: 980px;
  margin: 0 auto;
  background: #FFF;
}
.wrapper {
  overflow: hidden;
}

/* header
----------------------------------------- */
.header {}
  .header>h1 {
    padding: 20px;
  }
  .nav {
    overflow: hidden;
  }
    .nav li {
      float: left;
    }
    .nav li>a {
      display: block;
      width: 140px;
      height: 50px;
      background: url(img/btn.png) no-repeat left top;
      white-space: nowrap;
      text-indent: 100%;
      overflow: hidden;
    }
.content{
  overflow: hidden;
  padding: 20px 20px 0 20px;
}
  .content>h2 {
    margin-bottom: 20px;
  }
  .content h3 {
    margin-bottom: 20px;
  }
  .main {
    float: left;
    width: 620px;
    padding-right: 20px;
    border-right: 1px solid #AAA;
  }
    .main>h4 {
      margin-bottom: 10px;
    }
    .main>p {
      line-height: 1.6;
      margin-bottom: 8px;
    }
    .main>p.more {
      margin-bottom: 20px;
    }
  .aside {
    float: right;
    width: 280px;
  }
    .aside dt {
      font-weight: bold;
      margin-bottom: 8px;
      color: #BB5A48;
    }
    .aside dd {
      line-height: 1.3;
      margin: 0 0 16px 1em;
      font-size: 0.875em;
    }
  
  
.footer {
  height: 100px;
  padding-top: 20px;
  background: #000;
  text-align: center;
  color: #FFF;
}