MENU

【実践】要素を横並びにしよう

目次

viewport幅が600px以上になったときに、要素が横並びになるように配置していきます。

  • flexboxの設定

flexboxの設定

・ビューポートの幅が６００px以上になった場合、横並びになるように設定します。こうすることでスマホで見たときは縦並びになるが、ipad、PCのブラウザで見ると横並びで表示させることができます。

メディアクエリーの実践的な設定方法

・600px以上で800px未満のデバイスにはこのスタイルが適応されるのでブラウザを合わせて制作していきましょう。ipadなどを想定して作っていきます。

・基本的には携帯で見たら潰れてしまって見えなかったサイズも見えるようになるので横並びにしても問題ないのでheaderを横並びにしたり、mainの内容を横並びにしてより見やすいサイト制作を心がけましょう。

画像を左右に振り分ける

・このメディアクエリーに書く内容は共通のスタイル以外で上書きしたいものだけになるので2重で同じものを書かないようにしましょう。

-広告-

 

 






CSS

この記事が気に入ったら
いいね または フォローしてね！

Follow Me
よかったらシェアしてね！
  • URLをコピーしました！

関連記事

目次