PHP – GETの流れ

2021-01-14 / tau / コメントする

概要

GETメソッドの挙動・手順を確認した。

普通にHTML/PHPファイルが呼ばれると、GETメソッドになる
なので初回起動時の処理はGETメソッド前提で、$_GET変数は定義済み、要素数0をチェック
$_GETの要素数が0より大きければ初回以降のGETメソッド処理
初回以降の$_GETの要素チェックは''との比較でok

確認コード

以下のHTMLとPHPで動作を確認する。

HTML

フォームからGETメソッドで送信する
送信するのはテキストボックスの内容のみ
PHP側で処理された$msgを出力する

<form method="get">
  <input type="text" name="get_input">
  <input type="submit" value="GET">
</form>
<p><?php foreach ($msg as $m) echo $m, '<br>'; ?></p>

</form>

PHP本体

全体の処理開始以降、節目の経過を$msgに累積記録し、HTMLでの出力に備える

$msg = [];
$msg[] = '開始しました';
if ($_SERVER['REQUEST_METHOD'] === 'GET') {
  $msg[] = '$_SERVER[\'REQUEST_METHOD\'] === \'GET\'を確認しました';
  if (isset($_GET) !== false) {
    $msg[] = '$_GETはセットされています(要素数：'. count($_GET) .')';
    if (isset($_GET['get_input']) !== false) {
      $msg[] = '$_GET[\'get_input\']はセットされています';
      $msg[] = '$_GET[\'get_input\']の内容は\'' . $_GET['get_input'] . '\'です';
    }
  }
}

$msg = [];

$msg[] = '開始しました';

if ($_SERVER['REQUEST_METHOD'] === 'GET') {

$msg[] = '$_SERVER[\'REQUEST_METHOD\'] === \'GET\'を確認しました';

if (isset($_GET) !== false) {

$msg[] = '$_GETはセットされています(要素数：'. count($_GET) .')';

if (isset($_GET['get_input']) !== false) {

$msg[] = '$_GET[\'get_input\']はセットされています';

$msg[] = '$_GET[\'get_input\']の内容は\'' . $_GET['get_input'] . '\'です';

}

結果

初期起動時

HTMLの表示は以下の通り。

起動時にGETで始まっている
そのため$_GET変数も定義済みになっている
ここには書いていないがvar_dumpで確認すると'Array ()'となっている
ただし$_GETの要素数は0

開始しました
$_SERVER['REQUEST_METHOD'] === 'GET'を確認しました
$_GETはセットされています(要素数：0)

開始しました

$_SERVER['REQUEST_METHOD'] === 'GET'を確認しました

$_GETはセットされています(要素数：0)

このときブラウザーでのURL表示は以下のとおり。

http://localhost:8000/tests/get.php

1	http://localhost:8000/tests/get.php

起動後のGET時

テキストボックスに’abc’と入れて送信した結果が以下の通り。

開始しました
$_SERVER['REQUEST_METHOD'] === 'GET'を確認しました
$_GETはセットされています(要素数：1)
$_GET['get_input']はセットされています
$_GET['get_input']の内容は'abc'です

開始しました

$_SERVER['REQUEST_METHOD'] === 'GET'を確認しました

$_GETはセットされています(要素数：1)

$_GET['get_input']はセットされています

$_GET['get_input']の内容は'abc'です

このときブラウザーでのURL表示は以下のとおり。ファイル位置の後ろに?でパラメーターが加えられている。

http://localhost:8000/tests/get.php?get_input=abc

1	http://localhost:8000/tests/get.php?get_input=abc

なお、上記の実行後にはテキストボックスの内容は空になっている。

再度GETの実行時

開始しました
$_SERVER['REQUEST_METHOD'] === 'GET'を確認しました
$_GETはセットされています(要素数：1)
$_GET['get_input']はセットされています
$_GET['get_input']の内容は''です

開始しました

$_SERVER['REQUEST_METHOD'] === 'GET'を確認しました

$_GETはセットされています(要素数：1)

$_GET['get_input']はセットされています

$_GET['get_input']の内容は''です

このときのブラウザーでのURL表示は以下のとおり。

http://localhost:8000/tests/get.php?get_input=

1	http://localhost:8000/tests/get.php?get_input=

リロード時

ブラウザーのリロードで再読み込みをすると、最後に表示されていたURLのままでリロードされ、同じ結果が表示される。

?以降のパラメーター部分を消してリロードしても、元のパラメーターが付加されたURLに戻ってしまう。

パラメーター部分を消してENTER、つまり直接URLを入力すれば初期状態からスタートする。

改竄に対して

上記コードで、Chromeの検証ツールでinput要素のname属性を改竄した場合、元のisset($_GET['get_input'])が存在しなくなるのでチェックが必要。

開始しました
$_SERVER['REQUEST_METHOD'] === 'GET'を確認しました
$_GETはセットされています(要素数：1)

開始しました

$_SERVER['REQUEST_METHOD'] === 'GET'を確認しました

$_GETはセットされています(要素数：1)

まとめ

処理の流れ

初回起動時

ファイルを最初に実行する場合はGETメソッド
初期起動時の$_GETは要素数0の配列

フォームからのGETメソッド

その後フォームからGETメソッドが実行されると、INPUT要素の内容がURLのパラメーターに付加されてページの最初から実行される

リロード時

ブラウザー機能でリロードしただけではURLはリフレッシュされず、直前のパラメーターで再実行される

GETのみの場合

処理全体を通してGETメソッドのみの場合、$_SERVERによるチェックは不要になる。

GET処理とPOST処理を併用する場合は、GET処理を切り分ける必要がある。

action属性

form要素のaction属性をaction="./get.php"と設定しても、リロード時には元のパラメーターが復活する。この属性はGETメソッドを指定したそのフォームからの送信でないと効果がない。

HTML5 – select～リスト選択

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

概要

select要素は、セレクトボックス、リストボックス、ドロップダウンリストなどと呼ばれ、複数項目の中からユーザーが1つあるいは複数の項目を選択し、スクリプトがそれを利用する。

たとえば上のselect要素は、HTMLでは以下のように書いている。select要素はoption要素を項目分だけ子要素に持つ。option要素のvalue属性は、スクリプトから参照されたときに得られる値。

<select>
  <option value="bloodtype_a">A型</option>
  <option value="bloodtype_b">B型</option>
  <option value="bloodtype_o">O型</option>
  <option value="bloodtype_ab">AB型</option>
</select>

</select>

属性

multiple

select要素にmultiple属性を指定すると、複数要素を選択できるようになる。多くのブラウザーでは形状がリストボックスになり、CTRLキーやSHIFTキーを押しながら2つ以上の要素を選択可能となる。

<select multiple>
  <option value="soup">スープ</option>
  <option value="salad">サラダ</option>
  <option value="pasta">パスタ</option>
  <option value="meet">肉料理</option>
  <option value="fish">魚料理</option>
</select>

</select>

selected

option要素にselected属性を付けると、その選択肢が選択状態になる。multiple属性を指定しない場合に複数のoption要素にselectedを指定した場合、最後に近い方の要素が選択される。

<select>
  <option value="bloodtype_a">A型</option>
  <option value="bloodtype_b" selected>B型</option>
  <option value="bloodtype_o" selected>O型</option>
  <option value="bloodtype_ab">AB型</option>
</select>

</select>

multiple属性を指定した場合は、selectedを指定したすべてのoption要素が選択される。

<select multiple>
  <option value="soup">スープ</option>
  <option value="salad" selected>サラダ</option>
  <option value="pasta">パスタ</option>
  <option value="meet" selected>肉料理</option>
  <option value="fish">魚料理</option>
</select>

</select>

実装例

JavaScript、JQueryによる基本形

Tips – リストのマーカーを画像に

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

list-style-imageによる方法

直感的で簡明な方法。ただしマーカーの画像の位置やサイズの調整が細やかにできない難点がある。

HTML

    <ul class="list_style">
      <li>いぬ</li>
      <li>さる</li>
      <li>きじ</li>
    </ul>

</ul>

CSS

ul.list_style {
  list-style-image: url("./triangle.png");
}

ul.list_style {

list-style-image: url("./triangle.png");

}

背景画像による方法

手数が多くなるが、画像の位置やサイズの調整を細やかに調整できる。大まかな手順は以下の通り。

ulで
- list-styleを消す
- マーカーを含めた適切なインデント位置にするため、paddingを設定する
liで
- backgroundやbackground-imageで画像ファイルを読み込む
- no-repeat指定
- positionは左からの距離と上からの距離が標準
- マーカーとテキストが重ならないようにpaddingを設定

HTML

    <ul class="background">
      <li>いぬ</li>
      <li>さる</li>
      <li>きじ</li>
    </ul>

</ul>

CSS

ul.background {
  padding-left: 20px;
  list-style: none;
}

ul.background li {
  background-image: url("./triangle.png");
  background-repeat: no-repeat;
  background-position: 0px 5px;
  padding-left: 20px;
}

ul.background {

padding-left: 20px;

list-style: none;

}

ul.background li {

background-image: url("./triangle.png");

background-repeat: no-repeat;

background-position: 0px 5px;

padding-left: 20px;

}

Tips – 間にだけ仕切り線を引く

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

概要

たとえば縦に並んだリストの要素間だけに横の境界線を引いたり、横に並んだ要素の左右以外の間にだけ縦の境界線を引きたい場合。

隣接セレクターを使う方法

以下の例は、li要素に対して隣接セレクター（隣接兄弟結合子：adjacent sibling combinator）を利用している。

HTML

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

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

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

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

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

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

</ul>

CSS

ul {
  list-style-type: none;
}

.adjacent li + li span {
  border-top: solid 1px #000;
}

ul {

list-style-type: none;

}

.adjacent li + li span {

border-top: solid 1px #000;

}

隣接セレクターは、セレクターAとセレクターBを'+'結合子でつなぐ。そうすると、BのうちAの直後に置かれたもののみにスタイルが適用される。

上の例では、先頭のli要素にはその前のli要素がないのでスタイルが適用されない。2番目以降のli要素には直前のli要素があるので上線が引かれる。その結果、最初のli要素の上側と最後のli要素の下側には線が引かれず、li要素間にのみ線が引かれることになる。

なお上の例では、

adjacentクラスの中のli要素にのみ対象としている
ブロック要素であるliの中にインライン要素のspanを置き、そのspanに対して上線を引いている

疑似クラスを使う方法

疑似クラスを使って以下のようにしても実現できる。

全ての要素に上線を引く
最初の要素だけ境界なしとしてオーバーライド

HTML

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

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

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

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

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

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

</ul>

CSS

.pseudo li span {
  border-top: solid 1px #00f;
}

.pseudo li:first-child span {
  border: none;
}

.pseudo li span {

border-top: solid 1px #00f;

}

.pseudo li:first-child span {

border: none;

}

この方法は、一旦全要素に線を引いてから1つ目を消すという2度手間になっている。

なお、上線とfirst-childの代わりに下線とlast-childでも同様のことが実現できる。

クラスを使う方法

ブラウザーによって隣接セレクターや疑似クラスが使えない場合は、最初か最後のli要素にクラスを指定して、疑似クラスと似たような方法で線を消す。

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>