Zenn
🐼

CSS ”Making Layout”

2023/08/01に公開
CSS
#
display
#
float
#
position
tech

positionプロパティ

htmlコードを作成すると、上から下に作成した順番でページに描かれました。
but、CSSのpositionプロパティをHTMLコードに関係なく、どの位置でも要素を設置します。

positionプロパティ4つ

  • position: static;
  • position: relative;
  • position: absolute;
  • position: fixed;

🍞relative

relative英語翻訳そのまま相対位置です。
top, right, bottom, left の値に基づいて自分自身からの相対オフセットで配置されます。
divからposition: relativeのtop, leftそれぞれ15pxをあげると以下みたいにposition: staticの位置より上から15px左かから15px離れます。

.relative{
  position: relative;
  background: skyblue;
  left: 15px;
  top: 15px;
  width: 150px;
}

🍞absolute

absoluteは絶対位置です。
親要素や祖先要素のうち、relative、absolute、またはfixedが宣言された場所を基準に位置します。

  <body>
    <div class="relative">div1
      <div class="absolute">display:absolute</div>
    </div>
  </body>

body {
  padding: 0;
  margin: 0;
  background-color: pink;
}
.relative {
	position: relative;
  border: 5px solid coral;
  left: 15px;
  top: 15px;
  width: 150px;
  height: 150px;
}
.absolute {
  position: absolute;
  top: 20px;
  left: 20px;
  background: skyblue;
}

🍞fixed

fixedは英語翻訳そのまま固定されたという意味です。
absoluteはrelativeを持つ親が必要でしたが、fixedは必要ありません。
見える画面を基準に位置を固定してくれます。

displayプロパティ

🥐block

ほとんどのhtmlタグはblock要素です。
<header>,<footer>,<p>,<li>,<table>,<div>,<h1>などがblock要素となります。

block要素の特徴では、
🔸ブロックのように上から下まで積もるように置かれます。
🔸block levelテキストを書くといつも改行されます。
🔸幅と高さを指定できます。
🔸要素の配置を指定できないです。

  <body>
    <div style="background-color: yellowgreen; margin: 2px 0;">
      display:block
    </div>
    <div style="background-color: yellowgreen; margin: 2px 0;">
      display:block
    </div>
  </body>

➰実行画面

🥐inline

inline要素は改行されなく、新しい行で始まらないです。
必要な幅だけ取ります。
<span>,<a>,<img>がinline要素となります。

inline要素の特徴では、
🔸一列で表示されます。
🔸テキストの幅だけ取ります。（幅、高さ設定不可/imgは例外）
🔸改行がされないです。

  <body>
    <span style="background-color: yellowgreen;">
      display:inline
    </span>
    <span style="background-color: yellowgreen;">
      display:inline
    </span>
  </body>

p {
   display: inline-block;
}

➰実行画面

🥐inline-block

displayがinline-blockに設定されている要素はblockとinlineを混ぜた要素になります。
blockみたいに幅を決めれるし、改行されなく、inlineみたいに同じラインに設置されることができます。

inline-block要素の特徴では、
🔸inlineとblockを特徴を全部持ってます。
🔸一列に並んで(inline) + 幅と高さの設定が可能です(block)。

  <body>
    <p style="background-color:yellow;">hello</p>
    <p style="background-color:yellow;">hello</p>
    <p style="background-color:yellow;">hello</p>
  </body>

➰実行画面

floatプロパティ

floatは主に画像周辺のテキストを包むために作られたプロパティです。
ページ全体のレイアウトを取る時にも本当に重要なツールになります。

  <body>
    <div class="box_wrap">
        <div class="div1">div1</div>
        <div class="div2">div2</div>
        <div class="div3">div3</div>
    </div>
  </body>

.box_wrap {
  float: left;
}
.box_wrap div {
  display: inline-block;
  color: #fff;
}
.box_wrap .div1 {
  background-color: navy;
}
.box_wrap .div2 {
  background-color: skyblue;
}
.box_wrap .div3 {
  background-color: cornflowerblue;
}

🥖float: left

🥖float: left

Discussion