今回もwebフロント技術を身に着けるために勉強したノートをここにまとめていきたいと思います。また、ページレイアウトの一つであるpositionについて、様々なpositionの指定方法などを学んでいきました。
戻ってきたよ
様々な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を入れましょう
もどるよ
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章連続でやっていきました。だんだん難しくなるにつれ、面白いレイアウトができる技術が増えてきた気がします。
こういうのに出会うとやる気が上がってすごく楽しいです。
是非、わからないところや変なところがあればコメントください
