Flexboxはfloatよりも高速だった、など注目のHTML/CSSスニペット・チュートリアル9選

モダンブラウザの普及により、floatではなく、flexboxを使った横並びレイアウトの実装が増えています。実装はflexboxの方が簡単で、応用範囲も広いですが、表示速度はどちらが速いのでしょうか？

注目のHTML/CSSスニペット、チュートリアルを紹介します。

横並びレイアウトを実装する際に、floatとflexbox、どちらの方がパフォーマンスが良いかを比較した記事です。Flexboxの方がパフォーマンスが良く、高速な処理という結果が出ています。

CSSのclip-pathというプロパティを使って、画像を様々な形に切り抜くことができます。対応ブラウザがChrome、Safari、Operaだけで、FirefoxとIEは非対応なので実用性は低いですが、面白いジェネレーターです。

子要素を回転させずに、全体を回転させる方法です。CSSで回転アニメーションを実装する際に活用できます。

円や外周にそってテキストを回りこみ配置できます。雑誌のようなレイアウトが可能です。

CSSとHTMLで実装したページネーションとタブのサンプル集です。

chromeデベロッパー・ツールを使って、気軽にコーディングすることができます。

chromeのデベロッパーツールはとても便利なので、是非使い方を覚えておきたいです。「ボックスモデルのパラメータは、右下の図から直接いじれる」というのは、知りませんでした。