Webデザイン

Youtubeの埋め込み動画をレスポンシブに対応させる方法

レスポンシブ対応のブログ・WebサイトなどにYoutube動画を埋め込む時の備忘録。CSSの設定でYoutubeのサイズをwindow幅に合わせて可変させることができます。

CSSで実装するボタンデザインとホバーエフェクトのアイデア

立体的なボタンからフラットなデザインまでCSSのみでデザインするボタンデザインとホバーエフェクトのアイデアを紹介します。

SVGの背景パターンを手軽に作れるジェネレーター「SVG Backgrounds」

簡単にSVGのバックグラウンドパターンを作成できる「SVG Backgrounds」の紹介です。

CSSやHTML5・Twiterカードなどのコードを生成できる「Web Code Tools」

CSS・HTML5・OGP・Twiterカード等の面倒なコードを生成してくれるジェネレーター「Web Code Tools」の紹介です。

サイトで使用していないCSSセレクタを調べられる「Unused CSS」

サイトで不使用なCSSセレクタを自動検出してくれるWebサービス「Unused CSS」の紹介です。

キレイな装飾のテキストアニメーション「Decorative Letter Animations」

出現する文字列にキレイなデコレーションを加えたテキストエフェクト「Decorative Letter Animations」の紹介です。

入力フォームを実装するためのテンプレート「Boilerform」

入力フォームで必要な要素をHTMLとCSSのテンプレートにまとめた「Boilerform」の紹介です。

CSS Grid Layoutを使用しているサイトを集めた「Grid Examples」

CSS Grid Layoutを使用したサイトをあつめたインスピレーションサイト「Grid Examples」の紹介です。

波の動きの背景を作成することができる「Wavie.js」

パーティクルを波状にアニメーションさせるエフェクトが美しいJSライブラリ「Wavie.js」を紹介します。

CSSグリッドレイアウトのコードを生成できるツール「Griddy」

手軽にCSSグリッドレイアウトのコードを生成できるWebサービス「Griddy」の紹介です。

CSSでクールなグリッチエフェクトを実装できる「CSS Glitch Effect」

画像にバグったようなノイズを走らせるグリッチエフェクトを表現できる「CSS Glitch Effect」を紹介します。

CSSでインスタグラムのようなフィルターを再現できる「Instagram.css」

任意の画像にクラスを指定するだけでInstagramのフィルターのような効果を画像に付与できるCSSライブラリ「Instagram.css」の紹介です。

CSSで簡単に作れるおしゃれな見出しデザイン20選

HTMLとCSSのみで簡単に作れる見出しデザイン例です。シンプルな見出しから凝った見出しまでサンプル20例を紹介します。

ビューポートなどで要素の可視性を検出できる「Emergence.js」

ビューポートまたは指定したエリアでの要素の可視化を検出することができる「Emergence.js」の紹介です。

anime.jsを使用したテキストエフェクト集「Moving Letters」

anime.jsを使用した心地よいアニメーションのテキストエフェクトを公開してるサイト「Moving Letters」の紹介です。

RANDOM POST
  • CSSでスマートフォンなどデバイスのモックアップを実装できる「Devices.css」
  • 画像を使わずにCSSだけで三角・矢印を作る方法
  • マルチボックスのフルスクリーンメニュー「Multibox Menu」
  • 【JS】要素をモーダルウィンドウに変化させる「cta.js」
  • パスが編集できる商用利用可のアイコン素材集「ICON BOX」
  • CSSで出力する三角形ジェネレーター「CSS Triangle Generator」
POPULAR POSTS
  • 【無料】漢字が使える日本語フリーフォント59選
  • Photoshopで簡単に背景を伸ばすテクニック
  • Youtubeの埋め込み動画をレスポンシブに対応させる方法
  • 似たフォントを探したい!フォントを調べる時に役に立つツール・サイト10選
  • CSSで簡単に作れるおしゃれな見出しデザイン20選
PICKUP
  • CSSで簡単に作れるおしゃれな見出しデザイン20選
  • 導入しておきたいWordPressのおすすめプラグイン
  • WordPressのおすすめテーマ19選【無料版・有料版】
  • WordPressにおすすめレンタルサーバー8選【初心者向け】
  • CSSで作成する吹き出しとデザインのアイデア