CSS3 – 疑似クラス

2020-12-06 / tau / コメントする

概要

疑似クラス(phseudo classes)は指定したセレクターの要素に対して、各疑似クラスの条件に合致した場合のみスタイルを適用する。

書式

[セレクター]:[疑似クラス名] { ...}

セレクターはタグの要素名やクラス名の組み合わせ。

コロンは1つ。

主な疑似クラス

:hover

指定したセレクター上にマウスカーソルが乗っている間だけスタイルを適用する。

HTML

    <p>
      <span class="inversion">この文の上にマウスカーソルを置いてみてください</span>
    </p>

<p>

<span class="inversion">この文の上にマウスカーソルを置いてみてください</span>

</p>

CSS

.inversion {
  background-color: #fff;
  color: #00f;
}

.inversion {

background-color: #fff;

color: #00f;

}

:first-child/:last-child

複数の同じ親に属する要素群のうち最初の要素のみスタイルを適用する。

HTML

    <div class="indent">
      <p>
        first-child疑似要素によって、ある親要素の下の要素群の最初の要素にのみ
        特定のスタイルを適用できます。
      </p>
      <p>
        たとえばこのケースではdiv要素の下に2つのp要素がありますが、
        最初のp要素の文章のみが1字下げられています。
      </p>
    </div>

<p>

first-child疑似要素によって、ある親要素の下の要素群の最初の要素にのみ

特定のスタイルを適用できます。

</p>

<p>

たとえばこのケースではdiv要素の下に2つのp要素がありますが、

最初のp要素の文章のみが1字下げられています。

</p>

</div>

CSS

.indent p:first-child {
  text-indent: 1em;
}

.indent p:first-child {

text-indent: 1em;

}

:nth-child()

nth-childは引数をとり、同じ親に属する要素群のうち引数の条件に合致するものにスタイルを適用する。

nth-child(i)

i番目の要素にスタイルを適用する。iの開始値は1。

以下の例では2番目のアイテムのみ赤色になる。

HTML

    <ul class="even">
      <li>1番目のアイテム</li>
      <li>2番目のアイテム</li>
      <li>3番目のアイテム</li>
      <li>4番目のアイテム</li>
      <li>5番目のアイテム</li>
      <li>6番目のアイテム</li>
    </ul>

<li>1番目のアイテム</li>

<li>2番目のアイテム</li>

<li>3番目のアイテム</li>

<li>4番目のアイテム</li>

<li>5番目のアイテム</li>

<li>6番目のアイテム</li>

</ul>

CSS

ul.nth li:nth-child(2) {
  color: #f00;
}

ul.nth li:nth-child(2) {

color: #f00;

}

even/odd

引数にeven/oddを指定すると、要素群のうち偶数番目／基数番目の要素にスタイルが適用される。

以下の例では、2番目、4番目、6番目のアイテムが青くなる。

HTML

    <ul class="even">
      <li>1番目のアイテム</li>
      <li>2番目のアイテム</li>
      <li>3番目のアイテム</li>
      <li>4番目のアイテム</li>
      <li>5番目のアイテム</li>
      <li>6番目のアイテム</li>
    </ul>

<li>1番目のアイテム</li>

<li>2番目のアイテム</li>

<li>3番目のアイテム</li>

<li>4番目のアイテム</li>

<li>5番目のアイテム</li>

<li>6番目のアイテム</li>

</ul>

CSS

ul.even li:nth-child(even) {
  color: #00f;
}

ul.even li:nth-child(even) {

color: #00f;

}

関数形(xn+y)

以下の例では、3n+1の指定に対して、3×0+2=2、3×1 +2=5、3×2+1=7番目の要素に下線が引かれる。

HTML

    <ul class="func">
      <li>1番目のアイテム</li>
      <li>2番目のアイテム</li>
      <li>3番目のアイテム</li>
      <li>4番目のアイテム</li>
      <li>5番目のアイテム</li>
      <li>6番目のアイテム</li>
      <li>7番目のアイテム</li>
      <li>8番目のアイテム</li>
      <li>9番目のアイテム</li>
    </ul>

<li>1番目のアイテム</li>

<li>2番目のアイテム</li>

<li>3番目のアイテム</li>

<li>4番目のアイテム</li>

<li>5番目のアイテム</li>

<li>6番目のアイテム</li>

<li>7番目のアイテム</li>

<li>8番目のアイテム</li>

<li>9番目のアイテム</li>

</ul>

CSS

ul.func li:nth-child(3n+2) {
  text-decoration: underline;
}

ul.func li:nth-child(3n+2) {

text-decoration: underline;

}

CSS3 – 疑似要素

2020-12-06 / tau / コメントする

概要

疑似要素(pseudo-element)はHTML中の要素の一部に対してスタイルを設定するときに使う。たとえば以下のような場合

ul要素の中の複数のli要素の1つ目だけスタイルを変える
a要素の文字列の先頭に同じ文字／イメージを付加する
divで括られた複数のp要素の一段落目だけ字下げする

書式

[セレクター]:[疑似要素名] { ... }

または

[セレクター]::[疑似要素名] { ... }

セレクターには、タグの要素名のほか、クラス名やその組み合わせも指定可能。

CSS2ではコロン1つで書いていたが、CSS3ではコロン2つと定義されている。

主な疑似要素

::after

::after疑似要素は、指定したセレクターの後ろにcontentで指定した内容を付加し、スタイルを適用する。

HTML

    <p class="after_char">疑似要素:afterでこの文の後ろに文字を入れる</p>
    <p class="after_image">疑似要素:afterでこの文の後ろに画像を入れる</p>

1 2	<p class="after_char">疑似要素:afterでこの文の後ろに文字を入れる</p> <p class="after_image">疑似要素:afterでこの文の後ろに画像を入れる</p>

CSS

.after_char::after {
  content: "**";
}

.after_image::after {
  content: url("./triangle.png");
}

.after_char::after {

content: "**";

}

.after_image::after {

content: url("./triangle.png");

}

::before

::before疑似要素は、指定したセレクターの前にcontentで指定した内容を付加し、スタイルを適用する。

HTML

    <p class="before_char">疑似要素:beforeでこの文の前に文字を入れる（色も変えられる）</p>
    <p class="before_image">疑似要素:beforeでこの文の前に文字を入れる</p>

1 2	<p class="before_char">疑似要素:beforeでこの文の前に文字を入れる（色も変えられる）</p> <p class="before_image">疑似要素:beforeでこの文の前に文字を入れる</p>

CSS

.before_char::before {
  content: "**";
  color: red;
}

.before_image::before {
  content: url("./triangle.png")
}

.before_char::before {

content: "**";

color: red;

}

.before_image::before {

content: url("./triangle.png")

}

::first-letter

::first-letter疑似要素は、要素の最初の文字に対してスタイルを適用する。

HTML

    <p class="first_letter">疑似要素:first-letterで最初の文字だけスタイルを変える</p>

1	<p class="first_letter">疑似要素:first-letterで最初の文字だけスタイルを変える</p>

CSS

.first_letter::first-letter {
  color: #f00;
  font-size: 200%;
}

.first_letter::first-letter {

color: #f00;

font-size: 200%;

}

::first-line

HTML

    <p class="first_line">
      CSS の 擬似要素はセレクターに付加するキーワードです。
      疑似要素が付加されると、その種類によって選択された部分にスタイルが設定できます。
      例えば:first-line 擬似要素は、段落の最初の行だけのスタイルを変更します。
    </p>

CSS の擬似要素はセレクターに付加するキーワードです。

疑似要素が付加されると、その種類によって選択された部分にスタイルが設定できます。

例えば:first-line 擬似要素は、段落の最初の行だけのスタイルを変更します。

</p>

CSS

.first_line::first-line {
  color: #00f;
  text-decoration: underline;
}

.first_line::first-line {

color: #00f;

text-decoration: underline;

}

CSS3 – flex

2020-12-04 / tau / コメントする

概要

floatプロパティーは、ブロック要素を横方向に並べることができるが、要素を順に並べていくので、望んでいる配置対して意図しない結果となることがある。

flex要素は、コンテナーの中でそれらが整然と配置されるよう、より簡明な指定を可能とする。

特にブロック要素を水平に均等配置したり、nav、article、aside要素などを一定の比率で横に並べたりするときに重宝する。

書式

要素が配置されるflexはコンテナ側と、実際に配置する要素の双方で指定する。

親要素にdisplay: flex;を記述
子要素にflex: n;を記述

たとえば.parentクラスの要素の中に.childクラスの要素を水平配置する場合

.parent {
  display: flex;
}

.child {
  flex: 1;
}

.parent {

display: flex;

}

.child {

flex: 1;

}

.childクラスのブロック要素を複数htmlに書くと、それらが.parentクラスの要素内に均等に水平配置される。

また2つの子要素.child1と.child2をm対nの幅の比率で水平配置したい場合は以下のように記述する。

.parent {
  display: flex;
}

.child1 {
  flex: m;
}

.child2 {
  flex: n;
}

.parent {

display: flex;

}

.child1 {

flex: m;

}

.child2 {

flex: n;

}

値

コンテナ内に配置される要素の幅の比率

実行例

均等配置

以下の例は、3つのdiv要素を親要素の中で水平に均等配置する。

HTML

    <div class="parent">
      <div class="child">child1</div>
      <div class="child">child2</div>
      <div class="child">child3</div>
    </div>

<div class="child">child1</div>

<div class="child">child2</div>

<div class="child">child3</div>

</div>

CSS

.parent {
  width: 400px;
  height: 100px;
  border: solid 4px #000;
  display: flex;
}

.child {
  border: solid 4px #0ff;
  flex: 1;
}

.parent {

width: 400px;

height: 100px;

border: solid 4px #000;

display: flex;

}

.child {

border: solid 4px #0ff;

flex: 1;

}

実行結果

比率指定

次の例は、複数の要素に値を指定して、その値の比率で水平配置する例。

HTML

    <div class="parent">
      <div class="child1">child1</div>
      <div class="child2">child2</div>
      <div class="child3">child3</div>

<div class="child1">child1</div>

<div class="child2">child2</div>

<div class="child3">child3</div>

CSS

.parent {
  width: 400px;
  height: 100px;
  border: solid 4px #000;
  display: flex;
}

.child1 {
  border: solid 4px #f00;
  flex: 1;
}

.child2 {
  border: solid 4px #0f0;
  flex: 3;
}

.child3 {
  border: solid 4px #00f;
  flex: 2;
}

.parent {

width: 400px;

height: 100px;

border: solid 4px #000;

display: flex;

}

.child1 {

border: solid 4px #f00;

flex: 1;

}

.child2 {

border: solid 4px #0f0;

flex: 3;

}

.child3 {

border: solid 4px #00f;

flex: 2;

}

結果

CSS3 – float

2020-12-03 / tau / コメントする

概要

floatプロパティーにより、ブロック要素が横に並ぶように制御できる。また、floatを設定した要素の次の要素が前の要素のfloatを解除する場合はclearプロパティーを使う。

書式

float: left/right;

clear: left/right/both;

block要素は縦に並ぶ

まず基本の確認として、幅が狭い2つのブロック要素を並べる。横に余裕があっても、ブロック要素は縦に並ぶ。

HML

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>two blocks</title>
    <link rel="stylesheet" href="block2.css">
  </head>
  <body>
    <div class="parent_block">
      <div class="block_A">block A</div>
      <div class="block_B">block B</div>
    </div>
  </body>
</html>

<!DOCTYPE html>

<head>

<title>two blocks</title>

</head>

<body>

<div class="block_A">block A</div>

<div class="block_B">block B</div>

</div>

</body>

</html>

CSS

.parent_block {
  width: 500px;
  height: 300px;
  border: solid 2px #000000;
}

.block_A {
  width: 200px;
  height: 100px;
  background-color: #00ffff;
}

.block_B {
  width: 200px;
  height: 100px;
  background-color: #ffff00;
}

.parent_block {

width: 500px;

height: 300px;

border: solid 2px #000000;

}

.block_A {

width: 200px;

height: 100px;

background-color: #00ffff;

}

.block_B {

width: 200px;

height: 100px;

background-color: #ffff00;

}

結果

floatにするとblock要素も横に並ぶ

スペースに余裕がある場合

ブロック要素のスタイルにfloat:leftを指定した場合、親要素の右側に余裕があれば横に並べられる。

HTML

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>two float blocks</title>
    <link rel="stylesheet" href="float2_LL.css">
  </head>
  <body>
    <div class="parent_block">
      <div class="block_A">float-A:left</div>
      <div class="block_B">float-B:left</div>
    </div>
  </body>
</html>

<!DOCTYPE html>

<head>

<title>two float blocks</title>

</head>

<body>

<div class="block_A">float-A:left</div>

<div class="block_B">float-B:left</div>

</div>

</body>

</html>

CSS

.parent_block {
  width: 500px;
  height: 300px;
  border: solid 2px #000000;
}

.block_A {
  width: 200px;
  height: 100px;
  background-color: #00ffff;
  float: left;
}

.block_B {
  width: 200px;
  height: 100px;
  background-color: #ffff00;
  float: left;
}

.parent_block {

width: 500px;

height: 300px;

border: solid 2px #000000;

}

.block_A {

width: 200px;

height: 100px;

background-color: #00ffff;

float: left;

}

.block_B {

width: 200px;

height: 100px;

background-color: #ffff00;

float: left;

}

スペースに余裕がない場合

横に十分なスペースがない場合は下に配置される。inline要素が折り返されるのと同じイメージ。

左寄せと右寄せ

CSS

.parent_block {
  width: 500px;
  height: 300px;
  border: solid 2px #000000;
}

.block_A {
  width: 200px;
  height: 100px;
  background-color: #00ffff;
  float: left;
}

.block_B {
  width: 200px;
  height: 100px;
  background-color: #ffff00;
  float: right;
}

.parent_block {

width: 500px;

height: 300px;

border: solid 2px #000000;

}

.block_A {

width: 200px;

height: 100px;

background-color: #00ffff;

float: left;

}

.block_B {

width: 200px;

height: 100px;

background-color: #ffff00;

float: right;

}

その他の挙動

複数のfloat要素が並ぶ場合、その幅や高さによって挙動が複雑になる。複数のfloat要素間の干渉・挙動についてはこちらにまとめている。

“float”の意味

floatはfixの影響を受ける

以下の例では、fix要素の次にfloat要素を描かせている。fix要素の右にスペースがあっても、float要素は要素の下の左端に配置される。

float要素は、fix要素が存在する縦のゾーンには配置されないというルールらしい。

HTML

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>fix and float boxes</title>
    <link rel="stylesheet" href="fix_float_LL.css">
  </head>
  <body>
    <div class="parent_block">
      <div class="block_A">fix-A</div>
      <div class="block_B">float-B:left</div>
    </div>
  </body>
</html>

<!DOCTYPE html>

<head>

<title>fix and float boxes</title>

</head>

<body>

<div class="block_B">float-B:left</div>

</div>

</body>

</html>

CSS

.parent_block {
  width: 500px;
  height: 300px;
  border: solid 2px #000000;
}

.block_A {
  width: 200px;
  height: 100px;
  background-color: #00ffff;
}

.block_B {
  width: 200px;
  height: 100px;
  background-color: #ffff00;
  float: left;
}

.parent_block {

width: 500px;

height: 300px;

border: solid 2px #000000;

}

.block_A {

width: 200px;

height: 100px;

background-color: #00ffff;

}

.block_B {

width: 200px;

height: 100px;

background-color: #ffff00;

float: left;

}

結果

fixはfloatを（ほぼ）認識しない

上の例と逆に、float要素→fix要素の順に描いてみる。

そうすると、黄色のfix要素の色が見えなくなってしまう。ただし、そのテキストだけがfloat要素の下に張り付いている。

HTML

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>float and fix boxes</title>
    <link rel="stylesheet" href="float_fix.css">
  </head>
  <body>
    <div class="parent_block">
      <div class="block_A">fioat-A:left</div>
      <div class="block_B">fix-B</div>
    </div>
  </body>
</html>

<!DOCTYPE html>

<head>

<title>float and fix boxes</title>

</head>

<body>

<div class="block_A">fioat-A:left</div>

</div>

</body>

</html>

CSS

.parent_block {
  width: 500px;
  height: 300px;
  border: solid 2px #000000;
}

.block_A {
  width: 200px;
  height: 100px;
  background-color: #00ffff;
  float: left;
}

.block_B {
  width: 200px;
  height: 100px;
  background-color: #ffff00;
}

.parent_block {

width: 500px;

height: 300px;

border: solid 2px #000000;

}

.block_A {

width: 200px;

height: 100px;

background-color: #00ffff;

float: left;

}

.block_B {

width: 200px;

height: 100px;

background-color: #ffff00;

}

そこで、float要素の背景を塗らずにborderのみ設定してみる。

そうすると、fix要素は先に描かれたfloatとの重なりを気にせず、本来自分が描かれる位置にあることがわかる。

ただしそのテキストはfloat要素の下（元のfix要素の外）に追いやられている。

CSS

.parent_block {
  width: 500px;
  height: 300px;
  border: solid 2px #000000;
}

.block_A {
  width: 200px;
  height: 100px;
  border: solid 4px #00ffff;
  float: left;
}

.block_B {
  width: 200px;
  height: 100px;
  background-color: #ffff00;
}

.parent_block {

width: 500px;

height: 300px;

border: solid 2px #000000;

}

.block_A {

width: 200px;

height: 100px;

border: solid 4px #00ffff;

float: left;

}

.block_B {

width: 200px;

height: 100px;

background-color: #ffff00;

}

上の例ではfloat要素とfix要素が同じ形・大きさだったが、fix要素の幅を広くしてみる。そうするとfix要素のテキストは、既存のfloat要素の右押しやられるように配置される。

CSS

.parent_block {
  width: 500px;
  height: 300px;
  border: solid 2px #000000;
}

.block_A {
  width: 200px;
  height: 100px;
  border: solid 4px #00ffff;
  float: left;
}

.block_B {
  width: 400px;
  height: 100px;
  background-color: #ffff00;
}

.parent_block {

width: 500px;

height: 300px;

border: solid 2px #000000;

}

.block_A {

width: 200px;

height: 100px;

border: solid 4px #00ffff;

float: left;

}

.block_B {

width: 400px;

height: 100px;

background-color: #ffff00;

}

floatを指定していない通常の要素から見た場合、float要素は正に「宙に浮いたように」見えなくなり、それがない状態のように配置される。ただしそのテキストはfloat要素の範囲を認識していて、その外側に押し出される。そのとき、テキストが元々属している要素の内外は関係ない。

clearによるfloatの解除

fix要素からみてfloat要素は「浮いて」いて認識されないが、そのfix要素でclearプロパティーを指定することで、float要素を認識できるようになる。

HTML

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>float and fix boxes</title>
    <link rel="stylesheet" href="float_fix_clear.css">
  </head>
  <body>
    <div class="parent_block">
      <div class="block_A">fioat-A:left</div>
      <div class="block_B">fix-B (w/ clear)</div>
    </div>
  </body>
</html>

<!DOCTYPE html>

<head>

<title>float and fix boxes</title>

</head>

<body>

<div class="block_A">fioat-A:left</div>

<div class="block_B">fix-B (w/ clear)</div>

</div>

</body>

</html>

CSS

.parent_block {
  width: 500px;
  height: 300px;
  border: solid 2px #000000;
}

.block_A {
  width: 200px;
  height: 100px;
  background-color: #00ffff;
  float: left;
}

.block_B {
  width: 200px;
  height: 100px;
  background-color: #ffff00;
  clear: left;
}

.parent_block {

width: 500px;

height: 300px;

border: solid 2px #000000;

}

.block_A {

width: 200px;

height: 100px;

background-color: #00ffff;

float: left;

}

.block_B {

width: 200px;

height: 100px;

background-color: #ffff00;

clear: left;

}

上の例ではclear: left;によって左のfloat設定を解除しているが、clear: both;とすれば直前のfloatのleft/rightに関わらず解除される。

CSS3 – floatの挙動について

2020-12-03 / tau / コメントする

概要

floatプロパティーを設定した要素の挙動、特にfloat要素間の影響が結構ややこしかったので、いろいろと実験してみた。

複数float要素間の干渉・挙動は結構ややこしいようだ。

float要素は横に並ぶ

2つのblock要素にfloat:leftのプロパティーと値を設定する。そうすると2つの要素は横に並ぶ。

CSS

.parent_block {
  width: 500px;
  height: 300px;
  border: solid 2px #000000;
}

.block_A {
  width: 200px;
  height: 100px;
  background-color: #00ffff;
  float: left;
}

.block_B {
  width: 200px;
  height: 100px;
  background-color: #ffff00;
  float: left;
}

.parent_block {

width: 500px;

height: 300px;

border: solid 2px #000000;

}

.block_A {

width: 200px;

height: 100px;

background-color: #00ffff;

float: left;

}

.block_B {

width: 200px;

height: 100px;

background-color: #ffff00;

float: left;

}

結果

rightと指定するとfloat要素は親ブロックの右端に寄せられる。

css

.parent_block {
  width: 500px;
  height: 300px;
  border: solid 2px #000000;
}

.block_A {
  width: 200px;
  height: 100px;
  background-color: #00ffff;
  float: left;
}

.block_B {
  width: 200px;
  height: 100px;
  background-color: #ffff00;
  float: right;
}

.parent_block {

width: 500px;

height: 300px;

border: solid 2px #000000;

}

.block_A {

width: 200px;

height: 100px;

background-color: #00ffff;

float: left;

}

.block_B {

width: 200px;

height: 100px;

background-color: #ffff00;

float: right;

}

結果

right指定のみの場合は右から順番に並ぶ。

CSS

.parent_block {
  width: 500px;
  height: 300px;
  border: solid 2px #000000;
}

.block_A {
  width: 200px;
  height: 100px;
  background-color: #00ffff;
  float: right;
}

.block_B {
  width: 200px;
  height: 100px;
  background-color: #ffff00;
  float: right;
}

.parent_block {

width: 500px;

height: 300px;

border: solid 2px #000000;

}

.block_A {

width: 200px;

height: 100px;

background-color: #00ffff;

float: right;

}

.block_B {

width: 200px;

height: 100px;

background-color: #ffff00;

float: right;

}

結果

幅に余裕がないと縦に並ぶ

親ブロックに横幅の余裕が残っていない場合、float要素は縦に並ぶ。

.parent_block {
  width: 500px;
  height: 300px;
  border: solid 2px #000000;
}

.block_A {
  width: 300px;
  height: 100px;
  background-color: #00ffff;
  float: left;
}

.block_B {
  width: 300px;
  height: 100px;
  background-color: #ffff00;
  float: left;
}

.parent_block {

width: 500px;

height: 300px;

border: solid 2px #000000;

}

.block_A {

width: 300px;

height: 100px;

background-color: #00ffff;

float: left;

}

.block_B {

width: 300px;

height: 100px;

background-color: #ffff00;

float: left;

}

結果

left設定のfloat要素とright設定のfloat要素でも、余白がなければ縦に並ぶ。

CSS

.parent_block {
  width: 500px;
  height: 300px;
  border: solid 2px #000000;
}

.block_A {
  width: 300px;
  height: 100px;
  background-color: #00ffff;
  float: left;
}

.block_B {
  width: 300px;
  height: 100px;
  background-color: #ffff00;
  float: right;
}

.parent_block {

width: 500px;

height: 300px;

border: solid 2px #000000;

}

.block_A {

width: 300px;

height: 100px;

background-color: #00ffff;

float: left;

}

.block_B {

width: 300px;

height: 100px;

background-color: #ffff00;

float: right;

}

結果

高さが余っている場合は引っかかる

要素を3つにしてみた。この動きを見ると、left指定をした場合は次のように動いているように見える。

まず右へ寄せて
次に上へ寄せて
最後に左に寄せる

【注】

最初の先入観で右からの動きが頭に入ってしまったため、結果を見た瞬間に「引っかかっている」と認識してしまったが、これは間違いであることが後にわかる。

HTML

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>three float blocks</title>
    <link rel="stylesheet" href="float3_LLL_tall.css">
  </head>
  <body>
    <div class="parent_block">
      <div class="block_A">float-A:left</div>
      <div class="block_B">float-B:left</div>
      <div class="block_C">float-C:left</div>
    </div>
  </body>
</html>

<!DOCTYPE html>

<head>

<title>three float blocks</title>

</head>

<body>

<div class="block_A">float-A:left</div>

<div class="block_B">float-B:left</div>

<div class="block_C">float-C:left</div>

</div>

</body>

</html>

CSS

.parent_block {
  width: 500px;
  height: 300px;
  border: solid 2px #000000;
}

.block_A {
  width: 200px;
  height: 125px;
  background-color: #00ffff;
  float: left;
}

.block_B {
  width: 200px;
  height: 100px;
  background-color: #ffff00;
  float: left;
}

.block_C {
  width: 200px;
  height: 100px;
  background-color: #ff00ff;
  float: left;
}

.parent_block {

width: 500px;

height: 300px;

border: solid 2px #000000;

}

.block_A {

width: 200px;

height: 125px;

background-color: #00ffff;

float: left;

}

.block_B {

width: 200px;

height: 100px;

background-color: #ffff00;

float: left;

}

.block_C {

width: 200px;

height: 100px;

background-color: #ff00ff;

float: left;

}

結果

とすると、右側に余裕があれば3つ目の要素はそこにハマるか？

CSS

.parent_block {
  width: 500px;
  height: 300px;
  border: solid 2px #000000;
}

.block_A {
  width: 100px;
  height: 125px;
  background-color: #00ffff;
  float: left;
}

.block_B {
  width: 100px;
  height: 100px;
  background-color: #ffff00;
  float: left;
}

.block_C {
  width: 200px;
  height: 100px;
  background-color: #ff00ff;
  float: left;
}

.parent_block {

width: 500px;

height: 300px;

border: solid 2px #000000;

}

.block_A {

width: 100px;

height: 125px;

background-color: #00ffff;

float: left;

}

.block_B {

width: 100px;

height: 100px;

background-color: #ffff00;

float: left;

}

.block_C {

width: 200px;

height: 100px;

background-color: #ff00ff;

float: left;

}

結果

確かに。

頭打ちの高さは保持される

次の結果からも、float:left指定の場合、右→上→左と動かした結果のようだ（注：これらの結果も、どうやら別の動きの結果らしいことが後にわかる）。

CSS

.parent_block {
  width: 500px;
  height: 300px;
  border: solid 2px #000000;
}

.block_A {
  width: 200px;
  height: 75px;
  background-color: #00ffff;
  float: left;
}

.block_B {
  width: 200px;
  height: 100px;
  background-color: #ffff00;
  float: left;
}

.block_C {
  width: 150px;
  height: 100px;
  background-color: #ff00ff;
  float: left;
}

.parent_block {

width: 500px;

height: 300px;

border: solid 2px #000000;

}

.block_A {

width: 200px;

height: 75px;

background-color: #00ffff;

float: left;

}

.block_B {

width: 200px;

height: 100px;

background-color: #ffff00;

float: left;

}

.block_C {

width: 150px;

height: 100px;

background-color: #ff00ff;

float: left;

}

結果

leftとrightは同格か

right要素にぶつかっても、left指定の要素は頭打ちになる。

HTML

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>three float blocks</title>
    <link rel="stylesheet" href="float3-LRL_1.css">
  </head>
  <body>
    <div class="parent_block">
      <div class="block_A">float-A:left</div>
      <div class="block_B">float-B:right</div>
      <div class="block_C">float-C:left</div>
    </div>
  </body>
</html>

<!DOCTYPE html>

<head>

<title>three float blocks</title>

</head>

<body>

<div class="block_A">float-A:left</div>

<div class="block_B">float-B:right</div>

<div class="block_C">float-C:left</div>

</div>

</body>

</html>

CSS

.parent_block {
  width: 500px;
  height: 300px;
  border: solid 2px #000000;
}

.block_A {
  width: 200px;
  height: 200px;
  background-color: #00ffff;
  float: left;
}

.block_B {
  width: 200px;
  height: 100px;
  background-color: #ffff00;
  float: right;
}

.block_C {
  width: 200px;
  height: 50px;
  background-color: #ff00ff;
  float: left;
}

.parent_block {

width: 500px;

height: 300px;

border: solid 2px #000000;

}

.block_A {

width: 200px;

height: 200px;

background-color: #00ffff;

float: left;

}

.block_B {

width: 200px;

height: 100px;

background-color: #ffff00;

float: right;

}

.block_C {

width: 200px;

height: 50px;

background-color: #ff00ff;

float: left;

}

結果

混乱

ここまでのところで、先入観も手伝って、右→上→左の動きだと確信していたが、次の結果を見て、わけがわからなくなってきた。

CSS

.parent_block {
  width: 500px;
  height: 300px;
  border: solid 2px #000000;
}

.block_A {
  width: 100px;
  height: 200px;
  background-color: #00ffff;
  float: left;
}

.block_B {
  width: 100px;
  height: 100px;
  background-color: #ffff00;
  float: right;
}

.block_C {
  width: 200px;
  height: 50px;
  background-color: #ff00ff;
  float: left;
}

.parent_block {

width: 500px;

height: 300px;

border: solid 2px #000000;

}

.block_A {

width: 100px;

height: 200px;

background-color: #00ffff;

float: left;

}

.block_B {

width: 100px;

height: 100px;

background-color: #ffff00;

float: right;

}

.block_C {

width: 200px;

height: 50px;

background-color: #ff00ff;

float: left;

}

結果

これまでの想定だと、float-Cのボックスの上端はfloat-Bの下端の高さのところにあるはずだが、そうなっていない。

ここで、1つ前の例でA(left)とB(right)の高さを逆転させてみると以下のようになる。B(rhght)の高さはC(left)の縦位置に影響を与えていない。

最後に、もう1つleft要素を割り込ませてみた。

想像通り、D(left)の縦位置はC(left)要素の高さに影響を受けている。

推測

最初の方で、float:leftのボックスの動きは右→上→左と突き当たるまで動いてスライドさせるイメージだったが、いくつかパターンを見る中でそうではないことがわかった。

ここでもう一度float:leftの動きを追ってみると、以下のようになりそうだ。

なにも要素がない場合、親要素の左端と上端に位置させる
既にfloat:leftのボックス群がある場合、
- 右にスペースがあれば、既存のfloat:leftボックス群の右に並る
  - その時の上端の位置は、親要素の上端／他のfloat:leftの下端／他のfloat:rightの下端になる
- 右側にスペースがない場合、既存のfloat:leftボックス群の下側に、親の要素の左端から配置しようとする
  - その時の上端の位置は、上にある既存のfloat:leftボックス群の中で一番下方まで伸びているものの下端

ということか。

HTML5 – label

2020-12-02 / tau / コメントする

概要

label要素は、意図するinput要素に関するテキストを表示するとともに、idを通してinput要素と関連付けられる。

input要素に関連付けられたlabelは、その領域をクリックすることでinput要素をクリックしたのと同じ効果を持つ。

書式

<label for="id" accesskey="k">

属性

for属性

対応するinput要素のidをここに書くことで、このlabel要素とinput要素を関連付ける。

以下の例では、3つのテキストボックスに文字列を付している。通常のテキストをクリックしても何も起こらないが、ラベルの場合はラベルのエリアをクリックしてもテキストボックスが選択される。

<form action="" method="">
  <ul>
    <li>ただのテキスト：<input id="none" name="nothing" type="text" /></li>
    <li><label for="name">ラベルとidで指定</label><input id="name" name="user_name" type="text" /></li>
    <li><label>ラベルで囲んで指定<input name="user_addres" type="text" /></label></li>
  </ul>
</form>

<ul>

<li>ただのテキスト：<input id="none" name="nothing" type="text" /></li>

<li><label for="name">ラベルとidで指定</label><input id="name" name="user_name" type="text" /></li>

<li><label>ラベルで囲んで指定<input name="user_addres" type="text" /></label></li>

</ul>

</form>

CSS3 – font-family

2020-12-02 / tau / コメントする

概要

使用する書体を指定する。

特定のフォント名ではない総称がある
フォント名は複数指定できる
複数指定された場合、前の方からサーチし、クライアント側にフォントがあればそれを使用
指定したフォントが存在しない場合、クライアント側のデフォルトフォントが使われる

書式

font-family: [フォント1] , [フォント2] , ...

フォント名は引用符～ダブルクォート(")かシングルクォート(')で囲む
ただし総称フォントを指定する場合は引用符で囲わない

フォント名

種類

sans-serif	ゴシック体などセリフがないフォント
serif	ローマン体・明朝体などセリフがあるフォント
monospace	等幅のフォント
cursive	筆記体・草書体に属するフォント
fantasy	装飾的なフォント

表示例

sans-serifはゴシック系のフォントです。

serifは明朝系のフォントです

monospaceは等幅のフォントです。

cursiveは筆記体・草書体のフォントです。

fantasyは装飾的なフォントです。

※総称フォントは引用符で囲いません

    <p style="font-family: san-serif;">
      sans-serifはゴシック系のフォントです。
    </p>
    <p style="font-family: serif;">
      serifは明朝系のフォントです
    </p>
    <p style="font-family: monospace;">
      monospaceは等幅のフォントです。
    </p>
    <p style="font-family: cursive;">
      cursiveは筆記体・草書体のフォントです。
    </p>
    <p style="font-family: fantasy;">
      fantasyは装飾的なフォントです。
    </p>
    <p>※総称フォントは引用符で囲いません<p>

sans-serifはゴシック系のフォントです。

</p>

serifは明朝系のフォントです

</p>

monospaceは等幅のフォントです。

</p>

cursiveは筆記体・草書体のフォントです。

</p>

fantasyは装飾的なフォントです。

</p>

<p>※総称フォントは引用符で囲いません<p>

複数指定

動作

フォントを複数指定することができる。各フォントは','（カンマ)で区切り、スペースの有無は任意。

クライアントは前の方から順番にサーチし、表示対象に使用可能なフォントであればそれを使い、そうでなければ次のフォントを探す。

最終的に利用可能なフォントがなければクライアント側のデフォルトフォントが使われる。

表示例

フォントの複数指定～’YU Gothic UI’, sans-serif

フォントの複数指定～’存在しないゴシックフォント’, sans-serif

フォントの複数指定～’存在しない明朝フォント’, serif

    <p style="font-family: 'YU Gothic UI', sans-serif">
      フォントの複数指定～'YU Gothic UI', sans-serif
    </p>
    <p style="font-family: '存在しないゴシックフォント', sans-serif">
      フォントの複数指定～'存在しないゴシックフォント', sans-serif
    </p>
    <p style="font-family: '存在しない明朝フォント', serif">
      フォントの複数指定～'存在しない明朝フォント', serif
    </p>

フォントの複数指定～'YU Gothic UI', sans-serif

</p>

フォントの複数指定～'存在しないゴシックフォント', sans-serif

</p>

フォントの複数指定～'存在しない明朝フォント', serif

</p>

CSS – プロパティー～機能・性質別

2020-12-02 / tau / コメントする

種類・配置・形状

表現

color/background-color

テキスト・フォント

CSS – プロパティー～アルファベット順

2020-12-02 / tau / コメントする

HTML5 – 要素～機能・性質別

2020-12-02 / tau / コメントする

設定

meta
- viewport
link

移動・遷移

a (anchor)

表示

canvas
- Path2D

概要

書式

主な疑似クラス

:hover

:first-child/:last-child

:nth-child()

nth-child(i)

even/odd

関数形(xn+y)

概要

書式

主な疑似要素

::after

::before

::first-letter

::first-line

概要

書式

値

実行例

均等配置

比率指定

概要

書式

block要素は縦に並ぶ

floatにするとblock要素も横に並ぶ

スペースに余裕がある場合

スペースに余裕がない場合

左寄せと右寄せ

その他の挙動

“float”の意味

floatはfixの影響を受ける

fixはfloatを（ほぼ）認識しない

clearによるfloatの解除

概要

float要素は横に並ぶ

幅に余裕がないと縦に並ぶ

高さが余っている場合は引っかかる

頭打ちの高さは保持される

leftとrightは同格か

混乱

推測

概要

書式

属性

for属性

概要

書式

フォント名

種類

表示例

複数指定

動作

表示例

種類・配置・形状

表現

テキスト・フォント

リスト

設定

移動・遷移

表示

入力・選択