[HTML CSS

positionとは

ボックスの配置方法を指定するプロパティ。　top、right、bottom、left などで位置指定。

　static　　　初期値
　absolute 　 絶対的な位置
　relative　 相対的位置
　fixed 絶対位置＋固定位置

positionの使い道

　 positionを使えばソース上で自身より先に出現する要素より上に配置できる。
　ただしhightを指定しなければならないため、p要素などには向かない。
　floatとpositonを使い分ければ、文章構造にあったレイアウトができる。


参考URL
http://www.mdn.co.jp/di/articles/517/?page=13

■

HTML CSS

今日のポイント

　ソフトを使う時は、まずは環境設定を行い効率よく使えるようにする。
　webサイトは、いかにクリックすれば新たな情報を得る事ができるかを表現できるように考えて、制作する。


CSS Sprite

　CSSを使って、一枚の画像から一部分をトリミングして表示させる事。
　ファイルサイズを減らし、表示を高速化できる。


ナビゲーション（縦）

ポイント
　display: block;　ボタンとして機能させる。
　floatとoverflow: hidden;をうまく使う。
　クリックしてもらえるように、擬似クラスのカラーも工夫が必要

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>縦メニュー：CSS Sprit</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="nav">
<ul>
<li id="home"><a href="#"><span>ホーム</span></a></li>
<li id="food"><a href="#"><span>カフェフード</span></a></li>
<li id="drink"><a href="#"><span>カフェドリンク</span></a></li>
<li id="info"><a href="#"><span>インフォメーション</span></a></li>
<li id="contact"><a href="#"><span>お問い合わせ</span></a></li>
</ul>
</div>
</body>
</html>

@charset "utf-8";
/* CSS Document */

/*リセット*/
body,ul,li,a {
  margin:0;
  padding:0;
}
ul {
  list-style: none;
}
a {
  text-decoration: none;
}
/*全体*/
body {
  font-family:
    "Hiragino Kaku Gothic ProN",
    "Meiryo",
    sans-serif;
  font-size: 16px;
}
#nav {
  margin:50px 0 0 30px;
}
#nav ul{
  
  font-size: 18px;
  font-weight: bold;
  border-top: 2px solid #F30;
  border-bottom: 2px solid #F30;
  border-left: 2px solid #F30;
  overflow: hidden;
  text-align:center;
  width:750px;
  
 
}
#nav li { 
  float: left;
  width: 150px;
}
#nav li a {
  display: block;
  background-color: #0099ff;
  color:#fff;
  padding:8px 18px 6px 18px;
  border-right: 2px solid #F30;
  
}
#nav li a:link,#nav li a:visited{
  background-color: #0099ff;
	}
#nav li a:hover,#nav li a:active{
	background-color:#FFF;
	color:#3300CC;
}

ナビゲーション（横）

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>横並びのメニュー</title>
<link rel="stylesheet" href="css/style1.css">
</head>
<body>
<div id="nav">
<ul>
<li><a href="#">HTML+CSS </a></li>
<li><a href="#">JavaScript</a></li>
<li><a href="#">PHP</a></li>
<li><a href="#">WrodPress</a></li>
<li><a href="#">ActionScript</a></li>
</ul>
</div>
</body>
</html>

@charset "utf-8";
/* CSS Document */

/*リセット*/
body,ul,li,a {
  margin:0;
  padding:0;
}
ul {
  list-style: none;
}
a {
  text-decoration: none;
}
/*全体*/
body {
  font-family:
    "Hiragino Kaku Gothic ProN",
    "Meiryo",
    sans-serif;
  font-size: 16px;
}
#nav {
  margin:50px 0 0 30px;
}
#nav ul{
  
  font-size: 18px;
  font-weight: bold;
  border-top: 2px solid #F30;
  border-bottom: 2px solid #F30;
  border-left: 2px solid #F30;
  overflow: hidden;
  text-align:center;
  width:750px;
  
 
}
#nav li { 
  float: left;
  width: 150px;
}
#nav li a {
  display: block; 
  background-color: #0099ff;
  color:#fff;
  padding:8px 18px 6px 18px;
  border-right: 2px solid #F30;
  
}
#nav li a:link,#nav li a:visited{
  background-color: #0099ff;
	}
#nav li a:hover,#nav li a:active{
	background-color:#FFF;
	color:#3300CC;
}

チェックテスト

復習

http://d.hatena.ne.jp/web-mind/20130612/p1

Q01

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body></body>
</html>

Q02

豊島区池袋<a class="keyword" href="http://d.hatena.ne.jp/keyword/%C7%AD%A5%AB%A5%D5%A5%A7">猫カフェ</a>「CatCafé」

Q03

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>豊島区池袋猫カフェ「CatCaf&#233;」</title>
</head>
<body>
<h1>CatCaf&#233;のにゃんこ紹介</h1>

<h2>●あたる（白キジトラ・オス）</h2>

<p>目と耳が大きくてすばらしくイケメン。鳴き声もなかなかかわゆい。性格はいたってマイペース。 段ボール箱のかどや柱で爪とぎをするのが大好き。

［写真：幅200px 高さ200px］</p>

<h3>特徴</h3>
<p>大きな目と耳。まがったしっぽ。</p>

<h3>性格</h3>
<p>マイペース。</p>
</body>
</html>

Q03　改訂版

説明文なので、P要素（paragraph）ではなく、リストの方が適切。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>豊島区池袋猫カフェ「CatCaf&#233;」</title>
</head>
<body>
<h1>CatCaf&#233;のにゃんこ紹介</h1>

<h2>●あたる（白キジトラ・オス）</h2>

<p>目と耳が大きくてすばらしくイケメン。鳴き声もなかなかかわゆい。性格はいたってマイペース。 段ボール箱のかどや柱で爪とぎをするのが大好き。

［写真：幅200px 高さ200px］</p>

<dl>
<dt>特徴</dt>

<dd>大きな目と耳。まがったしっぽ。</dd>

<dt>性格</dt>
<dd>マイペース。</dd>
</dl>
</body>
</html>