vw, vh, vmin, vmax という単位があるのをつい最近知りました。 随分昔からあったものらしいですが、大変便利なものだったので書いておこうと思います。 上記4つの単位はそれぞれブラウザのビューポートに対する (割合) パーセンテージを指定する単位です。具体的な定義は次の通りです。 単位 説明 vw ビューポートの幅に対する割合 vh ビューポートの高さに対する割合 vmin vw と vh の小さい方に対する割合 vmax vw と vh の大きい方に対する割合 活用例 iPhone6 を例にするとビューポートの幅が375px。このとき100vw が 375px、1vw は 3.75px 相当のサイズになります。 画面サイズ幅一杯の正方形な要素が作りたい時とか { width: 100vw; height: 100vw; } であったり、画面いっぱいのモーダルも、親要素に影響さ
17. Scout • 無償 • Compassも対応 • サイトからDLできるver.ではconfig.rbが読めない • githubの最新版は、config.rbとSass3.2対応 • Sass3.2の対応が遅かった （一昨日ようやくリリース）
高解像度スクリーンに対応できるのは嬉しいですが、普通の解像度しか持たない端末にも大きなファイルをダウンロードさせなければならないのは、3G回線などの遅い回線での表示パフォーマンスを考慮すると、SVGが適していないケースもありそうです。ただ、サーバ上でGZIP圧縮した場合、平均30%ほどサイズを削減できることを考慮すると、数十KBの差がある場合を除いて、表示パフォーマンスと表示クオリティのバランスもとれてくる気がしています。 ちなみに、Illustratorで「圧縮」を選択してsvgzとして保存すると2,395Bになりました。これならPNG8のファイルサイズにだいぶ近くて良い感じですね。Apacheの設定にSVGZが記述されていれば圧縮版を使えるので、このサイズだったら現実的な気がしてきました。ただ、サーバの設定がうまくいかないのか、Illustratorでの書き出しが悪いのか、SVGZを表
13日、14日の２日間にわたり、フィンランド発のスタートアップイベント「slush asia」が幕張メッセにて開催されました。 世界を牽引するIT企業らによるトークセッションやピッチコンテストが行われるほか、企業ブースも多数出展し、熱気に包まれた２日間でした。 今回は、コメディアンでもありIT企業役員でもある厚切りジェイソン氏のセッションと直撃インタビューの様子をお届けします。 厚切りジェイソン氏が日本人に送る、生きていく上で大事にしたい3つのこと 1.Think yourself 私が日本人に対して声を大にして言いたいことは「あなた自身で考えろ」ということです。 日本人は潜在的な性質として周りの平穏を害してならない、という意識を持っているように感じます。特にそれが凝集されているのが「空気を読め」という言葉です。 具体的な例として、私が以前レストランに行った話をしましょう。 日本のレストラ
創造力の発揮を邪魔する原因はたくさんあります。集中力を使い果たしてしまったり、やる気が出なかったり、批判されて落ち込んでいたり。あなたの創造力を発揮する障壁になっている理由が何であれ、楽しくそれを乗り越える方法があるのです。自分のためだけに何かを生み出す、という方法です。 Wonder Shuttleのクリエイティブ・ディレクター、Herbert Lui氏は次のように説明しています。 このような障壁にぶつかった時、私がみなさんに勧めるのはシンプルな習慣を持つことです。自分ためだけに何かを生み出す時間を、週に1回確保するのです。この良質な時間は、あなたが朝型人間なら朝一番に行うのが良く、夜型人間なら夜にするのが良いです。 自分以外の他人、例えば、クライアント、大勢のユーザー、評論家などのためにクリエイティブな活動を行う時は、あなたの成功は外部から決定されてしまうのです。 ただ自分のためだけに
Find Your CalmOur goal is to help you improve your health and happiness.
最近、デザインシンキングが語られるようになってきました。 ただ、必ずしも全てのケースで有効ではないため、今回は、自分のためにも有効でない場合の整理をしてみました。 先日、この記事が話題でしたが、デザインシンキングについては、記事で言及されている通り『 デザイン思考は、技術的に実現可能なものやビジネス戦略を顧客価値や市場機会へと転換可能なものと、人々の要求とを一致させるために、デザイナの感覚と手法を利用する方法 』と定義されています。 同僚に差をつけよう！今流行っている「デザイン思考」の全体像まとめ http://www.kokoro-no-compass7.com/entry/2016/05/06/213258 これをみてみると、日本人のイメージする色や形の付与という「デザイン」の概念を超えて、デザイン思考における「デザイン」は問題解決やそのためのサービス開発を指すということです。
Buffer のメンバーはReactが大好きで、フロントエンドの多くのコードベースを徐々にReactに移行させています。ReactにFluxを加えると、モジュラー形式の小さなアプリでできた複雑なプロダクトを構築するための、とても健全な方法になると思います。そこで、１つ１つの新しい小さなアプリと機能を、大規模な構造体に追加される、Reactの新しいブロックと考えます。 私は最近、このような新機能の１つに取り組んでいますが、React＋Fluxのアプリケーションを作るのがいかに簡単であるかと、その理由について、さらに夢中になってしまいました。Reactを使うと有意味なコンポーネントを集めてUIを宣言的に構築するのが楽になり、Fluxはその混成体に妥当なデータフローをもたらします。 複雑なアプリケーションを作るときに発生する課題について多くの考察がなされましたが、React＋Fluxの組み合わせ
レスポンシブなサイトで高さが可変のブロック要素の一覧をレイアウトする際にてこずったので、課題になったこととその解決方をメモしておきます。ニュースサイトなどに良くあるサムネイル画像とタイトルのブロック要素の一覧で、画面サイズに合わせてカラム数が変わる以下のようなレイアウトです。ちなみに、Flexboxを使わないやり方です。nth-child()とclearを使った方法、inline-blockを使った方法、さらに、flexboxを使った方法の3つをまとめてみました。 レイアウトの条件 レイアウトの条件を整理しておきます。 表示件数が変わる 表示件数が変わる場合でも同じHTMLとCSSでレイアウトする ブロックによって高さが異なる 画面サイズに合わせてカラム数を変える 上の条件だとli要素をfloatしてメディア・クエリで画面ごとに幅を指定すれば簡単にできそうです。ところが、ブロックの高さが変
こんにちは、デザインチームの@_ringogirlです。 エンジニア目線の求人・転職サイト Forkwell Jobsでは、最近デザインのリニューアルを行いました（最近と言っても3ヶ月前の話ですが…）。 リニューアルに合わせてCSSのリビングスタイルガイドを作ることにしました。 スタイルガイドとは CSSのドキュメントのようなもので、サイトで使う色やタイポグラフィ、UIパターンなどを記述したものです。 見た目とコードをドキュメントとして読めるので、チームで開発するときの共有に役立ちます。 なぜスタイルガイドを作ったのか 僕が入社したのは約1年前なのですが、その頃からCSSがとっ散らかって肥大化してしまっていたので、CSSを触るのがつらい状況になっていました。 もちろんドキュメントも無かったので、どこにCSSコンポーネントが定義されているのか探さないといけないし、コードを書くまで見た目がわか
はじめに 本記事では、2015年11月末での、縦書きに関するCSSの実装状況とプロパティについて解説します。また、先日行ったCodeGridのWebアプリケーションのリニューアルでは、記事タイトルやナビゲーションなどで、一部縦書きを利用しています。 縦書きを利用した部分の実装方法と、利用する際の注意点などに関しては、実装を担当した小山田が次回解説します。 2015年は、縦書きに関する実装が各ブラウザで進み、縦書きWeb普及委員会や縦書きWebデザインアワード - 縦書きWeb普及委員会といったコンテンツが登場し、2016年はさらに興味を引くものになっていくと思われます。この縦書きに関するCSSについて、本記事を通して理解を深めていきましょう。 縦書きに関連するプロパティとその実装状況 縦書きに関するプロパティは、現在のところ3種類存在します。 writing-modeプロパティ書字方向（横
ウェブ上の情報の95%は文字になった言葉です。ですから、ウェブデザイナーになる人間は言葉や文章の体裁について、つまりタイポグラフィについてきちんと訓練を受けていることが必要である、というのは理にかなった主張だと考えています。 インフォメーション・デザイン＝タイポグラフィ 1969年、スイスの著名なタイポグラファーであるエミール・ルーダーが当時の印刷物について語ったことは、今の我々の時代のウェブサイトにも通じるものがあります。 今日、我々をとりまく印刷物は洪水のように氾濫し、印刷物ひとつひとつの価値は相対的に低下しています。絶え間なく印刷物に囲まれている現代の私たちには、もはやすべてのものを読むことなど不可能だからです。この山のような印刷物を分類し、きちんと整理して、読む人が本当に益となるものを見つけ出す手助けとなることが、タイポグラファーの役割なのです。 インフォメーションデザイナーは21
2016年5月16日（月）に社内勉強会でWebにおけるタイポグラフィについて発表しました。このエントリーはその発表資料です。なおこのエントリー中の例はMacのOS X El CapitanのChromeで確認しています。画像を使わずにどこまで出来るかトライしてみたかったので他のブラウザでは意図した表示をしていないです。画面サイズはPCのサイズを想定しています。 「の」「を」「と」はTypography 09の「組版上級者になるためのメソッド 工藤強勝さんのスタッフ指導」より うちでは独自でまとめた書体の見本帳があるんです。仮名の中でも書体の特徴が出やすく使用頻度も高い「の」「を」「と」などを拡大し、縦、横、それぞれの本文組の例や見出し使用例なども載せてあるので、スタッフは常にそれを見て勉強しています。 とあったので、「の」「を」「と」をTP明朝でつくってみました。 目的 紙のタイポグラフィ
ホバーすると4辺それぞれに中央から外に向かっていくようにボーダーがひかれるものです。 実装にはHTMLとCSSをそれぞれ下記のように記述します。 .button { position: relative; display: inline-block; padding: .5em 4em; border: 2px solid #fff; color: #fff; text-align: center; text-decoration: none; outline: none; transition: all .3s; } .button::before, .button::after { position: absolute; top: -2px; right: -2px; bottom: -2px; left: -2px; z-index: 2; content: ''; transiti
CSS の calc() 関数は、サイズや形状を決定する値の指定を計算式で書くことができる仕様で、現時点では IE （IE11）や Edge を始め、Firefox、Chrome、Safari など、ほぼすべてのモダンブラウザがサポートしています。 8.1. Mathematical Expressions: calc() ： CSS Values and Units Module Level 3 ちょっとした計算を簡単に書けるので私もよく使用する記述なのですが、現在、Beta リリースの Firefox 48 は、この calc() 関数の入れ子記述に対応しました。後述しますが、CSS Variables （CSS カスタムプロパティ） と組み合わせるときにかなり便利になりました。 968761 - Support nested CSS calc() calc() 関数の基本的な記述 例
Updated 2014.03.23 / Published 2013.10.28 CSS3にcalc()というファンクションがあるのをご存知ですか？CSSにおいて計算式を可能にしてくれる便利なcalc()ファンクションのサポート状況や使い方について紹介します。 「横幅にパーセンテージ値を用いつつ、その横幅から指定ピクセル(px)分だけ引けたら...」こんなことを思われたことがあると思います。それをCSS拡張メタ言語を使うわけでもなく、CSS単独で実現できてしまうのがcalc()ファンクションです。 参考：Mathematical Expressions: 'calc()' calc()ファンクションの実装状況 IEIE9よりサポート ChromeChrome19より25まで-webkit-のベンダー識別子付きで先攻実装 Chrome26よりサポート FirefoxFirefox4より15
最近のWebサイトで見かける便利な機能や面白い仕掛けのコンテンツ、気持ちいいアニメーションを伴ったインタラクションやエフェクトを実装できるCSS、スクリプトやjQueryのプラグインを紹介します。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
