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

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

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

CSS、Flexboxはfloatよりも高速だった

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

160330_flexbox_float_onresize_summary_1
最適なCSSの横並びはどっち!? Flexboxとfloatのパフォーマンス比較

CSSで実装するクリッピングマスクのジェネレーター

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

clip-path-maker
Clippy — CSS clip-path maker

CSSで子要素の表示を維持しつつ、要素を回転させる方法

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

css-element-rotate_01
CSSで子要素の表示を維持しつつ、要素を回転させる方法

CSS Shapesで、円形や多角形の画像の形に合わせてテキストを回り込ませて配置

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

css-shapes
CSS Shapesでテキストを回り込ませるレイアウトを表現

CSSとHTMLで実装するページネーションとタブのサンプル6選

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

large
Freebie: 6 Excellent Paginations and Tabs

chromeデベロッパー・ツールでローカルファイルに直接保存しながらCSSコーディングする方法

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

01
chromeデベロッパー・ツールでローカルファイルに直接保存しながらCSSコーディングする方法

コーディングをスピードアップ!chromeデベロッパー・ツール10の小技

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

05
コーディングをスピードアップ!chromeデベロッパー・ツール10の小技

Web制作ナビの記事からピックアップ