HAM MEDIA MEMO

Youtube 動画の埋め込みをCSSでレスポンシブ対応する方法

Youtube の埋め込みをレスポンシブ対応のページにそのまま入れようとしても、可変になってくれないという問題がでてきます。

レスポンシブ対応する方法について、毎回調べてしまっていたので、メモとしてエントリーしておきます。

もう開催まで2週間きってしまっていましたが、ひっそりと SaCSS vol.57 の募集を開始していました。

今回はバージョン管理の Gitをライブデモをしながら使い方を勉強する内容です。最近のことですが、ようやく札幌の制作会社でも Git の導入をしはじめた！なんて会社がでてきたので、それをみての開催でもあります。

Gitを導入しようとしているけど、まだ導入できていないという方、その場での実演をメインにGitの使い方を覚えてもらう内容になっていますので、ぜひ参加して、使い方を覚えてください！

Google Chrome で新規タブを開くと、デフォルトだと Google の検索のページが表示されるようになっているのですが、その検索の下に、よく表示するページの一覧がサムネイル付きで表示されてしまいます。

SaCSS などの勉強会やセミナーで Google Chrome を利用してデモページをスクリーンに写すということをよくやるのですが、その際にサムネイルで制作している見せては行けないページなどが時折出てしまうことがありました。

これを回避するため、以前はデフォルトの状態を Apps 一覧が表示されるようにしていたのですが、 Chrome のアップデートとともに、 Apps の一覧を新規ページにしたくてもできないように変わってしまいました。

そこで、今回、あらためて何か良い方法はないかと探したところ、Chromeの拡張機能「Show Apps in new tab」というのを見つけたので、早速導入してみました。

Google が提供している、ウェブサイトを構築するためのツール、 Web Starter Kit。

レスポンシ対応のマルチデバイスボイラープレートなので、サイト構築のための準備部分の設定とか楽だろうなと思い、テストがてら触ってみた。

gulp の設定ファイルが入っているので、利用するとローカルサーバーでライブリロードもついてて、便利！なのはいいのですが、 JavaScript のコードを書いていると何やらエラーがでて、gulp のストリームも止まってしまうため、ローカルサーバー落ちてしまう状態に。

今回はそのエラーが出てもサーバーが止まらないようにする対応などをメモ。

ここ最近のSaCSSでタスクランナーの導入やできることなどをテーマにお話をしていまして、6月7日に開催された vol.55 でも gulp についてを話てきました。

まだまだ Grunt で準備することのほうが多いのですが、今後は様々な場面で gulp.js が出てきそうだったので、ちょこちょこ gulp の使い方やできることなどなどをメモしていこうと思います。

まとめのエントリーはいつの日か書くかもしれないですが、とりあえずは導入や試したこと、使っているプラグインなどなどについてをまとめようと思います。