レスポンシブデザイン対応の回を追加させていただきます。ご覧になっていない方は、先に1〜4を見ていただくことをお勧めします。レスポンシブデザイン対応レスポンシブデザインとは?画面サイズに応じて最適に表示されるよう設計されたデザインのことです。タブレットでもスマホでも、どの環境においても見やすくなります。ついては、最初の頃はしばらくレスポンシブデザインに対応していなかったのですが、現在はレスポンシブデザインに対応していますので、スマホやタブレットにも簡単に対応できるようになっています。タブのところに「Responsive」というタブがあります。これをクリックすると、レスポンシブデザインのモードになります。絵が表示されています。それぞれをクリックすると、該当の画面が表示されます。ここで、画面のレイアウト崩れなどを見つけることができるので、適宜、修正していくことになります。前回までの状態でレスポンシブのスマホ(縦)の画面を表示させると次のようになっているはずです。今の状態であれば、ツイートの部分はこのままでもいいかなと思いますが、ヘッダー部分のレイアウトがいまいちです。そこで、これを修正したいのですが、実はちょっと厄介です。ボタンがお互いに干渉してしまっているためです。干渉しないようにする方法を考えます。ボタンの高さをずらす同じ高さに2つの要素がある場合に干渉することがあるので、それぞれの位置をずらすことで要素を独立させます。ボタンの高さが重ならないように変更しました。見ても同じような画面で表示させることができるようになります。アイコンとボタンの高さがずれるのはあまりいいデザインとは思えません。中央にしているのですが、これを左にすることで干渉を受けないようになります。飛行機の代わりにサービスの名前を入れてみると少しはマシになりますでしょうか?解決策その3:飛行機のアイコンの横幅をページの横幅いっぱいにする飛行機のアイコンの横幅をページの横幅いっぱいに合わせます。fixed-width」のチェックを外して横幅が変動するようにしておく方が良いと思います。することで、アイコンの横幅が伸び縮みすることになり、常にアイコンが中央に位置することができます。ボタンが押せなくなります。front」をやっておきましょう。設計するという方法が考えられます。「スマホファースト」となりますが、これのメリットはそもそもスマホサイズでデザインするので、スマホでレイアウトが崩れるということがありません。タブレットの画面はスマホを拡大しただけのような画面になりますが、最初はそれでもいいと妥協できるようであればアリだと思います。やり方で対応しました。その対応でひとまずはレイアウトが崩れることはなくなりました。そのため、今回はこの対応で良いと考えています。録画したものをアップしていますので、ご参考まで。画面をイメージしながら、レスポンシブデザインに対応させるというのは結構大変です。PC用のパーツを追加していくという方法も考えた方がいいかもしれません。した方がスマホだけですがより早くプロトタイプを作れますので、早くユーザーの反応をみることができます。入門者の方の場合は、本当はそちらの方がいいのかもしれません。学習中の方に、以下のコンテンツもおすすめしています。個別指導などを行っています。)引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。