企業系サイト「ビズイン」制作
ポイント
- yuga.jsを使い、ナビゲーションのロールオーバー
- smoothscroll.jsを使い、ページ上部へ戻る機能をゆっくり動作させる
- 来訪するたびに違うビルボード画像を見せる（4種類）
- tableを使わずに横並び(ulまたはdlで)
アップしたサイトはこちら 「企業活性化の総合サポート企業BIZIN」
html
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="css/style.css" media="print, screen"> <script src="js/jquery-1.9.1.min.js"></script> <script src="js/yuga.js"></script> <script src="js/smoothScroll.js"></script> <title>ビズインは企業活性化の総合サポート企業です</title> </head> <body> <div id="header"> <h1>ビズインは企業活性化の総合サポート企業です</h1> <div id="top_nav"> <ul> <li><a href="#">サイトマップ</a></li> <li><a href="#">お問い合わせ</a></li> <li><a href="#">資料請求</a></li> </ul> </div><!-- ▲top_nav end--> </div><!-- ▲header end --> <div id="nav_wrap"> <div id="global_nav"> <ul class="allbtn"> <li><img src="img/btn_gnav00_on.gif" alt="HOME"></li> <li><a href="javascript:void(0);"><img src="img/btn_gnav01.gif" alt="お客様別ナビ" class="btn"></a></li> <li><a href="javascript:void(0);"><img src="img/btn_gnav02.gif" alt="サービス内容"></a></li> <li><a href="javascript:void(0);"><img src="img/btn_gnav03.gif" alt="提案実績"></a></li> <li><a href="javascript:void(0);"><img src="img/btn_gnav04.gif" alt="セミナー案内"></a></li> <li><a href="javascript:void(0);"><img src="img/btn_gnav06.gif" alt="採用情報"></a></li> <li><a href="javascript:void(0);"><img src="img/btn_gnav07.gif" alt="会社概要"></a></li> </ul> </div><!-- ▲global_nav end --> </div><!-- ▲nav_wrap --> <div id="wrapper"> <div id="billboard"> <script> <!-- myImg=["img/ph01.jpg","img/ph02.jpg","img/ph03.jpg","img/ph04.jpg","img/ph05.jpg"]; i=Math.random()*myImg.length; myVal=Math.floor(i), document.write('<img src="'+ myImg[myVal]+'">'); //--> </script> </div><!-- billboard end --> <div id="content"> <h2><img src="img/head_h201.gif" alt="トピックス"></h2> <div id="topics"> <dl> <dt>2013.2.21</dt> <dd>記事掲載情報</dd> <dd><a href="#">エン･ジャパン「目指せ!カリスマ管理職」に『伝わる化』が掲載されました。</a></dd> <dt>2013.2.10</dt> <dd>セミナーのご案内を開始しました</dd> <dd><a href="#">10/9開催 総務道場「総務基礎講座」</a></dd> <dt>2013.2.3</dt> <dd>セミナーのご案内を開始しました</dd> <dd><a href="#">10/2開催 無料セミナー「はじめてのオフィスレイアウト変更」</a></dd> <dt>2013.1.27</dt> <dd>セミナーのご案内を開始しました</dd> <dd><a href="#">9/25開催 無料セミナー「年間で考える社内コミュニケーション施策」</a></dd> <dt>2013.1.23</dt> <dd> 新刊を発売開始しました<dd> <dd> <a href="#">『伝わる化』〜コミュニケーションを征するものがビジネスを征す〜</a></dd> </dl> </div><!-- ▲topics end--> <h2><img src="img/head_h202.gif" alt="ジョブリポート"></h2> <div class="report"> <p class="pic"><img src="img/img_job002.jpg" alt=""></p> <h3>saboに流れる時間</h3> <p class="report_text">オフィス移転、オフィスリニューアルを機にワークスペースを見直しませんか？ オフィス移転、オフィスリニューアルを機にワークスペースを見直しませんか？ ビズインが提供する『sabo（サボ）』は、社員がリラックスやコミュニケーションスペースとして自由に使える空間です。</p> <p class="report_date">2012年11月20日｜<a href="#">ファシリティマネジメント</a>｜<a href="#">実績一覧検索</a></p> </div><!-- ▲report end--> <div class="report"> <p class="pic"><img src="img/img_job001.jpg" alt="健康診断オペレーション"></p> <h3>健康診断はアウトソースする時代です</h3> <p class="report_text">健康診断の業務運営が煩雑さを増していませんか？ ビズインは年間15000人の企業健康診断予約をお手伝いし、平均受診率97.8％を実現。健康診断を始める前にぜひ一度ご相談ください。</p> <p class="report_date">2012年11月20日｜<a href="#">健康診断オペレーション</a>｜<a href="#">実績一覧検索</a></p> </div><!-- ▲report end--> <div class="report"> <p class="pic"><img src="img/img_job003.jpg" alt="見直される企業イベント"></p> <h3>見直される企業イベント</h3> <p>不況の影響を受け、経費削減によって企業から姿を消したイベント。 しかしここ数年、組織の一体感を高めるコミュニケーション施策として、企業イベントが見直されています。</p> <p class="report_date">2013年3月17日｜<a href="#">コミュニケーションプロデュース</a>｜<a href="#">実績一覧検索</a></p> </div><!-- ▲report end--> </div><!-- ▲content end--> <div id="sidebar"> <div id="mailmag"> <ul class="allbtn"> <li class="01"><a href="javascript:void(0);"><img src="img/banner_magazinewide.gif" alt="メールマガジン申込みボタン"></a></li> <li class="02"><a href="javascript:void(0);"><img src="img/banner_archive.gif" alt="実績一覧検索ボタン：ビズインの実績を紹介します"></a></li> <li class="03"><a href="javascript:void(0);"><img src="img/banner_rondan002.gif" alt="論談002ボタン：「居場所感」と「縁側」で辞めない会社づくりを"></a></li> <li class="04"><a href="javascript:void(0);"><img src="img/banner_rondan001.gif" alt="論談001ボタン：社内活性化のためのメンタルヘルス対策"></a></li> </ul> </div><!-- ▲mailmag end--> <div id="column"> <h4>企業におけるメンタルヘルス対策コラム</h4> <ul> <li><a href="#">代表取締役 白戸の「熱いぜ!!」ブログ</a></li> <li><a href="#">副社長 小泉の「総務＆農業」ブログ</a></li> </ul> </div><!--▲column end--> <div class="books"> <dl class="shacho"><dt>ビズイン社長<br>白戸充能の本</dt> <dd><a href="javascript:void(0)"><img src="img/2008080801.gif" alt="社会人のオキテ"></a></dd> </dl> <dl class="ema"> <dt>エマメイ<br>＆ビズインの本</dt> <dd><a href="javascript:void(0)"><img src="img/2008080802.gif" alt="伝わる化"></a></dd> </dl> </div><!-- ▲books end--> <p class="back"><a href="#header"><img src="img/btn_pagetop01.gif" alt="▲ページの先頭へもどる"></a></p> </div> <!-- ▲sidebar end--> </div><!-- ▲wrapper end--> <div id="footer"> <div id="foot_nav"> <ul> <li><a href="#">サイトマップ</a></li> <li><a href="#">プライバシーポリシー</a></li> <li><a href="#">ニュースリリース</a></li> </ul> </div> <address>Copyright c BIZin ALL RIGHTS RESERVED.</address> </div><!-- ▲footer end --> </body> </html>
@charset "utf-8";
*{
margin:0;
padding:0;
}
body{
font-size:14px;
font-family:
"ヒラギノ角ゴ Pro W3",
"Hiragino Kaku Gothic Pro",
"メイリオ",
Meiryo,
Osaka,
"ＭＳ Ｐゴシック",
"MS PGothic",
sans-serif
;
}
img{
border-style:none;
}
ul{
list-style-type:none;
}
em{
visibility:hidden;
}
#header{
width:960px;
height:50px;
margin:0 auto;
overflow:hidden;
background-image:url(../img/id_zeroin01.gif);
background-repeat:no-repeat;
background-position:top left;
}
h1{
font-size:1.2em;
position:relative;
left:110px;
top:10px;
width:400px;
}
#top_nav{
position:absolute;
top:10px;
left:880px;
}
#top_nav ul{
font-size:0.8em;
}
#top_nav li{
float:left;
background-image:url(../img/bg_topic01.gif);
background-repeat:no-repeat;
background-position:2px 2px;
padding-left:18px;
}
#nav_wrap{
background-image:url(../img/gnav_bg.gif);
background-repeat:repeat-x;
}
#global_nav{
width:960px;
margin:0 auto;
height:32px;
}
#gloval_nav ul{
list-style-type:none;
}
#global_nav ul li{
float:left;
}
#gloval_nav ul li a{
text-decoration:none;
display:block;
overflow:hidden;
}
#billboard{
padding-top:10px;
width:960px;
height:300px;
margin:0 0 10px 0;
}
#wrapper{
width:960px;
margin:0 auto;
}
#content{
float:left;
width:675px;
}
#sidebar{
float:right;
width:260px;
}
.books{
font-size:0.8em;
margin-left:20px;
padding-top:25px;
}
.books .shacho {
float:left;
margin:0 18px 0 10px;
}
.books .shacho dl dt{
width:140px;
}
#topics{
margin:0 0 15px 0;
}
#topics dl{
line-height:1.3em;
margin-bottom:10px;
}
#topics dt{
font-weight:bold;
color:#006;
padding:0 0 10px 20px;
background-image:url(../img/bg_topic01.gif);
background-repeat:no-repeat;
background-position:0 2px;
float:left;
}
#topics dd{
margin:0 0 0 110px;
padding:0 0 2px 8px;
}
.report{
width:675px;
height:auto;
margin:15px 0 15px 0;
padding:0 0 15px 0;
background-image:url(../img/dot_bannerside02.gif);
background-position:center bottom;
background-repeat:repeat-x;
}
.report .pic{
float:left;
display:block;
width:130px;
}
h3{
margin:0 0 10px 140px;
padding:0 0 0 1em;
border-left:7px solid #FF0;
border-bottom:1px solid #333;
}
.report .report_text{
margin:0 0 0 140px;
}
.report .report_date{
margin:10px 0 0 160px;
font-size:0.875em;
}
#footer{
clear:both;
width:960px;
border-top:6px solid #36C;
height:50px;
margin:0 auto;
}
#foot_nav {
width:500px;
}
#foot_nav li{
font-size:0.75em;
float:left;
background-image:url(../img/bg_topic01.gif);
background-repeat:no-repeat;
background-position:2px 2px;
padding-left:20px;
margin:10px 0 0 10px;
}
address{
float:right;
margin:5px 10px 10px 0;
font-size:0.75em;
font-style:normal;
color:#333;
}
.back{
clear:both;
margin:15px 0 0 25px;
}
h4{
margin:0 0 10px 20px;
padding:15px 0 0 0;
}
#mailmag{
float:right;
}
#mailmag li a:{
background-image:url(img/banner_magazinewide.gif);
}
#mailmag li a:hover{
background-image:url(img/banner_magazinewide_on.gif);
}
#column{
clear:both;
font-size:0.875em;
height:80px;
margin-left:15px;
}
#column li{
float:left;
background-image:url(../img/bg_topic01.gif);
background-repeat:no-repeat;
background-position:2px 2px;
margin-left:10px;
padding-left:18px;
}
