第1回実技試験の内容

作例

今回の実技試験の概要

フォルダー名を「自分の名前_test01」として、試験終了後、講師に提出する事
画像は各自で用意し指定されたサイズにトリミングする事

headerの幅960px高さは350px。背景画像に「CAFE de FELICA」の文字を修飾し入れる
cssファイルは外部リンクでリンクさせ、必要なリセットをかける
h1はテキストで「CAFE de FELICA」を入れ、cssで隠す
ボタンは4つを均等の幅で高さは50pxにする
ボタンのa要素にborderの指定をし、不必要なborderのみ無くす
mainは幅650px 高さ500pxで左側に配置
main内に400x300pxの画像を配置し文章を回り込みさせる
フッターは高さ100pxで自身の名前をローマ字で入れる。
各要素の間の空きは10px、背景色は適宜
ナビゲーションボタンをホバーした際に文字色と背景色が変わるように

使用するテキスト

cafe de felica


ボタン1
ボタン2
ボタン3
ボタン4


毎日食べたい、おうちみたいなごはんやおやつ

cafe de felicaは、あなたのもうひとつの「おうち」になりたいごはんやさんです。
毎日食べたくなるような、どこかホッとするごはんにおやつ、飲みものを揃えて、ゆっくりくつろげる空間でお迎えします。
気軽なおひるごはんに、お茶の時間に、会社帰りの晩ごはんに、
「ただいま」を心よりお待ちしています。ただいま、夏限定のメニューを多数ご用意しております。
ぜひお越しください。

※画像は自身で用意しトリミングする事
ヘッダー画像（サイズ960×350）
メイン画像（サイズ400×300）

index.html

<body>
<div class="container">
<header>
<h1>CAFE de FELICA</h1>
</header>
<nav class="g-nav">
<ul>
<li class="nav1"><a href="#">ボタン1</a></li>
<li class="nav2"><a href="#">ボタン2</a></li>
<li class="nav3"><a href="#">ボタン3</a></li>
<li class="nav4"><a href="#">ボタン4</a></li>
</ul>
</nav>

<div class="wrapper">
<div class="main">
<h2>毎日食べたい、おうちみたいなごはんやおやつ</h2>
<p><img src="content.jpg" alt="">
CAFE de FELICAは、あなたのもうひとつの「おうち」に
なりたいごはんやさんです。<br>毎日食べたくなるような、どこかホッとする
ごはんにおやつ、飲みものを揃えて、ゆっくりくつろげる空間でお迎えし
ます。気軽なおひるごはんに、お茶の時間に、会社帰りの晩ごはんに、
「ただいま」を心よりお待ちしています。ただいま、夏限定のメニューを多数ご用意しております。
ぜひお越しください。</p>
</div><!--順番は優先度の高い順-->

<div class="sub">
</div><!--順番は優先度の高い順-->
</div><!--/.wrapper -->

<footer><p><small>FELICA TARO</small></p></footer>
</div><!--/.container -->
</body>

style.css

/* reset */
html,body,h1,h2,p,ul,li {
  margin: 0;
  padding: 0;
}
ul {
  list-style: none; /* マーカーを消す */
}
a {
  text-decoration: none; /* 下線を消す */
}
img {
  vertical-align: bottom;
}

/*レイアウトのスタイル*/
body {
background: #D2D2D2;
}
.container {
  width: 960px;
  padding: 10px;
  margin: 0 auto;
  background: #FFF;
}
header {
  width: 960px;
  height: 350px;
  background: url(header.jpg) no-repeat;
  margin-bottom: 10px;
}
h1 {
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
}
.g-nav {
margin-bottom: 10px;
}
.g-nav>ul {
  overflow: hidden;
}
.g-nav li {
  float:left;
  width: 25%;
  height: 50px;
}

.g-nav li>a {
  display:block;
  line-height: 50px;
  text-align:center;
  color: #fff;
  border-right: 1px solid #FFF;
  background: #AAA;
}
.g-nav li:last-child>a{
  border-right: none; 
}

.g-nav li>a:hover {
  color: #000;
  background: #D5D5D5;
}

.wrapper {
  overflow: hidden;
  margin-bottom: 10px;
}
.main {
  width: 650px;
  height: 500px;
  float :left;
  background: #FAFBD5;
}
h2 {
padding: 20px 0;
text-align: center;
}
.main>p {
margin: 30px;
line-height: 1.6;
}
.main img {
float: left;
margin-right: 20px;
}

.sub {
  width: 300px;
  height: 500px;
  float :right;
  background:#F5E1C5;
}
footer {
  background: #FCA69B;
  color: #FFF;
  height: 100px;
}
footer p {
  text-align:center;
  line-height: 100px;
}