[CSS]古いバージョンのIEがサポート終了したので、どんどん使っていきたいCSSのテクニックのまとめ
Post on:2016年1月27日
IE8がサポート外になり、喜んでいる制作者の人も多いと思います。
正式版がリリース予定のjQuery 3もBootstrap 4もIE8はサポート外です。
古いバージョンのIEをサポート外にすると、CSSで使えるテクニックも広がります。これからどんどん使っていきたいCSSのテクニックを紹介します。
![どんどん使っていきたいCSSのテクニックのまとめ](http://coliss.com/wp-content/uploads-201601/2016012701.png)
イラスト: Girls Design Materials
まずは、2016年1月12日にIEの古いバージョンのサポートが終了したので、IE8-10がサポート外になると何が使えるか確認しておきましょう。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201601/2016012703-01.png)
×のほとんどは、IE6-8です。
実質IE11と考えると、flexbox, border-imageなども利用できるので他のモダンブラウザとほぼ同じです。こうなると難点はSafariのプレフィックスですね。
![デモのアニメーション](http://coliss.com/wp-content/uploads-201601/2016012702-01.gif)
Pure CSS animated article grid
flexboxを使ったレスポンシブ対応のカード型レイアウト。
コマ数を落としているので分かりにくいかもしれませんが、レイアウトが変更されるとアニメーションが発動します。
flexboxの基本的な使い方は、下記ページが参考になります。
![デモのアニメーション](http://coliss.com/wp-content/uploads-201601/2016012702-02.gif)
ラインを使ったメニューのシンプルなデザインから、凝ったアニメーションをするものまで。リストで実装したナビゲーションに、外部ファイルとclassを加えるだけで簡単に実装できます。
![デモのキャプチャ](http://coliss.com/wp-content/uploads-201601/2016012703-02.png)
去年の暮れあたりからCSSのフィルタを使ったサイトが増えてきました。写真を加工するだけでなく、オーバーレイで文字を重ねたり、使い方はいろいろです。
cssFiltersでは、さまざまなエフェクトを見ながら作成でき、コードも生成してくれます。
![デモのキャプチャ](http://coliss.com/wp-content/uploads-201601/2016012703-03.png)
ボーダーはソリッドなカラーだけではありません。美しいグラデーションを適用することもできます。
![デモのキャプチャ](http://coliss.com/wp-content/uploads-201601/2016012703-04.png)
「object-fit」は画像や動画などをどのように配置させるかのプロパティで、比率を維持したまま配置できます。
※IEは非サポートです(参考: Can I use)。
![デモのキャプチャ](http://coliss.com/wp-content/uploads-201601/2016012703-05.png)
Awesome Bootstrap Checkbox -GitHub
デモページ
Bootstrapも4から、IE8のサポートが終了しました。Pure CSSで実装されたかわいいチェックボックスとラジオボタンです。このCSSは3用と4用が用意されています。
参考: Bootstrap 4 alphaの主な特徴、IE8のサポート終了、Sassに移行、CSSの単位はremとem採用
![デモのキャプチャ](http://coliss.com/wp-content/uploads-201601/2016012703-06.png)
アイコンをクリック・タップすると、フルクリーンタイプのメニューをさまざまなアニメーションで表示します。
![デモのアニメーション](http://coliss.com/wp-content/uploads-201601/2016012702-03.gif)
CSSで実装されたアコーディオン。
各パネルがラジオボタンで開閉する仕組みで、その際に使用する「input:checked」のサポートはIE9+となります。
![デモのアニメーション](http://coliss.com/wp-content/uploads-201601/2016012702-04.gif)
ホバーすると、アニメーションで拡大表示されるパネル。実際のデモではもっと美しく、そして細かくアニメーションしています。
![デモのアニメーション](http://coliss.com/wp-content/uploads-201601/2016012702-05.gif)
伸び縮みするかわいいパンくずリスト。
デフォルト表示はすべて閉じてしまっていますが、表示ページがアクティブになっていてもよいですね。
![デモのアニメーション](http://coliss.com/wp-content/uploads-201601/2016012702-06.gif)
CSS Hover Effect using :after Psuedo Element
付箋紙のようなかわいいパネル。:after擬似要素はIE8+対応なので、現状問題無しです。
![デモのアニメーション](http://coliss.com/wp-content/uploads-201601/2016012702-07.gif)
さらにパワーアップ版という感じで、伸縮のアニメーションだけでなく、エレメントの構成、配置なども変更されます。しかもPure CSSの実装です。
![デモのキャプチャ](http://coliss.com/wp-content/uploads-201601/2016012703-07.png)
縦長ページでスクロールすると、プロダクトと背景がパースをつけて配置されるエフェクト。これもPure CSSです。
sponsors