サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
ニコニコ動画
me.hateblo.jp
Retina(に限らず高解像度)用の画像を背景画像として書き出すとき、 今までは全部手作業でやってたんだけども、 高解像度向けの@mediaのベストプラクティスが日々変化(進化)するので、毎回grepして修正するのが面倒。 @mediaの記述位置はCSSの末尾にまとめて書いてたが、数が多いとどこに対応してるか、訳が分からなくなってきて保守地獄発生。かといって対応セレクタの直後に書くとなんか見通しが悪くなるのでこれも避けたい。 そもそもbackground-image: url("path/to/image/hoge@2x.png);とかbackground-sizeとか毎回書くのが大変。なんでRetinaのためにコード書く量が2倍以上になるのか。。。 →そこでsvgですよ、という話もあるんだけど、IE8以下対応してないし、画像でしか表現できないものもあるわけで。 こんな時、Sassでmix
予告通り、このチャートをSVGで書き直しました。 前バージョンとは違って、マウスオーバーするとTooltipが出て数字がわかるようになりました。 作ってみた感想: グラフはSVGで作ったほうがいい。但しcanvasより面倒。 SVGで円弧を描くのはなかなか大変。。。 アンカーポイントの位置を一点ずつ計算して指定してあげないといけないので。 canvasはある程度よろしくやってくれるところがあったんだけどなぁ。。。 そのかわり、mouseenter, mousemoveなどの標準のイベントを監視できるように! なので、マウスオーバー監視してグラフの値を出すTooltipをつけました。 SVGでやってみて、やっぱりインタラクティブなものはSVGのほうが有利だと実感。 DOMの中にちゃんとパスごとのエレメントが作成されるので操作出来るしなによりデバッグが楽。 CSSである程度装飾も可能だし(bo
# 2014.8.25 重要な追記 このハックは、今年4月あたり(FirefoxNightly 31?)から効かなくなってます。。 元記事 https://gist.github.com/joaocunha/6273016 でも、どうするよ的な議論&試行錯誤が交わされていますが、:-moz-any(hoge):before プロパティを使った方法で消せるのを見つけた人がいるようです(FF3.6~限定)。 http://jsbin.com/pozomu/4/edit なんだか素直にJS使った方がいい気がしてきますね。 ---- 今までは、フォーム内の特定の部品(radioボタン、select要素など)のデザインを好きなように変更しようと思ったら、 JavaScript(有名所ではuniform.jsとか…)を使って色々と手を加えてやらなければいけませんでした。 でも最近、Chrome等のモダ
すごく昔に書いた、input type="file"をCSSとJavaScriptで綺麗に装飾するものの改善版を作りました。 Chrome23.0.1, Firefox17, Opera12, IE9,8,7で正常に表示されるのを確認。 ■内容 ・「参照」ボタンを押しても、textboxを押しても参照ダイアログが起動。 ・ファイルを参照するとtextbox内にファイル名が入る。ファイル名が長い場合は「...」と省略される。 ・「アップロード」ボタンがあった場合で作ってみた。押しても何も起こりませんが。 ・画面内に複数入れたい場合は、"uploader"を複数入れることで対応可能。 ・JavaScriptが無効な状態にも対応。無効な環境では普通のブラウザデフォルトのinput type="file"が出現し、 アップロードボタンの左に並びます。 IEは画像作ってないので必要であれば足してく
jQueryを使っているサイトで、以下のことをやりたいときにどうすればいいのか、調べてみました。 ・特定要素にmouseenterした時に、別途作ったプルダウンで情報を出したい。 ・そのプルダウン内には、マウスオーバー時にDBへAjaxでリクエストし、動的に取ってきたデータを入れたい。 ・但しこれだと、マウスホバーするたびにリクエストされてしまう(マウスポインタがチラッと乗っかっただけでも行われる)。負荷軽減のため、mouseenterして一定時間経過後(500ミリ秒とか)にリクエストを出すようにしたい。 ・hoverIntentという有名なjQueryプラグイン使うと可能にはなるが、プラグイン使わずにもっと手軽にやりたいというわがまま付き。 やり方が悪いのか、普通にsetTimeout/clearTimeout使っても反映されない(タイマー自体はセットされるがmouseleave時にクリ
最近はCSS3のlinear-gradientをよく使うようになってきたこともあり、 今linear-gradientはどう書くのが適切なのかを調べてみました。 今までは、毎回コツコツ書いてられないので、ColorZillaのCSS Gradient Generatorを使ってたのですが、いかんせん長い! このサイトでグラデーション作るとこんな感じのコードになります↓ .gradient { background: url(bg_sample-gradient.png) 0 0 repeat-x;/* Old browsers */ background: -moz-linear-gradient(top, #ffffff 0%, #dddddd 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left
【追記】よりコンパクトに、デザインも改善した新しいものとして作り直しました。 http://me.hateblo.jp/entry/20121226/1356479631 せっかくブログ作ったので、 趣味でやってるhtmlやCSS、php関連のものを 書いていきます。 まずは表題のもの。 やってみたらあっさり解決できてしまったので。 やりたいこと ブラウザ間で表示が全然違うことで有名なinput type="file"をIE7〜とモダンブラウザで統一し、「参照」ボタンへのロールオーバーも実現する。 1の実現には疑似input(text)を作成するが、この疑似input内に、参照が完了(change)したタイミングで参照ファイル名を入れる。 1ページ内に何度かinput fileが現れることを前提として、コンフリクトしないようにする。 xhtmlとcssでできないところだけにjQueryを使
お世話になることの多いNETTUTSで、jQueryのDOM検索効率化を上げるためのTipsが紹介されてました。 Quick Tip – jQuery Newbs: Stop Jumping in the Pool 内容はすっごく基本的なことなのだけど、 filter()の便利な使い方について言及されてたので自分用メモ。 基本的なjQueryのDOMの検索の書き方のお作法について。 曰く、「DOMはプールと心得よ!」とのこと。。 要は、「$(".target")とかをキャッシュせずに至る所に書いちゃうと、その度、プールに落ちた小さなコインを見つけるために飛び込ませているのと同じ事になるよ。これって無駄だよねぇ。。」と。 ajaxで中身を入れ替えるコンテンツなんかでは、入れ替えたあとに再キャッシュ、またはlive()などを使うなどの一部例外はありますが、この例え方はなるほどーって思いました。
まんまです。使えるようになってるのを最近知りました。 text-overflowはIEが6から独自仕様として実装していたものですが、 Microsoftの珍しく素晴らしい先見性によって、CSS3の仕様にも組み込まれたものです。今までもwebkit,Operaでは使えていました。 それが、Firefox7からようやく実装されたということですね。 以下のクラスを作っておいて、横幅の指定された対象要素のクラスに追加してあげれば良いです。 .ellipsis { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; -webkit-text-overflow: ellipsis; -o-text-overflow: ellipsis; } はてなはCSSが使えるようなので、以下実際にやってみますね。 わかりやすいようにボーダ
よくFlashサイトなどで見られる、写真をフルスクリーンに表示する機能をJavaScriptで実現するjQueryプラグイン、"jquery.maximage.js"。 そこそこ軽くて、おせっかいな機能もあんまりついてない、お気に入りのプラグインです(スライドショー機能はクロスフェードのトランジションがついてないので正直微妙)。 本家デモはこちら まー、ようはでかい画像にブラウザサイズに応じたwidthとheightを動的に付けてるだけという力技プラグインなんですが、今ではクライアント側のブラウザ性能も、ネット・PC環境も向上してるのでこういう仕組みを見てもあんまり違和感を覚えなくなりましたね。 実装方法などは"jquery.maximage.js"でググったら日本語の丁寧な解説サイトも多く見つかりますのでそちらを参考にしていただくとして。こちらとか。 ここから本題。 このプラグインの不満
持ってるMacをボロPPCからLion搭載のMacにかえたのをきっかけに、俄然開発意欲が復活!前から気になってたプロジェクト管理のWEBアプリ、Redmineを入れてみました。 (※ちなみに本家では見つからなかったPPC Mac用Bitnami::redmineはここで配布されてたのでインストールしてみたけど、インストール終了直前でエラーが続発して完了できませんでした。原因不明。) コマンドラインからインストールもできるけど、いろいろと自前で入れなきゃいけないし、地雷も多いらしくめんどいな〜と思ってたら、 BitNaml::Redmineというオールインワンインストールパッケージを配布してるサイトを発見。 http://bitnami.org/ja/stack/redmine オフィシャルパッケージではないけど、評判もいいようだったので、早速ダウンロードしてインストール。基本はNEXTボタ
iPhone4Sの受け渡しがSBのシステムダウンによって遅れに遅れてて、 当然、予約開始数日たってノコノコ予約した私なんかに順番が回ってくるはずもない(涙)ため、気分だけでも味わうかってことで、OSをLion 10.7.2にアップグレードしました。 恒例の1.4Gくらいある重いファイルをダウンロード→インストール。 完了後再起動を選択したのになぜかシステム終了しちゃったり不可解な点があったものの、電源ボタン押したらいつもの画面が何事もなかったかのように起動。 すると、デスクトップにiCloudのサインインを促すウィンドウが! これこれ!ってことで、喜び勇んで促されるままApple IDとパスワードを入れると。。。 「このApple IDのメールアドレスは確認できません。MobileMeへサインインするためには、Apple IDで使用するメールアドレスをappleid.apple.comで変
このページを最初にブックマークしてみませんか?
『with the flow』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く