今までcanvasであまり大きなものは作ったことがなかったのですが、ブラウザ全体を覆うような巨大なものを実装したところ、すぐ下に3pxぐらいの謎の隙間が生じていることに気付きました。
開発者ツールで犯人を捜しましたが、すぐにはわかりませんでした。
カテゴリー: Web
Chromeで背景動画が再生されない!?
数年前に公開したページでなぜか不具合が起きるようになりました。
Chromeで背景動画が再生されないことがあるようです（することもある）。
公開当時は問題なかったのですが、仕方ないので調査開始です。
Macでブラウザ全画面表示
店頭などでブラウザを全画面で表示したいときがあります（ユーザーには触らせないパターン）。
WindowsだとF11キーで簡単なのですが、Macでの方法がわからなかったのでメモしておきます。
以下はChromeでの手順です。
(1)cmd + control + F でChromeを全画面表示にする。
(2)まだアドレスバーなどが見えている場合はさらに cmd + shift + F。
これでアドレスバーも消えてChromeの全画面表示になります。
controlとshiftを間違えないように気をつけてください。
Safariでも基本的には同じ操作ですが、アドレスバーを消すのは「表示」メニューで「フルスクリーンで常にツールバーを表示」のチェックを外してください。
CSSで縦スクロールバーを消したい
Webデザインをやっているとたまにおかしな案件と遭遇することがあります。
今回は「ブラウザ右端の縦スクロールバーを消したい」というものでした。
コンテンツが1画面に収まることがわかっているのでそうなるのですが、なかなかうまくいきませんでした、
とりあえずChromeは下記で消えました。
|
1 2 3 |
body::-webkit-scrollbar{ display:none; } |
IE, Safariなどはよくわかりませんでした。意外と難しいですね。
開発者ツールの「Searchパネル」
Chromeで開発者ツールを開いてから ctrl + shift + F で「Searchパネル」が開きます。
ここで検索文字を入力するとhtmlだけでなくそのページで読み込んでいるcssやjsなども含めて全検索してくれます。
デバッグで頻繁に使っていたのですが、先日から検索にすごく時間がかかるようになりました。
CSSで斜めのストライプ模様
背景画像などを「斜めストライプ」の模様にしたいとき、昔はフォトショで小さいスライス画像を作って敷いていました。
ググったところ今どきはCSSだけで作れるようです。
linear-gradient()などのグラデ用の関数があり、これを少しトリッキーに使うことで簡単に実装できてしまいます。時代は変わりましたね。
“CSSで斜めのストライプ模様” の続きを読む