morishitter blog
今、自分がどうやってCSSを書いているのかについてまとめる。 CSSを書く前にすること 持論だが、「デザインの意図を正確に理解した上で書かれたCSSは破綻しない」と思っている。 しかし、自分ひとりでサービスを作るときような、デザインの決定権を持つ人とUI実装者が同じである場合を除いて、デザインの意図を正確に伝え、理解することは難しい。 僕が1番時間を使うのがこの工程だ。 今の仕事ではデザイナーがSketchファイルを作成し、エンジニアがそれを元に実装する。 Sketchファイルを開き、アートボードをひたすら眺めデザインの矛盾がないかを確認し、「なぜこのようなデザインなのか」を質問しまくる。 ここで良い質問と提案をするためにも、エンジニア側に最低限のデザインに対する知識が必要だと思う。 最近読んだ本だと、「みんなではじめるデザイン批評―目的達成のためのコラボレーション&コミュニケーション改善
無料で使えるBootstrap製のダッシュボードのテンプレート10選
Bootstrapはデザインの知識がなくても、簡単に質の高いページを作ることができるCSSフレームワークです。 今回はBootstrapを使用した無料のダッシュボードのテンプレートを紹介します。デザインにはあまり労力をかけずに、使い易いダッシュボードを作りたい人にオススメです。 Gentelella アニメーションも心地よくモダンなデザインのテンプレートです。商品ページ用のサンプルも用意されており、ECサイトのページとしても活用できます。 ダウンロードページ / デモページ Blur Admin MintバージョンとBlurバージョンの２種類のデザインが用意されています。Blurバージョンのカラーは他のものとは異なり実験的なデザインになっています。 ダウンロードページ / デモページ（Mint） / デモページ（Blur） SB Admin 2 シンプルなデザインのテンプレートです。デモペ
デザイナー要注目！作業効率がアップする話題のデザインツールまとめ
いままでの作業フローをいい意味で、劇的に変えてくるデザインツールを探している、そんなひとは多いかも知れません。テクノロジー系のクールで面白いプロダクトについて、誰よりも早く知りたい人たちのためのコミュニティ Product Hunt のデザイン部門で、これまで話題となった作業効率をアップするデザインツールをまとめてご紹介します。 デザイン制作における悩みのタネでもある配色選びを手軽に行ったり、何百というGoogle フォントを手軽にPhotoshop で使える拡張プラグイン、さらに時間に応じて目に優しいスクリーンの明るさに調整してくれたりと、特にデザイナーにとってうれしい機能を中心にピックアップしています。 詳細は以下から。 目からウロコ、作業効率がアップする話題のデザインツールまとめ Pexels 著作権フリーで、商用利用にも対応したフリーフォトストックサイト。豊富な収録数に加え、人気キ
You Don't Need JavaScript に学ぶ CSS テクニック
さまざまな UI を JavaScript を使わずに、CSS だけで実現するデモ You Don't Need JavaScript を紹介します。 かなり煽ったタイトルのデモですが、作者も「いくつかの点で問題がある」と述べているように、これらの UI を実装するのであれば素直に JavaScript を使うことをおすすめします。あくまでデモとして「CSS の可能性」を感じることができればと思います。 ただ、実装としてはなかなか面白いので、是非ソースも含めてチェックしてみてください。今回は、いくつかあるデモから３つピックアップして簡単な解説と一緒に紹介します。 ＊ サンプルによっては、ブラウザによって正常に表示されないことがあります。最新の Chrome で動作確認をしているので、表示されない場合は Chrome で試してみてください。 アコーディオン ラジオボタンと擬似クラスの :ch
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
きちんとしたHTML/CSSを記述するために参考になるスライド8選
