【プログラミング学習】「ヘッダーを作ろう」の章をやってみた【Progate】




レイアウトを作ろう プログラミング
スポンサーリンク

いじゅ~もり(@ijumori)です。

 

引き続き、Progateで学んだ学習記録をつけていきます。

Progateでプログラミングを学びます。まずはHTML&CSSから
...

 

前回は全体のレイアウトの仕組みを学びました。

【プログラミング学習】「全体のレイアウト」の章をやってみた【Progate】
...

 

今回はヘッダーの細部について学んでいきます。

 

わかったこと

この章でわかったことを列挙します。

  • <div>要素を用いる
  • <list>要素に「list-style: none;」を用いるとリストの先頭のマークを消すことができる
  • floatプロパティを用いると指定した要素を横並びにすることができる
  • <li>要素全体にfloat: left;を指定すると、<li>要素が左から順に横並びにすることができる
  • 要素に余白を取りたいときはpaddingを用いる
  • 「padding: 値;」とすると上下左右すべての方向にその大きさの余白が追加される
  • 「padding-top: 値;」などとするとその方向のみに余白が追加される
  • paddingは省略形もある

 

詳しくは次の記事で解説しています。

coming soon

 

演習課題でやったこと

課題でやったことを列挙します。

  • リストの黒点を消す
  • <div>要素に「header-logo」「header-list」というclassを与える
  • 「header-logo」classの中にテキストを入れる
  • 「header-list」に<li>要素を3つ入れ、リストをつくる
  • <li>要素のfloatプロパティをleftにする
  • 「header-logo」の文字の大きさを変え、floatプロパティをleftにする
  • 「header-list」のfloatプロパティをleftにする
  • 「header-logo」のpadding
  • <li>要素のpadding

 

わからなかったこと

  • 特になし

 

その他・感想

細かい調整ができるので、今後もよく使いそう。

 

最後に

WordPressのテーマが優れているので自分で設定しなくても勝手にきれいに表示されていますが、実はこのように設定されているんだという発見がありました。

自分でもいじれるようにあれば思い通りの見た目がつくれると思うので、学びながら実際にいじってみたいと思います。

 

最後まで読んでくれてありがとうございました。

いじゅ~もり(@ijumori)でした。