【コピペで便利】CSS鉄板テンプレート(media query,clearfix)

2019-03-17 08:53

CSSの最初に書いておくと便利なスタイルを紹介します。

cssに追加して、スタイル調整やコーディングをサクサク進めましょう。

汎用width
clearfix
media query (スマホ用スタイル)

汎用width

1%〜100%まで事前に用意しておくと便利です。<table>でカラムの調整をするときや、2カラムレイアウトの幅調整などに利用していただけます。

.w1per	{ width:1%; }
.w2per	{ width:2%; }
.w3per	{ width:3%; }
.w4per	{ width:4%; }
.w5per	{ width:5%; }
.w6per	{ width:6%; }
.w7per	{ width:7%; }
.w8per	{ width:8%; }
.w9per	{ width:9%; }
.w10per	{ width:10%; }
.w11per	{ width:11%; }
.w12per	{ width:12%; }
.w13per	{ width:13%; }
.w14per	{ width:14%; }
.w15per	{ width:15%; }
.w16per	{ width:16%; }
.w17per	{ width:17%; }
.w18per	{ width:18%; }
.w19per	{ width:19%; }
.w20per	{ width:20%; }
.w21per	{ width:21%; }
.w22per	{ width:22%; }
.w23per	{ width:23%; }
.w24per	{ width:24%; }
.w25per	{ width:25%; }
.w26per	{ width:26%; }
.w27per	{ width:27%; }
.w28per	{ width:28%; }
.w29per	{ width:29%; }
.w30per	{ width:30%; }
.w31per	{ width:31%; }
.w32per	{ width:32%; }
.w33per	{ width:33%; }
.w34per	{ width:34%; }
.w35per	{ width:35%; }
.w36per	{ width:36%; }
.w37per	{ width:37%; }
.w38per	{ width:38%; }
.w39per	{ width:39%; }
.w40per	{ width:40%; }
.w41per	{ width:41%; }
.w42per	{ width:42%; }
.w43per	{ width:43%; }
.w44per	{ width:44%; }
.w45per	{ width:45%; }
.w46per	{ width:46%; }
.w47per	{ width:47%; }
.w48per	{ width:48%; }
.w49per	{ width:49%; }
.w50per	{ width:50%; }
.w51per	{ width:51%; }
.w52per	{ width:52%; }
.w53per	{ width:53%; }
.w54per	{ width:54%; }
.w55per	{ width:55%; }
.w56per	{ width:56%; }
.w57per	{ width:57%; }
.w58per	{ width:58%; }
.w59per	{ width:59%; }
.w60per	{ width:60%; }
.w61per	{ width:61%; }
.w62per	{ width:62%; }
.w63per	{ width:63%; }
.w64per	{ width:64%; }
.w65per	{ width:65%; }
.w66per	{ width:66%; }
.w67per	{ width:67%; }
.w68per	{ width:68%; }
.w69per	{ width:69%; }
.w70per	{ width:70%; }
.w71per	{ width:71%; }
.w72per	{ width:72%; }
.w73per	{ width:73%; }
.w74per	{ width:74%; }
.w75per	{ width:75%; }
.w76per	{ width:76%; }
.w77per	{ width:77%; }
.w78per	{ width:78%; }
.w79per	{ width:79%; }
.w80per	{ width:80%; }
.w81per	{ width:81%; }
.w82per	{ width:82%; }
.w83per	{ width:83%; }
.w84per	{ width:84%; }
.w85per	{ width:85%; }
.w86per	{ width:86%; }
.w87per	{ width:87%; }
.w88per	{ width:88%; }
.w89per	{ width:89%; }
.w90per	{ width:90%; }
.w91per	{ width:91%; }
.w92per	{ width:92%; }
.w93per	{ width:93%; }
.w94per	{ width:94%; }
.w95per	{ width:95%; }
.w96per	{ width:96%; }
.w97per	{ width:97%; }
.w98per	{ width:98%; }
.w99per	{ width:99%; }
.w100per { width:100%; }

Clearfix

floatの崩れ防止に必須のclearfixはCSSの最後に書きましょう。clearfixを適用させたいHTMLタグのクラスに追加しましょう。

.clearfix::after{
  content: "";
  display: block;
  clear: both;
}

media query

レスポンシブサイトに必須のmedia queryを準備しておくと、後々便利です。セクションやパーツごとに書くも良し、まとめて書くも良しです。

@media screen and (max-width: 768px)  {
/* ここにスマホ用スタイルを記述する */

}