サニタイズ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は、どれかひとつを選んでlink要素で読み込みます。また、cssライブラリはご自身で作成するcssよりも先に読み込むようにします。そうでないと、ご自身で作成したcssがうまく適用されないことがありますので、注意が必要になります。
<link rel=”stylesheet” href=”css/style.css”>
リセット・ノーマライズ・サニタイズ結論どれ？
私のウェブサイト制作経験をふまえ、結論を記載いたしますと、結局のところリセットcssを使用しようが、ノーマライズcssを使用しようが、はたまたサニタイズcssを使用でも結局、慣れたものを使うことが一番のように感じます。
また、その際に心がける習慣といたしましては、css自体はシンプルにできるだけ短いコードで記述するのが良いように感じます。
例えば、cssだけで2000行記述したものと、1000行記述したものでは、読み込むスピードも2分の1になるわけですから、初心者の方であれば、複雑な構成をcssでデザインを行おうと思うと、予想以上のコードを記述することになることと思います。
しかしながら、経験を積むことでレスポンシブウェブデザインでも、比較的短くシンプルにcssを記述することが可能になることと思います。
また結論で「慣れたものを使うことが一番」と記載いたしましたが、最重要になってくる事柄は、実機での複数のブラウザチェックになります。せっかくキレイに作成したページデザインでも、ブラウザによってデザイン崩れがおきていては台無しですからね。
といことで今回は、サニタイズcssの使い方について、リセットcss、ノーマライズcssを含め、また、ダウンロードページの紹介なども記載してみました。
初心者の方が使用する場合は、なかなか慣れるまでが大変なことともいますが、サニタイズcssを使い倒し、ご自身でカスタマイズできるくらいまで経験を積まれること、および練習をおこなうことが、良いように感じます。
とりあえず、今回はここまで…。
ホームページ作成お仕事のご依頼は↓コチラより…、また、ご相談は無料で承ります。それではまた次回…。
