canvasタグの下に謎の隙間

今までcanvasであまり大きなものは作ったことがなかったのですが、ブラウザ全体を覆うような巨大なものを実装したところ、すぐ下に3pxぐらいの謎の隙間が生じていることに気付きました。
開発者ツールで犯人を捜しましたが、すぐにはわかりませんでした。

“canvasタグの下に謎の隙間” の続きを読む

Macでブラウザ全画面表示

店頭などでブラウザを全画面で表示したいときがあります(ユーザーには触らせないパターン)。
WindowsだとF11キーで簡単なのですが、Macでの方法がわからなかったのでメモしておきます。
以下はChromeでの手順です。

(1)cmd + control + F でChromeを全画面表示にする。
(2)まだアドレスバーなどが見えている場合はさらに cmd + shift + F。

これでアドレスバーも消えてChromeの全画面表示になります。
controlとshiftを間違えないように気をつけてください。

Safariでも基本的には同じ操作ですが、アドレスバーを消すのは「表示」メニューで「フルスクリーンで常にツールバーを表示」のチェックを外してください。

CSSで縦スクロールバーを消したい

Webデザインをやっているとたまにおかしな案件と遭遇することがあります。
今回は「ブラウザ右端の縦スクロールバーを消したい」というものでした。
コンテンツが1画面に収まることがわかっているのでそうなるのですが、なかなかうまくいきませんでした、

とりあえずChromeは下記で消えました。

IE, Safariなどはよくわかりませんでした。意外と難しいですね。

開発者ツールの「Searchパネル」

Chromeで開発者ツールを開いてから ctrl + shift + F で「Searchパネル」が開きます。
ここで検索文字を入力するとhtmlだけでなくそのページで読み込んでいるcssやjsなども含めて全検索してくれます。

デバッグで頻繁に使っていたのですが、先日から検索にすごく時間がかかるようになりました。

“開発者ツールの「Searchパネル」” の続きを読む

CSSで斜めのストライプ模様

背景画像などを「斜めストライプ」の模様にしたいとき、昔はフォトショで小さいスライス画像を作って敷いていました。
ググったところ今どきはCSSだけで作れるようです。
linear-gradient()などのグラデ用の関数があり、これを少しトリッキーに使うことで簡単に実装できてしまいます。時代は変わりましたね。
“CSSで斜めのストライプ模様” の続きを読む