2010年01月07日

HTML5+CSS3でサイト制作　企業サイトその2

人気ブログランキングにほんブログ村 ＩＴ技術ブログへ

HTML5+CSS3でサイト制作　企業サイトその2
（別ウィンドウで開きます）

Webサイト制作においてこれからの主流になると思われるHTML5+CSS3を積極的に用いてサンプルサイトを制作しました。

サンプルサイトはトップページのみで、サイト内リンクをクリックしてもリンク先に移動しません。


今回はh1～2のマークアップに悩みました。取り敢えずヘッダーやサイド、メインのそれぞれの最初はh1と言う事にしました。

フッターの運営者プロフィールでfigureを使いました。HTML5が普及すればこの要素は多用しそうな予感。

あと、以前学習したjQueryでロールオーバーなどを行っています。PNGを多用しているため、IE6では見れたもんじゃありません（笑）


最新技術を学ぶために制作したサイトなので、一部の古いバージョンのブラウザでは正しく表示出来ない場合があります。

その場合は是非以下の最新ブラウザをご利用ください。

Google Chrome（BETA）

Safari 4

また、一応HTML5のMarkup Validation Serviceはパスしたものの、正しくない文法や改善点があるかもしれません。その時はご指摘いただけると大変ありがたいです。

コードは以下の通りです。

JavascriptにIE7.jsの後継バージョンIE8とHTML5 Shivを利用しています。


HTML部分。
<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>HTML5+CSS3 サンプルサイト002（ソースのみテンプレートとして利用可）</title>

<link href="css/reset.css" rel="stylesheet" type="text/css" />

<link href="css/sample002.css" rel="stylesheet" type="text/css" media="screen" />

<!--[if lte IE 8]><script src="js/html5shiv.js" type="text/javascript"></script><![endif]-->

<!--[if lt IE 8]><script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE8.js" type="text/javascript"></script><![endif]-->

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

<script type="text/javascript" src="js/rollover.js"></script>

</head>

<body>

<div id="wrapper">

  <header>

  <hgroup>

  <h1><a href="#"><img src="img_sample002/header_logo.png" width="126" height="108" alt="株式会社エクスフュージョン" /></a></h1>

  <h2>アクセス解析の分析と教育トレーニングは(株)エクスフュージョンへお任せ下さい。</h2>

  </hgroup>

  <nav>

  <ul>

    <li><a href="#"><img src="img_sample002/header_nav1.png" width="140" height="24" alt="トップページ" class="on" /></a></li>

    <li><a href="#"><img src="img_sample002/header_nav2.png" width="140" height="24" alt="サービス内容" class="on" /></a></li>

    <li><a href="#"><img src="img_sample002/header_nav3.png" width="140" height="24" alt="会社概要" class="on" /></a></li>

    <li><a href="#"><img src="img_sample002/header_nav4.png" width="140" height="24" alt="メディア掲載" class="on" /></a></li>

    <li><a href="#"><img src="img_sample002/header_nav5.png" width="140" height="24" alt="お問い合わせ" class="on" /></a></li>

  </ul>

  </nav> </header>

  <div id="keyvisual">

    <p>キャッチコピーキャッチコピーキャッチコピー<br />

      キャッチコピーキャッチコピーキャッチコピー</p>

    <ul>

      <li><a href="#"><img src="img_sample002/keyvisual_nav1.png" width="228" height="88" alt="アクセス解析の基本" class="on" /></a></li>

      <li><a href="#"><img src="img_sample002/keyvisual_nav2.png" width="228" height="88" alt="データ分析の基本" class="on" /></a></li>

      <li><a href="#"><img src="img_sample002/keyvisual_nav3.png" width="228" height="88" alt="ネット視聴率の基本" class="on" /></a></li>

    </ul>

  </div>

  <article>

  <h1>ソリューション</h1>

  <h2>タイトル1</h2>

  <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>

  <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>

  <h2>タイトル2</h2>

  <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>

  <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>

  </article>

  <nav id="side">

  <h1>メインメニュー</h1>

  <ul>

    <li id="bunseki"><a href="#"><img src="img_sample002/side_nav1.png" width="220" height="70" alt="分析サービス詳細" class="on" /></a></li>

    <li id="ensyu"><a href="#"><img src="img_sample002/side_nav2.png" width="220" height="70" alt="分析演習サービス" class="on" /></a></li>

    <li id="seminar"><a href="#"><img src="img_sample002/side_nav3.png" width="220" height="70" alt="セミナー・講演実績" class="on" /></a></li>

    <li id="kougi"><a href="#"><img src="img_sample002/side_nav4.png" width="220" height="70" alt="講義・研修・教育実績" class="on" /></a></li>

  </ul>

  </nav>

  <footer>

  <figure>

  <legend>運営者プロフィール</legend>

  <img src="img_sample002/footer_author.gif" width="96" height="128" alt="〇〇○　〇〇○近影" /><br />

  株式会社エクスフュージョン代表<br />

  〇〇○　〇〇○<br />

  テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

  </figure>

  <ul>

    <li><a href="#"><img src="img_sample002/footer_link1.png" width="160" height="40" alt="blog" /></a></li>

    <li><a href="#"><img src="img_sample002/footer_link2.png" width="160" height="32" alt="blog" /></a></li>

    <li><a href="#"><img src="img_sample002/footer_link3.png" width="149" height="30" alt="twitter" /></a></li>

  </ul>

  <p>Copyright©2010 X fusion Inc.<span>[<a href="http://html5.validator.nu/?doc=http://www.hidakaya.net/html5/sample002.html">HTML5</a>]</span></p>

  </footer>

</div>

</body>

</html>


CSS部分。この他HTML5 Reset Stylesheetを使用。
@charset "utf-8";

body {

	font:13px "ＭＳ Ｐゴシック", arial, helvetica, clean, sans-serif;

 *font-size:small;

 *font:x-small;

	background-color:#CCC;

	background:-moz-linear-gradient(top, #CCC, #FFF);

	background:-webkit-gradient(linear, left top, left bottom, from(#CCC), to(#FFF));

}

img {

	display: block;

}

#wrapper {

	width: 758px;

	padding-right: 15px;

	padding-left: 17px;

	margin-right: auto;

	margin-left: auto;

	position: relative;

	padding-top: 30px;

	background-color: #FFF;

}

#wrapper header {

	background-image: url(../img_sample002/header_bg.png);

	background-repeat: no-repeat;

	height: 62px;

}

#wrapper header hgroup h1 {

	position: absolute;

	left: 30px;

	top: 45px;

}

#wrapper header hgroup h1 a img:hover {

	filter:alpha(opacity=75); /*IE*/

	-moz-opacity:0.75; /*FF*/

	opacity:0.75;

}

#wrapper header hgroup h2 {

	position: absolute;

	left: 0px;

	top: 0px;

	line-height: 30px;

	height: 30px;

	padding-left: 20px;

}

#wrapper header nav {

	width: 453px;

	float: right;

	display: inline;

	margin-right: 8px;

	margin-top: 8px;

}

#wrapper header nav ul li {

	float: left;

	margin-left: 11px;

	display: inline;

	margin-bottom: 3px;

}

#wrapper header nav ul li:first-child {

	margin-bottom: 30px;

}

#wrapper #keyvisual {

	clear: both;

	background-image: url(../img_sample002/keyvisual_bg.png);

	height: 289px;

	width: 758px;

	background-repeat: no-repeat;

}

#wrapper #keyvisual p {

	float: left;

	width: 420px;

	margin-top: 220px;

	font-size: 161.6%;

	font-weight: bold;

	color: #FFF;

	margin-left: 65px;

	display: inline;

}

#wrapper #keyvisual ul {

	width: 228px;

	float: right;

	margin-top: 8px;

	margin-right: 10px;

	display: inline;

}

#wrapper #keyvisual ul li {

	margin-bottom: 2px;

	height: 88px;

}

#wrapper article {

	display: inline;

	float: right;

	width: 470px;

	margin-right: 20px;

}

#wrapper article h1 {

	font-weight: bold;

	font-size: 123.1%;

	border-bottom-width: 5px;

	border-bottom-style: solid;

	border-bottom-color: #CCC;

	line-height: 30px;

	height: 30px;

	margin-bottom: 30px;

}

#wrapper article h2 {

	font-weight: bold;

	height: 30px;

}

#wrapper article p {

	margin-bottom: 20px;

	line-height: 2;

}

#wrapper #side {

	display: inline;

	float: left;

	width: 220px;

	margin-right: 20px;

	margin-left: 20px;

}

#wrapper #side h1 {

	font-size: 123.1%;

	line-height: 30px;

	font-weight: bold;

	height: 30px;

	border-bottom-width: 5px;

	border-bottom-style: solid;

	border-bottom-color: #CCC;

	margin-bottom: 30px;

}

#wrapper #side ul li {

	margin-bottom: 20px;

	height: 70px;

}

#wrapper footer {

	clear: both;

	width: 750px;

	background-image: url(../img_sample002/footer_bg.png);

	background-repeat: no-repeat;

	padding-right: 5px;

	padding-left: 3px;

	height: 210px;

	padding-top: 3px;

	padding-bottom: 5px;

}

#wrapper footer figure {

	margin-left: 30px;

	font-size: 93%;

	height: 128px;

	width: 510px;

	margin-top: 30px;

	display: inline;

	float: left;

	margin-bottom: 15px;

	line-height: 1.5;

}

#wrapper footer figure legend {

	margin-left: 116px;

}

#wrapper footer figure img {

	margin-right: 20px;

	float: left;

}

#wrapper footer ul {

	float: right;

	display: inline;

	margin-top: 30px;

	margin-right: 30px;

	height: 128px;

	margin-bottom: 15px;

}

#wrapper footer ul li {

	margin-bottom: 10px;

}

#wrapper footer ul li a img:hover {

	filter:alpha(opacity=75); /*IE*/

	-moz-opacity:0.75; /*FF*/

	opacity:0.75;

}

#wrapper footer p {

	line-height: 30px;

	text-align: center;

	clear: both;

	height: 30px;

}

#wrapper footer p span {

	padding-left: 20px;

}


参考書籍：プロとして恥ずかしくないWEBレイアウトの大原則

注意事項：ソースコードのご利用はご自由にどうぞ。ただし、サンプルサイト内の文章及び画像のご利用はおやめください。

同じカテゴリー（HTML5+CSS3）の記事画像
HTML5+CSS3でサイト制作　企業サイトその1
同じカテゴリー（HTML5+CSS3）の記事
 HTML5+CSS3でサイト制作　企業サイトその1 (2009-12-22 18:33)
 Canvasでシェルピンスキーのカーペットを描画 (2009-11-03 18:00)
 canvasとJavaScriptでコッホ曲線を描画 (2009-10-31 15:59)

Posted by ヒダカ at 15:44│Comments(0) │HTML5+CSS3
このBlogのトップへ
上の画像に書かれている文字を入力して下さい
 
＜ご注意＞
書き込まれた内容は公開され、ブログの持ち主だけが削除できます。
このページの上へ▲