企業系サイトレイアウト実践課題 - 実践するWEBサイト制作

企業サイト

素材は、テキストデータ（または独自データ）を利用する

ナビゲーションは、作成する

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>サンプル スタイルシート カンパニー</title>

<link rel="stylesheet" href="css/style3.css" media="screen,print">

</head>
<body>

<div id="container">

<h1 id="logo"><img src="images/logo.gif" width="290" height="38" alt="サンプルスタイルカンパニー"></h1>



<!-- ===================画像の横並びで隙間をなくす方法
（[ ul ]のボタンの領域が存在している為） -->

<!-- <li>タグを改行せず、一行に並べる -->
<!-- <li>タグの間にコメントタグを入れる -->
<!-- </li>の閉じタグを途中で区切る[ /li ][ > ] -->
<!-- display:inline;をやめて、float:left;で横並びにする -->
<!-- font-sizeで隙間を消す -->


<ul id="globalNav"><!--　
--><li><a href="#"><img src="images/global_nav_01.gif" width="94" height="33" alt="トップページ"></a></li><!--
--><li><a href="#"><img src="images/global_nav_02.gif" width="94" height="33" alt="ソリューション"></a></li><!--  
--><li><a href="#"><img src="images/global_nav_03.gif" width="94" height="33" alt="実績紹介"></a></li><!--  
--><li><a href="#"><img src="images/global_nav_04.gif" width="94" height="33" alt="カスタマー"></a></li>
<li><a href="#"><img src="images/global_nav_05.gif" width="94" height="33" alt="会社概要"></a></li><!--  
--><li><a href="#"><img src="images/global_nav_06.gif" width="94" height="33" alt="お問い合わせ"></a></li><!--  
--></ul>

<div id="content">

<h2><img src="images/main_copy.jpg" width="740" height="272" alt="あなたにとっての最高のパートナーであるために"></h2>

<div id="about">

<h3><img src="images/title_about.gif" width="107" height="42" alt="弊社について"></h3>

<div class="section">

<h4><img src="images/section_01.gif" width="292" height="38" alt="スタイルシートによるレイアウトで、表現力と機能性が共存したサイトを構築"></h4>

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

</div><!-- / section -->

<div class="section">

<h4><img src="images/section_02.gif" width="297" height="38" alt="ウェブサイトを成功に導く、構造設計とインターフェース構築を武器に。"></h4>

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

</div><!-- / section -->

</div><!-- / about -->


<div id="newsRelease">

<h3><img src="images/title_news.gif" width="119" height="42" alt="ニュースリリース"></h3>
<dl>
<dt>2006年4月1日</dt>
<dd>サンプルスタイルシートカンパニーのウェブサイトがリニューアルしました。</dd>
<dt>2006年4月1日</dt>
<dd>サンプルスタイルシートカンパニーのウェブサイトがリニューアルしました。</dd>
<dt>2006年4月1日</dt>
<dd>サンプルスタイルシートカンパニーのウェブサイトがリニューアルしました。</dd>
<dt>2006年4月1日</dt>
<dd>サンプルスタイルシートカンパニーのウェブサイトがリニューアルしました。</dd>
<dt>2006年4月1日</dt>
<dd>サンプルスタイルシートカンパニーのウェブサイトがリニューアルしました。</dd>
</dl>

</div><!-- / newsRelease -->

</div><!-- / content -->

<div id="footer">

<p><img src="images/copyright.gif" width="319" height="33" alt="Copyright &copy; Sample Stylesheet Company All Rights Reserved."></p>

</div><!-- / footer -->

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

</body>
</html>

ソースコード【 CSS 】

@charset "UTF-8";




/* ===================== reset
 */

* {
    margin: 0;
    padding: 0;
    font-size: 100%;
    }

body {
    font-size: 75%;
    font-family:
        "ヒラギノ角ゴ Pro W3",
        "Hiragino Kaku Gthic Pro",
  	"ＭＳ Ｐゴシック",
	sans-serif;
    line-height: 1.4;
    color: #333;
    background: #f4f4f4 url(../images/body_bg.gif) left top repeat-x;
    }

a {
    color: #039;
    }

a:visited {
    color: #333;
    }

a:hover {
    color: #06c;
    }

img {
    border: none;
    vertical-align: top;
    }

#container {
    width: 741px;
    background: #fff;
    }


/* ====================ロゴとナビゲーション
 */

#logo {
    position: absolute;
    left: 17px;
    top: 18px;
    }

#globalNav {
    list-style-type: none;
    margin-top: 73px;
    background: #000 url(../images/global_nav_bg.gif) left top repeat-x;
    }

#globalNav li {
    display: inline;
    }

#globalNav li a {
    color: #fff;
    }


/* ====================メインイメージと２段組
 */

#content {
    overflow: auto !important;
    overflow /**/: hidden;
    width: 100%;
    background: #fff url(../images/content_bg.gif) left top repeat-y;
    padding-bottom: 30px;
    }

#about {
    float: left;
    width: 493px;
    }

#newsRelease {
    float: left;
    width: 246px;
    padding-left: 1px;
    }

#footer {
    clear: both;
    color: #fff;
    background: #333;
    }


/* ==================== 本文のレイアウト
 */

#about h3, #newsRelease h3 {
    color: #fff;
    background: #3452b2 url(../images/title_bg.gif) left top repeat-x;
    }

#about .section {
    margin: 16px 18px 0 18px;
    border-bottom: 1px solid #ccc;
    }

#about .section p {
     margin: 10px 0;
			 }

#about .section .link {
     background: url(../images/arrow.gif) left center no-repeat;
				padding-left: 14px;
				}

#newsRelease dl {
    margin: 16px 18px 0 18px;
			}

#newsRelease dl dt {
    font-size: 90%;
    color: #666;
    margin-top: 10px;
    }

ブラウザで表示【 Firefox 】

PAGE TOP