Webデザイン

【html】文字実体参照を一覧できる「html arrows」

文字実体参照(特殊文字)をリスト化してるサイト「html arrows」の紹介。文字が大きく表示され見やすくCSSコードもあり重宝しそうです。

様々なスタイルのCSSを簡単に作れる「Generate CSS」

ボタンはもちろん、プルダウンメニューからイメージエフェクト・テキストエフェクトまで、様々なスタイルをWeb上で簡単に作れる「Generate CSS」の紹介。

画像に3Dブラーのホバーエフェクトを掛けられる「tiltfx.js」

codropsで公開されてたホバーエフェクトImage Tilt Effectがカッコよかったのでメモ。ギャラリー・商品一覧や、背景全面に配置したイメージに掛けると効果的。

【jQuery】スクロールに合わせて要素を切り替える「Midnight.js」

ヘッダー要素にあるテキストやロゴをスクロールに合わせてセクションごとに切り替えることができるjQueryプラグイン「Midnight.js」を紹介します。

【jQuery】動画を背景にフルスクリーンで表示させる「covervid.js」

動画を背景にしたサイトも増えてきましたが、軽量で背景に動画をフルスクリーンで表示させるjQueryプラグイン「covervid.js」を紹介します。

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

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

【jQuery】ロールオーバー時にテキストをシャッフルさせる「chaffle.js」

テキストリンクのロールオーバー時にテキストをシャッフルさせるエフェクトを実装できるjQueryプラグイン「chaffle.js」を紹介します。

【jQuery】要素をふわふわ動かすプラグイン「jqFloat.js」

要素やイメージをふわふわ浮せたることができるjQueryプラグインの「jqFloat.js」のご紹介。メインビジュアルのアクセントとして使えそうなプラグイン。

【jQuery】ジオメトリックを実装できる「particleground.js」

要素の背景に幾何学模様(パーティクル)のアニメーションを実装できるjQueryプラグイン「particleground.js」を紹介します。

Youtubeのヘッダー・フッターを消す「PrettyEmbed.js」

Youtubeをサイトに埋め込んだ際に表示されるヘッダー(タイトル)とフッダー(コントロール)を非表示にする事ができるjQueryプラグイン「PrettyEmbed.js」の紹介。

【jQuery】レスポンシブ対応のスライダー「Glide.js」

スマートフォン・タブレットなどのスワイプ操作にも対応した軽量で使えるjQueryスライダー「glide.js」を紹介します。Webサイトのメインビジュアルなどに使えます。

【Webデザイン】魅力的な動きをするレスポンシブメニュー

レスポンシブWebデザインで使えそうな心地よいエフェクトで出現するドロワーメニューがcodropsでいろいろあったのでまとめました。

【jQuery】商品一覧ページなどで効果的に使える「Product Preview Slider」

ECサイトのTOPページや、商品一覧・詳細ページなどで使えそうなjQueryプラグイン「Product Preview Slider」を紹介します。

【jQuery】背景画像のスライドショーを実装する「Vegas2」

背景画像のスライドショーを実装するjQueryプラグインの「Vegas」の紹介。背景画像の切り替えエフェクト・オーバーレイの種類が豊富でインパクトのあるサイトを制作できます。

【jQuery】Google画像検索結果風のUI「Thumbnail Grid with Expanding Preview」

Google画像検索結果風のUIを実装できる「Thumbnail Grid with Expanding Preview」チュートリアルのサイト。イメージギャラリーやポートフォリオのサイトを作る時に使えそう。

RANDOM POST
  • パーツを組み合わせるだけで簡単にHTMLを生成できる「Stitches」
  • CSSだけでブルブル震えるエフェクトを実装できる「CSShake」
  • 【CSS】text-shadowの使用例をまとめたサイト「Trendy CSS Text Shadows」
  • ロゴ制作で役立つ類似画像を検索できる画像検索サイト
  • 海外のストックフォトサイトから写真を横断検索できる「O-DAN」
  • 無料で使用できるポップなフリーイラスト「illlustrations」
POPULAR POSTS
  • 【無料】漢字が使える日本語フリーフォント59選
  • Photoshopで簡単に背景を伸ばすテクニック
  • Youtubeの埋め込み動画をレスポンシブに対応させる方法
  • 似たフォントを探したい!フォントを調べる時に役に立つツール・サイト10選
  • CSSで簡単に作れるおしゃれな見出しデザイン20選
PICKUP
  • 無料で使えるおしゃれな英語の筆記体フリーフォント20選
  • CSSで実装するボタンデザインとホバーエフェクトのアイデア
  • 【無料】おすすめのフリー画像・写真素材サイト10選【商用利用可】
  • 無料で使用できる海外のフリー写真素材サイトまとめ
  • hulu (フールー)で観れるおすすめの海外ドラマ・国内ドラマ【2020年3月版】