-
iphoneなどのスマホでposition fixedにした時にスクロール中にfixedしてくれないからtransform: translate3dで対応してみたらz-indexではまった
タイトルで全てを終わらせている感じ。 ちょっと複雑な重なりあいをテストしていてタイトルの現象にハマった。 こんなとき。 .box-1stには背景だけ入れてみる。 .saizenmenに position relative […]
-
MacとWinでGulpの同じプロジェクトの作業をしようと思ったらnode-sassが何かエラー
検証環境をかねてノートをMac、デスクトップをWinにしている人は自分だけでは無いはず。 MacとWinだからなのか、ただたんにインストールする時に色々と違ったのか分からないけどどちらかで立ち上げたプロジェクトがどちらか […]
-
CSS3のTransitionとAnimationのメリットデメリットって
これのエントリーの前に書いているAnimation。 使いやすいけど弱点をすごく感じた。 それはスクロールに合わせてClassを追加したり削除したりするときの挙動。 Animationはアニメが0%~100%の間で細かい […]
-
position:absolute;で設定していた要素をある地点までスクロールしたらposition:fixed;に変更する。けど動きおかしい
なかなかやることが無さそうなシチュエーション。 最初からFixed出来ればラクなんだけど、その要素を通過するまで普通にコンテンツ内にまぎれていて、それを越したら画面中央までアニメーション。そして固定。 スクロールの判定は […]
-
jqueryで親セレクタ(親要素)を指定する時に相対パス的な書き方だと面倒
今まであまり考えてこなかった問題。 頭の中で組んで、一発でコーディング出来る時はあまり問題になってこなかったけども、動きを検証しながらHTMLを加筆したりすると起きる問題。 ある指定したボタンなど(.btn)をクリックし […]
-
SVGを使って画像や動画をマスクしたいけどclip pathはまだまだ使いづらい?
どうにもこうにもclip pathが使いづらい。 センターにどうやって置くの?かさえよくわからない。 知識が無いならば力技発動。 要は見た目がマスクならいいじゃない。 そこで考えたのが動画(画像)の上にカバーするように見 […]
-
ウェブデザインで各セクションの区切りを斜めにしてみたいと思う
事がよくある。 最近のサイトの流行りで画像なり、背景をブラウザ幅いっぱいにすることは良くあるがそれをすると大体サイトって似るのよね。 そこでなんか個性ということで各セクションの色の変わり方を斜めにする方法。 といってもそ […]
-
iphoneの解像度毎のmedia Queryのサイズ感
iPhone5s : 320 × 480px iPhone6 : 375 × 667px iPhone6 Plus : 414 × 738px Plusだけはデザイン分けた方がいいですね。 横一とかにしてしまうと無駄に幅 […]
-
SVGファイルを作る時に気をつけておきたいこと。Illustratorさん、これは気付きづらいよ!
とある案件で、PCでのチェックはOK、IphoneもOK、AndroidもOKとチェックも終わったなーと思ってたらAndroid4.0の機種でSVGの背景画像が表示されていないという現象が。 他のSVGは表示されている( […]
-
google noto fonts という名のweb fontがいつのまにか
とうとう大御所が無料でwebfontを。 気付くの遅いというのはご愛嬌。 つかってみました。 やはり日本語なので表示まで時間がかかるのがネックです。 サイト全体で使用するのは避けた方がベターかもしれません。 使用方法はと […]