manakaa.com/tips.htmlこのページにほとんどcssは当ててません(めんどくさいから)Window幅が広い方は狭くしてみると見やすいです。2014-03-15Modernizr/モダナイザーとは?まずはじめにモダナイザーは、グレンダイザーとは違います(ザーしかあってない)。いう事はJavascriptのライブラリの1つです。サイトを見に来たユーザーのブラウザがどんなもんかチェックしてくれます。css3のborder-radius(角丸)は反映されるのか?それとも古いブラウザなので反映されないのか?などです。どこが便利なの?とにかく便利です!(答えになってません)。四角をcss3のプロパティborder-radiusで正円を作ったとします。新しいブラウザでは正円が表示されますが、古いブラウザではプロパティが効かず四角が表示されます。今まではその対処として、例えばie7とかie8用のcssを読み込ませて正円の画像を表示させたりしてきました。css3のborder-radiusを使う場合、あのブラウザは反映するの?しないの?をチェックしてきました。(面倒です)Modernizrは、そのチェックを自動でやってくるるんです!(ありがとう)。見ているブラウザがborder-radiusが効かない場合、モダナイザーがhtmlタグに.no-borderradiusというcssのクラスをつけてくれます。いった風に指定しておけば、border-radiusが効かないブラウザに対してはsample.pngが表示される事になるのです。border-radiusなんて使わず、はじめから手堅く画像にしたらいいのでは?それも一理あります。画像に統一してしまえば、border-radiusの指定をする手間が省けますからね。いう風に古い手法だけに頼っていると時代に取り残されてしまいます。古くからのものを大事に継承していく伝統芸能なら古い手法にこだわらないといけませんが、ウェブの世界は常に進化しているので、それでは困ります。私は古き良きテーブルレイアウトとGIFアニメにこだわっています!という方は、それはそれで頑張って下さい。(ある意味応援します)Modernizrをダウンロードしてみよう。Modernizer[DEVELOPMENT]をクリックチェックして欲しい項目が表示されます。printshiv以外全部にチェック「√」を入れます。[GENERATE]をクリックすると内容が表示されます。Source」のチェック「√」を外します。一度[GENERATE]をクリックしてください。改行がクリアされました。改行が無いぶんだけ気持ち少し軽くなったかな。(気持ちは大事)[DOWNLOAD]をクリックしてダウンロード完了です。なんとか.jsがダウンロードされます。border-radiusでやってみます。なんか適当に作ったhtmlファイルと先ほどのモダナイザー.jsと適当に画像を用意します。それらは同じ階層にして下さい。新しくフォルダを作り、そこに3つ入れておくといいかも。モダナイザー.jshはhtmlファイルのheadにscriptタグでリンクしておきます。上記の正円はcssのborder-radiusで実装されています。(モダンブラウザで見た場合)。次にie8で見てみましょう(ブラウザのバージョンを下げるには、F12の開発者ツールで!ツールからもいけます。)htmlタグを見るといろんなcssプロパティが追加されていますよね。モダナイザーが自動でやってくれました。そこにno-borderradiusというのがあると思います。いう事で以下のcssをhtmlファイルに書いてあげましょう。0;}これで、border-radiusが効かないブラウザに対して、下記にある「あなたは時代遅れ」と書かれた屈辱的(?)画像が表示されます。ieのドキュメントモードを8とか10とかに切り替えてみてください。変わるでしょ?以上です。(参考)こちらのサイト分かりやすく説明してあります。