Category Archives: Web

iOS Gmail アプリの HTML メールの「画面に合わせた表示」を強制的にオフる

HTML メールをコーディングして iOS の Gmail アプリでテストすると、レスポンシブ対応をしていない場合に「画面に合わせた表示」だと崩れることがある。

それでも崩れないようにするのがベストだけど面倒くさいので、どうにかして最初から「元の表示」にしておきたい。

その場合、メディアクエリとか使ったりいくつか方法があるみたいだけど、てっとり速いのは以下のコードを HTML のどこかに入れておく方法。

このコードは幅 600px に最適にしているので、サイズに合わせて の数を調整する必要がある。

メルマガ作成等の際にこの「画面に合わせた表示」でお困りの方は是非お試しください。

バージョン 3.1415926 ではこの方法は有効でしたがバージョンによっては使えなくなる可能性があります。)

IntelliJ で Source Code Pro フォントを使うときのメモ

Source Code Pro フォントはインストールされているのに、 IntelliJ のエディタで使おうとすると文字化けしてしまう。

参考:http://sticksnglue.com/wordpress/source-code-pro-phpstorm-the-plot-thickens/

Windows はわからないけど、Mac の場合だと

に Source Code Pro の ttf  または otf ファイルを置かないといけないみたい。 

置いたら無事文字化けせずに表示されました。

Chrome 33 で opacity の transition がおかしい件

Chrome 33opacitytransition を他のプロパティ(transform とか)と組み合わせて使うとうまく動かなくなってた。
Safari、Firefox では大丈夫っぽい。
opacity 単体での transition はイケるみたいだけど。

こんな感じでそもそも動作しなくなります。

See the Pen gnbel by johnykei (@johnykei) on CodePen.


この辺でもバグ報告あがってるみたいです。最新の Chrome Canary ではきちんと動いてました。もうすぐ直るのかな?

いつ直るかわからないのを待っている訳にもいかないので、解決策を調べました。
opacity: 0 から 1 となっているところを opacity: 0.01 から 1 にするときちんと動きます。本当力技な感じ。

こちらが上記の動かないサンプルの修正版です。

See the Pen Chrome 33 opacity transiton bug (fixed) by johnykei (@johnykei) on CodePen.


とりあえずはこの方法か、 opacity を使わない方法で対応する必要ありそうです。

※ 2014/5/22 追記

いつの間にか Chrome 35 になってましたが、この問題は解決されているようです。


今月のお気に入りWebサイトまとめ (2013/09)

今月個人的にイケてるなーと思ったサイトをまとめてみました。
基本的に awwwards.com とか CSS Design Awards とか見て気になったサイトをブックマークしています。

タイトルにも「今月の」と付けているので、毎月このコンテンツを更新するようにしていこうと思います。今回に関しては初めてなので、少し前ブックマークしていたサイトも載せました。

どれもかっこいいですねー。最近はやはりパララックス系とフルスクリーン系が多いです。フルスクリーンでムービー入れるのが結構流行ってるのかな。




theQcamera

theQcamera

Code42

Code42

Trask Industries

Trask Industries

Subsign | Creative Agency

Subsign | Creative Agency

Disqus – The Web’s Community of Communities

Disqus – The Web’s Community of Communities

B&O Play H6

B&O Play H6

Desktime: Shared Spaces and Coworking

Desktime: Shared Spaces and Coworking

parallax.js

parallax.js

Marmoset

Marmoset

JOBS : le film – le 21 août au cinéma

JOBS : le film - le 21 août au cinéma