記事からサイトを構築

授業日誌

課題
・画像は支給するPDFからスライスする
・プレビューは、760pxでできているので、960pxに変更する
・必要があればボタンを作り直す
・ビルボードは、スライドまたはランダム切り替え
・「ページトップへ戻る」は、減速スライドをさせる
・画像置換は「yuga.js」を利用する

「文章」

ビズインは企業活性化の総合サポート企業です

企業活性化の株式会社ビズイン

サイトマップ
お問い合わせ
資料請求

HOME
お客様別ナビ
サービス内容
提案実績
セミナー案内
採用情報
会社概要

Flash ナビ領域
トピックス

2013.2.21
記事掲載情報
エン･ジャパン「目指せ!カリスマ管理職」に『伝わる化』が掲載されました。
2013.2.10
セミナーのご案内を開始しました
10/9開催　総務道場「総務基礎講座」
2013.2.3
セミナーのご案内を開始しました
10/2開催　無料セミナー「はじめてのオフィスレイアウト変更」
2013.1.27
セミナーのご案内を開始しました
9/25開催　無料セミナー「年間で考える社内コミュニケーション施策」
2013.1.23
新刊を発売開始しました
『伝わる化』〜コミュニケーションを征するものがビジネスを征す〜

ジョブリポート
saboに流れる時間
オフィス移転、オフィスリニューアルを機にワークスペースを見直しませんか？

オフィス移転、オフィスリニューアルを機にワークスペースを見直しませんか？ ビズインが提供する『sabo（サボ）』は、社員がリラックスやコミュニケーションスペースとして自由に使える空間です。

2012年11月20日｜ファシリティマネジメント｜実績一覧検索
康診断はアウトソースする時代です
健康診断オペレーション

健康診断の業務運営が煩雑さを増していませんか？ ビズインは年間15000人の企業健康診断予約をお手伝いし、平均受診率97.8％を実現。健康診断を始める前にぜひ一度ご相談ください。

2012年11月20日｜健康診断オペレーション｜実績一覧検索
見直される企業イベント
見直される企業イベント

不況の影響を受け、経費削減によって企業から姿を消したイベント。 しかしここ数年、組織の一体感を高めるコミュニケーション施策として、企業イベントが見直されています。

2013年3月17日｜コミュニケーションプロデュース｜実績一覧検索

メールマガジン申込みボタン
実績一覧検索ボタン：ビズインの実績を紹介します
論談002ボタン：「居場所感」と「縁側」で辞めない会社づくりを
論談001ボタン：社内活性化のためのメンタルヘルス対策

企業におけるメンタルヘルス対策コラム

代表取締役 白戸の「熱いぜ!!」ブログ
副社長 小泉の「総務&農業」ブログ

ビズイン社長の本
ビズイン社長 白戸充能の本

エマメイ＆ビズインの本
ビズインの本

▲ページの先頭へもどる

サイトマップ
プライバシーポリシー
ニュースリリース

Copyright © BIZin ALL RIGHTS RESERVED.<>

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ビズイン</title>
<link rel="stylesheet" href="css/style.css" media="print,screen">
<link rel="stylesheet" href="css/thickbox.css" type="text/css" media="screen" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/thickbox.js"></script>
<script type="text/javascript" src="js/yuga.js" charset="utf-8"></script>
<script type="text/javascript" src="js/smoothScroll.js"></script>

</head>
<body>
<div id="container">
<div id="header">
<h1><img src="bizin/img/id_zeroin01.gif" width="99" height="39" alt="ビズインは企業活性化の総合サポート企業です"></h1>
<p>企業活性化の株式会社ビズイン<p>

<ul id="sideparts">
<li><a href="#">サイトマップ</a></li>
<li><a href="#">お問い合わせ</a></li>
<li id="shiryo"><a href="#">資料請求</a></li>
</ul>

<div id="nav">
<ul class="allbtn">
<li><a href="#"><img src="bizin/img/home.gif" width="130" height="32"  alt="home"></a></li>
<li><a href="#"><img src="bizin/img/nav.gif" width="132" height="32" alt="お客様ナビ"></a></li>
<li><a href="#"><img src="bizin/img/service.gif" width="130" height="32" alt="サービス内容"></a></li>
<li><a href="#"><img src="bizin/img/teian.gif" width="132" height="32"  alt="提案実績"></a></li>
<li><a href="#"><img src="bizin/img/seminor.gif" width="132" height="32" alt="セミナー案内"></a></li>
<li><a href="#"><img src="bizin/img/recurute.gif" width="132" height="32" alt="採用情報"></a></li>
<li><a href="#"><img src="bizin/img/about.gif" width="132" height="32" alt="会社概要"></a></li>
</ul>
</div>
<!-- ▲nav -->
<div id="billbord">
<script>
<!--
myImg = ["imglist/01.jpg","imglist/02.jpg"];
i = Math.random()*myImg.length;
myVal = Math.floor(i);
document.write("<img src = '"+ myImg[myVal]+"'>");
//-->
</script>
</div>
</div>
<!-- ▲header -->
<div id="wrapper">
<div id="content">
<h2 class="topic">トピックス</h2>
<dl>
<dt>2013.2.21</dt>
<dd>記事掲載情報</dd>
<dd>エン･ジャパン「目指せ!カリスマ管理職」に『伝わる化』が掲載されました。</dd>
<dt>2013.2.10</dt>
<dd>セミナーのご案内を開始しました</dd>
<dd>10/9開催　総務道場「総務基礎講座」</dd>
<dt>2013.2.3</dt>
<dd>セミナーのご案内を開始しました</dd>
<dd>10/2開催　無料セミナー「はじめてのオフィスレイアウト変更」</dd>
<dt>2013.1.27</dt>
<dd>セミナーのご案内を開始しました</dd>
<dd>9/25開催　無料セミナー「年間で考える社内コミュニケーション施策」</dd>
<dt>2013.1.23</dt>
<dd>新刊を発売開始しました</dd>
<dd>『伝わる化』〜コミュニケーションを征するものがビジネスを征す〜</dd>
</dl>
<h2 class="topic">ジョブリポート</h2>
<img src="bizin/img/img_job001.jpg" width="120" height="82" alt="オフィス移転、オフィスリニューアルを機にワークスペースを見直しませんか？">

<div class="job_text">
<h3>saboに流れる時間</h3>
<p class="main_text">オフィス移転、オフィスリニューアルを機にワークスペースを見直しませんか？ ビズインが提供する『sabo（サボ）』は、社員がリラックスやコミュニケーションスペースとして自由に使える空間です。
</p>
<p class="day_1">
2012年11月20日｜ファシリティマネジメント｜実績一覧検索
</p>
<div class="underbar">
</div>
</div>
<img src="bizin/img/img_job002.jpg" width="120" height="82" alt="健康診断オペレーション">
<div class="job_text">
<h3>健康診断はアウトソースする時代です</h3>

<p class="main_text">
健康診断の業務運営が煩雑さを増していませんか？ ビズインは年間15000人の企業健康診断予約をお手伝いし、平均受診率97.8％を実現。健康診断を始める前にぜひ一度ご相談ください。</p>

<p class="day_2">2012年11月20日｜健康診断オペレーション｜実績一覧検索</p>
<div class="underbar">
</div>
</div>
<img src="bizin/img/img_job003.jpg" width="120" height="82" alt="見直される企業イベント">
<div class="job_text">
<h3>見直される企業イベント</h3>
<p class="main_text">
不況の影響を受け、経費削減によって企業から姿を消したイベント。 しかしここ数年、組織の一体感を高めるコミュニケーション施策として、企業イベントが見直されています。</p>

<p class="day">2013年3月17日｜コミュニケーションプロデュース｜実績一覧検索</p>
<div class="underbar">
</div>
</div>
</div>
<!-- ▲content -->
<div id="sidebar">
<ul>
    <li><a href="#"><img src="bizin/img/banner_magazinewide.gif" width="230" height="100" alt="メールマガジン申込みボタン" class="btn"></a></li>
    <li><a href="#"><img src="bizin/img/banner_archive.gif" width="230" height="50" alt="実績一覧検索ボタン：ビズインの実績を紹介します" class="btn"></a></li>
    <li><a href="#"><img src="bizin/img/banner_rondan002.gif" width="230" height="100" alt="論談002ボタン：「居場所感」と「縁側」で辞めない会社づくりを" class="btn"></a></li>
    <li><a href="#"><img src="bizin/img/banner_rondan001.gif" width="230" height="100" alt="論談001ボタン：社内活性化のためのメンタルヘルス対策" class="btn"></a></li>
</ul>
<h4>企業におけるメンタルヘルス対策コラム</h4>
<ul>
    <li class="blog"><a href="#">代表取締役 白戸の「熱いぜ!!」ブログ</a></li>
    <li class="blog"><a href="#">副社長 小泉の「総務&農業」ブログ </a></li>
</ul>
<dl>
<dt><a href="#"><img src="bizin/img/2008080801.gif" width="100" height="145" alt="ビズイン社長の本"></a></dt>
    <dd>ビズイン社長 白戸充能の本</dd>
<dt><a href="#"><img src="bizin/img/2008080802.gif" width="100" height="145" alt="エマメイ＆ビズインの本"></a></dt>
    <dd>ビズインの本</dd>
</dl>
<p id="h_scroll"><a href="#header">▲ページの先頭へもどる</a></p>
</div>
<!-- ▲sidebar -->
</div>
<!-- ▲wrapper -->
<div id="footer">
<ul>
    <li><a href="#">サイトマップ</a></li>
    <li><a href="#">プライバシーポリシー</a></li>
    <li><a href="#">ニュースリリース</a></li>
</ul>
<address>Copyright &#169; BIZin ALL RIGHTS RESERVED.</address>
</div>
</div>
</body>
</html>

<>

@charset UTF-8;

* {
	margin: 0;
	padding: 0;
}
em {
	visibility: hidden;
}
li,li a {
	text-decoration: none;
}
ul {
	list-style-type: none;
}
body {
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size: 1em;
	line-height: 1;
}
#container {
	width: 960px;
	height: auto;
	margin: 0 auto;
	overflow: hidden;
	padding: 20px 0;
}
/* ▼header */
#header {
	width: 920px;
	padding: 0 20px;
	position: relative;

}
#header ul#sideparts {
	text-align: right;
	position: absolute;
	top: 20px;
	left: 820px;
}
#header ul#sideparts li {
	padding-left: 20px;
	padding-top: 5px;
	background-image: url(../bizin/img/bg_topic02.gif);
	background-repeat: no-repeat;
}
#sideparts li#shiryo {
	padding-right: 30px;
}
#nav {
 width: 920px;
 height: 32px;
 margin-top: 30px;
 margin-bottom: 20px;
}
#nav ul {
}
#nav li {
	display: inline;
	float: left;
}
#nav li.btn {
}
#billbord {
	width: 919px;
	height: 250px;
}
#wrapper {
	width: 920px;
	padding: 0 20px;
}
/* ▼content */
#content {
	width: 630px;
	float: left;
}
#content img {
	padding: 10px 20px 10px 0;
	float: left;
}
#content h2.topic {
	font-size: 1.2em;
	width: 300px;
	height: 30px;
	padding: 6px 0 0 20px;
	margin-top: 15px;
	margin-bottom: 10px;
	background-image: url(../bizin/img/topic.gif);
	background-repeat: no-repeat;
}
#content dt {
	font-weight: bold;
	padding: 0 0 5px 20px;
	margin: 5px 0;
	background-image: url(../bizin/img/bg_topic01.gif);
	background-repeat: no-repeat;
}
#content dd {
	padding:  2px 0 5px 20px;
}
#content .job_text {
	font-size: 0.875em;
	line-height: 1.3em;
	padding: 5px 0 10px 0;
}
#content p.main_text {
	line-height: 1.5em;
}
#content p.day {
font-size: 0.75em;
padding-top: 5px;
padding-margin: 10px;
padding-left: 290px;
}
#content p.day_2 {
font-size: 0.75em;
padding-top: 5px;
padding-margin: 10px;
padding-left: 330px;
}
#content p.day_1 {
font-size: 0.75em;
padding-top: 5px;
padding-margin: 10px;
padding-left: 320px;
}
#content .underbar {
 background-image: url(../bizin/img/bg_dotwide.gif);
 background-repeat: no-repeat;
 padding-top: 5px;
}
#content h3 {
	width: 500px;
	height: 30px;
	padding-top: 8px;
	background-image: url(../bizin/img/h3_line.gif);
	background-repeat: no-repeat;
	padding-left: 150px;
}

/* ▲content */

/* ▼sidebar */
#sidebar {
	width: 255px;
  float: right;
}
#sidebar img {
	padding: 5px 10px;
}
#sidebar dt img {
	padding-left: 80px;
}
#sidebar dt {
	padding-bottom: 10px;
}
#sidebar dd{
	text-align: center;
	padding-bottom: 10px;
}
#sidebar ul {
	padding: 10px;
}
#sidebar h4 {
	font-size: 0.75em;
	padding-left: 20px;
}
#sidebar li.blog {
	padding-left: 10px;
	padding-bottom: 5px;
}
#sidebar li.blog a {
	background-image: url(../bizin/img/bg_topic01.gif);
	background-repeat: no-repeat;
	padding-left: 18px;
	font-size: 0.75em;
}
p#h_scroll {
	padding-top: 30px;
	padding-left: 35px;
}
/* ▼footer */
#footer {
	clear: both;
	border-top: 3px solid #00F;
	padding-top: 10px;
}
#footer ul {
	padding-left: 10px;
  text-align: center;
}
#footer li {
	display: inline;
}
#footer li a {
	background-image: url(../bizin/img/bg_topic02.gif);
	background-repeat: no-repeat;
	padding-left: 20px;
	font-size: 0.875em;
}
address {
	font-size: 0.75em;
	text-align: center;
	font-style: normal;
	margin: 10px 0;
}