idewClips

[idewclips]

[idewclips]

A demo of some techniques for developing responsive tables.

[idewclips]

responsiveレイアウトで悩みどころのひとつ、table。特に横に項目の多い(横に長い)テーブルは見せ方が難しい。この方法はGOOD！あるサイズ以下ではtdに対してcontentプロパティを使って項目を書き出してしまうというもの。そのためtable個別に対応が必要だけど、見にくいよりは良いと思う。 ただし~IE9は対応せず。条件付きコメントで対応ブラウザのみに読み込ませるが吉。 <!--[if !IE]><!--> <style>    /* table-related media query stuff only */ </style> /* Or an external stylesheet or whatever */ <!--<![endif]-->

※セルにデータが無い場合ずり上がってしまいズレ込んでしまう現象あり。対策を研究中。

[idewclips]

縮小化(*.min.css)されたcssを可視化してくれるwebサービス。 flameworkに改変を加えることなどよくあるので、結構よくつかう。

[idewclips]

WordPressの投稿や固定ページで、サイト内リンクやテーマフォルダ内の画像を挿入したい時など、自サイトURLやテーマフォルダのパスを取得できるショートコードを作成しておくと便利です。

[idewclips]

[wordpressメモ] the_excerpt()とAdvanced Excerpt

子ページの概要を拾って来たりするときに使うthe_excerpt()だけども、html要素は拾って来ない。Advanced Excerptというプラグインを使うと、指定しただけのhtml要素を拾ってきてくれるので便利。the_excerpt()×Advanced Excerptの合わせ技、使えるかも。

【出来ること】

子ページの冒頭から指定の量の文字(※ただし問題点参照)に加えてhtml要素も持ってこられる。

「抜粋」オプションでhtmlタグが使えるようになる

※参考URL:http://vip.wordpress.com/plugins/advanced-excerpt/

【問題点】

‘Read-more’ Text:を「続きをよむ」とかにしたいが文字化けするのでプラグインの編集が必要

190行あたりの$t = substr($t, 0, $c); を $t = mb_substr($t, 0, $c);に変更

文字数カウントが正常に動作しない(設定のExcerpt Length:)

対処方法調査中。

[idewclips]

よく見る目次のプラグイン。自ページ内のh1〜h6(選択可)を拾って<li>で書き出してくれる。これは普通に便利だよね。

#自ページではなくて、子ページ、孫ページの見出しを拾って目次を表示する方法を探してるんだけど、書くしかないかしら、というか拾えるのか？

[idewclips]

[Bootstrapメモ] data-toggle

dropdownやmodalで、clickするアイテムの属性にdata-toggleが無いと開けっ放しで閉まらない。

[idewclips]

なんてかわいいwebフォント！！「Emoji Symbols Font」。

http://everythingfonts.com/http://everythingfonts.com/Webページ・Webサービスの使用であれば、個人・商用問わず使用OK! とっても使えそうなのですが、woff形式しか配布がありません。つまりIEには基本的に対応しないと思った方が。今後の展開に期待…！！

woff→eotのコンバータwebツールでコンバートしてみましたが、やっぱり駄目っぽいです。。(woff to eot converter)

[idewclips]

①0〜480px ②481〜767px ③768〜979px ④980〜1200px それぞれのサイズのwireframeが1画面内で書けるwebサービス。 画面を伸ばしたり縮めたりすると配置したとおりに要素がにゅるっとするのでおもしろい。 media queriesで振り分けられたhtml/cssも一応エクスポートできる。

[idewclips]

Subtle Patterns

フラットデザインが流行る今日ですが スキュアモーフィズムなデザインの方がすきなわたし。(要するにフラットでデザインを”気軽に”使うことについてわたしはアンチ派。それについて近々某サイトのコラムにて語りましたので公開します。)

とっても便利なビミョーな質感を出すお手伝いをするパターンサイト。お世話になっています。

[idewclips]

ちょっと可愛すぎるかも、だけど、貴重な医療系のpicture font。 「For any commercial use, contact me! 」だそうです！

[u-pic]

via Buffer

[idewclips]

まさにUXDとかユーザの心理とかのお話で、面白い検証！ 結果単純に見れば「信頼」とか「堅実」とかをイメージさせる青のボタンがクリック率が高い。しかしながらコーポレートカラーにはユーザーはちゃんと影響されてくれることもわかり。

そして何より、クリック率を決めるのはそのページに訪れてきた経緯であると。

つまりユーザーシナリオってやつが、いかに大事か、ということ！

[idewclips]

これについてですが、先日、検証してみました。 条件は12px,11px,10pxあたりの小さな文字で細めの「小塚ゴシック/L」を使用、日本語表記。 結論から言うと、アンチエイリアスを「鮮明」＋端数を切り捨てるだけでは、鮮明にはなりませんでした。 どうしたら鮮明にいったかと言うと↓

アンチエイリアスは「シャープ」または「強く」(100%表示してどちらがクリアかを確認して選択)

フォント自体をパーツで考えて、縦のライン・横のラインで鮮明にしたい箇所を決めて (例えば「例」という漢字ならば縦線では「イ」と「リ」、横では真ん中のパーツの横棒のアンチエイリアスをなくせば鮮明に。)

その狙った線が限りなくアンチエイリアス無しで表示できるように、pixelがよく見える程度に拡大して確認しながら

0.01px単位で数値を調整する

と、鮮明になりました。

元ネタはdribbbleのやりとりだったそうだけど、言語の違いやフォントの違いも多少あるのかな？

dribbbleに投稿されたデザインで、コメントのやり取りがちょっと興味深いものなので紹介します。 簡単に意訳すると、 ビジター「デザインきれいだな、文字周りの処理に秘訣とかあるの？」 オーナー「文字をクリアにみせるため [&]

[idewclips]

フラットデザインの進化形！ながーく影を落とす「ロングシャドーデザイン」まとめ

へえ〜。上手なのと下手なのがあるね。流行ってるの？？ていうか、フラットデザインもまだ腑に落ちていない。流行ってるから使う、ということはユーザのことを本当に考えたら、したくない。

今年は「フラットデザイン」一色のWeb界隈ですが... / 「ロングシャドーデザイン」あれこれ / Dribbble - Relevvant by ...他...全33件

[idewclips]

複数のアイコンWebフォントからカスタマイズしたアイコンセットを作成できるWebサービス

便利であります。最近Fontelloはよく使ってる。

昨年から多くのアイコンWebフォントがリリースさ... / アイコンWebフォントをカスタマイズできるサービ... / IcoMoon App他...全10件

[idewclips]

Webサイトのワイヤーフレームを作成するときに役立つツール・素材まとめ

わたしは自宅ではCacooを使ってる。満足しているわけではないので、ほかにも使い勝手が良い物があったら乗り換えたい。でもパワポが結局、共有するひとのことを考えると便利。

ワイヤーフレームの作成は骨の折れる作業ですが、事... / オンラインツール / Mockup Designer他...全28件