position, display, float

23535 ワード
TIL CSS html テキストリンク
Webレイアウトを設定するためのCSSプロパティの位置、表示、フローティングの簡単な整理.

位置プロパティ

  • relative
  • 現在は自己設定位置
    • に従っている.
  • absolute
  • の親要素に基づいて位置
    • を設定する.
  • 位置:静的属性を持たない親移動
  • の親に静的属性を持たない要素(相対、絶対、固定)がない場合、最上位のbodyラベル上の
    • に移動する.
  • fixed
  • 親要素に関係のない位置
  • に基づくブラウザ画面の相対位置指定位置
  • スクロールは影響を受けない

    • 位置サンプルコード


    サンプルコードは、w3schoolsを少し修正することによって記述される.
    <!DOCTYPE html>
<html>
<head>
<style>
div.relative {
  position: relative;
  top: 100px;
  left: 50px;
  width: 400px;
  height: 200px;
  border: 3px solid #73AD21;
} 

div.absolute {
  position: absolute;
  top: 40px;
  right: 10px;
  width: 200px;
  height: 100px;
  border: 3px solid #73AD21;
}

div.fixed {
  position: fixed;
  top: 20px;
  right: 50px;
  border: 3px solid #73AD21;
}
</style>
</head>
<body>

<div class="relative">position: relative 이면 자기 자신 위치 기준으로 이동
  <div class="absolute">position: absolute 이면 static이 아닌 부모 요소 기준으로 이동</div>
  <div class="fixed"> position: fixed 이면 다른 거 다 무시하고 브라우저 화면 기준으로 이동</div>
</div>

</body>
</html>

    位置サンプルコード結果



    属性の表示

  • block
  • widthサイズは親要素の100%を占めます
    divを
  • bodyに入れると、画面の総サイズは幅
    • となる.
  • 新しいブロック要素を追加すると、次の行(新しい行)
    • に移動します.
  • 幅、高さの大きさ
    • を指定できます.
  • ex) div, p
  • inline
  • 個の要素を追加した場合、次の行は開始しません->同じ行の右側に
    • を並べます.
  • 幅、高さのサイズを指定できません->含まれているコンテンツによってサイズが決定されます
  • ex) span
  • inline-block
  • width、高さ
    • を指定できます
  • 要素を追加すると、次の行->同じ行の右側の列
    • にジャンプしません.

    サンプルコードの表示


    サンプルコードは、w3schoolsを少し修正することによって記述される.
    <!DOCTYPE html>
<html>
<head>
<style>
body {
	background-color: lightgray;
}

p {
	color: red;
    height: 100px;
    width: 100px;
    background-color: black;
  }

p.display_inline {display: inline;}
p.display_block {display: block;}
p.display_inline-block {display: inline-block;}
</style>
</head>
<body>

<h2>display: inline</h2>
<div>
이 문장 다음에 display: inline 인 p 태그가 옵니다. <p class="display_inline">HELLO WORLD!</p> 이 문장 이전에 display: inline 인 p 태그가 옵니다.
</div>

<h2>display: block</h2>
<div>
이 문장 다음에 display: block 인 p 태그가 옵니다. <p class="display_block">HELLO WORLD!</p> 이 문장 이전에 display: block 인 p 태그가 옵니다.
</div>

<h2>display: inline-block</h2>
<div>
이 문장 다음에 inline-block 인 p 태그가 옵니다. <p class="display_inline-block">HELLO WORLD!</p> 이 문장 이전에 inline-block 인 p 태그가 옵니다.
</div>

</body>
</html>

    位置サンプルコード結果



    フローティングアトリビュート(Float Attributes)

  • はスペースを占有するが、他の要素の配置には影響しない
  • は、もともとWebページに画像やテキストを配置するために設計された属性である、
    • .
  • レイアウトを設定する場合(以前はよく使われていた)
    • を使用します.

    floatサンプルコード


    サンプルコードは、w3schoolsを少し修正することによって記述される.
    <!DOCTYPE html>
<html>
<head>
<style>
div.float-left {
  float: left;
}
div.float-right {
  float: right;
}
div.float-none {
  float: none;
}

</style>
</head>
<body>

<h2>Float Left</h2>
<p><div class="float-left" style="width:100px;height:50px;margin-right:15px; background-color:lightgray">float: left</div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero </p>

<h2>Float Right</h2>
<p><div class="float-right" style="width:100px;height:50px;margin-right:15px; background-color:lightgray">float: right</div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero </p>

<h2>Float None</h2>
<p><div class="float-none" style="width:100px;height:50px;margin-right:15px; background-color:lightgray">float: none</div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero </p>

</body>
</html>

    floatサンプルコード結果


    イベントの適用
    TIL 20211103[99便目]