Lesson4:レスポンシブ対応をしよう

⬆︎スマホ画面ではこちらのようなレイアウトになるようにします

 

実装

 

 1.スマホレイアウトの際に、#post-contentと#sidebarの横幅が100%になるようにCSSを編集してください。

ヒントとしては、「@media」でウィンドウの大きさを指定します。忘れている場合は、Progateスライド検索などで復習しましょう。

 

style.cssでresponsiveとコメントアウトされている部分を、以下のように編集してください。


 

2.スマホ用にサイズが変更されるように、viewportを指定しましょう。

こちらも忘れている場合は、ググったりProgateなどで復習しましょう。

 

head内に以下のコードを追記してください。

 


けんぞう

お疲れ様でした!今回の実装は以上です!

 

チェックポインント

  • 検証ツールでスマホ表示に切り替えた際に、ちゃんと幅が切り替わりますか?

質問などは随時承っておりますので、Slackでご連絡ください。

次回レッスン

Lesson5:WordPress用PHPファイルに変換しよう

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です