PHP – GETの流れ

概要

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

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

確認コード

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

HTML

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

PHP本体

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

結果

初期起動時

HTMLの表示は以下の通り。

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

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

起動後のGET時

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

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

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

再度GETの実行時

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

リロード時

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

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

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

改竄に対して

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

まとめ

処理の流れ

初回起動時

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

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

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

リロード時

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

GETのみの場合

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

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

action属性

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

 

HTML5 – select~リスト選択

概要

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

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

属性

multiple

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

selected

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

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

実装例

 

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

list-style-imageによる方法

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

HTML

CSS

背景画像による方法

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

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

HTML

CSS

 

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

概要

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

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

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

HTML

CSS

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

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

なお上の例では、

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

疑似クラスを使う方法

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

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

HTML

CSS

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

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

クラスを使う方法

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

 

 

CSS3 – 疑似クラス

概要

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

書式

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

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

コロンは1つ。

主な疑似クラス

:hover

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

HTML

CSS

:first-child/:last-child

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

HTML

CSS

:nth-child()

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

nth-child(i)

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

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

HTML

CSS

even/odd

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

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

HTML

CSS

関数形(xn+y)

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

HTML

CSS

 

CSS3 – 疑似要素

概要

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

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

書式

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

または

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

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

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

主な疑似要素

::after

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

HTML

CSS

::before

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

HTML

CSS

::first-letter

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

HTML

CSS

::first-line

HTML

CSS

 

CSS3 – flex

概要

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

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

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

書式

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

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

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

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

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

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

実行例

均等配置

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

HTML

CSS

実行結果

比率指定

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

HTML

CSS

結果

CSS3 – float

概要

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

書式

float: left/right;

clear: left/right/both;

block要素は縦に並ぶ

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

HML

CSS

結果

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

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

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

HTML

CSS

 

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

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

左寄せと右寄せ

CSS

その他の挙動

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

“float”の意味

floatはfixの影響を受ける

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

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

HTML

CSS

結果

fixはfloatを(ほぼ)認識しない

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

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

HTML

CSS

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

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

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

CSS

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

CSS

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

clearによるfloatの解除

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

HTML

CSS

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

 

CSS3 – floatの挙動について

概要

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

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

float要素は横に並ぶ

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

CSS

結果

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

css

結果

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

CSS

結果

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

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

結果

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

CSS

結果

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

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

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

【注】

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

HTML

CSS

結果

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

CSS

結果

確かに。

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

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

CSS

結果

leftとrightは同格か

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

HTML

 

CSS

結果

混乱

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

CSS

結果

これまでの想定だと、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

概要

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

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

書式

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

属性

for属性

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

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

  • ただのテキスト: