コピペで実装できるHTML/CSSスニペット、チュートリアルまとめ

CSSだけで実装するフルスクリーンの画像エフェクト

最近気になったHTML/CSSのスニペット、チュートリアルを紹介します。最近のWebサイトで見かける気持ちのいいインタラクションや面白い動きを実装できます。

CSSだけで実装するフルスクリーンの画像エフェクト

CSSだけで実装するフルスクリーンの画像エフェクト

CSSだけでJavaScriptで実装するようなフルスクリーンの画像切り替えエフェクトを実現しています。

Effect fullscreen without js

表示件数と高さが変わるブロックをレスポンシブ表示する方法

表示件数と高さが変わるブロックの一覧を、画面サイズに合わせてカラム数を変えて表示する方法

MasonryのようなブロックレイアウトをCSS+HTMLで実装する方法が紹介されています。

表示件数と高さが変わるブロックの一覧を、画面サイズに合わせてカラム数を変えて表示する方法

CSSで縦横比を維持しながら横幅いっぱいに背景画像を表示させる方法

CSSで縦横比を維持しながら横幅いっぱいに背景画像を表示させる方法

CSSのcalc()というファンクションを使っています。calc()を使うと、padding-top: calc(300 / 1000 * 100%); /* calc(画像高さ ÷ 画像横幅 × 100%) */のように、長さを計算式で表すことができます。レスポンシブデザインでは色々な場面で活用できます。

CSSで縦横比を維持しながら横幅いっぱいに背景画像を表示させる方法

CSSで実装するカーテンのオープニングエフェクト

CSSで実装するカーテンのオープニングエフェクト

舞台のカーテンが開くようなエフェクトをCSSアニメーションで実装することができます。

Creating a CSS Curtain Opening Effect | デモ

シンプルなCSSグリッドフレームワーク

シンプルなCSSグリッドフレームワーク

シンプルで、レスポンシブ対応、軽量のCSSグリッドフレームワークです。CSSの中身がグリッドに特化しており、他のスタイルには最小限の影響しか与えないので、使いやすそうです。

Pills – A simple, responsive, and tiny CSS grid for humans.

CSSで実装するチェックボックスのスイッチャーコレクション

CSSスライドチェックボックス

CSSでチェックボックスにスライド形式のスイッチャーを実装します。

Switcher styles collection

チェックボックスのアニメーション

チェックボックスのアニメーション

チェックボックスに様々なアニメーションをつけることができます。

Animated CSS3 Input Checkboxes with – Checkbox.css

レーディングスターにアニメーションを付けられるCSS

レーディングスターにアニメーションを付けられるCSS

レーティングスターにアニメーションをつけることができるCSSライブラリです。

Starability.css – Accessible rating with animations on top | デモ

FlexboxベースのモダンなCSSフレームワーク

Flexboxを使ったモダンなCSSフレームワーク

Flexboxベースの、モダンなCSSフレームワークです。カード型レイアウトやタブなども用意されており、使いやすそうです。

Bulma

人気の記事

日本語対応の無料WordPressテーマ10選
日本語対応の無料WordPressテーマ10選
2017年におすすめしたい、日本語対応の有料WordPressテーマ10選
2017年におすすめしたい、日本語対応の有料WordPressテーマ10選
アドセンス運用に最適なWordPressテーマ3選
アドセンス運用に最適なWordPressテーマ3選

コメント

  • Posted on
  • Updated on
  • Views 984