レスポンシブ

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

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

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

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

非レスポンシブの要素をレスポンシブ化する「Reframe.js」

非レスポンシブの要素を自動でレスポンシブ化してくれる「Reframe.js」の紹介です。レスポンシブの悩み所を解決してくれるJSライブラリです。

【jQuery】画像のサイズを保持しつつレスポンシブに変化させる「ResponsifyJS」

設定したフォーカスエリアのサイズを保持しつつフォーカスエリアを中心にイメージの拡大縮小ができるjQueryプラグイン「ResponsifyJS」の紹介です。

レスポンシブ対応の画像を生成してくれる「Responsive Image Breakpoints Generator」

レスポンシブデザイン制作で役に立ちそうなブレイクポイント毎に画像を生成してくれるサービス「Responsive Image Breakpoints Generator」のご紹介。

レスポンシブのチェックに役立つサービス「Resizer」

Googleが「Resizer」なるサービスを公開したので備忘録。ブラウザ・スマホの画面サイズでどうサイトが表示されるかをチェックしたい時に最適なサービスです。

レスポンシブデザインのパターン集「Responsive Patterns」

レスポンシブデザインの様々なパターンをストックしているサイト「Responsive Patterns」のご紹介。ちょっとした時にコピペで使用できるので便利。

レスポンシブデザインでのロゴパターン「responsivelogos」

レスポンシブのロゴパターンを考えるコンセプトサイト「responsivelogos」。特に海外のブランドロゴは細かいディテールのロゴが多いので参考のなる。

RANDOM POST
  • 【フリー素材】手や指を使ったハンドジェスチャーのアイコン
  • Googleが公開した日本語ウェブフォント「Google Fonts + 日本語早期アクセス」
  • イメージワードを選択するだけでフリーフォントを簡単に検索できる「モジザイ」
  • 【2020年版】Photoshopのブラシを追加する方法
  • 【jQuery】スクロールで画像に3D効果を掛けられる「tiltedpage_scroll.js」
  • 【jQuery】背景画像のスライドショーを実装する「Vegas2」
POPULAR POSTS
  • 【無料】漢字が使える日本語フリーフォント63選
  • 【2020年版】無料で使えるフリーイラスト素材サイト30選(商用利用可)
  • 【2020年版】Google Fontsの使い方とおすすめ日本語フォント
  • 【2020年版】Photoshopのブラシを追加する方法
  • Photoshopで簡単に背景を伸ばすテクニック
PICKUP
  • CSSで実装するボタンデザインとホバーエフェクトのアイデア
  • 無料で使用できる海外のフリー写真素材サイトまとめ
  • CSSで簡単に作れるおしゃれな見出しデザイン20選
  • WordPressのおすすめテーマ19選【無料版・有料版】
  • 導入しておきたいWordPressのおすすめプラグイン