UIデザイン時にやってしまいがちな18の誤ち｜Mikio Kiura / ANKR DESIGN
WebデベロッパーのVictor氏による下記のツイートから始まるスレッドが大変参考になる内容だと感じたので、ご本人に許諾を得て日本語で紹介させていただくことにしました。 I reviewed 100+ user interfaces this year. Avoid the most common 18 mistakes to make your UI/UX design better 👇 — Victor (@vponamariov) July 30, 2021 私は今年100以上のユーザーインターフェースをレビューしました。あなたのUI/UXデザインをより良くするための、下記に示す18個の良くある誤ちを回避しましょう。本記事で使用する画像はすべてVictor氏のツイートから拝借しています。なお翻訳には一部私の意訳が入っていることをご了承ください。 1. 薄いコントラストの文字適切では
たった1行のCSS！よく見かけるWebレイアウトを実現する凄技テクニック10個
モダンなCSSレイアウトでは、ほんのわずかなコードを書くだけで、実用的なスタイリングを実現できます。 この記事では、たった1行でよく見かけるWebレイアウトを表現できるテクニック10個をご紹介します。 上下中央揃え: place-items: center まずCSSでもっとも頭を悩ませる、上下中央揃えを詳しくみてみましょう。ここでは、plae-items: centerを使えば、思ったよりに簡単に実現できます。 まず、display: gridを記述したら、一緒にplace-items: centerを同じ要素に追加します。place-itemsは、align-itemsとjustify-itemsを同時にスタイリングできる簡略化表記、ショートハンドです。centerに設定することで、align-itemsとjustify-itemsの両方がcenterとして設定されます。 .paren
Google Chromeでスマートフォンサイトをチェックする：Google Chrome完全ガイド - ＠IT
スマートフォン（スマホ）が広く普及し、昨今では多くのWebサイトが、画面の狭いスマホに最適化した専用のビュー（表示）を備えるようになってきました。 サイトがスマホでどう見えるのかは、もちろん実際にスマホで表示してみるのが確実です。ただ、スマホやタブレットにはさまざまな機種があり、画面の解像度も異なるため、どう見えるかを全て実機でテストするのは困難です。 このような場合は、デスクトップ版Webブラウザの「スマホ表示」機能（スマートフォンのWebブラウザのエミュレーション）を利用すると、PCで簡単にスマホサイトの確認ができます。操作方法もそれほど難しくありません。 本記事では、Windows OS／macOSのデスクトップ版Google Chrome（以下、Chromeと略）の「デベロッパーツール（開発者ツール）」でスマホ表示を確認する方法を紹介します。このツールは名前に「デベロッパー（開発者
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
