[CSS]古いバージョンのIEがサポート終了したので、どんどん使っていきたいCSSのテクニックのまとめ

IE8がサポート外になり、喜んでいる制作者の人も多いと思います。
正式版がリリース予定のjQuery 3もBootstrap 4もIE8はサポート外です。

古いバージョンのIEをサポート外にすると、CSSで使えるテクニックも広がります。これからどんどん使っていきたいCSSのテクニックを紹介します。

どんどん使っていきたいCSSのテクニックのまとめ

イラスト: Girls Design Materials

まずは、2016年1月12日にIEの古いバージョンのサポートが終了したので、IE8-10がサポート外になると何が使えるか確認しておきましょう。

サイトのキャプチャ

CSS3 Support

×のほとんどは、IE6-8です。
実質IE11と考えると、flexbox, border-imageなども利用できるので他のモダンブラウザとほぼ同じです。こうなると難点はSafariのプレフィックスですね。

デモのアニメーション

Pure CSS animated article grid

flexboxを使ったレスポンシブ対応のカード型レイアウト。
コマ数を落としているので分かりにくいかもしれませんが、レイアウトが変更されるとアニメーションが発動します。
flexboxの基本的な使い方は、下記ページが参考になります。

デモのアニメーション

Line Menu Styles
デモページ

ラインを使ったメニューのシンプルなデザインから、凝ったアニメーションをするものまで。リストで実装したナビゲーションに、外部ファイルとclassを加えるだけで簡単に実装できます。

デモのキャプチャ

cssFilters

去年の暮れあたりからCSSのフィルタを使ったサイトが増えてきました。写真を加工するだけでなく、オーバーレイで文字を重ねたり、使い方はいろいろです。
cssFiltersでは、さまざまなエフェクトを見ながら作成でき、コードも生成してくれます。

デモのキャプチャ

gradient border

ボーダーはソリッドなカラーだけではありません。美しいグラデーションを適用することもできます。

デモのキャプチャ

Object-fit properties

「object-fit」は画像や動画などをどのように配置させるかのプロパティで、比率を維持したまま配置できます。
※IEは非サポートです(参考: Can I use)。

デモのキャプチャ

Awesome Bootstrap Checkbox -GitHub
デモページ

Bootstrapも4から、IE8のサポートが終了しました。Pure CSSで実装されたかわいいチェックボックスとラジオボタンです。このCSSは3用と4用が用意されています。
参考: Bootstrap 4 alphaの主な特徴、IE8のサポート終了、Sassに移行、CSSの単位はremとem採用

デモのキャプチャ

Full Screen CSS3 Menus

アイコンをクリック・タップすると、フルクリーンタイプのメニューをさまざまなアニメーションで表示します。

デモのアニメーション

Pure Css Accordion Menu

CSSで実装されたアコーディオン。
各パネルがラジオボタンで開閉する仕組みで、その際に使用する「input:checked」のサポートはIE9+となります。

デモのアニメーション

UI Statistic Pop Out CSS

ホバーすると、アニメーションで拡大表示されるパネル。実際のデモではもっと美しく、そして細かくアニメーションしています。

デモのアニメーション

Tiny CSS3 Round Breadcrumb

伸び縮みするかわいいパンくずリスト。
デフォルト表示はすべて閉じてしまっていますが、表示ページがアクティブになっていてもよいですね。

デモのアニメーション

CSS Hover Effect using :after Psuedo Element

付箋紙のようなかわいいパネル。:after擬似要素はIE8+対応なので、現状問題無しです。

デモのアニメーション

Funky Pure CSS Accordion

さらにパワーアップ版という感じで、伸縮のアニメーションだけでなく、エレメントの構成、配置なども変更されます。しかもPure CSSの実装です。

デモのキャプチャ

Perspective Scrolling in CSS

縦長ページでスクロールすると、プロダクトと背景がパースをつけて配置されるエフェクト。これもPure CSSです。

top of page

©2016 coliss
o