Web Sytem | AIDREAM CodeIgniter / CakePHP / jQuery によるWebシステム開発、PhoneGap / jQueryMobile / HTML5 / CSS3 によるスマートフォンアプリ開発

reset.css（リセット・スタイルシート）とは

• ブラウザごとに指定されているデフォルトのCSSをリセットする。
• ※ line-height は 単位をつけないこと

Clearfix（クリアフィックス） とは

• 「フロートした要素の親要素の背景が表示されない」という問題を、CSSだけで解決するテクニック。
• たとえば、「div#container 」の中に「 div#main 」と「 div#side 」を含めているとする。
  「 div#container 」に背景を指定し、「 div#main 」と「 div#side 」をそれぞれ左右にフロートさせた場合、背景が「 div#main 」と「 div#side 」の下辺まで塗りつぶされず、上に詰まった感じで表示される。
  これは、「フロートした要素は、親要素の高さとは無関係に配置される」という決まりがあるために
  起きる問題だ。この問題を解決するのが、Tony Aslett氏が編み出した Clearfix 。
• 「フロートした要素の親要素」に Clearfix を適用すれば、「フロートした要素」の後に、
  「 <br class=”clear”> 」などを記述しなくてすむ。

@charset "UTF-8";
/* CSS Information ============================================
 * Description: リセット・スタイルや基本スタイル、クリアフィックスなど。
 * Editor:
========================================================= */

/* =========================================================
 Reset
========================================================= */

html, body, div, h1, h2, h3, h4, h5, h6, p, blockpuote, pre, address, ul, ol, li, dl, dt, dd, table, th, td, form, input, fieldset {
	margin: 0;
	padding: 0;
}

/* Scroll Bar */
html {
	overflow: scroll;
	/* overflow: -moz-scrollbars-vertical; */
	/* overflow-x: scroll; */
}

/* Font */
body {
	font-size: 62.5%;
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS P Gothic", sans-serif;
	line-height: 1;
}

address, em, caption, cite, code, dfn, h1, h2, h3, h4, th, td, var {
	font-style: normal;
	font-weight: normal;
}

/* Table */
table {
	border-collapse: collapse;/* separate */
	border-spacing: 0;
}

th, td {
	text-align: left;
}

/* Image */
img {
	border: 0;
	vertical-align: bottom;
}

/* List */
ul, ol {
	list-style: none;
}

/* Form */
textarea {
	font-size: 1em;
}

/* =========================================================
 Basic
========================================================= */

div#container {
	width: 100%;
	text-align: center;
}

div#wrapper {
	margin: 0 auto;
	width: 900px;
	text-align: left;
}
.main {
	margin: 0 auto;
	text-align: left;
}

.center {
	text-align: center;
}

.right {
	text-align: right;
}

.left {
	text-align: left;
}

.underline {
	font-weight: bold;
	background: #FF9;
	padding: 3px;
}

.break-line {
	margin: 0 0 15px;
}

.replace {
	display: block;
	text-indent: -9999px;
	background-repeat: no-repeat;
}
.tableType1 {
	border-collapse: separate;
}

.tableType1 th,
.tableType1 td {
	border-bottom: 2px groove #FFF;
	padding: 0.7em;
	font-size: 1.2em;
}

.tableType1 tr.last th,
.tableType1 tr.last td {
	border-bottom: none;
}

.tableType1 th {
	border-right: 1px dotted #CCC;
	color: #006ADB;
	font-weight: normal;
}

.tableType1 input,
.tableType1 textarea {
	vertical-align: middle;
	padding: 0.3em;
}

.tableType1 textarea {
	width: 95%;
	font-size: 1em;
	line-height: 1.5em;
}
.tableType1 input,
.tableType1 textarea {
	vertical-align: middle;
	padding: 0.3em;
}

.tableType1 textarea {
	width: 95%;
	font-size: 1em;
	line-height: 1.5em;
}

/* =========================================================
 Clearfix
========================================================= */

.clearfix:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}

.clearfix { display: inline-table; }