【便利】CSSリセットを使ってCSSのブラウザ依存を無くせば悩まなくて済む

CSSは明示的に書かない時にブラウザの初期値を使用します。既存のWordpressのテーマを使っている時はあまり気にならないのですが、いちからCSSを書いてサイトを構築しなければならない時には、ブラウザ依存は無い状態でスタートしないと泥沼にはまります。

というのも通常自分が使っているブラウザで動作確認していくと思いますが、ブラウザはChromeやFirefox、IEやEdge、さらにスマホもありますのでブラウザの初期値に依存した書き方は後で後悔することになります。

サイト構築する時にブラウザごとのスタイルの初期状態の違いを吸収するためによく使われるのが、reset CSSです。

YUI

かなり古いreset CSSです。古いサイトだと未だに使われています。直接サイトから読み込んで使うのがスタンダードだったようです。しかし、読み込み先のサイトがhttpsに対応していないのでSSL化するとMix Contentsになり、読み込まれなくなります。

それだとデザインが崩れるので、サーバーにファイルをアップロードして直接読むようにするとSSL化でもエラーになりません。

<div class="sourceview">
<pre class="brush: html;">
YUI 3.18.1 (build f7e7bcb)
Copyright 2014 Yahoo! Inc. All rights reserved.
Licensed under the BSD License.
yui/yui3
A library for building richly interactive web applications. - yui/yui3
*/ html{color:#000;background:#FFF}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0}table{border-collapse:collapse;border-spacing:0}fieldset,img{border:0}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal}ol,ul{list-style:none}caption,th{text-align:left}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}q:before,q:after{content:&#039;&#039;}abbr,acronym{border:0;font-variant:normal}sup{vertical-align:text-top}sub{vertical-align:text-bottom}input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;*font-size:100%}legend{color:#000}#yui3-css-stamp.cssreset{display:none}

その他のリセットCSS

HTML5 Reset Stylesheet

HTML5 Reset Stylesheet | HTML5 Doctor

 

richclark/HTML5resetCSS
Contribute to richclark/HTML5resetCSS development by creating an account on GitHub.

 

/*
html5doctor.com Reset Stylesheet
v1.6.1
Last Updated: 2010-09-17
Author: Richard Clark – http://richclarkdesign.com
Twitter: @rich_clark
*/

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
margin:0;
padding:0;
border:0;
outline:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
}

body {
line-height:1;
}

article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section {
display:block;
}

nav ul {
list-style:none;
}

blockquote, q {
quotes:none;
}

blockquote:before, blockquote:after,
q:before, q:after {
content:'';
content:none;
}

a {
margin:0;
padding:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
}

/* change colours to suit your needs */
ins {
background-color:#ff9;
color:#000;
text-decoration:none;
}

/* change colours to suit your needs */
mark {
background-color:#ff9;
color:#000;
font-style:italic;
font-weight:bold;
}

del {
text-decoration: line-through;
}

abbr[title], dfn[title] {
border-bottom:1px dotted;
cursor:help;
}

table {
border-collapse:collapse;
border-spacing:0;
}

/* change border colour to suit your needs */
hr {
display:block;
height:1px;
border:0;
border-top:1px solid #cccccc;
margin:1em 0;
padding:0;
}

input, select {
vertical-align:middle;
}

ress – Modern CSS reset

Normalizeよりもおススメと言われているress

filipelinhares/ress
:page_facing_up: A modern CSS reset. Contribute to filipelinhares/ress development by creating an account on GitHub.

 

 

タイトルとURLをコピーしました