みかづきブログ その3

3ヶ月つづけてみました。

CSS

fixedの要素も横方向にはスクロールして欲しいという想い

マークアップをしていると、「縦方向にはfixedにしたいけど、横方向にはfixedしたくない」と思う瞬間がやってくると思います。 そんな時はJavaScriptでウィンドウのスクロールを監視し、fixedした要素のleftを設定するだけで実装できます。 HTML <div id="header"></div> CSS body {…

昨今どんどん巨大化するスマートフォンの為のUIを考えた結果、ななめにスクロールするUIもいいんじゃないかと思いました

きっかけは この記事 を読んだことにあります。 (もう1年以上前の記事なんですね)gigazine.netいろいろと参考になることが書いてあるのですが、なかでも一番気になったポイントは右手でスマートフォンを操作する人の指の届く範囲を表したこの図でした。 ht…

CSSでグラデーションをアニメーションさせる

CSS

CSSでグラデーションをアニメーションさせる方法として、 こちらのサイト でつかわれている、background-positionをつかった方法が有名です。www.gradient-animator.com ものすごく単純ですが、今回はafter要素をつかい2つのグラデーションレイヤーを重ねて…

GulpをつかってHTML, JS, CSS, 画像を圧縮するタスクをつくる

最近、ひさしぶりタスクランナーなしでコーディングをしました。タスクランナーなしで作業するときは、JSHint, a JavaScript Code Quality Tool や The W3C Markup Validation Service でバリデートをかけたり、jshint.comvalidator.w3.org/packer/ 、 CSS M…

スマートフォン向けサイトに設置するフォームを設置するときの小技まとめ

最近フォームをコーディングすることがとても多いのでまとめておこうと思います。 スマートフォンでデフォルトにあたっているスタイルをリセットする webkit系のブラウザはフォームにいい感じのスタイルを当ててくれています。 いい感じではあるんですが、自…

Android で position: fixed; と margin: auto; をつかうとレンダリング結果がずれることがある

結論から言うと、Android で position: fixed の要素をセンタリングしたいときは .centering { position: fixed; left : 0; right: 0; margin: auto; } という感じではなく、 .centering { position: fixed; left : 50%; margin-left; -width / 2px; } みた…

CSSでハニカム構造的な配置を実現する

CSS

はい。CSSでハニカム構造的な配置を実現し、要素の大きさが変わったときもいい感じに調整してみました。言語化してもわかりにくいですね。 そもそもハニカム構造とはなにものなのか?まずはそこから説明しましょう。 ハニカム構造とは ハニカム構造(ハニカ…

Easing Function 早見表

CSS

easings.netEasing Function 早見表 たるものを教えてもらいました。easeInOutBackとかをSCSSで実装できるのを知らなかったので非常に勉強になりました。

CSSアニメーションでランダムっぽい動きを実装する

DEMO SCSS @import "compass/reset"; body { background: #311B92; } .circles { position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; width: 300px; height: 300px; -x-animation: rotate 10s linear infinite; .circle { float: lef…

今日のCSSアニメーション その6

CSS

SVGをアニメーションさせてみました。 DEMO See the Pen HELLO WORLD. by kimmy (@kimmy) on CodePen. HTML

今日のCSSアニメーション? その5

CSS

よくある演出をつくってみました。 (よく考えたらCSSアニメーションじゃなかったです) DEMO See the Pen HELLO WORLD. by kimmy (@kimmy) on CodePen.

今日のCSSアニメーション その4

CSS

アニメのエンディングのようなトランジションを目指しました。 DEMO See the Pen Transition like the ending by kimmy (@kimmy) on CodePen. Jade .btn.adjust(data-color="black") .hole .inner GO #mask-wrapper #mask JavaScript (function(win) { "use …

jQueryをつかってCSSアニメーションのtransition-durationを知る方法

kimizuka.hatenablog.com前回の記事 でいろいろ考えましたが、もっと単純な話でした。 jQueryをつかえば、 parseFloat($("#box").css("transition-duration")); で #box の transition-duration を知ることができます。 DEMO このonはoffするまで忘れません…

JavaScriptにCSSアニメーションの終了を伝える方法を考える

kimizuka.hatenablog.comkimizuka.hatenablog.comkimizuka.hatenablog.com 最近、CSSアニメーションの終了をJSに伝える手法をもろもろ試し、これからは transitionend をつかおうと心に決めたのですが、これまでは transitionend のことを信頼してなかったの…

transitionend、animationendをいろんなブラウザに対応させた状態でつかう際の注意

kimizuka.hatenablog.com以前の記事 でちらっと紹介しましたが、ブラウザによってはtransitionend、animationendにプレフィックスが必要になる場合があります。 CSS .box { position: absolute; top: 20px; border-radius: 12px; width: 120px; height: 120p…

SNSボタンを収納するボタンをつくる

CSS

一時期流行っていたものをつくってみました。動きしかつくってません。(シェア機能はありません) DEMO

擬似要素をCSSアニメーションで動かそうとするとAndroidで動かない機種がでてくるときの対策でミスったはなし

kimizuka.hatenablog.comこちらの記事 で紹介しましたが、Androidでは擬似要素にCSSアニメーションが効かない機種があり、その対策として.afterというクラスを持ったdivに置き換えていたのですが、置き換えても一部AndroidでのみCSSアニメーションが再生され…

アニメーションの途中でdisplayをnoneにするとtransitionend、animationendが発火しない

kimizuka.hatenablog.com前回の記事 でちらっと紹介しましたが、CSSアニメーションの途中にdisplayをnoneにするとtransitionend、animationendが発火しなくなります。 DEMO transitionend animationend 発火しない際には疑ってみてもいいかもしれません。

CSSアニメーションの終了をJavaScriptで検知する

基本的にはトランジションの際はtransitionend、キーフレームアニメーションの際はanimationendをつかえばOKです。 transitionend HTML <div class="box"></div> CSS .box { position: absolute; top: 20px; left: 20px; border-radius: 12px; width: 120px; height: 120px; backgro…

grunt-autoprefixerで自動でprefixをつける際に気をつけること

便利ですが、範囲の指定には気をつけましょうという話です。github.com // grunt-autoprefixer autoprefixer: { options: { browsers: ["last 2 version"] // 対象のバージョンが指定できる }, develop: { src: "build/data/css/*.css" }, distribution: { s…

Compassをつかってテキストを背景画像に差し替える

CSS

よく使うのでmixinにしています。 方針としては、 image-width、image-heightで大きさを合わせる text-indentを-9999pxにしてテキストを飛ばす 背景画像を設定する を行っています。 インライン要素に対してはdisplayをblockにしてやる必要がありますが、そ…

Grunt作業メモ その3

kimizuka.hatenablog.com kimizuka.hatenablog.com 以前、GruntからGulpに移行しかけたんですが、なんだかんだでGruntに戻ってきてしまいました。 Jadeも導入して、Gruntファイルを更新したのでメモを残しておきます。 ディレクトリ構成 以前のものから、Jad…

iOS8とiOS7ではサブピクセル(小数点以下のピクセル)のレンダリング結果が異なる

ドット絵でランニング - みかづきブログ その3kimizuka.hatenablog.comcodepen.ioこちらの記事 のコンテンツをつくっているときに気づきました。 scssの変数にいれていたのでうっかりしたのですが、こちらのコンテンツ、$DOT_GAP を 1 / 2 にしてつかってい…

ドット絵でランニング

surprise_window_makermaker.kimizuka.org5年前につくったこちらのコンテンツ ですが、PCが壊れたタイミングで.flaファイルをロストしてしまいました。。。 なおしたいところがいろいろあるので、JavaScriptに移植していこうと思い、とりあえずドット絵の部…

擬似クラス :target をつかう

CSS

:targetdeveloper.mozilla.org CSSでつかう CSS #ki:target { color: red; } #sho:target { color: red; } #ten:target { color: red; } #ketsu:target { color: red; } という感じで、idのtarget属性を指定すると、URLのhashにID名がついているときの見栄え…

続・Googleフォームの見た目を強引にカスタムする(投稿完了画面編)

CSS

Googleフォームの見た目を強引にカスタムする - みかづきブログ その3kimizuka.hatenablog.com前回はGoogleフォームのフォーム画面に対し強引にスタイルを当ててみました が今回は、より強引な手段をつかって投稿完了画面を編集してみたいと思います。以前は…

スマフォ用軽量カルーセルをつくろう その3

kimizuka.hatenablog.com kimizuka.hatenablog.com以前つくったもの を改良しました。 自動送りとユーザー操作のタイミングが重なったときの対策をいれました。 touchend が発火しないことのあるAndroid にも対応させるべく、touchmoveにイベントを張りまし…

compassで画像をbase64にする

CSS

普段、画像のbase64化には こちらのツール をつかっていましたが、最近compassに任せることができることを知りました。画像をBase64に変換するツール (data URI scheme) - シングスブログblog.thingslabo.com 記述方法 SCSS background-image: inline-image(…

grunt-contrib-cssminでminifyしたbackground-imageが一部Androidで表示されない

先日Android端末でbackground-imageが表示されずに悩んでいたら、grunt-contrib-cssmin が原因でした。github.com 現象 SCSS .btn { background: url(/img/btn.png) center center no-repeat; background-size: contain; } 上記のようなSCSS(backgroundでイ…

スマフォ用軽量カルーセルをつくろう その2

スマフォ用軽量カルーセルをつくろう - みかづきブログ その3kimizuka.hatenablog.com以前制作したスマフォ用カルーセル ですが、関係各所からの要望により、先頭と最後をループさせるように改良しました。方針としては、 先頭と最後尾にループ用の要素を増…