【CSS】 normalize cssとreset cssってなに?

サイトを制作するに当たってHTMLとCSSが必要になるのですがHTMLは文章構造、CSSはその文章構造のサイズや色や位置決めをする。
となると、デザインの要素はCSSです。
万が一CSSが読み込めない場合HTMLファイルだけでも表示されます。
なぜか?ブラウザ毎に予めスタイルを持っているからです。
現時点でサイトを制作する時、理想のサイトとは各主要ブラウザで同じ様に表示されることです。(各主要ブラウザはIE,Chrome,Firefox,safari等)
ページの表示には、ブラウザ毎のデフォルトのスタイルが反映され、次にサイト制作したスタイルを読み込みます。このためデフォルトのスタイルの位置等がずれていれば、必然的にピクセル単位などでもズレます。
そこで、ブラウザ毎のデフォルトのスタイルを読み込んだ直後にすべて0ベースまたは統一にするのがreset cssです。
resetする場合はCSSの先頭に置き、その後で独自のCSSを記入していけばよいでしょう。
normalize cssは、ブラウザ毎のデフォルトのスタイルを均一化することで、活かしながら使用することです。これも独自CSSの先頭に記載しておけばブラウザ毎のデフォルトスタイルを読み込んだ直後に均一化し、それから作成したCSSを読み込むことになります。
重要なことですがCSSをブラウザが読み込むには優先順位があり、読み込む順番に従い上書きされますので同一タグの記述であれば上書きし後述した記述が反映されます。

自分はnormalize cssを使用していますが、いろんなサイトを見ているといろんな意見があるのでやりやすい方法で制作するのがよいかと思います。normalize cssを使用しているのは、利用してみてちょっと驚きがあったのと主要ブラウザで確認した時にある程度意図したように表示されること、resetした場合はCSSの記述が増える箇所があるからです。今のところはnormalizeの方が楽かなぁと思っていますが、状況に応じて変更する場合もあるかもしれません。使った事の無い方は、1度ご利用してみるのもよいかと思います。

最後になりますが、Webの制作方法などにも様々な方法があり、正解も不正解もないと思う、出来ればよいと言う考え方には賛成です。
しかしながら、より多くの人に見てもらうために小さな努力を積み重ね、情報をキャッチし、試し、採用するかを判断することがWebの世界であると思うし、最終的にはこの考え方に行き着くんじゃないかなぁ?って思ったり思わなかったりw
試練はつづくよどこまでも、、、

CSS Sublime Text2とsass,scss,compassという選択肢

いやぁどうもです。CSS覚えるのは大変ですねぇ。codaのCSSエディタにかなり助けられながらCSSのプロパティを覚えていきました。やはりコピペとかでCSSを記述する方も多いのかなぁとも思います。

coda1,cssエディタ
写真はcodaのCSSエディタです。
coda2からはないですけども、、覚えてくると補完機能で案外いけますよね。
CSSのプロパティが不安な方はこのようなエディタをご使用されるとよいのではないでしょうか。(CSSプロパティを覚えてしまうまでのツールとして。)

問題はCSS3

  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #446c92), color-stop(100%, #34526f));
  background-image: -webkit-linear-gradient(#446c92 0%, #34526f 100%);
  background-image: -moz-linear-gradient(#446c92 0%, #34526f 100%);
  background-image: -o-linear-gradient(#446c92 0%, #34526f 100%);
  background-image: linear-gradient(#446c92 0%, #34526f 100%);
  -webkit-box-shadow: 0px -2px 2px rgba(181, 181, 181, 0.8);
  -moz-box-shadow: 0px -2px 2px rgba(181, 181, 181, 0.8);
  box-shadow: 0px -2px 2px rgba(181, 181, 181, 0.8); }

例えば上のCSS(はしょってますが)colorの部分等を変更します?いやぁこれは、、これが1カ所であればまだなんとか、これがたくさんある場合は、、、
以前Sassをつかって見た時、ネストの印象が強く、Lessを使ってみた時、サイト毎の環境構築が大変そうな印象を持っていました。でも目的は上のベンダーフィックスの嵐をどう簡略化するのかでした。
compass公式サイト http://compass-style.org
google先生に訪ねてみる事、沢山のナイスで素敵な記事がいっぱいある。

上のCSSですが実際のscssファイルのセレクタには下の2行が入ってます。

@include gradient-top-lighten($color);
@include box-shadow(0px -2px 2px rgba(181,181,181,0.8));

$colorはなんだろう?
別のscssファイルに$color:#34526f; の記述でカラーをいつでも好きな色に変更することができます。
疑問なのは今使っているCSSの記述をscssの記述にすべてを変更しないといけないのか?等だと思いますがコンパイルする前のstyle.scssに編集中のstyle.cssの記述をそっくりコピーしてコンパイルしても中身は同じ記述のstyle.cssが吐き出されるのでscss,compassの機能を徐々に追加していっても何も問題ないです。
やれることが多い分、中々一気にってわけもいかないと思いますので。

続きを読む “CSS Sublime Text2とsass,scss,compassという選択肢”