CSS 基礎・基本 position #8

今回もwebフロント技術を身に着けるために勉強したノートをここにまとめていきたいと思います。また、ページレイアウトの一つであるpositionについて、様々なpositionの指定方法などを学んでいきました。
<h6 id="id">戻ってきたよ</h6>

##様々なpositionの指定方法

### static
`position`プロパティは要素の位置を調節するためのプロパティです。また、すべての要素に対して適用可能です。
`position`プロパティのデフォルト値は`static`になっています。
`.box { position: static;}`

### relative
`position`プロパティに`relative`を使用すると、指定した要素が相対位置指定されます。相対位置指定は、`top`,`bottom`,`left`,`right`などのプロパティを通して行い、これらをオフセットプロパティという。
相対位置の計算は、その要素が何も相対位置してされてない場合でレイアウトした後に、相対位置で再度レイアウトする。
`box { position: relative; top: 50px; left 50px;}`

###absolute.1
`position`に`absolute`を設定すると、`static`以外に設定された親要素の左上端を基準として絶対位置を指定できる。
`.box{ position: absolute; top:0; left: 0;}`

###absolute.2
親要素の`position`に`relative`が設定されているときに子要素が`absolute`であるときには、親要素の左上端にを基点に子要素が動くようになる。

###fixed
`position`に`fixed`を設定すると、位置指定の基準が画面のビューポイントとなる。そのため、スクロールしても常に同じ位置に表示されるようになる。
.box { position: fixed; }

##様々な位置指定方法

###上から位置指定
上から位置指定する際には`top`プロパティを使います。
`.box{ top: 50px;}`

###右から位置指定
右から位置指定する際には`top`プロパティを使います。
`.box{ right: 50px;}`

###下からの位置指定
下から位置指定する際には`bottom`プロパティを使います。
`.box{ bottom: 50px;}`

###左からの位置指定
左から位置指定する際には`left`プロパティを使います。
`.box{ left: 50px;}`

###左上からの位置指定
左上から位置指定する際には`left`,`top`のプロパティを使います。
`.box{ left: 50px; top: 50px;}`

###位置指定を使って親要素にフルで表示する
親要素の`position`を`relative`にして、子要素の`position`を`absolute`にしたときに、オフセットプロパティ（top,left,など）をすべて０に設定すると、親要素の上下左右のそれぞれの距離と０になろうとするので、フルに表示ができる。
`.box{ position: absolute; top: 0; right: 0; right: 0; left: 0;}`

### 位置情報で全画面表示にする。
`position`を`fixed`にすると画面のビューポートが基準となるために全画面表示になる。
`.box{ position: fixed; top: 0; right: 0; right: 0; left: 0;}`

##positionを使った２ペイントレイアウト

###親要素をrelativeに！
`static`で調整していくと画面の左上端が基準にするとレイアウトの調整が困難になるため、通常`absolute`を用いたレイアウトを行う場合には、親要素を`relative`に設定します。

###メニューの位置を調整
メニューの位置を調整するのに`absolute`に設定し、`top:0;`,`left:0;`にして位置を左上寄せにします。

###メニューのサイズを調節
要素の幅の調整に幅は`width`、高さは`height`プロパティを使います。メニューのサイズを大きくしたいので、`width: 20%;`

###コンテンツの位置の調整
こちらも、要素を絶対位置指定に変えます。
`position:absolute; top:0; right:0;`

###コンテンツのサイズを調節
これは、メニュー位置調整と同じ方法でできます。
今回は2ペインレイアウトなので、`width:80%;`とするときれいにできます。

##fixedを使ったレイアウト

###固定ヘッダーを作成.1
スクロールしても表示されるヘッダーを作成する。
スクロールしても常に表示されるには`fixed`を使います。
`.header{ position: fixed; top:0; right:0; left:0;}`

###固定ヘッダーを生成.2
コンテンツがヘッダーに隠れてる部分ができる。
`body`に上側の間隔を(50px)を設定。
`margin-top`を使って要素の描写領域の上部に余白をとる。
`body {margin-top: 50px;}`

###ページの先端に戻るボタン！
まずは、ボタンの位置を配置
ボタンを画面の常に同じ場所に配置したいので今回も`fixed`を使います
また、ページの先頭に戻るボタンはページ内リンクを使います。`<a href="#id">ボタン</a>`これのリンク先に#+idを指定することで、ページ内の同じidを持つ場所まで移動します。簡潔に言うと戻る先のidを入れましょう
<a href="#id">もどるよ</h3>

##floatについて

###左寄せ
`float`プロパティをleftに設定すると、指定した要素が左寄せになります。`absolute`を用いて左寄せした場合との違いとしては、それ以降の要素が指定s多要素の右側に回り込む点です。
`float`プロパティはデフォルトでは`none`担っています。
また、`float`プロパティを適用できるのは`位置指定されていない要素`に対してのみになります。

###横幅を超えるfloatを行った場合の注意点
`float`のブロックを横幅50%にした場合に三つ目のブロックは横には収まらず繰り越しになります。なぜなら、横幅が100%でできているためです。なので繰り越されることを理解していることが大切です。

###floatを解除する
二つ目以降でfloatを解除するとfloatから切り離されて下に移動します。
これにより、任意の場所で`float`を解除して回り込ませることができます。解除には`clear`プロパティを使います。
また、`clear`プロパティは以下の三つが指定できます。
- left 左のfloatと切り離して下に行く
- right 右のfloatと切り離して下に行く
- both 左右両方のfloatと切り離して下に行く

###floatした要素と高さを合わせる
`float`プロパティを使うと親要素から浮いた状態になる。そうすると、親要素から高さを取得でできずに、はみ出すことがあります。
floatした要素の親要素の高さを正しく表現するには`overflow`に`auto`を設定します。
`overflow: auto;`

###clearfix
`clearfix`テクニックを利用するには、floatしている親要素に対して`::after`疑似要素を使ってfloatのclearを指定します。
これによって子要素の最後にclearを指令した要素をfloatした要素の最後に加えた場合と同じ振る舞いをする。

##floatを使ったタブメニュー

###要素を左寄せに
タブメニューの要素(li)を用意してこれを左寄せにします。
`float:left;`

###親要素の高さを合わせる
floatを用いたので親要素の下線部が上に来る。
overflowを使って親要素の高さを取得して枠線が下に来るようにする。

###floatをクリア
仕上げにタブメニューの最後でfloatを解除して後続の要素に影響が出ないようにする。
`ul::after{clear: both; display: block;}`

---

今日も2章連続でやっていきました。だんだん難しくなるにつれ、面白いレイアウトができる技術が増えてきた気がします。
こういうのに出会うとやる気が上がってすごく楽しいです。
是非、わからないところや変なところがあればコメントください