「レイアウト」カテゴリーアーカイブ

ブサイクなUIデザインを劇的に改善するための10のチェックリスト|Taiki IKEDA|note

ブサイクなUIデザインを劇的に改善するための10のチェックリスト|Taiki IKEDA|note

ブサイクなUIデザインを劇的に改善するための10のチェックリスト|Taiki IKEDA|note

お久しぶりです、イケダです。UIデザインをする上で、これらを意識するだけでビジュアルの質が劇的に向上するというチェックリストを作ってみました。UIデザインの参考にしてください。 左右の余白は揃っているか 左右の余白をしっかり揃えることは最も初歩的で、カンタンに実践できるTipsです。あまりに初歩的すぎて悪...

はてなブックマーク - ブサイクなUIデザインを劇的に改善するための10のチェックリスト|Taiki IKEDA|note はてなブックマークに追加

非美大卒でも1年半でNewsPicksのデザイナーになれる本16冊|yoshikawa akane|note

非美大卒でも1年半でNewsPicksのデザイナーになれる本16冊|yoshikawa akane|note

非美大卒でも1年半でNewsPicksのデザイナーになれる本16冊|yoshikawa akane|note

こんにちは、NewsPicksのデザイナーのよっしーです。 NewsPicks Adventカレンダー16日目を担当させていただくことになりました。とても緊張します...。 9月に入社し現在NewsPicksのアプリの機能改善やブランドの共通言語になるデザインシステム構築、広告バナーやイベント周りのデザイン、採用にも関わらせていただいて...

はてなブックマーク - 非美大卒でも1年半でNewsPicksのデザイナーになれる本16冊|yoshikawa akane|note はてなブックマークに追加

CSSの参考になるアイデアがいっぱい!2018年スタイルシートを使ったテクニックのまとめ | コリス

CSSの参考になるアイデアがいっぱい!2018年スタイルシートを使ったテクニックのまとめ | コリス

CSSの参考になるアイデアがいっぱい!2018年スタイルシートを使ったテクニックのまとめ | コリス

2018年も、CSSの進化がすごかったです! CSSを使ったアニメーションはより快適なものが増え、JavaScriptを使用しないと実装できなかったものがCSSだけで実装できるようになったり、vwやvhやcalc()などを効果的に使用したり、レイアウト、ナビゲーション、カードなどもより洗練されて実装されています。 さまざまな素晴ら...

はてなブックマーク - CSSの参考になるアイデアがいっぱい!2018年スタイルシートを使ったテクニックのまとめ | コリス はてなブックマークに追加

CSSの「calc()関数」を使うとすごく便利に!レスポンシブ対応のレイアウトで高さを最適化するテクニック | コリス

CSSの「calc()関数」を使うとすごく便利に!レスポンシブ対応のレイアウトで高さを最適化するテクニック | コリス

CSSの「calc()関数」を使うとすごく便利に!レスポンシブ対応のレイアウトで高さを最適化するテクニック | コリス

レスポンシブ対応のレイアウトを実装する際に手間なのは、ブレイクポイントの定義です。ここ1,2年でもたくさんのデバイスがリリースされ、それに伴いスクリーンサイズの種類も増えてきました。 そんな時に便利なのがCSSの「calc()関数」を使ったテクニック。 calc()を使用して、デスクトップやタブレットやスマホのそれ...

はてなブックマーク - CSSの「calc()関数」を使うとすごく便利に!レスポンシブ対応のレイアウトで高さを最適化するテクニック | コリス はてなブックマークに追加

CSS Gridが適しているレイアウト、Flexboxが適してるレイアウトを詳しく解説 | コリス

CSS Gridが適しているレイアウト、Flexboxが適してるレイアウトを詳しく解説 | コリス

  CSS Gridが適しているレイアウト、Flexboxが適してるレイアウトを詳しく解説 | コリス

CSS GridとFlexboxは、CSSで現在主流となるレイアウトのテクノロジーです。 CSS GridとFlexboxは表面的には似ているように感じるかもしれません。しかし、実際には異なるタスクに使用され、それぞれ異なるレイアウトの問題を解決します。 Flexboxが適してる場合、CSS Gridが適している場合、また両方を使用する場合、さ...

はてなブックマーク -   CSS Gridが適しているレイアウト、Flexboxが適してるレイアウトを詳しく解説 | コリス はてなブックマークに追加

[CSS]知っておくと便利!レスポンシブ用に画像を配置するスタイルシートの5つのテクニック | コリス

[CSS]知っておくと便利!レスポンシブ用に画像を配置するスタイルシートの5つのテクニック | コリス

[CSS]知っておくと便利!レスポンシブ用に画像を配置するスタイルシートの5つのテクニック | コリス

何らかの理由で画像をレスポンシブ対応にうまく配置できない時があるかもしれません。何時間もかけて、いろいろな実装方法を試すこともあるでしょう。 CSSハックは無しで、レスポンシブ用に画像のサイズ変更を処理して配置するスタイルシートの5つのテクニックを紹介します。 Time-saving CSS techniques to create resp...

はてなブックマーク - [CSS]知っておくと便利!レスポンシブ用に画像を配置するスタイルシートの5つのテクニック | コリス はてなブックマークに追加