みかづきブログ その3

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

CSS

IE10ではmain要素がblock要素にならない

CSS

あんまりmain要素をつかうことがなかったので知りませんでしたが、先日教えてもらいました。 IE10ではmain要素がblock要素として扱われないため、 main { display: block; } という感じで書いておく必要があるとのことです。困りますね。 DEMO main要素 disp…

IE10のselect要素のfocusにbackground-colorを設定するとが2回クリックしないと開かなくなる

CSS

マークアップをしていると、Android、IEの不思議な挙動を見つけることが多々あります。 こういったバグを見つけることを昆虫採集と呼んで日々ポジティブにデバッグをしているのですが、ひさしぶりにレアな昆虫(バグ)を見つけたのでテンション高くまとめて…

CSSで円のセンターにテキストを配置する

CSS

昔一度投稿した気がしなくもないんですが、見つからなかったので投稿しておきます。 テキストをDOMに対し上下左右中央寄せしたい場合はわりと頻繁に出てきますが、そのDOMが円だった際の対策です。円の外接四角形に対しテキストを上下左右中央寄せすると行数…

CSSでページの背景をほんのりおしゃれにする方法まとめ(コピペでつかえるよ)

CSS

HTMLで高速でモックをつくってみせるとき、背景が単色だとちょっと見栄えが良くない時ってありますよね。 そんなときにほんのりおしゃれに見える背景のつくりかたをいくつかご紹介しましょう。※ Chromeでしか動作確認してませんこちらのDEMOの背景をCSSだけ…

iPhoneアプリのアイコンにつくバッジの大きさと位置を目視で調べました

chibadge.kimizuka.fmかつてchibadge(チバッジ)のアプリアイコンをつくったとき、 デザイン 実機に移してバッジをつけて確認 調整 2に戻る という感じでデザインを調整していました。 それがとてもめんどうなので、バッジのついた状態をプレビューするツー…

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名がついているときの見栄え…