お問い合せフォームのレスポンシブ化
お問い合せフォームのレスポンシブ化
今夜のレッスンではお問い合せフォームのテーブルタグを
スタイルシート（CSS）を使ってレスポンシブ化する方法を
扱いました。
お問い合せフォームのような「表」はHTMLの作法に照らすと
テーブルタグで書くべきところです。
テーブルタグとは、縦何行、横何列という表（テーブル）の
表示に特化したタグです。
ところがテーブルタグそのままだと、スマホのように画面の
サイズが狭いデバイスで表示したとき、表が入りきらずに
左右にギュッと縮んでしまいます。
すると、各列の中にある入力欄が表の外へはみ出したり、
見出しのラベルが折り返してしまったり、
入力欄が極端に狭くなって入力し辛くなったり、
いろんな弊害が生じます。
画面の横幅が一定のサイズ以下になったときに、
表の列を横並びから縦並びに切り替えるのです。
───────────────────
お名前 (必須)
───────────────────
[ ]
───────────────────
メールアドレス (必須)
───────────────────
[ ]
───────────────────
こんなイメージです。
縦にすれば、入力欄が狭すぎることもありませんし
見出しが折り返す心配もなくなります。
具体的な方法
まず、メディアクエリの文法を使って特定の画面サイズ以下の場合だけ
適用されるスタイルシート（CSS）の記述欄を用意します。
@media (max-width: 600px) { ここに書く }
次に、問い合せフォームのHTMLを構成するテーブルタグを指し示し、
セルの表示形式（display属性）を変更します。
@media (max-width: 600px) { table.contact th,table.contact td { display: block; } }
枠線やセルの背景色などを装飾するスタイルシート（CSS）も追加
しないと見た目がイマイチですが、本質的な「縦並び化」は上記の
コードでOKです。
ここで抑えておきたいHTMLとCSSの基礎知識
HTMLには<table>や<div>の他、たくさんの種類のタグがありますが、
タグによってブラウザでの表示のされ方が違います。
<table>タグの内側に書く<th>や<td>は表の1つ1つのセルを
表しますが、同じ行の中に書き並べると必ず横方向に並びます。
これは、<th>タグと<td>タグだから横方向に並んで表示されるのではなく、
タグの表示のされ方を決定する「display」属性が、<th>タグと<td>タグの場合
「table-cell」という初期値になっているからです。
この初期値はあらかじめHTMLの仕様として規定されているので、
サイトを作る人がわざわざスタイルシート（CSS）に書かなくても
全てのブラウザが初期値として自動的に割り当ててくれます。
（だから、この仕組みに気付きにくいのです）
つまりブラウザは、それぞれのHTMLタグにどの「display」属性が
割り当ててあるかによって画面への表示（レンダリング）方法を判断しているのです。
ちなみに<div>タグの「display」属性は初期値が「block」です。
「block」が指定されたタグは、縦幅と横幅の概念を帯び、HTMLに記述された順番に
上から下へとピッタリ並んで表示されます。それがブラウザの仕様です。
なので、<th>や<td>の「display」属性を「block」に変更すれば、
<div>タグと全く同じように縦並びに変わるというわけです。
裏ワザでもなんでもありません。
原理原則に則った正当な方法です。
完全マンツーマンのオンラインレッスンのご案内
リクルート社が運営するスキルアップサイト「教える学べる」3つ星講師です。
≫ ページ内の「先生に聞いてみる」ボタンでお気軽にご相談ください
※平日の夜は予約が埋まりやすいのでお早めにご相談ください。
※Facebookでもプログラミング＆コーディングの本質を投稿しています。
Facebook（友達限定のプライベート投稿で本質的な情報発信中）
