base.cssの参考になるサイトを教えて下さい。

質問

base.cssの参考になるサイトを教えて下さい。

cssを独習中です。参考書に書かれているbase.cssだけではよくわかりません。

参考書には若干の修正は必要だがいったん作成しておけばどのサイトでも適用できると書いてあるのでこれというのを作成しておきたいのですが、サイトによって内容がさまざまな為どれを参考にしていいのか困ってます。

回答No.5

metametamu · ベストアンサー

■さらにdefault.cssの続き　(必要であればmediaには携帯などへの指定を書きます)

select {
display:block;
border:1px solid #d0d0d0;
line-height:normal;
vertical-align:bottom;
font-size:100%;
font-family:"Hiragino Kaku Gothic", "ヒラギノ角ゴPro W3", Osaka, Meiryo, "メイリオ", Arial, Helvetica, Verdana, "ＭＳ Ｐゴシック", sans-serif;
letter-spacing:0 }
optgroup {
padding-left:0;
text-indent:3px;
font-style:italic }
option {
font-style:normal }

/* media */

@media screen,projection {}

@media print {}

@media handheld {}

@media tv {}

■ie.css

@charset "Shift_JIS";

* {
zoom:1; }
ul,ol,ol li,acronym,abbr {
zoom:normal; }
sub {
top:0.3em; }
sup {
top:-0.3em; }
legend {
margin-left:0;
padding-left:0; }
html>/**/body legend {
margin-left:5px;
padding-left:2px; }
input[type="checkbox"],input[type="radio"] {
margin:0; }
html>/**/body input[type="checkbox"], html>/**/body input[type="radio"] {
margin:4px; }

お礼

とても丁寧にありがとうございました。
参考にさせてもらいます。

回答No.4

metametamu

■default.cssの続き　※すみません、まだ足りませんでした・・・

table {
border-collapse:collapse;
border-spacing:0;
line-height:1.7;
font-size:100% }
tr {
height:auto }
th {
padding:0;
border:1px solid #777;
text-align:center;
font-weight:normal }
td {
padding:0;
border:1px solid #777;
text-align:center }
hr {
height:0;
margin:7px 0;
border:0;
border-top:1px solid #777 }
i,address,em,dfn,cite,var {
font-style:normal }
strong,b {
font-weight:normal }
acronym,abbr {
border-bottom:1px dotted;
cursor:help }
q:before,q:after {
content:"" }
br {
letter-spacing:0 }
fieldset {
margin:0;
padding:0;
border:1px solid #d0d0d0 }
legend {
margin-left:5px;
padding-left:2px;
font-weight:normal;
font-size:100% }
optgroup,option {
font-size:100%;
font-family:"Hiragino Kaku Gothic", "ヒラギノ角ゴPro W3", Osaka, Meiryo, "メイリオ", Arial, Helvetica, Verdana, "ＭＳ Ｐゴシック", sans-serif }
textarea {
border:1px solid #d0d0d0;
overflow:auto;
font-size:100%;
font-family:"Hiragino Kaku Gothic", "ヒラギノ角ゴPro W3", Osaka, Meiryo, "メイリオ", Arial, Helvetica, Verdana, "ＭＳ Ｐゴシック", sans-serif;
vertical-align:bottom }
input {
line-height:normal;
padding-right:0;
padding-left:0;
vertical-align:bottom;
overflow:visible;
font-size:100%;
font-family:"Hiragino Kaku Gothic", "ヒラギノ角ゴPro W3", Osaka, Meiryo, "メイリオ", Arial, Helvetica, Verdana, "ＭＳ Ｐゴシック", sans-serif }
input[type="checkbox"], input[type="radio"] {
margin:4px;
vertical-align:middle }
input[type="submit"], input[type="reset"], input[type="button"] {
margin:0 }
button:lang(ja):before {
float:left;
content:"";
line-height:1.7 }
button {
margin:0;
padding:0;
vertical-align:bottom;
line-height:1.7;
overflow:visible;
font-size:100%;
font-family:"Hiragino Kaku Gothic", "ヒラギノ角ゴPro W3", Osaka, Meiryo, "メイリオ", Arial, Helvetica, Verdana, "ＭＳ Ｐゴシック", sans-serif;
cursor:default }
button * {
line-height:1.7;
white-space:nowrap }

回答No.3

metametamu

※すみません、３回になりそうです。

■default.css

@charset "Shift_JIS";

/* reset */

html {
font-family:"Hiragino Kaku Gothic", Osaka, Meiryo, Arial, Helvetica, Verdana, "MS PGothic", sans-serif !important }

html {
overflow-y:auto;
color:#000;
font:normal normal normal medium/1.7 "Hiragino Kaku Gothic", "ヒラギノ角ゴPro W3", Osaka, Meiryo, "メイリオ", Arial, Helvetica, Verdana, "ＭＳ Ｐゴシック", sans-serif !important;
font-size:small;
letter-spacing:0;
background:#fff }
body {
overflow-y:visible !important;
overflow-y:auto;
margin:0;
font-size:100.01%;
background:none }
code,samp,kbd {
font-family:"Hiragino Kaku Gothic", "ヒラギノ角ゴPro W3", Osaka, Meiryo, "メイリオ", Arial, Helvetica, Verdana, "ＭＳ Ｐゴシック", sans-serif }
h1,h2,h3,h4,h5,h6 {
margin:0;
font-size:100%;
font-weight:normal }
a {
cursor:pointer;
cursor:hand }
a:link {
color:#00f }
a:visited {
color:#709 }
a:hover {
color:#d0f;
visibility:inherit }
a:active {
color:#d0f;
outline:1px dotted #000;
visibility:visible }
img {
border:0;
vertical-align:top;
-ms-interpolation-mode:bicubic }
object {
vertical-align:top;
-ms-interpolation-mode:bicubic }
img[src$=".gif"],object[data$=".gif"],object[codetype="image/gif"],object[type="image/gif"] {
-ms-interpolation-mode:nearest-neighbor;
image-rendering:-moz-crisp-edges }
dl,dd,blockquote,p,form {
margin:0 }
ol {
margin:0;
padding:0 }
ul {
list-style-type:disc;
margin:0;
padding:0 }
sub {
position:relative;
top:0.25em;
vertical-align:baseline }
sup {
position:relative;
top:-0.15em;
vertical-align:baseline }
pre {
margin:0;
font-family:"Hiragino Kaku Gothic", "ヒラギノ角ゴPro W3", Osaka, Meiryo, "メイリオ", Arial, Helvetica, Verdana, "ＭＳ Ｐゴシック", sans-serif;
white-space:-moz-pre-wrap;
white-space:-o-pre-wrap;
white-space:-pre-wrap;
white-space:pre-wrap;
-ms-word-wrap:break-word;
word-wrap:break-word }

回答No.2

metametamu

自分用のですが、良ければ参考にしてください。
※長すぎるので2回に回答を分けます

■HTMLでの読み込み

<link rel="stylesheet" href="css/simple.css" type="text/css" />
<link rel="stylesheet" href="css/idefault.css" media="screen,projection,print,handheld,tv" type="text/css" />
<!--[if IE]><link rel="stylesheet" href="css/ie.css" type="text/css" /><![endif]-->

■simple.css　※古いブラウザ向けの指定なので必要な時にだけ追加で指定

@charset "Shift_JIS";

■idefault.css

@charset "Shift_JIS";
@import "default.css";

回答No.1

yyr446

参考になるサイト↓
http://www.w3.org/TR/CSS2/
上記の日本語訳っぽいやつ（?）
http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/cover.html

いったん作成しておけばたいていのサイトでも適用できるサンプル↓
http://www.w3.org/TR/CSS2/sample.html

お礼

遅くなってすみません。

丁寧な回答ありがとうございました。
参考にして勉強してみます。