iPhoneとAndroidではiPhoneのほうが良くできているが、iOSのフラットデザインとAndroidのマテリアルデザインでは後者の設計が優れている。マテリアルデザインは、デザインとエンジニアリングが高いレベルで融合していて、ロジカルで非常に美しい。 以下、自分の理解をまとめたメモ。 紙とインク マテリアルデザインは「ペーパー」と「インク」のメタファーでできている。 ペーパーの特徴 バーやボタンといった画面上のUIコンポーネントは、バーチャルな紙でできたカードと考える。また、このペーパーは1dpの厚さを持っている。 ペーパーは純白の矩形、あるいはシンプルな円形である。三角や星型といった複雑な形はとらない。そのような複雑な形状や模様はインクが担当する。 現実とことなり、このペーパーは自由に伸縮することができる。 マテリアルデザインにおけるレイアウトは、複数のペーパーを並べたり、重ねた
メソッド名などをネーミングする際に、知っておくと便利な、接頭辞と接尾辞をリストアップしてみました。どのように元の単語の意味が変わるかのルールを知っておくと、よく使う単語をベースにボキャブラリーを増やすことができるので、覚えておいて損はないと思います。 使う場合は、当たりを付けて実際の使用がないか、Googleなどで調べてみてください。 1. pre-, post- / 事前〜、事後〜 per-は、元の意味に “事前に、前に”、post-は “事後に”という意味が付け加わえます。汎用性が高いのでとても便利です。afterやbeforeの代替になるかもしれません。 // 事前テストする function testBefore(); ↓ function pretest(); // 事後処理する function executeAfter(); ↓ function postexecute();
結論1：アルファベットでウエイトなしだけでも、すべてのモダンブラウザに対応可能です。ただし、旧バージョンのSafariやFirefoxでは対応がまちまちであったため、それらに対応するには併記します。 游ゴシック体と游明朝体はWinodws 8.1では日本語名、OS X Mavericks（10.9）ではアルファベット名のみの対応であるため、両名の併記が必要となります。 疑問2：「ヒラギノ明朝 Pro」と「ヒラギノ明朝 ProN」のどちらを記述すればいいのでしょうか。 「ヒラギノ明朝 Pro」を改訂し、JIS X 0213:2004の例示字体に対応させたものが「ヒラギノ明朝 ProN」です。 参考： ウィキペディア - ヒラギノ 「ヒラギノ明朝 Pro」と「ヒラギノ明朝 ProN」の違い CSSのfont-family指定はこれで決まり！（2013春） 結論2：新しい字形に対応をしている「ヒ
The best free stock photos & videos shared by talented creators.
What is Masonry? Masonry is a JavaScript grid layout library. It works by placing elements in optimal position based on available vertical space, sort of like a mason fitting stones in a wall. You’ve probably seen it in use all over the Internet. Install Download CDN Package managers Getting started HTML CSS Initialize with jQuery Initialize with Vanilla JavaScript Initialize in HTML Next MIT Lice
APNG（エーピング）とはアニメーションするPNG画像のことで、アニメーションGIFに取って代わる次世代の新しい画像形式です。もともとブラウザベンダーのMozillaが提案した規格で、ウェブサイトのアニメーション表現に利用できます。従来はアニメーションGIFが主流でしたが、アニメーションGIFは色数の制限や輪郭のジャギーなど品質面の制限が多いファイルフォーマットです。その制限を払拭してくれると期待されるのがAPNG形式です。 データ容量・品質から比較する画像形式〜APNGは容量が軽くて綺麗 上図ではアニメーションGIF・APNG(8bit・32bit)・PNG連番画像をデータ容量・データ品質でマトリクス図にしました。APNG 8bitはアニメーションGIFと同じ256色のサポートなのでAPNG 8bitの方がデータ容量は若干小さいものの、差はほとんどありませんでした。APNG 32bitは
著作権フリー、商用可の写真素材サイトが増えた 著作権フリー、商用可の無料写真素材サイトが増えています。自由に使える写真素材が増えて、作業や趣味に助かってる人も多いでしょう。 以前、CCライセンスやパブリックドメインライセンスなど、著作権・所有権・利用権に関する話をしましたが、「それよりも気軽に使えるライセンスフリーの画像素材が欲しい。」という気持ちはよくわかります。 そこで今回は、以下の条件に当てはまる無料の写真素材サイトを集めてみました。 著作権フリー、商用可、会員登録不要、日本語表記 著作権フリー 何に利用してもよい、改変してもよい。 商用可能 個人的な利用だけではなく、商用に利用してもよい。 クレジット表記必要なし コピーライトやリンクなどの著作者表記の必要がない。 会員登録不要 会員登録やメールアドレス登録の必要がない。 日本語表記 英語アレルギーの方も多いので、日本語表記のサイト
こんにちは、清田です。 WWDCの中で、次世代のSafari 8で「CSS Shapes and Compositiong」がサポートされたとのことで、 今回はCSS Shapesについてご紹介してみたいと思います。 CSS Shapesとは？ CSS ShapesのShapeは形を意味します。 CSSのプロパティから指定した任意の形状(Shape)に合わせて、レイアウトすることを可能にしたスタイルになります。 表現できる形は、丸、三角形、台形など簡単図形の描画や画像を形状として認識できるようです。 ブラウザの対応状況 以下の対応表を確認してみると、Safari 8から対応したのが確認できます。 導入方法について まず前提条件として、CSS Shapesを描画できるブラウザであることがあります。 基本的なでスタイルを反映方法は、従来の指定方法と同じようにdom要素に任意のid or cls
「Highlighing Code Block」のプラグイン「Treeview」を導入したらコードブロックのテーマカラーが反映されない時の解決方法
人様の人気エントリーに乗っかる感じで恐縮ですが、「CSSで block 要素を上下左右中央寄せにする、イマドキの方法。 ： バシャログ。」 という記事が話題になっていたので、なんでその指定で上下中央配置になるのか補足してみます。 詳しい話は下記のリンク先をご覧ください。 CSSでblock要素を上下左右中央寄せにする、イマドキの方法。 ： バシャログ。 何でこういうことを書くかというとですね、例えば CSS でこういう指定をするとこう表示されるっていう話に関しては、仕様書を基準に話して欲しいのです。 「なんかよくわからないけどこういう風に書いたらこういう表示になった。よかったね」 で終わらせるのは個人の自由ですが、仕様書を基になぜそうなるのかの根拠を知るとより一層理解が深まると思いますので。 なので余計なお世話なんですが、下記に小難しく書きます。 解説のためのサンプルソース 例えば、下記の
オープンソースの形態素解析エンジンMecab（和布蕪）を導入して、今欲しいあれこれを試すことにしました。 今回は方法論を検討します。 やりたいこと 前回、Yahoo! JapanのWeb APIには「ルビ振り」というテキスト解析がある件という記事を書きました。 Yahoo! JapanのWeb API「ルビ振り」を使って「ふりがな」をつける方法です。 しかし仮に今後「タグ」を付ける方法を検討することを考えると、形態素解析が必要になります。 Yahoo! JapanのWeb APIでも形態素解析は可能ですし、性能も高いようです。 しかし自由度や汎用性の点でMecabに劣ります。何より英単語→カナ読みまではできません （うまく使い分けたいですね。APIは単独で使う分には便利！だし）。 漢字→フリガナ 英単語→カナ読み 自動リンク(AutoLink) タグ これらを実現するため、以下ではMeca
○ Mac OS 10.10 Yosemiteでことえりの扱い方が変わりました。 とりあえずわかる範囲でまとめてみました。 興味のある方はどうぞーw 『【Yosemite版】JapaneseIM(旧ことえり)を操る時に便利な覚え書き(まとめ)】 ～2014/10/31～ Mac OS 10.9 Mavericksでことえりの扱い方が変わりました。 とりあえずわかる範囲でまとめてみました。 興味のある方はどうぞーw 『☆【Mavericks版】ことえりさんを操る時に便利な覚え書き(まとめ)☆』 ～2013/12/10～ ☆【キャンペーン情報】☆ OS X Yosemiteになり、指定変換辞書が利用できなくなりました。 以下の辞書をYosemite環境で指定変換辞書として利用されるつもりの方はご注意ください。 Mavericksまでの環境でしたら利用可能です。(2014/10/20) ・「NA
jsの話というより、そういうものがあるんですという話です。 個人のティザーでこういうことしたかったんですよ、こういうの。 参考：Lealog.net RGBではなくHSLを使う 参考：HSL Color Picker - by Brandon Mathis H: Hue(色相) S: Saturation(彩度) L: Lightness(輝度) というわけで、ランダムに明るい色だけ欲しいなら、 色相はランダムに 彩度は高めに 輝度も高めに すればいいってわけですね。 jsで取るなら var rangeRndm = function(min, max) { if (max) { return Math.random()*(max-min+1) + min|0; } else { return Math.random()*min|0; } }; var color = 'hsl(' + ra
jQueryのイベントハンドリングには、現在 .on(),.off()のみが推奨されて利用されています。 その基本的な使い方はこんなかんじでした。 $(element).on(event, function() { console.log('event fired!'); }); この場合、対象となる$(element)において指定したeventが発火した時に、コールバック関数が呼び出されます。非常に直感的ですね。 ところで、これは以前の.bind()と全く同じです。 .bind()の場合は、指定したずばりその要素に対してのみ、イベントハンドリングを行います。よって、.bind()が呼び出されたその時点で存在しない要素に対しては、たとえセレクタが一致していたとしてもハンドリングが行われません。 このことを利用すれば、イベントハンドリングをしたいまさにその要素にのみ、たとえその後同じセレクタ
jQuery.ajax()について逆引きリファレンスっぽくまとめてみました。 まとめた理由は、ネットで「jQuery.ajax」や「jQuery.ajax サンプル」などで調べても、いい感じの内容がなかなかヒットしないことと、よくヒットするサイトの情報が古かったりする（1.4で止まっているとか）ためです。 ということで、2012年10月現在2014年10月現在の「jQuery.ajax()」などをざっと調べて作ってみました。 初心者向けの内容です。すべてのオプションは網羅できていません。とりあえずサンプルコードがほしい方は１５項をご覧ください。 若番から必要と思われるものを順番に並べているつもりですが、後半は適当です。また、各項のサンプルはなんとなく積み上げていく感じにしています。 調べている間にも3つくらい新しい発見（といっても古い情報ですが…）があり、jQueryが日々進化していること
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く