タグ

2016年10月20日のブックマーク (5件)

  • tableなどに便利な、文字の均等割り付けをするjQueryプラグイン |

    最近の制作において、テーブルの見出しセル内のテキストを均等割付を求められたことがありました。 普通のHTML+CSSでは、均等割付が簡単に出来るタグやプロパティなどはありません。 それを実現するには、CSSのletter-spacingを使うという方法になります。 ただ、これを手動でやろうとすると、ボックスの幅と文字のサイズを確認して、letter-spacingに設定するピクセル数を算出して、HTML+CSSを書いて、調整して・・・とかなり大変です。あまり現実的ではないのではないかと思います。 それを実現してくれるのが、jQueryプラグイン『jQuery.justify.js』です。 ⇒ jQuery.justify.js 情報ページ コード例 コードの記述は、HTMLCSSとjQueryを書いたことがある方なら、すごく簡単です。 まずHTMLのbodyタグ内に以下の記述があるとしま

    tableなどに便利な、文字の均等割り付けをするjQueryプラグイン |
    atsublue
    atsublue 2016/10/20
    均等割付
  • デザイナーとは職種ではなくマインドセットである

    「シリコンバレーはすでに地域の名前ではなく、マインドセットである」これはシリコンバレーの著名VCであるAndreessen HorowitzのMarc Andreessenによるもの。今までに無い新しいアイディアを元に同じ情熱をもった仲間を集め,プロダクトを作成し、その夢に賭ける。 最近ではこの考えは、この地域以外にも世界中に広がり、”シリコンバレー的な考え方”として認知されている。 参考: シリコンバレーはただの場所ではなく、マインド(とコミュニティ)である We are all designersこれに近い考え方がここ数年でデザイナーにも広がっていると思う。我がビートラックスのコアバリューの一つに”We are all designers“がある。これは文字通り、”我々は皆デザイナーである“の意味。

    デザイナーとは職種ではなくマインドセットである
  • 心を揺さぶり人を動かす伝え方の技術「ストーリーテリング」について - NaeNote

    こんにちは、NAEです。 生来の理屈っぽい性格やコンサルタントという職業柄、ぼくの考え方や語り口はロジカルシンキングに偏っています。 しかし、ロジック一では言いたいことが伝わらず、伝わったとしても人を説得し動かすことは難しい。そう感じたことが何度もありました。 論理の不整合がないことは前提に、心にストンと落ち、人を動かすに足る語り方の技術が ストーリーテリング です。 今回はそんなお話。 人に動いてもらうには理屈だけでは足りない 非の打ち所のないロジックを求められてきた 理屈だけでは不十分だった 人を動かすのは論理ではなく感情。必要なのはストーリー 人は理屈で納得し、感情で動く ロジックの完全性はそのままにストーリーを語った結果 文章においても重要なストーリーテリング マウントポジションでべき論を振りかざす無意味 ストーリーのない情報の寄せ集めに人を動かす力はない 心を揺さぶるストーリー

    心を揺さぶり人を動かす伝え方の技術「ストーリーテリング」について - NaeNote
  • 色に関する基本と配色に困ったときの知識まとめ - コムテブログ

    TL;DR 先月、リーフレットを作ったときに「なぜか同じように印刷されない」とか、サイトを作るときにイメージが伝わりにくいと感じたことが多々ありました。で配色に関して勉強してみたんですが、基礎がダメだったんですね。基をしっかり勉強せねばと思いました。今回は配色やカラーマネージメント、3属性など基的なことを復習を兼ねてまとめました。 基 1.配色用語 筆者、記憶力と理解力が悪いので、色の勉強をする前に使用頻度の高い基用語をおさらいしておくことにします。「一言でいうと何?」と聞かれた時用に、簡潔にまとめました。 三原色/色を表現する基3色。色料(CMYK)と色光(RGB)がある。 CMYK/印刷物に使う。藍・紅・黄・黒。重ねるほど暗くなる減法混色。 RGB/PC モニタ・テレビ。赤・緑・青の3色。混ぜるほど明るくなる加法混色。 減法混色(げんぽうこんしょく)/CMY を使った混色。印

    色に関する基本と配色に困ったときの知識まとめ - コムテブログ
  • 面倒なレスポンシブイメージの画像作成を自動化してくれる神ツールとブレイクポイントの考え方

    レスポンシブイメージ、使ってますか? ウェブサイトの表示パフォーマンスの最適化をする際に、一番手っ取り早いのが画像の最適化です。そこで、イメージオプティム とかMac Automatorとpngquantなどのツールを駆使して一生懸命に画像自体を最適化したりレスポンシブイメージを使って画像を出し分けたりするわけですけども、特にレスポンシブイメージは手動でやるのは正直言ってかなり面倒です。 そ・こ・で! 日ご紹介したいのが「Responsive Image Breakpoints Generator 」です。このツールを使えばレスポンシブイメージの複数画像の作成やHTMLの記述を自動化できて、しかも!アートディレクションまで自動化できるんです。 ということで、今回はレスポンシブイメージについての簡単なおさらいと、画像作成の基的な考え方、それから自動化について書いてみます。 では、行ってみ

    面倒なレスポンシブイメージの画像作成を自動化してくれる神ツールとブレイクポイントの考え方