ど素人から毛を生やす。<延>

新規コーディングのとき、CSSは大体これだけ設定しておけば良い気がする。

Web > css 2014年11月19日(最終更新:7月前)

2014年11月19日に作成されたページです。
情報が古かったり、僕が今以上のど素人だった頃の記事だったりする可能性があります。

どもです。
新規コーディングの際、取り敢えず設定する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 が、結構忘れられやすいように思います。
これを忘れると背景が途中で切れてしまう等の事態が起こるので確認を忘れないように。

この記事は役に立ちましたか?
  • (・∀・) 参考になった (0)
  • (`・ω・´) 役に立った (0)
  • _(:3」∠)_ 面白かった (1)