どもです。
新しくウェブサイトを作る際、取り敢えず設定するCSSは何でしょうか。
リセットCSSとかありますが、僕は使わない派。
いちいちアップしてリンク繋ぐのが面倒ってのもありますが、要素を虱潰しにリセットするせいで親子関係が殺されるのがかなり嫌なんですよね。
とはいえ、リセットCSSを使わないなら自前でリセットしなければなりません。
取り敢えず、これだけ設定しておけば充分なんじゃね?
と思うスタイルを晒してみます。
*{
padding:0;
margin:0;
box-sizing:border-box;
max-width:100%;
max-height:100%
}
body,html{
width:100%;
}
body{
font-size:14px;
line-height:1.8em;
font-family:"游ゴシック", "Yu Gothic", "游ゴシック体", "YuGothic", YuGothic, Avenir, Verdana, Arial, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "メイリオ", Roboto, Meiryo, sans-serif;
-webkit-text-size-adjust:100%;
}
a:hover img{
opacity:0.8;
}
img{
border:none;
outline:none !important;
height:auto;
vertical-align:bottom;
}
僕的にはこれだけ設定しておけば充分なんじゃないかなーと。
まず、全体の隙間を除去して、旧IEだと画像に勝手にborder引かれることがあるので除去。
画像はwidthを設定することが多いので、比率が正しくなるように高さにautoを設定。
not必須ですが日本語サイトだと画像にvertical-align:bottomがお薦め(下揃えになります)。
旧いブラウザだと親要素の設定によってoutlineがついてしまう場合があるのでnoneに。
a:hover imgはお好みだと思いますが、何らかの挙動を共通して設定すると良いでしょう。
レスポンシブサイトを作る際、全ての要素に
box-sizing:border-box と max-width:100%; を設定しておくとスムーズです。
が、外部のjsなんかを入れる場合、box-sizing:border-box で挙動にズレが発生する場合があるので注意。
font-sizeは最も読みやすいフォントサイズは14pxと聞いたことがあるので14で。
line-heightはサイトデザインにもよりますが、体感的にこれが最も読みやすい気がします。
font-familyはゴシック系ならこの設定で良いと思います。メイリオ好きなんですけどねぇ。これが時代か。
-webkit-text-size-adjustはスマホ等のデバイスの際、画面サイズに応じて文字サイズを自動的に調整する機能を取り扱うものです。
初期設定はauto。複雑なデザインにするほど、この機能によってレイアウトが大きく崩れる可能性を孕みます。
サイトのあり方によっては機能していた方が有り難い場合もあるのでしょうが、きちんとCSSを組むなら原則は切るべきです。
このとき、自動調整される要素に max-height:100% を設定しないと、サイズ調整が直らない場合があるそうです。但し max-height:100% にはデメリットもあるので、要注意。
また、一緒に viewport の設定もした方が良さそう。
また、レスポンシブでないサイトの場合、コンテンツ最小幅に関する設定も必要です。
html,body{
min-width:コンテンツ幅px;
}
この min-width:コンテンツ幅px が、結構忘れられやすいように思います。
これを忘れると背景が途中で切れてしまう等の事態が起こるので確認を忘れないように。
それと、以下はページデザインで内容が変わりますが、何であれセットしておくべき項目です。
値は一例。
/* 各パターンの文字色 */
:root {
--main-color: #000;
--link-color: #007bbb;
--visited-color: #522f60;
--active-color: #0095d9;
--bg-color: #fff;
}
html{
background:var(--bg-color);
}
body{
color:var(--main-color);
}
a{
color:var(--link-color);
}
a:visited{
color:var(--visited-color);
}
a:hover, a:active{
color:var(--active-color);
}
/* tableの初期値 */
table{
border-collapse:collapse;
border:1px solid #aaa;
}
table th,
table td{
padding:4px 8px;
border:1px solid #aaa;
}