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