Lesson2:コンテンツ部分をコーディングしてみよう

⬆︎今回はpost-contentの部分をコーディングしていきましょう

⬆︎この部分を完成させよう

けんぞう

今回は、記事を表示させる部分をコーディングしていきましょう!

実践

  やり方は前回と同様です。

  1. pyzou.netをChromeで開きます
  2. 検証ツールを使ってコードを確認
  3. index.html、style.cssにコードを追記

 

1.検証ツールを使ってpost-contentを確認すると、以下のような構造になっているのが確認できます。まずは、この大枠を作りましょう。

前回編集したheaderタグ下の、mainタグ内に編集を加えていきます。
 

<div id=”posts-content”>下に、以下を追記して下さい。


 

2.上記でHTML骨組みができましたので、こちらのCSSを適用させていきましょう。

 

前回までのCSSファイルに以下のコードを追記してください。

 


頂いたご質問&回答


CSSの表記でpaginationって出てきているけれど、これは何?(CSS:110行目)

疑問くん

けんぞう

paginationとは以下の画像部分のことです。

現時点で理解していなくても大丈夫ですが、こちらのpaginationのHTMLはWordPressが勝手に生成してくれます。

しかし、WordPressが生成したpaginationは数字が縦並びになっていたりと見づらいため、前もってCSSを記述しておきました。

h2はブロック要素なのに、text-align:center; と指定するのはなぜ?(CSS:90行目)

疑問くん

けんぞう

h2などは確かにブロック要素なのですが、『中身のテキスト』を中央寄せしたい場合にはtext-align:center;を指定します。

復習用動画

チェックポインント

コンテンツ部分は、以下のように問題なく表示されていますか?

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

次回レッスン
Lesson3:サイドバー&フッターを完成させよう

コメントを残す

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