カテゴリー
Web制作Tips

WordPressや通常サイトでYoutubeやVimeoの動画の埋め込みをCSSで簡単にレスポンシブWeb対応にさせる方法

レスポンシブWebで作られたサイトでは自分で作成した画像などはCSSで対応させますが、Youtubeやvimeoなどの外部サービスを埋め込む際にレスポンシブ対応させる簡単な方法をまとめます。Wordpressの投稿などでも簡単に設定できるのでとても便利です。

ゼロからはじめるCSS3を勉強するために便利で参考になるCSS3ジェネレーターをまとめました

ボタンやボックス背景などはCSS3でつくれば要素に合わせて可変してくれるので、非常に便利ですし、HTML上のムダな記述も減らすことができ、きれいで理想的なソースになります。また、iPhone4をはじめとするRetinaディスプレイの場合はデバイスフォントやCSS3でコーディングすることで画像サイズの悩みも解決します。

今回は、ゼロからはじめるCSS3を勉強するために、デザイン要素に使える便利で参考になるCSS3ジェネレーターをまとめました。

ゼロからはじめるCSS3を勉強するために参考になるサイトや便利なツール、チュートリアルを一挙にまとめました

アプリ制作をする上でも便利なCSS3のアニメーション機能等を勉強する際に参考になるサイトをまとめました。

デモページからチュートリアルサイト、便利ツールまでこれからCSS3を勉強する際に知っておくと良さそうなサイトをたくさん集めました。

CSS3のボックスシャドウを使って写真のフチの装飾をするサンプル作りました。【サンプルコード付き】

写真ブログでは写真の背景に背景画像でシャドウ部分を作成ましたが、css3のbox-shadowプロパティを使うことで同じような影の表現ができるというサイトがありましたので、CSS3のbox-shadowを使って写真フレームに影をつけ、めくれたようなエフェクトをつける表現を試してみました。

ソースコピーで簡単に使えるCSS3とjQueryで作るローディングページ作る

以前の記事で「画像を使わないでCSS3で様々なローディング用アニメーションをつくってみよう」という形でCSS3でローディングアイコンを作成しました。

しかしあのままでは動きませんので今回は、jQueryを利用して実際にサイトでローディングを行う際のサンプルを作成しました。