基金訓練WEB授業中のテスト - 基金訓練webデザイン講座

今日は初めてのプレゼン。

いやぁ、超緊張した〜！

自分のプレゼンは早めにとっとと終わらせて、
他の受講生のプレゼンを聞きながら、ナビゲーションのテストです。

他のひとのプレゼンを聞くのはおもしろかったな。
今までやってきた仕事もそろぞれ、趣味や興味の先も色々。作りたいものもそれぞれ。
この時点でかなり細かいところまでプレゼンしている人もいた。
サイトがどんな風に出来上がるのか楽しみ！

スタイルシートは、
ようやく、ホントようやくですが、、、
ナビゲーションが少しずつわかるようになってきて面白くなってきた。

でも、メニューの幅の調整がうまくできずに、Gano君に教えてもらって、一応授業内で完成。Gano君ありがとう。

以下が、課題のソースになりますが、
正解なのかな？

まずは１つ目の課題。floatを使ったレイアウトその１。

<? xhtml1.0 encoding="UFT-8" ?>
<DOCTYPE html>
<html>
<head>
<title>続テスト1（プレゼンの空き時間用）</title>
<meta http-equiv="Content Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content Style Type" content="text/css" />
<style type="text/css">
<!--

body, div {
  margin: 0;
  padding: 0;
}

body {
  background-color: #dcdcdc;
}


div#container {
  width: 800px;
  margin: 50px auto 0 auto;
}

div#wrapper {
  border: solid 1px #fff;
  width: 800px;
  height: 400px;
  background-color: #fff;
}

div#content {
  margin-left: 5px;
  float: right;
  display: inline;
  width: 600px;
  height: 400px;
  background-color: #6495ed;
}

div#sidebar {
  width: 195px;
  height: 400px;
  background-color: #cd5c5c;
}

-->
</style>
</head>

<body>

<div id="container">

<div id="wrapper">
<div id="content">
</div>
<div id="sidebar">
</div>
</div>

</div>

</body>
</html>

２つ目の課題。floatを使ったレイアウトその２。

<? xhtml1.0 encoding="UFT-8" ?>
<DOCTYPE html>
<html>
<head>
<title>続テスト（プレゼンの空き時間用）floatのナビ2個目</title>
<meta http-equiv="Content Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content Style Type" content="text/css" />
<style type="text/css">
<!--

body, div {
  margin: 0;
  padding: 0;
}

body {
  background-color: #dcdcdc;
}


div#container {
  width: 800px;
  margin: 50px auto 0 auto;
}

div#wrapper {
  border: solid 1px #fff;
  width: 800px;
  height: 400px;
  background-color: #fff;
}

div#content {
  margin-right: 5px;
  float: left;
  display: inline;
  width: 600px;
  height: 400px;
  background-color: #6495ed;
}

div#sidebar {
  float: right;
  width: 195px;
  height: 400px;
  background-color: #cd5c5c;
}

-->
</style>
</head>

<body>

<div id="container">

<div id="wrapper">
<div id="content">
</div>
<div id="sidebar">
</div>
</div>

</div>

</body>
</html>

３つ目の課題。(縦のメニュー)

<? xhtml1.0 encoding="UFT-8" ?>
<DOCTYPE html>
<html>
<head>
<title>続テスト（プレゼンの空き時間用）擬似クラス</title>
<meta http-equiv="Content Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content Style Type" content="text/css" />
<style type="text/css">
<!--

body, div, ul, li, a {
  margin: 0;
  padding: 0;
}

body {
  background-color: #fff;
}

div#nab {
  margin:50px auto 0 auto;
  font-size: 0.875em;
  width: 200px;
}

div#nab ul {
  list-style-type: none;
}

div#nab li {
  color: #999;
  border-top: solid 1px #999;
}

div#nab li.last {
  border-bottom: solid 1px #999;
}

div#nab li a {
  color: #000;
  text-align: center;
  text-decoration: none;
  line-height: 2.4;
}

div#nab li a:hover {
  color: #ff8c00;
}

-->
</style>
</head>

<body>

<div id="nab">
<ul>
<li><a href="#">メニューのリンク1</a></li>
<li><a href="#">メニューのリンク2</a></li>
<li><a href="#">メニューのリンク3</a></li>
<li><a href="#">メニューのリンク4</a></li>
<li><a href="#">メニューのリンク5</a></li>
<li class="last"><a href="#">メニューのリンク6</a></li>
</ul>
</div>

</body>
</html>

４つ目の課題。(横のメニュー１)

<? xhtml1.0 encoding="UFT-8" ?>
<DOCTYPE html>
<html>
<head>
<title>続テスト（プレゼンの空き時間用）擬似クラス　横ナビ</title>
<meta http-equiv="Content Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content Style Type" content="text/css" />
<style type="text/css">
<!--

body, div, ul, li, a {
  margin: 0;
  padding: 0;
}

body {
  background-color: #fff;
}

div#nab {
  margin:50px auto 0 auto;
  font-size: 0.875em;
  width: 800px;
}

div#nab ul {
  list-style-type: none;
}

div#nab li {
  float: left;
  display: inline;
}

div#nab li a {
  color: #000;
  display: block;
  text-align: center;
  text-decoration: none;
  line-height: 2.4;
  margin-right: 30px;
}

div#nab li a:hover {
  color: #ff8c00;
}

-->
</style>
</head>

<body>

<div id="nab">
<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>
</ul>
</div>

</body>
</html>

5つ目の課題(横のメニュー２)

<? xhtml1.0 encoding="UFT-8" ?>
<DOCTYPE html>
<html>
<head>
<title>続テスト（プレゼンの空き時間用）擬似クラス　横ナビ</title>
<meta http-equiv="Content Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content Style Type" content="text/css" />
<style type="text/css">
<!--

body, div, ul, li, a {
  margin: 0;
  padding: 0;
}

body {
  background-color: #fff;
}

div#nab {
  margin: 50px auto 0 auto;
  font-size: 0.6em;
  width: 500px;
}

div#nab ul {
  list-style-type: none;
}

div#nab li {
  float: left;
  display: inline;
}

div#nab li.last {
  margin: 0;
  width: 100px;
}

div#nab li a {
  color: #fff;
  text-align: center;
  text-decoration: none;
  line-height: 3.5;
  display: block;
  width: 99px;
  margin-right: 1px;
  background-color: #000;
}

div#nab li a:hover {
  background-color: #00bfff;
}

-->
</style>
</head>

<body>

<div id="nab">
<ul>
<li><a href="#">トップ</a></li>
<li><a href="#">フォトアルバム</a></li>
<li><a href="#">イラスト</a></li>
<li><a href="#">素材集</a></li>
<li class="last"><a href="#">お問い合わせ</a></li>
</ul>
</div>

</body>
</html>

Jimdoでサイト作り。

最後の一時間はJimdo。

Jimdoは検索エンジンで上位表示されやすいんだって。
３ヶ月はがんばって記事を更新しないといけないんだけど、
一度上位表示されるとなかなか落ちないらしい。
これはいいね！いろいろ使えそう！