WEBデザイン授業10日目

今回の授業内容をまとめました。

  1. ブランディングのない会社、個人の会社のロゴは<h1>にしても検索されにくい。サービス内容を入れた方が良い。
  2. 代替テキストを指定すべきもの、押させる画像（ナビ）はimg要素で入れます。幅、高さは必須。（早く表示される）
  3. 文字と写真の意味が同じ内容は1つの段落にまとめます。2つの段落に分けないようにします。<p><img src=" " /></p>
  4. 「div」だらけにしない。大枠だけ箱を作り、中は要素に対して「id」や「class」をつけます。

floatの使い方について

  1. float を指定したボックスには width を指定すること。
  2. float を指定した場合、paddingに注意します。
  3. 2カラムの場合、情報の優先順位が優先されるのはcontentになります。そのブロックを「右」に配置する設定に「float：right」を使います。
  4. 「sideNav」と「content」この２つのブロックが左右に浮き上がっている状態（浮動状態）


<!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" />
<title>Layout01</title>
<link href="style.css" rel="stylesheet" type="text/css" media="all">
</head>
<body>
<div id="container">
<div id="header">
<h1>Layout Technique 01</h1>
</div>
<div id="wrapper">
<div id="content">id "contentv" の内容がここに入りますid "contentv" の内容がここに入りますid "contentv" の内容がここに入ります</div>
<div id="sideNav">id "sideNav" の内容がここに入ります</div>
</div>
<div id="footer">id "footer" の内容がここに入ります</div>
</div>
</body>
</html>

@charset_"Shift_JIS";

html,body,div,h1{/*リセット*/
	margin:0;
	padding:0;
}
body{
	text-align:center;/*全体をセンター　IE6以前の対策*/
}
#container{
	height:600px;
	width:800px;
	margin:0 auto;
	text-align:left;/*全体をセンター　IE6以前の対策*/
}
#header {
	height: 120px;/*内容に合わせて可変する為のheight 普通は指定しない*/
	width: 800px;
	background:#CCFF99;
}
#wrapper{
	height:400px;
	width:800px;
}
#content{
	height:400px;
	width:550px;
	float:right;
	background:#FF9999;
	padding:30px;
	margin-left:30px;
}
#sideNav{
	height:400px;
	width:160px;
	float:left;
	background:#99FFFF;
}
#footer{
	height:80px;
	width: 800px;
	clear:both;
	background:#FFFF66;
}