CSS

要素の表示/非表示を切り替えよう

viewport幅が800px以上になったときに、全体を中央揃えにしつつ、必要な要素を表示させていきます。

  • 中央揃えの設定
  • 要素の表示/非表示の切り替え

中央揃えの設定

・では今回はlarge screenのレイアウトをしていきたいと思います。PC版を想定して作っていきます。

・まずある程度の幅になったところで幅が固定されて中央揃えになるようにしたいと思います。

・どうするかというと800px以上になったときwidth: 800px;に固定するよう設定し、中央揃えにするためにmargin: 0 auto;に設定しましょう。

要素の表示/非表示の切り替え

・次に右側に大きくなったときだけ出てくる広告を作っていきます。

・HTMLでマークアップした後、共通のスタイルでasideに対してdisplay: none;にしてあげます。こうすることで800px以下では広告が表示されないようになります。

・そのうえで、large screenになったときだけ表示させたいので、large screenにasideを初期値であるdisplay: block;に設定し直します。

 

-広告-

 

 






-CSS