Lesson3:サイドバー&フッターを完成させよう

⬆︎今回はsidebarとfoooterの部分を作成します

  引き続き、以下の手順で模写コーディングを行なってください。

  • pyzou.netを開く
  • Chromeの検証ツールを利用してコードを確認
  • index.htmlとstyle.cssに追記する

 

1.検証ツールを使って確認すると、サイドバーは以下のような構造になっています。こちらのHTML骨組みを作っていきましょう

Lesson3とコメントアウトされている、#sidebarの部分を以下のように編集してください。


 

2.続いてfooterも同様にコーディングしていきましょう。

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


 

3.最後にCSSを当てていきます、検証ツールを使いながら実装してみましょう。

style.cssについて、以下のように追記してください。


頂いたご質問&回答

今回のCSSの18行目の widget_title や、55行目の.screen-reader-text はHTMLでは出てこなかったけれど、これは何?

疑問くん

けんぞう

それはWordPressに変換後サイドバーにウィジェットを追加した時に、自動で生成されるクラスです
チェックポインント
  • サイドバーは問題なく表示されていますか?

 

  • フッターは問題なく表示されていますか?

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

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

コメントを残す

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