読者です 読者をやめる 読者になる 読者になる

みかづきブログ その3

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

CSSでロングシャドウをつくってその影で影時計をつくりました。 😎

最近、家に時計がないことに気づきました。時計機能のついたものはたくさんあるので、時間がわからなくて困ることは無いんですが、 世の中から時計という装置がどんどん減ってきてるのではないかと思いました。反面、ありとあらゆるものに時計機能が付随して…

テキストの縦位置・横位置をセンタリングしたいという想い(display: flex; align-items: center; justify-content: center;) 😇

CSS

いままで、display: table-cell とか text-align: center とか line-height(1行のときのみ)とか色々頑張ってきたけど、今後はflexboxをつかうと決意した。 なんていったって、いままでの試行錯誤と違って専用のプロバティだし。 CSS .box { display: flex;…

CSSアニメーションで画面がちらつく場合は -webkit-backface-visibility: hidden; で解決する場合がある

CSS

大体1年前の記事で取り上げたUIをブラッシュアップしている時に気づきました。kimizuka.hatenablog.com 解決前DEMO カードをドラッグした時に、テキストが点滅するんです。 本当は制作当初から気になっていたんですが、原因もよくわからないし放置していまし…

フラットデザイン、マテリアルデザインを目コピーする(スライダーUI編)

年末にアドベントカレンダーで こちらの記事 を執筆させていただいたのですが、それからというものアプリっぽいUIをCSSでつくることにハマっています。techblog.kayac.com 以前から、トグルボタンとか、kimizuka.hatenablog.comドロワーメニューとか、kimizu…

iTunesのようにスクロールできるUIをつくる

overflow: scroll をつかってiTunesのようにスクロールできるUIをつくってみました。 本当のiTunesにはスクロールバーがついているのですが、なんとなく無い方がかっこいい気がして消しています。 基本的にはCSSのみでつくっているのですが、左右に薄くはい…

CSSのみでドロワーメニューをつくったぞい

CSS

DEMO See the Pen Drawer Menu made from CSS only by kimmy (@kimmy) on CodePen.チェックボックス、隣接セレクタ、checked擬似クラス、target擬似クラスを活用してJavaScript無しでの動作を実現しています。 HTML <input id="btnMenu" type="checkbox" class="btn"/> <nav id="menu"><a href="#a" class="btn">MENU_A</a><a href="#b" class="btn">MENU_B</a></nav>

iPhoneのSafariのデフォルトの挙動(ボタンをタップした際の色、テキスト選択、長押しで開くメニュー)をリセットしたいという想い

結論 * { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-touch-callout: none; -webkit-user-select: none; } でOK。こちらのページ で検証しました。(iOS10.1のiPhone6を使用して確認)http://jsrun.it/kimmy/ITBo ボタンをタップした際に薄暗…

CSSだけでトグルボタンをつくる

CSS

input要素をCSSでトグルボタン風に仕上げてみました。 DEMO See the Pen Toggle Button made from CSS only by kimmy (@kimmy) on CodePen. HTML <input type="checkbox" class="btn center"/> SCSS $white: #f8f8f2; $green: #a6e22e; body { background: $white; } .center { position: absolute; top:…

Compassのみ(他のタスクランナーをつかわず)でAutoprefixerをつかいたいという想い

CSS

GruntとかGulpでは良くAutoprefixerをつかっていたのですが、AutoprefixerのためだけにGruntとかGulpを導入するのもなかなか面倒なので、なんとかCompassでつかえないものかと悩んでいたのですが、つかえました。 必要なgemをインストール autoprefixer-rail…

flexboxをつかってコンテンツを均等に並べる

CSS

DEMO See the Pen flexbox by kimmy (@kimmy) on CodePen. 子要素の数に依存せずに、コンテンツ幅を均等にして並べたいことがあると思います。 そんな時に便利なのがflexboxです。 +ボタンを押していただくとわかりますが、子要素を増やすと自動でコンテンツ…

border-radiusを若干楕円にする

CSS

/ で区切って数値を複数渡すことで楕円を描画できます。 CSS .box { position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; border-radius: 20px / 30px; width: 200px; height: 150px; background: #3e3e3e; } HTML <div class="box"></div> DEMO

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

CSS

蝶を目指しました。 DEMO HTML <div class="arc"> <div class="box"> <div class="butterfly"> <div class="head"></div> <div class="body"> <div class="wing l"></div> <div class="wing r"></div> </div> </div> </div> </div> SCSS %block { display: block; position: absolute; border: solid rgba(0, 0, 0, 0); width: 0; he…

border-image + drop-shadow でおしゃれな枠線を実装する

CSS

デザイナーから、大きさが可変のイメージをおしゃれな枠線で囲んだデザインが上がってきたので、border-image + drop-shadow で実装することにしました。 border-imageの実装 このような9分割できる素材を用意しましょう。 (ぼかしはCSSでいれようと思って…

white-space: pre-line をつかって改行を反映する

CSS

developer.mozilla.orgwhite-space を pre-line に設定すると改行が反映されることを教えてもらいました。 状況によっては便利に使えそうです。 HTLM <p> ふるいけや かわずとびこむ みずのおと </p> CSS p { white-space: pre-line; } DEMO

CSSでおしゃれな切り替えボタンをつくる その2

CSS

アニメーションをつけてみました。 DEMO See the Pen Button by kimmy (@kimmy) on CodePen. HTML <ul data-color="red" class="colors"> <li data-color="red" class="btn color"></li> <li data-color="blue" class="btn color"></li> <li data-color="green" class="btn color"></li> <li data-color="yellow" class="btn color"></li> <…</ul>

CSSでおしゃれな切り替えボタンをつくる

CSS

アニメーションをつけてみました。 DEMO See the Pen Button by kimmy (@kimmy) on CodePen. HTML <div class="box"> <ul data-index="0" data-length="2" class="btns"> <li data-index="0" class="btn">LEFT</li> <li data-index="1" class="btn">RIGHT</li> </ul> <ul data-index="0" data-length="3" class="btns"> </ul></div>

単位が%のときのSassでの割り算の書き方

CSS

結論 .hoge { width: (100% / 5); } という感じで括弧をつけて書きましょう。 あらすじ ものすごく初歩的なことなんですが、 .hoge { width: 100% / 5; } とか .hoge { width: 100 / 5 + %; } とかと書いてエラーになりました。よくよく考えると / は 通常の…

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

CSS

同じ色の円が場所によって違う色に見えるというデモです。 なにかにつかえるかもしれませんし、つかえないかもしれません。See the Pen SAME COLOR by kimmy (@kimmy) on CodePen.

visibilityはCSSアニメーションで制御可能なのでjQueryのfadeInみたいな感じのアニメーションをつくりたかったら、displayじゃなくてvisibilityをつかえば良いという事実

CSS

CSSアニメーションにて displayにtransitionを設定することができないため、display: none; から display: block; にするようなアニメーションを実現するときに困っていたのですが、visibilityにすれば解決するという画期的(?)な解決策を教えてもらいまし…

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

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フォームのフォーム画面に対し強引にスタイルを当ててみました が今回は、より強引な手段をつかって投稿完了画面を編集してみたいと思います。以前は…