CSS 初期化設定

  • 投稿日 : 2007-05-27, 16:08(最終更新日時 : 2010-02-28, 16:46)
  • タグ(CSS HTML Browser
  • カテゴリ(Design
  • 記し人(luvsic
  • 閲覧数(725)
  • test null 13
  • test 1-3
  • test 2-3

ブラウザによって見た目が変わる事、それに付随するコーディング作業を減らすためのCSS初期化設定。もちろん俺専用かつFuckin' validate.

随時ブラッシュアップ用。



@charset "utf-8";

/*===============================================*/
/*  CSS for myselfArchiver                       */
/*  http://luvsic.net/                           */
/*  (c) Luvsic All Rights Reserved.              */
/*  written by Luvsic 2010,02-09                 */
/*                                               */
/*== Font-Size: =================================*/
/*                                               */
/*  77%  = 10px  |  124% = 16px  |  170% = 22px  */
/*  85%  = 11px  |  131% = 17px  |  177% = 23px  */
/*  93%  = 12px  |  139% = 18px  |  185% = 24px  */
/*  100% = 13px  |  147% = 19px  |  193% = 25px  */
/*  108% = 14px  |  154% = 20px  |  200% = 26px  */
/*  116% = 15px  |  162% = 21px  |               */
/*===============================================*/


/*
		Reset
-------------------------------*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	outline: 0;
	border: none;
	font-size: 100%;
	font-style: normal;
	font-weight: normal;
	background: transparent;
	vertical-align: baseline;
	}

html {
	height: 100%;
	overflow-y: scroll;
	}

body {
	line-height: 1.6;
	font-size: 13px;
	*font-size: 81.25%;/* for IE6,IE7 */
	font-family: "Meiryo", "メイリオ", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "MS PGothic", "MS Pゴシック" sans-serif;
	}

h1,h2,h3,h4,h5,h6 {
	font-weight: normal;
	font-family: "Meiryo", "メイリオ", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "MS PGothic", "MS Pゴシック" monospace;
	}

a:link    {text-decoration:none;}
a:visited {text-decoration:none;}
a:hover   {text-decoration:underline;text-shadow: 0 0 1px #999;}
a:active  {text-decoration:none;}
a:focus   {outline: 0;}

p {
	line-height: 2em;
	}

strong, em {
	font-weight: bold;
	}

blockquote p {
	padding: 0.5em;
	}

blockquote p.cite{
	text-align: right;
	background-color: #f0f0e8;
	}

blockquote, q {
	quotes: none;
	}

q:before, q:after {
	content:'';
	}

ins {
	text-decoration: none;
	}

del {
	text-decoration: line-through;
	}

img {
	vertical-align: bottom;
	background-color: #090;
	color: #fff;
	}

br {
	letter-spacing: 0;
	}

pre {
	font-family: "Osaka-Mono", "Osaka-等幅", "MS Gothic", "MS ゴシック", arial, 'Lucida Grande', monospace;
	line-height: 1.4;
	letter-spacing: 0;
	white-space: -moz-pre-wrap; /* Mozilla */
	white-space: -pre-wrap;     /* Opera 4-6 */
	white-space: -o-pre-wrap;   /* Opera 7 */
	white-space: pre-wrap;      /* CSS3 */
	word-wrap: break-word;      /* IE 5.5+ */
	}

hr {
	margin: 0;
	padding: 0;
	border: 0;
	color: #000;
	background-color: #000;
	height: 1px;
	}

/* テーブル系 */

table {
	border-collapse: collapse;
	border-spacing: 0;
	}

caption, th {
	text-align: left;
	}

/* リスト系 */

ol, ul {
	list-style: none;
	list-style-position: inside;
	}

ol {
	list-style-type: decimal;
	}

ol li {
	zoom: normal;
	}

/* ボタン系 */

input[type="text"], input[type="password"], textarea, select {
	border-width: 1px;
	border-style: solid;
	border-color: #ddd;
	font-size: 93%;
	color: #333;
	background-color: #fff;
	}

input[type="text"]:focus, input[type="password"]:focus, textarea:focus {
	border-width: 1px;
	border-style: solid;
	border-color: #6ddeff;
	font-size: 93%;
	color: #333;
	background-color: #fff;
	}

button, input[type="button"], input[type="submit"], input[type="reset"] {
	padding: 3px 0.7em 1px;
	margin: 0;
	}

form label, button, input[type="button"], input[type="submit"], input[type="reset"], select {
	cursor: hand;
	cursor: pointer;
	}

optgroup {}

/*
        CSS Tricks
-------------------------------*/

/* 簡易ロールオーバー */
a:hover.rollover img {
opacity: 0.7;                      /* Standard: FF gt 1.5, Opera, Safari */
filter: alpha(opacity=70);         /* IE lt 8 */
-ms-filter: “alpha(opacity=70)”; /* IE 8 */
-khtml-opacity: 0.7;               /* Safari 1.x */
-moz-opacity: 0.7;                 /* FF lt 1.5, Netscape */
	}

/* new clearfix */
.clearfix:after {visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0;}
* html .clearfix             { zoom: 1; } /* IE6 */
*:first-child+html .clearfix { zoom: 1; } /* IE7 */

No comments yet


Copyright © Luvsic. Some rights reserved.