10月3日

サイト css

今日のサイト7

Nippon Archives　JR東海エージェンシー
http://www.nipponarchives.jp/

概要

万葉集、富士山、二十四節気、など、美しい日本をテーマとした動画コンテンツ配信サイト。

感想

トップページからの各番組コンテンツが、統一感のある内容でとてもきれいです。
時間が経っても古びにくいテーマ、というのはいいですね。


floatで作る段組み、余白「15px」

<?xml version="1.0" encoding="UTF-8"?>
<!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=UTF-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<title>15px</title>
<style type="text/css">
/* リセットスタイル */
html, body, div, h1, h2, h3, h4, h5, h6,p, blockquote, pre, 
address,ul, ol, li, dl, dt, dd,table, th, td, form, fieldset {
	margin: 0;
	padding: 0;
	line-height: 1.0;
	font-family:
	"ヒラギノ角ゴ Pro W3",
	"Hiragino Kaku Gothic Pro",
	"Hiragino Kaku Gothic Pro W3",
	"メイリオ",
	Meiryo,
	Osaka,
	"ＭＳ Ｐゴシック",
	"MS PGothic",
	sans-serif;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
ul li, ol li {
	list-style-type: none; /* マーカーを消す */

}
a {
	text-decoration: none; /* 下線を消す */
}
img {
	border: 0;
}
img, input {
	vertical-align: middle;
}
body {
	background-color: #D2E5E5;
}
#container {
	width: 800px;
	height: auto;
	margin: 15px auto;/* top,bottomにmarginを指定 センタリング */
	padding: 15px 0;/* top,bottomにpaddingを指定 */
	background-color: #FFFFFF;
}
#header {
	width: 770px;
	height: 90px;
	margin: 0 15px 15px 15px;/* top以外にmarginを指定 */
	background-color: #E6DCF0;
}
#wrapper {
	width: 800px;
	height: auto;
	margin: 0 0 15px 0;/* bottomにmarginを指定 */
	overflow: auto;/* floatを親ボックスの高さ内に */
}
#content {
	width: 580px;
	height: 350px;
	margin: 0 0 0 15px;/* leftにmarginを指定 */
	background-color: #F0E7DB;
	float: left;
}
#sidebar {
	width: 175px;
	height: 350px;
	margin: 0 15px 0 0;/* rightにmarginを指定 */
	background-color: #DDF0D5;
	float: right;
}
#footer {
	width: 770px;
	height: 90px;
	margin: 0 15px 0 15px;/* right,leftにmarginを指定 */
	background-color: #F0F763;
	clear: both;/* 左右のfloatをclear、寄せを解除する決まり文句 */
}
</style>
</head>
<body>
<div id="container">
<div id="header">header</div>
<div id="wrapper">
<div id="content">content</div>
<div id="sidebar">sidebar</div>
</div>
<div id="footer">footer</div>
</div>
</body>
</html>
  • リスト化の順番（外→内）
    1. reset
    2. body
    3. container
    4. header
    5. nav
    6. wrapper
    7. content
    8. sidebar
    9. footer
    10. h1
    11. p
    12. h2, h3, h4
    13. ul, ol, dl
    14. li
    15. table
    16. address
  • 記述の順番（頻度、イメージ）
    1. color、font-family、font-size、font-style、font-weight、line-height（文字指定）
    2. margin、padding（空間指定）
    3. width、height（コンテントが入るエリア）
    4. background-color（背景色）
    5. background-image（背景画像）
    6. border（枠線）
  • 実務では外部CSSファイル読み込み
  • float,marginの組み合わせ
  • IE6対策（マージン２倍）
  • マージンの相殺
  • 幅の設定
  • ボックスの追加