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

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

内容は【レイアウト、エディタの補完機能、ヘッダーの枠組みを作る、リストのマーク

をなくす、リストの中身を横並びにする、余白の調整】です。

　レイアウトは、ウェブサイトを作る上で最も重要な部分と言える。

　レイアウトは「ヘッダー」「メイン」「フッター」で構成されている。

　レイアウトは<div>要素によって構成していく。

　<div>要素の「div」は「division」の略で、要素をグループ化するために使用される。

　前述の構成例では「header」「mail」「hooter」というclass名を持った3つの<div>要

　素でレイアウトを分割していく。

　ここ以降、タグを記述する量が増えていく。これらを一つ一つ書いていくのは面倒な

　上タイプミスもしやすいので、エディタには補完機能がある。

　タグ名を記入し「tab」キーを押すと終了タグまで保管をしてくれる（タグによって

　は余計なものまで保管される場合もあるので注意）。

　まずはヘッダーの枠組みを作っていく。

　ヘッダーには「ロゴ」と「ヘッダーメニューのリスト」があり、この２つの部分を

　<div class="header-logo">と<div class="header-list">のように<div>要素を用いてグ

　ループ化する。

　<li>要素にlist-styleプロパティを用いてnoneを指定すると、リストの先頭のマーク

　「・」を消すことができる。

　HTMLで記述した要素は基本的に縦に並んでいくので、記述した要素を横並びにする

　には、floatプロパティを用いる必要がある。例えば「float: left;」を指定すると、要素

　が左から順に並んでいく。

　<li>要素全体にfloat: left;を指定すると、それぞれの<li>要素が一つずつ左から並んで

　いき、全体を横並びにすることができる。

　更に「header-logo」にfloat: left;を指定することで、ロゴとリスト全体を横並びにす

　ることができる。

　要素に余白を作りたい場合は、paddingを用いる。

　「padding: 値;」とすると、上下左右すべての方向にその大きさの余白が追加され

　る。

　ある方向のみに余白を指定したい場合には、例えば「padding-top: 値;」とすると、要

　素の上方向のみに余白が追加される。他には「padding-right」「padding-bottom」

　「padding-left」などがある。

　指定したい値が方向ごとに異なる場合、前述のように個別に指定する方法もあるが、

　まとめて書く方法も可能である。

　値を4つ、スペース区切りで指定した場合、「上」「右」「下」「左」の順で適用さ

　れる。値を2つ指定した場合、「上下」「左右」の順で適用される。

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

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

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