0703 HTLM&CSS: Webの勉強を始めてひと月。５時間弱でサイトを作る。
架空の企業サイトを作ってみよう。制限時間は50分×５。
サイト制作時における指定
- 全体は、#conatiner幅「980px」
- ヘッダー情報とフッター情報の見栄えは、ブラウザ幅全体を利用する
- 横幅「140px」高さは「50px」ピクセルのナビゲーションボタンを7個作成
- 「トップページ TOPPAGE」「ソリューション SOLUTION」「実績紹介 ACHIEVEMENT」「パートナー PARTNERS」「カスタマー CUSTOMERS」「会社概要 COMPANY」「お問い合わせ CONTACT」
- 色彩計画「基調色、強調色、アソートカラー」の３色は、事前に決定する
- 大見出し、中見出しは画像にする
- ページ遷移のための「矢印アイコン」は作成する
- フッター部にもグローバルナビと同様のテキストリンクを作成する
- テキストリンクは、すべて擬似クラスを設定する
まずIllustratorでボタンと背景画像、矢印アイコンを作成
ボタン。
背景。
矢印。
HTMLタグを入力
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Sample Stylesheet Company</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="container">
<div id="header">
<h1><img src="img/logo.png" alt="サンプルスタイルシートカンパニー"></h1>
<div id="nav1"><ul>
<li id="toppage"><a href="#">トップページ</a></li>
<li id="solution"><a href="#">ソリューション</a></li>
<li id="achievement"><a href="#">実績紹介</a></li>
<li id="partners"><a href="#">パートナー</a></li>
<li id="customers"><a href="#">カスタマー</a></li>
<li id="company"><a href="#">会社概要</a></li>
<li id="contact"><a href="#">お問い合わせ</a></li>
</ul></div><!--/#nav1--></div><!--/#header-->
<h2>あなたにとっての最高のパートナーであるために</h2>
<div id="wrapper">
<div id="content">
<h3 id="about">弊社について</h3>
<div class="detail">
<h4 id="tab1">スタイルシートによるレイアウトで、表現力と機能性が共存したサイトを構築。</h4>
<p>サンプルスタイルシートカンパニーでは、ウェブサイトの構築にスタイルシートによるレイアウトを採用しています。そのため、視覚的に美しい表現力だけでなく、ユーザーにとって使いやすい機能性とを合わせ持ったウェブサイトを提供することができます。</p>
<p class="link"><a href="#">ソリューションへ</a></p></div><!--/.detail-->
<div class="detail">
<h4 id="tab2">ウェブサイトを成功に導く、構造設計とインターフェース構築を武器に。</h4>
<p>100件あまりのウェブサイト構築経験から培った企画・開発力をバックボーンにもつ、サンプルスタイルシートカンパニー。競争に勝ち抜くための構造設計と、インターフェース構築を武器に、お客様のウェブサイトを成功に導くお手伝いをします。</p>
<p class="link"><a href="#">実績紹介へ</a></p></div><!--/.detail-->
</div><!--/#content-->
<div id="sidebar">
<h3 id="news">ニュースリリース</h3>
<dl>
<dt>2014年7月1日</dt>
<dd> サンプルスタイルシートカンパニーのウェブサイトがリニューアルしました。</dd>
<dt>2014年7月1日</dt>
<dd> サンプルスタイルシートカンパニーのウェブサイトがリニューアルしました。</dd>
<dt>2014年7月1日</dt>
<dd> サンプルスタイルシートカンパニーのウェブサイトがリニューアルしました。</dd>
<dt>2014年7月1日</dt>
<dd> サンプルスタイルシートカンパニーのウェブサイトがリニューアルしました。</dd>
<dt>2014年7月1日</dt>
<dd> サンプルスタイルシートカンパニーのウェブサイトがリニューアルしました。</dd>
</dl></div><!--/#sidebar--></div><!--/#wrapper--></div><!--/#container-->
<div id="footer">
<p><small>Copyright c Sample Stylesheet Company All Rights Reserved.</small></p>
<div id="nav2"><ul>
<li><a href="#">トップページ</a></li>
<li><a href="#">ソリューション</a></li>
<li><a href="#">実績紹介</a></li>
<li><a href="#">パートナー</a></li>
<li><a href="#">カスタマー</a></li>
<li><a href="#">会社概要</a></li>
<li id="right"><a href="#">お問い合わせ</a></li>
</ul></div><!--/#nav2-->
</div><!--/#footer-->
</body>
</html>
CSSでスタイル指定
@charset "utf-8";
body{
background: #CCC;
background-image: url(img/bg.png);
background-repeat: repeat-x;
}
#container{
margin: 0 auto;
width: 980px;
background: #FFF;
}
#header{
margin-bottom:20px;
}
h1{
padding: 20px 0 20px 15px;
}
#nav1 ul{
width: 980px;
height: 50px;
overflow: hidden;
}
#nav1 li{
float: left;
text-indent: -999em;
}
#nav1 li a{
width: 140px;
height: 50px;
background: url(img/btn.png) no-repeat left top;
display: block;
}
li#toppage a:link{
background-position: left bottom;
}
li#toppage a:hover{
background-position: left top;
}
li#solution a:link{
background-position: -140px bottom;
}
li#solution a:hover{
background-position: -140px top;
}
li#achievement a:link{
background-position: -280px bottom;
}
li#achievement a:hover{
background-position: -280px top;
}
li#partners a:link{
background-position: -420px bottom;
}
li#partners a:hover{
background-position: -420px top;
}
li#customers a:link{
background-position: -560px bottom;
}
li#customers a:hover{
background-position: -560px top;
}
li#company a:link{
background-position: -700px bottom;
}
li#company a:hover{
background-position: -700px top;
}
li#contact a:link{
background-position: right bottom;
}
li#contact a:hover{
background-position: right top;
}
h2{
margin: 0 20px 20px 20px;
height: 300px;
background: url(img/bill.jpg) no-repeat -25px -300px;
text-indent: -999em;
}
#wrapper{
margin: 0 0 20px 20px;
width: 920px;
overflow: hidden;
}
#content{
margin-bottom: 20px;
width: 570px;
height: 455px;
float: left;
border-right: 1px dotted #CCC;
}
h3#about{
margin-bottom: 20px;
width: 540px;
height: 42px;
background: url(img/about.png) no-repeat;
text-indent: -999em;
}
.detail{
margin: 10px 20px;
width: 520px;
border-bottom: 1px solid #CCC;
}
h4#tab1{
margin-bottom: 20px;
width: 322px;
height: 38px;
background: url(img/tab1.png) no-repeat;
text-indent: -999em;
}
p{
margin-bottom: 10px;
font-size: 15px;
line-height: 1.5;
}
h4#tab2{
margin-bottom: 20px;
width: 327px;
height: 38px;
background: url(img/tab2.png) no-repeat;
text-indent: -999em;
}
p.link{
margin-bottom: 24px;
color: #7077E5;
background: url(img/arrow.png) no-repeat;
text-indent: 1.5em;
}
#sidebar{
width: 330px;
float: right;
}
dl{
margin: 0 20px;
width: 290px;
font-size: 15px;
}
h3#news{
margin-bottom: 20px;
width:330px;
height: 42px;
background: url(img/news.png) no-repeat;
text-indent: -999em;
}
dt{
margin-bottom: 6px;
color: #F30;
font-weight: bold;
}
dd{
margin-bottom: 10px;
line-height: 1.3;
}
#footer{
padding: 10px 0 40px 0;
background: #1E225B;
text-align: center;
}
p small{
color: #CCC;
}
#nav2{
overflow: hidden;
}
#nav2 ul{
margin: 0 auto;
width: 590px;
}
#nav2 li{
line-height: 1.2;
float: left;
}
#nav2 li a{
padding: 0 10px;
font-size: 12px;
border-right: 1px solid #FFF;
}
#nav2 li a:link{
color: #FFF;
}
#nav2 li a:hover{
color: #F30;
}
li#right a{
border-right: none;
}
５時間でできたもの
全体図。
hover時の動作１。
hover時の動作２。
反省
- まさかまさかの、CSSのbodyを#bodyと記述、５時間経って気付くという失態。ささやかなミスでレイアウト全てがだめになる事もあるので、当たり前の単語ほど注意すべきかもしれない。
- 未だにpaddingとmarginの使い分けがスマートに出来ていない。まだまだ勉強も経験も足りないことを実感。
- 思い通りのレイアウトにするためには、まず初めに概要を把握しておく事、大体のイメージを頭に浮かべて、細部は後ほど手を入れる、にした方が速い。
- CSS: li aに{display: block;}を入れ忘れない。
- HTML: Definition Listは<dl><dt>定義する語句</dt></dd>その説明</dd></dl>で用いる
- しかしながら全くタグを打ったことのなかった自分が、このひと月で、画像も作ってHTMLもCSSも打って、５時間でこれだけの事ができるようになるとは予想以上だった。もっともっと手を動かさねばなりません。がんばろう。
今日の路線図
いたって順調。Illustratorのコマンドやペンツールの使い方だいぶ慣れてきました。
