Webデザイン

【jQuery】レスポンシブ対応のタブを実装できる「GridTab」

レスポンシブに対応した様々なタブを実装することができるjQueryプラグイン「GridTab」の紹介です。様々なスタイルが用意されておりカスタマイズも可能です。

モーフィングアニメーションのページ遷移を実装できる「Morphing Page Transition」

ページ遷移のスライドアップアニメーションをモーフィング(SVG)で表現したデモ集「Morphing Page Transition」の紹介です。

YoutubeやGoogleMapをレスポンシブ化するジェネレーター「Embed Responsively」

YoutubeやGoogleMapなどの埋め込みコードをレスポンシブに変換してくれるジェネレーター「Embed Responsively」を紹介します。

10年前の有名サイトを振り返ることができる「Ten Years Ago」

AppleやAmazon、Youtubeなど海外の有名なサイトの10年前のデザインを振り返ることができる「Ten Years Ago」の紹介です。

メニューのホバーエフェクト集「Inspiration for Menu Hover Effects」

メニューテキストのホバーエフェクトをアイデアをしてまとめた記事「Inspiration for Menu Hover Effects」の紹介です。

さまざまなスタイルのCSSボタンをコレクションした「Buttons」

比較的ベーシックなスタイルのCSSボタンを大量にコレクションした「Buttons」の紹介です。

パララックス効果がキレイなスライダー「PIGNOSE ParallaxSlider」

サイトのメインヴィジュアルに使えそうなパララックス効果のオシャレなスライダー「PIGNOSE ParallaxSlider」の紹介です。

アニメーションアイコンのライブラリ「60 Free Animated Icons」

SVGアイコンとjsライブラリ(titanic.js)がセットになった、簡単に実装できるアニメーションアイコン「60 Free Animated Icons」の紹介です。

Google Mapのスタイルテンプレート「Snazzy Maps」

WebサイトにGoogle Mapを埋め込む時に便利なGoogle Mapのスタイルテンプレート集「Snazzy Maps」の紹介です。

ギザギザボーダーを作れるジェネレーター「CSS Jagged Border Generator」

ギザギザボーダーをCSSのみで簡単に生成することができるジェネレーター「CSS Jagged Border Generator」の紹介です。

アニメーションが素敵なツールチップ「Playful Little Tooltip Ideas」

アニメーションエフェクトで出現するツールチップのアイデアをまとめた「Playful Little Tooltip Ideas」の紹介です。

【CSS】text-shadowの使用例をまとめたサイト「Trendy CSS Text Shadows」

CSSのtext-shadowの使用例をまとめたサイト「Keiyaku CSS」の紹介です。サンプルコードもあってコピペで使用できます。

日本の契約書のためのCSSライブラリ「Keiyaku CSS」

Markdownで書かれた契約文書を、適切な印刷書式にスタイリングするためのCSSライブラリ「Keiyaku CSS」の紹介です。

【jQuery】Youtubeがウィンドウ内に表示されたタイミングで再生させるプラグイン

サイト内でスクロールして表示領域にYoutubeが表示された時に再生、非表示になった時に停止させることができるjQueryプラグイン「jquery.youtube-inview-autoplay.js」の紹介です。

軽快なアニメーションのバーガーメニュー「Ember Burger Menu」

様々なアニメーションエフェクトでのバーガーメニューを実装することができる「Ember Burger Menu」の紹介です。

RANDOM POST
  • パララックス効果がキレイなスライダー「PIGNOSE ParallaxSlider」
  • 商用利用できるフリーフォントをまとめたサイト「weeklyfonts」
  • CSSで作成する吹き出しとデザインのアイデア
  • CSSでよく使うレイアウト・パターンをまとめたサイト「CSS Layout」
  • 10年前の有名サイトを振り返ることができる「Ten Years Ago」
  • 無料で使えるデジタル風フォント13選
POPULAR POSTS
  • 【2021年版】 無料で使えるフリーイラスト素材サイト33選(商用利用可)
  • 【無料】漢字が使える日本語フリーフォント70選
  • 【2021年版】 Google Fontsの使い方とおすすめ日本語フォント
  • フォントを調べる時に役に立つツール・サイト10選
  • Youtubeの埋め込み動画をレスポンシブに対応させる方法
PICKUP
  • CSSで簡単に作れるおしゃれな見出しデザイン20選
  • CSSで作成する吹き出しとデザインのアイデア
  • Photoshopで画像を切り抜くテクニック【初心者向け】
  • CSSで実装するボタンデザインとホバーエフェクトのアイデア
  • 【2021年版】 無料で使えるフリーイラスト素材サイト33選(商用利用可)