WEB 5時間目
実はこの授業は、5月17日のものなので、かなり遅れてしまいましたが、記して行こうと思います。
とある企業のホームページのトップページという設定で作っていきます。とはいえこの時点ではまだまだ何も見ずに…というわけにはいかないので“お手本どおりに”打っていくだけのことですが…
この回の肝は、ボタン等にマウスを合わせるとそこが少し変化するというもの。画像変換を使い、rollover.isを利用。少してこずるもののうまくいって何より。
↓index.htmlのタグ
<?xml version="1.0" encoding="Shift_JIS"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <title>企業風土活性化の総合サポート企業|ゼロイン</title> <link href="css/base.css" rel="stylesheet" type="text/css" media="screen,tv" /> <script src="js/rollover.js" type"text/javascript></script> </head> <body> <div id="container"> <div id="header"> <h1>ゼロインは企業風土活性化の総合サポート企業です</h1> <p><img src="images/id_zeroin01.gif" alt="企業風土活性化の株式会社ゼロイン" width="99" height="39" /></p> <ul id="subNav"> <li><a href="#">サイトマップ</a></li> <li><a href="#">お問い合わせ</a></li> <li><a href="#">資料請求</a></li> </ul> </div> <div id="globalNav"> <ul> <li><img src="images/btn-gnav00_n.gif" alt="HOME" name="btn00" width="53" height="32" id="btn00" /></li> <li><a href="#"><img src="images/btn-gnav01.gif" alt="お客様別ナビ" width="117" height="32" class="imgover" /></a></li> <li><a href="#"><img src="images/btn-gnav02.gif" alt="サービス内容" width="117" height="32" class="imgover" /></a></li> <li><a href="#"><img src="images/btn-gnav07.gif" alt="提案実績" width="117" height="32" class="imgover" /></a></li> <li><a href="#"><img src="images/btn-gnav03.gif" alt="セミナー案内" width="117" height="32" class="imgover" /></a></li> <li><a href="#"><img src="images/btn-gnav04.gif" alt="採用情報" width="117" height="32" class="imgover" /></a></li> <li><a href="#"><img src="images/btn-gnav06.gif" alt="会社概要" width="117" height="32" class="imgover" /></a></li> </ul> <p>Flash ナビ領域</p> </div> <div id="wrapper"> <div id="mainContents"> <div class="topic"> <h2><img src="images/head_h201.gif" alt="トピックス" width="490" height="18" /></h2> <dl> <dt>2008.9.11</dt> <dd>記事掲載情報</dd> <dd><a href="#">エン･ジャパン「目指せ!カリスマ管理職」に『伝わる化』が掲載されました。</a></dd> <dt>2008.9.10</dt> <dd>セミナーのご案内を開始しました</dd> <dd><a href="#">10/9開催 総務道場「総務基礎講座」</a></dd> <dt>2008.9.3</dt> <dd>セミナーのご案内を開始しました</dd> <dd><a href="#">10/2開催 無料セミナー「はじめてのオフィスレイアウト変更」</a></dd> <dt>2008.8.27</dt> <dd>セミナーのご案内を開始しました</dd> <dd><a href="#">9/25開催 無料セミナー「年間で考える社内コミュニケーション施策」</a></dd> <dt>2008.7.23</dt> <dd>新刊を発売開始しました</dd> <dd><a href="#">『伝わる化』〜コミュニケーションを征するものがビジネスを征す〜</a></dd> </dl> </div> <div class="job"> <h2><img src="images/head_h202.gif" alt="ジョブリポート" width="490" height="18" /></h2> <div class="jobContents"> <h3>saboに流れる時間</h3> <img src="images/img_job002.jpg" alt="オフィス移転、オフィスリニューアルを機にワークスペースを見直しませんか？" width="120" height="82" /> <p>オフィス移転、オフィスリニューアルを機にワークスペースを見直しませんか？ ゼロインが提供する『sabo（サボ）』は、社員がリラックスやコミュニケーションスペースとして自由に使える空間です。</p> <p class="date">2007年3月20日｜<a href="#">ファシリティマネジメント</a>｜<a href="#">実績一覧検索</a></p> </div> <div class="jobContents"> <h3>康診断はアウトソースする時代です</h3> <img src="images/img_job001.jpg" alt="健康診断オペレーション" width="120" height="82" /> <p>健康診断の業務運営が煩雑さを増していませんか？ ゼロインは年間15000人の企業健康診断予約をお手伝いし、平均受診率97.8％を実現。健康診断を始める前にぜひ一度ご相談ください。</p> <p class="date">2007年3月20日｜<a href="#">健康診断オペレーション</a>｜<a href="#">実績一覧検索</a></p> </div> <div class="jobContents"> <h3>見直される企業イベント</h3> <img src="images/img_job003.jpg" alt="見直される企業イベント" width="120" height="82" /> <p>不況の影響を受け、経費削減によって企業から姿を消したイベント。 しかしここ数年、組織の一体感を高めるコミュニケーション施策として、企業イベントが見直されています。</p> <p class="date">2008年3月17日｜<a href="#">コミュニケーションプロデュース</a>｜<a href="#">実績一覧検索</a></p> </div> </div> </div> <div id="banner"> <ul> <li><img src="images/banner-magazinewide.gif" alt="メールマガジン申込みボタン" width="230" height="100" class="imgover" /></li> <li><img src="images/banner-archive.gif" alt="実績一覧検索ボタン：ゼロインの実績を紹介します " width="230" height="50" class="imgover" /></li> <li><img src="images/banner-rondan002.gif" alt="論談002ボタン：「居場所感」と「縁側」で辞めない会社づくりを" width="230" height="100" class="imgover" /></li> <li><img src="images/banner-rondan001.gif" alt="論談001ボタン：社内活性化のためのメンタルヘルス対策" width="230" height="100" class="imgover" /></li> </ul> <p>企業におけるメンタルヘルス対策コラム</p> <ul class="blog"> <li><a href="#">代表取締役 大條の「熱いぜ!!」ブログ</a></li> <li><a href="#">副社長 姥谷の「総務&農業」ブログ</a></li> </ul> <dl> <dt>ゼロイン社長<br /> 大條充能の本</dt> <dd><img src="images/2008080801.gif" alt="ゼロイン社長 大條充能の本" width="100" height="145" /></dd> </dl> <dl> <dt>エマメイ大塚寿氏＆<br /> ゼロイン姥谷芳昭の本</dt> <dd><img src="images/2008080802.gif" alt="ゼロイン 姥谷芳昭の本" width="100" height="145" /></dd> </dl> </div> <div class="pagetop"> <p><a href="#">▲ページの先頭へもどる</a></p> </div> </div> <div id="footer"> <ul id="footernav"> <li><a href="#">サイトマップ</a></li> <li><a href="#">プライバシーポリシー</a></li> <li><a href="#">ニュースリリース</a></li> </ul> <address> © ZEROin ALL RIGHTS RESERVED. </address> </div> </div> </body> </html>
↓cssタグ
@charset "Shift_JIS";
h1,h2,h3,h4,p,ul,li,dl,dt,dd,a,img,address {
margin: 0;
padding: 0;
}
body {
font-family:
Meiryo,
"メイリオ",
Osaka,
"Hiragino Kaku Gothic Pro",
"ヒラギノ角ゴ Pro W3",
"MS P Gothic",
"ＭＳ Ｐゴシック",
sans-serif;
color: #242424;
font-size: 96%;
margin: 0;
padding: 0;
text-align: center;
background-color: #EAF0F3;
}
a img {
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
}
a:link {
color:#193092;
text-decoration: underline;
}
a:visited {
color:#193092;
}
a:hover {
color:#f8b22b;
text-decoration: underline;
}
a:active {
color:#f8b22b;
}
#container {
width: 760px;
text-align: left;
margin: 0px auto;
padding-right: 6px;
padding-left: 6px;
background-image: url(../images/bg_zeroin01.gif);
background-repeat: repeat-y;
}
#header {
width: 760px;
padding: 10px 15px 0px 20px;
}
#globalNav {
width: 756px;
clear: both;
}
#wrapper {
width: 768px;
}
#mainContents {
width: 490px;
float: left;
margin: 10px 0px 0px;
padding: 0px 0px 0px 12px;
}
#banner {
float: left;
width: 230px;
margin: 10px 0px 0px 12px;
padding: 0px;
text-align: left;
}
#footer {
clear: both;
border-top: 5px solid #193092;
width: 755px;
height: 50px;
}
#header h1 {
padding-left: 115px;
font-size: 80%;
padding-top: 20px;
color: #374BA0;
}
#header p img {
margin-top: -28px;
margin-left: 5px;
}
#header ul#subNav {
list-style-type: none;
font-size: 80%;
left: 500px;
position: relative;
top: -40px;
width: 235px;
}
#header ul#subNav li {
font-size: 80%;
display: block;
float: left;
width: 77px;
padding-bottom: 5px;
}
#header ul#subNav li a:link, #header ul#subNav li a:visited {
background-image: url(../images/bg_topic01.gif);
background-repeat: no-repeat;
padding-left: 15px;
text-decoration: underline;
display: block;
background-position: left top;
padding-bottom: 5px;
}
#header ul#subNav li a:hover, #header ul#subNav li a:active {
color: #f8b22b;
background-image: url(../images/bg_topic02.gif);
background-repeat: no-repeat;
padding-left: 15px;
text-decoration: underline;
display: block;
background-position: left top;
padding-bottom: 5px;
}
#globalNav ul {
list-style: none;
width: 756px;
}
#globalNav li {
float: left;
}
#globalNav p {
height: 200px;
clear: both;
}
#mainContents .topic h2 {
margin-bottom: 10px;
}
#mainContents .job h2 {
margin-top: 25px;
margin-bottom: 10px;
}
#mainContents dt {
float: left;
margin-right: 10px;
padding-left: 20px;
font-weight: bold;
background-image: url(../images/bg_topic01.gif);
background-repeat: no-repeat;
background-position: left 4px;
}
#mainContents dd {
padding-left: 20px;
margin-bottom: 4px;
font-size: 85%;
}
#mainContents h3 {
font-size: 100%;
border-bottom-width: 1px;
border-left-width: 6px;
border-bottom-style: solid;
border-left-style: solid;
border-left-color: #FFCC00;
color: #444444;
border-bottom-color: #666666;
padding-left: 10px;
padding-top: 2px;
margin-left: 135px;
}
#mainContents .job .jobContents {
width: 490px;
background: url(../images/dot_bannerside02.gif) repeat-x center bottom;
margin-bottom: 10px;
}
#mainContents .job .jobContents img {
float: left;
margin-top: -20px;
}
#mainContents .job .jobContents p {
margin-left: 135px;
font-size: 85%;
line-height: 150%;
margin-top: 7px;
}
#mainContents .job .jobContents .date {
font-size: 70%;
text-align: right;
margin-top: 10px;
padding-bottom: 15px;
}
#mainContents .job hr {
background: url(../images/dot_bannerside02.gif) repeat-x;
height: 10px;
border: 0px none #FFFFFF;
color: #FFFFFF;
}
#banner ul {
list-style: none;
}
#banner li {
margin-bottom: 6px;
}
#banner dl {
width: 115px;
float: left;
margin: 20px 0px 0px;
text-align: center;
display: block;
}
#banner dt {
font-size: 72%;
margin-bottom: 5px;
}
#banner p {
font-size: 80%;
}
.pagetop {
display: block;
clear: both;
text-align: right;
width: 740px;
padding-top: 5px;
font-size: 85%;
padding-bottom: 10px;
}
#banner .blog {
margin-left: 15px;
font-size: 75%;
margin-top: 15px;
}
#banner ul.blog li a:link, #banner ul#blog li a:visited {
background-image: url(../images/bg_topic01.gif);
background-repeat: no-repeat;
padding-left: 18px;
text-decoration: underline;
display: block;
background-position: left top;
padding-bottom: 3px;
}
#banner ul.blog li a:hover, #banner ul#blog li a:active {
color: #f8b22b;
background-image: url(../images/bg_topic02.gif);
background-repeat: no-repeat;
padding-left: 18px;
text-decoration: underline;
display: block;
background-position: left top;
padding-bottom: 3px;
}
#footer ul#footernav {
list-style-type: none;
font-size: 80%;
width: 480px;
height: 30px;
margin-left: 30px;
margin-top: 15px;
}
#footer ul#footernav li {
font-size: 80%;
display: block;
float: left;
padding-bottom: 5px;
padding-right: 10px;
}
#footer ul#footernav li a:link, #footer ul#footernav li a:visited {
background-image: url(../images/bg_topic01.gif);
background-repeat: no-repeat;
padding-left: 15px;
text-decoration: underline;
display: block;
background-position: left top;
padding-bottom: 5px;
color: #193092;
}
#footer ul#footernav li a:hover, #footer ul#footernav li a:active {
color: #f8b22b;
background-image: url(../images/bg_topic02.gif);
background-repeat: no-repeat;
padding-left: 15px;
text-decoration: underline;
display: block;
background-position: left top;
padding-bottom: 5px;
}
#footer address {
font-size: 75%;
display: block;
text-align: right;
margin-right: 15px;
margin-top: -32px;
font-style: normal;
}完成したページ
今まではブログの更新まではなかなか手が回りませんでしたが、授業はあと2回、なるべく早く現状に追いついていかなくては。
