勉強記録　～プログラマーへのいばら道～　progate：HTML&CSS初級編（７）

今回は、HTML&CSS初級編の復習その7となります。

内容は【ヘッダーとフッターで別のCSSを適用させるには、文中の一部にCSSを適用させ

るには、ブロック要素とインライン要素】です。

　ヘッダーを作る際に「<li>要素全体」にfloatとpaddingを指定している場合、これら

　はフッターの<li>要素にも適用されてしまう。

　floatとpaddingをヘッダーの<li>要素のみに適用させるためには、「.header-list」の

　後にスペースを空けてliと続け、その中にfloatとpaddingを指定すれば、header-listの

　中の<li>要素にのみそのCSSが適用される。

　これにより、ヘッダーの<li>要素とフッターの<li>要素に別々のCSSを適用すること

　ができるようになる。

　フッターのロゴを左側に、リストを右側に分けて配置するためには、<footer-logo>

　にfloat: left;を、<footer-list>にfloat: right;を指定すればよい。

　文中の一部にCSSを適用させたい場合は、適用させたい部分を<span>要素で囲む。

　<span>要素の前後には改行は入らない。

　HTMLには改行される要素と改行されない要素がある。

　前後で改行が入り、親要素の幅いっぱいに広がる要素をブロック要素と呼ぶ。

　これまで学んできた<div>要素や<h1>要素、<p>要素はブロック要素である。

　それに対して、<span>要素や<a>要素のように改行されない要素をインライン要素と

　呼ぶ。

ということで、本日はここまで。

次回は「HTML&CSS初級編」の8回目の復習を記録します。

ご一読を頂きまして、有り難うございました。