こんにちは．Ryuです．
プロゲートでの学習のアウトプットの続きです．今回はヘッダーの作成に取り掛かります．
課題はヘッダーの中にロゴとメニューの作成です．
- ロゴの<div>要素は<div class="header-logo">Progate</div>
- メニューリストの要素は<div class="header-list"
<ul>
・
・
・
</ul>
</div> - <li>要素で黒い点をなくすにはCSSでli{list-style:none;}
- HTMLで記載した要素は基本的に縦に並んでいく．私はこれ逆で，指定しなければ横並びになるのかと思っていました．横並びにするにはCSSでulではなくliを指定しli{float:left}
- 相変わらずCSSでは.のつけ忘れが多い．
- ついに来ました余白の調整．これはだいぶ前にホームページのデザインをいろいろと試行錯誤しているときに壁にぶつかっていた部分です．また，今のこのリハポケのサイトもカテゴリーのページに飛ぶとパンくずリストのバックグラウンドのカラーの高さが大きく表示されてしまいます．追加CSSなどで改善できればいいのですが．
- 余白の要素で，上下左右すべてを指定する場合にはpaddingを使用する．もちろんデザインの部分なのでCSSでのコード入力．
- 余白の長さはpx単位を使う．
- それぞれを個別に指定したい場合には上はpadding-top，下はpadding-bottom，左はpadding-left，padding-right
- それぞれ指定してもいいがまとめて書くことも可能．これは使うなら暗記しないといけないが，値を4つ、スペース区切りで指定した場合、「上」「右」「下」「左」の順で適用され，値を2つ指定した場合「上下」「左右」の順に適用される．
- レベル9到達
といったところでした．
リハポケのホームページのパンくずリストの余白の県は解決できず，指定しても他の余白は変わっても，上の余白だけはどうしても変えられませんでした．なので，個人のブログで情報公開している方と，lionmediaを作成した会社にそれぞれ問い合わせました．返信は今のところないですが，解決できるといいなと思います．
学習時間
現在5時間（残り195時間）
