サニタイズcss

サニタイズcssの使い方について

今回は以前ご紹介した、リセットcss・ノーマライズcssを踏まえ、サニタイズcssにつきまして、ホームページ作成初心者の方に向け、「そもそもサニタイズcssッて何?」から、ダウンロードページの紹介含め使い方などの記載してみようと思います。

という事で、それでは今回はッ、

  • ・サニタイズcssとは
  • ・cssライブラリを使う際の注意点
  • ・リセット・ノーマライズ・サニタイズ結論どれ?

上記について記載していこうと思います…。

サニタイズcssとは

サニタイズcssは、ノーマライズcssをベースに作られた比較的新しいライブラリです。ここで以前記載した「CSS実践編:CSSの基本step.9」を一読頂ければ幸いです。また、コチラにノーマライズcssにつきましても、多少記載してございます。

サニタイズcssは、ノーマライズcss同様、ブラウザ間の表示の差を少なくするのがおもな目的ですが、そこから一歩踏み込んで、よく使用するcssの処理なども含まれています。

ページのナビゲーションはnavタグ、ulタグ、liタグを組み合わせて作成しますが、この組み合わせのときだけ、liの先頭のブレット「・」を表示しないようになっています。

さらに、サニタイズcssの最大の特徴は、すべての要素に「box-sizing:border-box;」が適用されていることです。ボーダーボックスのボックスモデルを採用することで、レスポンシブウェブデザインのcssを記述するのに便利なようになっています。

それでは下記よりサニタイズcssをダウンロードすることが可能です。


サニタイズcssのダウンロード
・サニタイズcssのダウンロード

cssライブラリを使う際の注意点

リセットcss、ノーマライズcss、サニタイズcssは、どれかひとつを選んでlink要素で読み込みます。また、cssライブラリはご自身で作成するcssよりも先に読み込むようにします。そうでないと、ご自身で作成したcssがうまく適用されないことがありますので、注意が必要になります。

サンプルhtml<link rel=”stylesheet” href=”css/sanitize.css”>
<link rel=”stylesheet” href=”css/style.css”>

リセット・ノーマライズ・サニタイズ結論どれ?

私のウェブサイト制作経験をふまえ、結論を記載いたしますと、結局のところリセットcssを使用しようが、ノーマライズcssを使用しようが、はたまたサニタイズcssを使用でも結局、慣れたものを使うことが一番のように感じます。

また、その際に心がける習慣といたしましては、css自体はシンプルにできるだけ短いコードで記述するのが良いように感じます。

例えば、cssだけで2000行記述したものと、1000行記述したものでは、読み込むスピードも2分の1になるわけですから、初心者の方であれば、複雑な構成をcssでデザインを行おうと思うと、予想以上のコードを記述することになることと思います。

しかしながら、経験を積むことでレスポンシブウェブデザインでも、比較的短くシンプルにcssを記述することが可能になることと思います。

また結論で「慣れたものを使うことが一番」と記載いたしましたが、最重要になってくる事柄は、実機での複数のブラウザチェックになります。せっかくキレイに作成したページデザインでも、ブラウザによってデザイン崩れがおきていては台無しですからね。

といことで今回は、サニタイズcssの使い方について、リセットcss、ノーマライズcssを含め、また、ダウンロードページの紹介なども記載してみました。

初心者の方が使用する場合は、なかなか慣れるまでが大変なことともいますが、サニタイズcssを使い倒し、ご自身でカスタマイズできるくらいまで経験を積まれること、および練習をおこなうことが、良いように感じます。

とりあえず、今回はここまで…。

ホームページ作成お仕事のご依頼は↓コチラより…、また、ご相談は無料で承ります。それではまた次回…。