TIL 8. CSS:レイアウトに役立つ属性(表示、位置、フローティング)

レイアウトに関連するcssプロパティを使用すると、Webページを簡潔に美しくすることができます.最近では、スマートフォンやタブレットなどの機器の種類が多様化するにつれ、画面の大きさも様々になってきています.画面サイズによってレイアウトが再構造化されることを反応型ウェブページと呼ぶ.また,再構築に適したflex,gridなどのcss属性が出現した.
それらが現れる前に、display、position、floatなどのプロパティを使用してレイアウトを行います.flexとgridはそれぞれ2009年と2019年に創設された.したがって,これまで既存の属性を用いたページはかなり多かった.この授業では、この3つの属性について説明します.
1. display
ディスプレイプロパティは、画面上の要素の表示方法を決定します.タイプは大体inline、inline-block、blockです.html要素の目的に応じて、デフォルト値が主にinlineまたはblockに設定されていることを示します.
inlineプロパティの次の要素は同じ行にあります.このプロパティにはwidth値とheight値はありません.デフォルト値としてinlineプロパティを持つ要素にはspan、img、a要素が含まれます.
blockプロパティを持つ要素は新しい行、次の要素は下にあり、改行効果が表示されます.ヘッダー、section、フッターなど、段落を構成する意味要素がこれに属します.div、p要素などもblockがデフォルトです.
Inline-blockプロパティはinlineとは異なりwidth、height値を持つことができるため、サイズを調整できます.エレメントを直接横に置いてサイズを設定する場合は、inline blockが適切です.
2. position
positionプロパティを使用すると、必要な座標に要素を貼り付けることができます.必要な座標は、位置プロパティ(top、bottom、right、left)で適切な値を設定できます.
1. static
positionが設定されていない場合、デフォルトはnon-ppositionのstaticに設定されます.
2. relative
相対アトリビュートを位置アトリビュートと一緒に使用すると、その効果が表示されます.相対プロパティのみを設定すると、要素はstaticに設定したように変化しません.
次のdiv要素を見てみましょう.

div{
  position: relative;
  left: 20px;
}

左の値20 pxをdivの左側に20 pxスペースを埋め込むのと同じにします.従ってdivは左側20 pxから離れた位置に配置される.
3. absolute
親要素に基づいて位置を設定できます.親要素の位置が設定されていない場合、または(=静的)、bodyが親要素である場合、ビューポートに基づいて位置が設定されます.
ビューポートとは?
現在見ている画面の大きさを指します.スクロールされたWebページが多い場合、Webページの高さはビューポートの高さより大きくなります.
4. fixed
absoluteと同様に、位置を固定したい場合に使用します.absoluteとの違いは、親要素ではなく常にビューポートに基づいています.
たとえば、Webページをスクロールするdivに次のcssを設定したとします.

div{
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 20px;
}

まずdivは底部に固定され、左下隅の空白はありません.下にスクロールしてもdivは常に底に固定されます.widthは100%なので、ビューポートの横方向の面積全体を使用し、heightは一定の値を与えます.
3. float
floatは「フローティング」を表し、cssのfloatプロパティは要素をフローティングします.主にimg要素をテキストと一緒に配置するために使用されます.
floatプロパティを次のdivに適用してみます.

div{
  float: right;
}  

divはもともとブロックの形式で、新しい行の左側に対して、floatの右の値を与えて、右側に位置します.ここにdivの前の要素がある場合は、その要素の右側に並んでいます.