私はUX/UIデザイナーとしてキャリアを積む中で、以前は自分でフロントエンドのコードも書きながらデザインを行っていました。当時は主に画面を見ながらレスポンシブデザインの調整をしており、考え方を言語化したり体系化したりする必要は感じてい ...

今回は、レスポンシブWebデザインにおける要素別のレイアウト調整方法をシェアします。div、li、aボタンのそれぞれの要素について、PCとスマホでどのようにレイアウトを変えるかを詳しく見ていきましょう！ 1. レスポンシブWebデザインとは レスポンシブWeb ...

ページの読み込み中にレイアウトがシフトしないように、img 要素には width と height 属性を記述するのが良いとされていた。レスポンシブ対応のため、img 要素に width と height 属性は記述せずに、以下のような CSS で幅を 100% に指定する記述が一般的であった。

マルチデバイス対応のWeb制作手法として注目を集める「レスポンシブWebデザイン」。ところが日本では「メディアクエリーを使ってスクリーンサイズごとにレイアウトを切り替えること」との誤解が広がっているようです。 レスポンシブWebデザインとよく似 ...

Figma is used to create UI/UX (user interface/user experience) designs for websites as well as web and mobile apps. The software is available for Windows, macOS, Android and iOS and is structured like ...

Abstract: Responsive websites frequently experience distorted layouts at specific screen sizes, called Responsive Layout Failures (RLFs). Manually repairing these ...