タグ
レスポンシブWeb

Bigvideoプラグインを使用してvideo要素で動画をブラウザの背景全体に再生させる(レスポンシブ対応)【jQuery連載02】

video要素を使用して動画をブラウザの背景全体に表示させてインパクトのあるページをjQueryの「Bigvideo」プラグインを使用して作成しました。YOUTUBEなどの外部サイトの動画でなく自分のサーバーにある動画を背景に流したい場合におすすめのサンプルです。

jQueryのtubularプラグインを使用してYOUTUBEの動画をブラウザの背景全体に再生させる(レスポンシブ対応)【jQuery連載01】

YOUTUBEにアップロードした動画をブラウザの背景全体に表示させてインパクトのあるページをjQueryの「tubular」プラグインを使用して作成しました。スマートフォンで閲覧の場合には通常の動画として見れるように対応しました。背景に動画を流したい場合におすすめのサンプルです。

超シンプルフレームワーク「Responsive Grid System」に画像対応などしてレスポンシブWEBサイトをつくろう(カスタマイズ編)

前回紹介した超シンプルで簡単にレスポンシブWebサイトが作れるフレームワーク「Responsive Grid System」に画像のスマートフォン時の対応や簡単なレイアウトを付け加えてブログフォーマットのベースになるような形をつくってみたいと思います。

超シンプルで簡単なフレームワーク「Responsive Grid System」でレスポンシブWEBサイトをつくろう(前編:導入編)

最近は様々なレスポンシブ対応のフレームワークがでていて、これらを使うことによって簡単にPC、タブレット、スマートフォンに対応したサイトが作成できるようになりました。

そこで今回は本ブログのリニューアルで使用した、モバイルファーストを意識した超シンプルで簡単なレスポンシブフレームワーク「Responsive Grid System」の使い方を解説してみようと思います。

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

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

12