20200624② HP作成・positionプロパティ position:relative、absolute、flex

<午前>

○HP作成＆校内サーバーのアップロード

テーマは「好きな店舗の紹介」

紹介店舗は飲食店３店舗。各店舗のHTML、CSSの作成

HTML、CSS共に仕上げてlinkでページを飛ばす段階までいったがアップロードした後でブラウザで確認したらheader部分とfooder部分が左寄りになってしまっていた。

何故中央に寄らんのだ・・・。

各紹介ページのバランスも悪く見づらい紹介ページになってしまった。

ー課題ー

・他のHPを見てHPの構成を真似てみる。

・基本タブの構成について復習する。

<午後>

○positionプロパティについて

・positionの値

static（初期値）

relative

(基準枠の指定、top:30px、left:30px等を入力すると本来の位置から指定した位置に移動する)

absolute

（基準枠から移動。基準枠はposition:relative;で指定した親要素、もしくは親要素が無い場合はbody要素が基準枠になる）

fixed

（スクロールしても常に画面上部（もしくは下部）に固定される。）

ーこれで何ができる？ー

1、表示位置の指定

2、要素どうしを重ねて表示

3、画面上に固定して表示

状況によって使用するプロパティ等はネット上でよく紹介されてはいるが、使用するパターンだけではなくプロパティや値の意味を理解しないと思い通りの動きをしてくれないことが多々あるので気をつけたい。