第9回HTML5ビギナーズ CSSとCSS設計について学ぼう！「reset.cssとnormalize.cssについて考えていたら…」

reset.cssとnormalize.css
について考えていたら…
第9回 HTML5ビギナーズ CSSとCSS設計を学ぼう！

河島美津雄
自己紹介
株式会社フリーセル
twitter : @320kawashima
html5jスタッフ、html5j ビギナー部所属
Webデザイナー・フロントエンドエンジニア

心持ちについて
ちょっと喋らせて下さい
ビギナー部での河島の理念
本題に入る前に、少しだけ勉強会をする心持ちについてお話しさせ
てください。

理念とかちょっと大層なことを書いていますが、この理念を軸に
web業界に貢献していきたいと思っています。

日本のWebをたぎらせるベースづくりに貢献する
この考え方のもとになったものは…

日本のWebをたぎらせるベースづくりに貢献する
これ

先ほどの画像はhtml5jというコミュニティが主催したアワードのロゴなんですが、これに感化されてビギナー
部に参加しようと思いました。

もともとこのような勉強会には出来るだけ参加していたのですが、このアワードでグループを組んでアワード
に応募する過程を通して、結論、楽しかったんです。

勉強会に参加するのはもちろん好きで参加しているんですが、一方では業界においていかれないようにとか
勉強しなきゃとかどちらかというとネガティブな意味合いも今思えばあったと思います。

しかしこのアワードに参加して、楽しいから追求するんだという概念が意識レベルで根付き、「自分もwebを
たぎらせたいなー」と思うようになりました。

けど、何か特別なスキルなんて持ってない、人材ということで考えると変わりはいくらでもいるレベルだと自
分で認識して、けど何かしら業界貢献はしたい…と考えているところにビギナー部というのがあると知り
「webをたぎらるベースづくりだったらできるかも」ということで、勉強会でお知り合いになった方を通し
て入部させていただき今にいたります。このような勉強会での出会い・人のつながりも大事ですね。よかっ
たら周りの人に声をかけて名刺交換なりfacebookで友達になったりしてつながりを広めていってください。

特に、web業界でこれからという0の状態で1を生み出すのは大変労力がいることだと思います。もちろん、
これはwebに限ったことではないと思いますが…。少しでも日本のweb業界の底上げに、またビギナーの方々
の役に立てればと思っております。

本日の流れ
アジェンダ
・ブラウザのデフォルトCSS
・ reset.css
・ normalize.css
・reset.cssとnormalize.cssについて考えていたら…

既に設定されているCSS
ブラウザのデフォルトCSS
Webサイトを表示させるブラウザそのものに、デフォルトで設定されてい
るスタイルシートが存在します。
しかし、何かの標準の規格があるわけではなく、ブラウザによって差異が
あり、統一されているわけではありません。

確かに違う…
実際にブラウザのデフォルトCSSでの表示は…
※重要なのは表示が違うということではなく、数値が違うということ。

困った…
ブラウザによって表示が違うことを解決するために
表示を統一するためのCSSを読み込ませましょう。
ちなみに、制作会社によってはあらかじめテンプレートが用意されていて、
使い回しでどんなCSSが使われているかよくわからずに何気なくコーディ
ングしていることもあるかもしれません。
もしかしたら今の時代に合わないCSSを使っているかも…
勤務先でのブラウザの表示を統一しているCSSをチェックてみましょう！
CSSを書く上でのベースになるものになります。
だた、デフォルトCSS自体は
考えられて作られていて見やすいらしいです。

reset.css
デフォルトで指定されていた値を0やnoneなどに設定して、リセットするもの。
有名どころだと
・YUI3 Reset CSS
・Eric Meyer s Reset CSS 2.0
・HTML5 Reset Stylesheet
一旦リセットしてから、目的のスタイルを指定していきます。
リセットしたものを実際に見てみよう！
リセットして統一

デフォルトを活かしつつ統一
normalize.css
Normalizeを日本語に訳すと「標準に戻す，正常化する」となります。
デフォルトスタイルシートのブラウザごとの指定を統一して、有用なスタ
イルは活用しようというもの。 HTML5、スマートフォン用のブラウザに
も対応しています。
normalize.cssには細かい説明が入っています

https://github.com/necolas/normalize.css/blob/master/normalize.css
normalize.cssの中身は？

reset.cssとnormalize.css、それぞれコーディング時で何が違ってくるのか
例えばh2を見てみると、pタグのようなテキストと同じ扱いにすることは
まずないと思います。
reset.css(YUI3 Reset CSS)を使ったとして適応されている内容をみると
marginやpaddingが0ということもあまりないかな…
h2 {
font-size: 100%;
font-weight: normal;
margin: 0;
padding: 0;
}
何が変わってくる？

デフォルトのCSS自体は良く考えられていると前述しましたが、活用でき
るものをわざわざするリセットしていると、また指定し直さないといけな
くなります。

デフォルトのCSS自体は良く考えられていると前述しましたが、活用でき
るものをわざわざするリセットしていると、また指定し直さないといけな
くなります。
・二度手間
・不要なコードが増える
・ムダなコードをブラウザに読み込みさせる

読み込むものが多くなる
どういうこと？
無駄なコードをブラウザに読み込ませるということは…
すなわちパフォーマンスが悪くなる
CSSだけに限ったものではありません。
画像やサーバーサイドなどの問題もあります。
※CSSの影響は全体の割合としては大きな影響力はないかもしれませんが、考え方としては重要

何をもって良いとするのか？
良いCSSの記述とは何なのか？
CSSはWebサイトやwebアプリケーションを構成する一部。
そもそも制作物の目的のために存在します。
その制作物の目的は…

CSSはWebサイトやwebアプリケーションを構成する一部。
そもそも制作物の目的のために存在します。
その制作物の目的は…
何をもって良いとするのか？
良いCSSの記述とは何なのか？
ビジネスのためにあるものが多い

どのような関係がある？
Webパフォーマンスとビジネスの関係

どのような関係がある？
Webパフォーマンスとビジネスの関係
Webパフォーマンスの低下は
ビジネスの機会損失に直結します
逆にamazonでは、サイトの表示速度を100ミリ秒
改善すると、収益が1％増加したとのこと

・無駄なコードは書かない（圧縮も方法の一つ）
・ユニバーサルセレクタを使用しない
・@importは使用しない
・外部CSSファイルはできるだけ少なく
（内部で読み込む選択肢もある）
何ができる？
パフォーマンスを考えたCSS
状況によって、出来るで出来ないはあると思いますが…

何ができる？
パフォーマンスを考えたCSS
パフォーマンスが遅くならないためにできることをしよう。

スマホの利用割合も増えてきているので、通信速度のことを考えるとや
はりパフォーマンスのことは重要になってきます。

CSSの記述やCSS設計をする上でもちろんこのパフォーマンスを考え
た上でなされているのですが、大前提すぎでちょっとフォーカスされ
にくいと思い、パフォーマンスについてお話しさせていただきました。

ということで

結論…

どうだったの？
reset.cssとnormalize.cssについて考えていたら…
ということでした。
ご清聴ありがとうございました！
パフォーマンスのことに
行き着いてしまった

第9回HTML5ビギナーズ CSSとCSS設計について学ぼう！「reset.cssとnormalize.cssについて考えていたら…」

More Related Content

What's hot (20)

Similar to 第9回HTML5ビギナーズ CSSとCSS設計について学ぼう！「reset.cssとnormalize.cssについて考えていたら…」 (20)

第9回HTML5ビギナーズ CSSとCSS設計について学ぼう！「reset.cssとnormalize.cssについて考えていたら…」