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

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

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

このページは2014.11.19に作成されています。時代の流れとそぐわない可能性があったり、僕が今以上のど素人だった頃の記事だったりするので、新しい記事を探してみるのも良いかもしれません。

どもです。
残業続きですがポケモンΩRが楽しみな餅。です。

ΩR手持ち草縛りやったるでー(゚∀゚)

 

それはともかく、新規コーディングの際、取り敢えず設定する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:'Hiragino Kaku Gothic ProN', 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。複雑なデザインにするほど、この機能によってレイアウトが大きく崩れる可能性を孕みます。
サイトのあり方によっては、機能していた方が有り難い場合もあるのでしょうが、基本的に切ってしまった方が良いと思います。
このとき、自動調整される要素に max-height:100% を設定しないと、サイズ調整が直らない場合があるそうです。但し max-height:100% にはデメリットもあるので、要注意。
また、一緒に viewport の設定もした方が良さそう。

また、スマホを想定しないサイトの場合、コンテンツ最小幅に関する設定も必要です。

html,body{
	min-width:コンテンツ幅px;
	}

この min-width:コンテンツ幅px が、結構忘れられやすいように思います。
これを忘れると背景が途中で切れてしまう等の事態が起こるので確認を忘れないように。

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