CSS Transitionを使ったスムーズにスクロールしてトップに戻る機能
前に作ったスクロールした時に位置固定のロゴをトップに戻る機能にすり替えるものを少し手直しして再導入した。今回はスムーズにスクロールさせようかと色々考えていたが、やはりJavaScriptでscrollTo()を制御するのはコストが高い。CSSならどうだと試行錯誤したところ、どうやらbody要素への負のマージンをCSS Transitionで滑らかに変化させれば良いようだ。 Demo: Scroll Smoothly with CSS Transition デモのページにはダミーテキストの各セクションの最後にそれぞれ⇑ Back to Topというリンクがある。それをクリックすると1秒かけてスムーズにスクロールしながらトップに戻る。トリガーとスクロール自体はJavaScriptで行っているが、スクロールのアニメーション自体はCSS Transitionで行っている。具体的には以下のような処理
“マークアップ”するということ ～ HTML5勧告に寄せて ～
HTMLを適切な要素を使って書いていくことは実はそれほど難しくはない。しかし過剰に要素を使わずに、かつスタイリングすることも意識して、と適切に“マークアップ”するのはなかなかの修練を必要とする。いったい“マークアップ”するということはどういうことなのだろうか、そしてどのような思考の元に行えば良いのだろうか。 HTML5での変化 著作権表示のマークアップ small要素 footer要素とsmall要素 p要素とdiv要素 footer要素とp要素 スタイリングとの兼ね合い マークアップするということ HTML5での変化 コンテンツに則した素直な形でマークアップできること。 HTML5で変わることや変わったことは多くあるが、それらをおおまかに俯瞰するとこのような言葉に集約できる。そのために様々な要素や属性が追加され、既存の実装をなるべく壊さない形で要素の意味に変更が加えられた。これらの変化は
xargsからのcURL
1200くらいのURLのリストを渡され、そのURLのファイルをダウンロードする必要があった。今更ダウンローダーをダウンロードしてきて、インストールして、使って、アンインストールするのも面倒だったので、xargsからcURLをつなげてやった。 $ xargs -n 1 -P 4 curl -OL < urllist.txt xargsは、-n 1で標準入力を一行ずつの処理でき、-P 4で指定したコマンドを4つ並行に走らせることができる。cURLでは-Oを使ってURLから保存するファイル名を取り、-Lでリダイレクトを辿るようにする。これで4つ並行にファイルをダウンロードできた。 xargsはもちろん、cURL程になっても使い方を覚えてなくても--helpでなんとなくわかる。こういう--helpやGoogleで使い方や利用例がわかるCLIツールは、ほとんど何も覚える必要がない(どういう目的のツー
InkscapeのUIフォントを直す
InkscapeはUIフォントが明朝になっていて、他と統一感がなく気持ち悪いので直したいが特にそういった設定は用意されていない。検索して見つかる情報もgtkrcを～とかGTKアプリの問題で～とかそういうのが多く、それらは大体正しいのだけど、pango.aliasesでMingLiUが優先的に使われるように設定されているのを直すのが一番労力が少なそう。Inkscapeは7-Zipで圧縮されて配布されているWindows版のv0.48.2を前提にする。 配布アーカイブにあるetc/pango.aliasesで定義されているsansというエイリアスがUIで使われているようなのでその行だけを変更する。 sans = "segoe ui,meiryo,arial,browallia new,mingliu,simhei,gulimche,ms gothic,kartika,latha,mangal,
Vimでメタ構文変数を簡単入力
メタ構文変数とか呼ばれてるらしいfooとかbarとかのアレがまったく覚えられない。のでVimに一般的なメタ構文変数のリストを覚えさせておいて、fooの上で<C-a>するとbarに、barの上で<C-a>するとbuzに、と順に次の(<C-x>だと前の)を選択してくれるように関数とマッピングを書いて使うことにした。 " Cycle metasyntactic variables function! s:CycleMetasyntacticVariables(num) if type(a:num) != type(0) return endif let vars = ['foo', 'bar', 'baz', 'qux', 'quux', 'corge', 'grault', 'garply', 'waldo', 'fred', 'plugh', 'xyzzy', 'thud'] let i =
あなたのサービスが落ちた時にユーザーになんと言うべきでしょうか？
Translation of: What should you tell your users when your service is down? by David McKenney つい最近、私達は多くの有名なサービスが完全に停止するという状況に遭遇しました。この出来事は、こういった何か不具合が起きた時にユーザーとどうコミュニケーションをとるかについて学ぶ良い機会なのではないかと思います。あの時InstagramとAirbnb、IFTTT、Vineがユーザーに送った通知は以下のようなものでした: これらから何を学べるのでしょうか？ これらすべてのツイートは、何か不具合が起きた時のコミュニケーション方法として一般的なパターンを採用しています: 技術的な専門用語を避け、ユーザーに簡潔に、そしてフレンドリーに伝えること みなさんの多くが不具合に遭遇していることを確認しました。 問題に気づいた
SVGよりアイコン・フォント！ な理由
両者は共にスケーラブルなもの(にできるもの)なのでその点では互角だけど、様々なプロパティーを持ち多彩な表現が可能なSVGの方がフォーマット的には優位にあると言って良い。が、なかなか利用が広まらないSVGに対して、アイコン・フォントの利用は急速に拡大している。単に流行りとみなす向きもあるけど、やっぱりそれなりに理由があるのではないかと思う。 CSSとの親和性 特に以下の3つのCSSプロパティーは効果的に使える。 font-size color text-shadow PNGで作られたアイコンの色を変更するには編集が必要だけど、アイコン・フォントはCSSファイルで自由に色を調整することができる。独自実装も含めるなら-webkit-maskプロパティーもとても(想像以上に)効果的に使うことができる。他にもちょっとした位置の調整やなんかも慣れ親しんだCSSで普通に可能。更にこれらをHTMLファイル
Lea Verouのフレシキブルな複数行定義リスト
Lea Verouの編み出したフレキシブルな複数行定義リストは目からウロコだった。このテクニックを知るまではfloatを使うと長い時(コンテンツ幅に収まらない時)に途中で改行とかうまくできないけどまぁしょうがないか……みたいな感じで我慢していた。LF(やCR)を擬似要素経由で挿入してwhite-space: preで改行させてしまうというのは頭良い。ただ複数のdd要素を持つケースにはうまく対応できないのでちょっと変えて使い始めた。 このテクニックはつまりdt要素とそれとセットになったdd要素を一行に並べるというもの。表的なものならばそれは単にマークアップが間違っているのでtable要素でマークアップし直した方が適切だけど、dl要素のが適切なケースも多くあるのでこのテクニックが生かされる場面は多い。 dt, dd { display: inline; } dd + dt:before { c
git logを見やすく
git log --graph --onelineをメインに使っていたんだけど、現在時刻に対する相対的な時刻とかコミッターの名前とか表示したくなったので色々いじってた。%C(white bold blue)とかでターミナルの色を参照して文字色と背景色を指定することができるということを理解するまでが長かった……。 上記スクリーンショットのようなgit logは以下のようなコマンドで実現できる。 $ git log --graph --pretty='format:%C(yellow)%h%Cblue%d%Creset %s %C(black bold)%an, %ar%Creset' %dで参照名(ブランチやタグ、リモートブランチ)を、%anでコミッターの名前を、%arでコミットの相対的な日付を表示するようにして、%Cで色を変えている。%Credと%Cblue、%Cgreen以外を使う場合は
ボタンの押し込みをCSSで表現する
時代は:active！ タッチ・デバイスに:hoverなどない！ みたいになりつつあるような気がしないでもないので、ボタンの押し込みの表現を色々考えている。とは言ってもタッチ・デバイスでは:active擬似クラスもいまいちアレなのでまだあんまり意味なかったりするけど。三周回ってデフォルト使えみたいな感じになっている節もある。ですよねー。 Demo: Pixel Pushing padding 一番のメジャーで安定のクオリティー。 .test { padding-top: 10px; padding-bottom: 10px; } .test:active { padding-top: 11px; padding-bottom: 9px; } 欠点はpx単位でpaddingプロパティーを制御せざるを得ないのでスケーラブルにしづらくなること。 position ボタンのテキストだけでなく全体を
Flexbox、おもしろいですよ？
Translation of: Learn You a Flexbox for Great Good! | The Haystack. written by Stephen Hay Flexboxについて知っていますか？ 多分、名前は聞いたことがあるでしょう。もしかしたらチュートリアルくらいは読んだことがあるかもしれません。既に試していたりしますか？ Flexboxという代物についてあまり聞いたことがなかったり、前に試してから随分と経つなら、そのFlexboxに関する知識のことは一旦全て忘れてしまいましょう！ 現時点での最新版である2011年11月29日にリリースされた仕様では完全に別物になっています。 訳注 2012年3月22日に新しく公開されたWorking Draftでもまた大きな変更が加わり、この文書の一部はそのWDにそぐわないものになっています。大筋は変わりませんし、2012年3
ディテール
Webページにおける細かいパーツを正しく実装することがユーザー経験の向上につながるということについて書かれたUI: Getting the Details Rightを読んだ。WordPressの結構な人気テーマでもタブがあたかもパンくずリストのように表示されていたりするし、頭ではわかってても実践にまでは至らないことも多そう。 Getting the Details Rightではいくつかの有名なパターンを例に、こう実装するとユーザーが混乱しにくいという説明をしている。例えばスライドショーでは切り替えの矢印以外にも「いくつくらい画像が用意されていて、今何番目を表示しているのか」を示すドットを使ったインジケーターが重要であるとしている。また、画像や画面の切り替えにも簡単なアニメーションを導入することによって、ユーザーに「どう切り替わったのかをアニメーションで示すことによって戻る方法を示唆でき
noscript要素をhead要素で使う
様々なライブラリのお陰でJavaScriptでドキュメントをゴニョゴニョするのが簡単になったので、代替コンテンツを用意することはあまりなくなった。そのためnoscript要素が使われているページを見ることはまず無い。などと始めながらそういう代替コンテンツのためのnoscript要素の話ではなく、head要素内でうまく使うとJavaScriptの有効・無効でユーザーを振り分けられるという話。 具体的には以下のように書く。 <head> <noscript> <meta http-equiv="Refresh" content="0; URL=noscript.html"> </noscript> </head> これでJavaScriptが無効になっている場合noscript.htmlにリダイレクトされる。HTML4.01ではこういったことはできなかったのでつい最近まで知らなかった。印刷向け
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
