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で斜めのストライプ模様” の続きを読む

EmacsでSVGを開く方法

ひょんなことからSVG画像にaタグを仕込むことになり、Emacsで開いて作業しようとしました。
するとEmacsはSVGをデコードしてしまって画像自体を表示してしまうではないですか!!!
いやいや、どんな画像かは知っているんだ!! 頼むからソースコードを表示してくれ!!!!

ググると解決しました。なんとC-c C-cでした。
マジで焦った。

Velocity.js vs Android標準ブラウザ

JSでアニメーションを記述するときはVelocity.jsを使うことが多いのですが、昨日見事にハマりました。
Android7の標準ブラウザです。

動かす要素が10個ぐらいでアニメーションのテストをしていて、特に問題なかったので本番データ(50個)に切り替えて試しました。
するとAndroidの標準ブラウザだけ挙動がおかしくなります。
数を減らすと問題なく動きます。
“Velocity.js vs Android標準ブラウザ” の続きを読む