以下のような入力フォームと確認画面を作りなさい。
・お名前は必須項目
・興味がある科目は複数選択可
・生まれ年は1945年～2000年までの設定
入力画面
確認画面
PHPでの配列
配列はJavascriptでも出て来ましたが、まずは配列の特性を復習しましょう。
通常、変数は１つの値しか入れる事が出来ず、新しい値を入れると上書きされてしまいます。
一方、配列ではひとつの箱に複数の値を入れることができます。データベースと連動させる事の多いPHPではこの配列の使い方が非常に重要になってきます。
arrayを使った配列
<?php $color = array('red', 'blue', 'green'); echo $color[0]; ?>
arrayを使わないやり方
<?php $color[0] = 'red'; $color[1] = 'blue'; $color[2] = 'green'; echo $color[1]; ?>
配列に入っている値をすべて表示させる
配列に入っている値をすべて表示させたい場合、1つ1つ「echo文」で表示させる事は可能ですが、プログラム的には正しくありません。
配列の値を「あるだけすべて表示させたい」場合、便利なのが「foreach文」です。
foreach文は、配列の要素がある分だけ繰り返し処理するという内容の文です。
<?php $color = array('red', 'blue', 'green'); foreach($color as $value){ echo $value . '<br>'; } ?>
count関数
count関数を使っても、同じ事が出来ます。count関数を使うと、配列に入っている値の数が$countに代入されます。
<?php $color = array('red', 'blue', 'green'); $count = count($color); for ($i = 0; $i < $count; $i++) { echo "$color[$i]<br>"; } ?>
連想配列
配列には、変数の箱の中身に 0,1,2……と背番号のように番号を振り、その番号を指定することでデータを指定するという性質がありましたが、連想配列では、番号のかわりに名前をつけて管理することができます。
簡単に言うと配列は背番号（ID）でしか管理出来ないのに比べて、連想配列は好きに名前を付けて管理出来る利点があります。
配列変数名 = array( キー=>値1, キー=>値2, キー=>値3・・・);
<?php $color = array('red' => '真っ赤', 'blue' => '真っ青', 'green' => '新緑'); echo $color['blue']; ?>
<?php $present = array ( '長崎' => 'チャンポン', '名古屋' => '手羽先', '沖縄' => '泡盛' ); // キーを指定して、値を取得します echo $present['長崎']; echo '<br>'; // キーを指定して、値を取得します echo $present['名古屋']; echo '<br>'; // キーを指定して、値を取得します echo $present['沖縄']; echo '<br>';
連想配列を使う事でフォームのチェックボックスのように複数の解答があるような場合にも対応が出来ます。
<form action="sample.php" method="post"> <p>好きな色（複数回答可）: <input type="checkbox" name="color[]" value="black">黒 <input type="checkbox" name="color[]" value="red">赤 <input type="checkbox" name="color[]" value="blue">青 <input type="checkbox" name="color[]" value="green">緑 </p> <p><input type="submit" value="送信"></p> </form>
データを受け取る側のPHP
<?php echo '<p>好きな色: '; foreach( $_POST['color'] as $value ){ echo "{$value}, "; } echo '</p>'; ?>
GETとPOSTの違いと使い分け
PHPでは情報を別のデータに受け渡すときにGETとPOSTの２つの方法（メソッド）が使われます。
GET
GETメソッドはURLの末尾に「?」をつけ、「パラメーター名="値"」という形式でデータを送ります。
そのせいで、URLにデータが表示されてしまい、誰からでも見ることができます。なので、フォームやECサイトなどの個人情報を扱うデータ送信には向いていません。
また送ることのできるデータ量が制限されています。テキストデータのみ送信可能です。
Internet ExplorerではURLに使用できる文字数が2,083文字と決まっており、パスに使用できる最大文字数は2,048文字となっています。
GETメソッドはデータをURLの末尾につけて送るので、制限されることになります。
URLなどを送信したい場合はGETを使いましょう。
POST
POSTメソッドで送るデータはWebブラウザ上には現れないので、秘匿性の高いデータやデータベースなど重要度の高いデータは必ずPOSTメソッドを使いましょう。
また、送ることの出来るデータ量も特に明確な制限があるわけでは無いので、大量のデータを送る際も必ず、POSTメソッドを使いましょう。
なので、基本的にはデータ送信の際のメソッドはPOSTと覚えておきましょう。
POSTの使い方
データを送信する方の設定
<form action="output.php" method="post">
データを受け取る側の設定
$name = htmlspecialchars( $_POST[ 'name' ], ENT_QUOTES, 'UTF-8' );
ENT_QUOTES
シングルクオートとダブルクオートを共に文字列に変換します。
POSTを使ったフォーム
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>フォームに入力した内容を取得する</title> <style> dt { float:left; width:200px; margin-right:30px; } dt,dd { margin-bottom:20px; } </style> </head> <body> <h1>フォームに入力した内容を取得する</h1> <form action="output.php" method="post"> <dl> <dt><label for="name">お名前：</label></dt> <dd><input type="text" name="name" id="name" size="20" maxlength="10" placeholder="山田太郎" required> </dd> <dt>性別：</dt> <dd> <input id="gender_male" type="radio" name="gender" value="男性" checked><label for="gender_male">男性</label> <input id="gender_female" type="radio" name="gender" value="女性"><label for="gender_female">女性</label> </dd> <dt><label for="message">お問い合わせ内容：</label></dt> <dd><textarea name="message" id="message" cols="50" rows="4"></textarea></dd> </dl> <input type="submit" value="送信する"> </form> </body> </html>
データを受け取る方のファイル（PHP）
<?php $name = htmlspecialchars( $_POST[ 'name' ], ENT_QUOTES, 'UTF-8' ); $gender = htmlspecialchars( $_POST[ 'gender' ], ENT_QUOTES, 'UTF-8' ); $message = htmlspecialchars( $_POST[ 'message' ], ENT_QUOTES, 'UTF-8' ); ?> <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>入力データの確認</title> </head> <body> <dl> <dt> お名前：</dt> <dd><?php echo $name; ?></dd> <dt> 性別：</dt> <dd><?php echo $gender; ?></dd> <dt> メッセージ：</dt> <dd><?php echo $message; ?></dd> </dl> </body> </html>
レスポンシブデザイン グリッドレイアウト
グリッドレイアウトとは
グリッドとは「格子状の」という意味がありますが、画面をいくつかのサイズのブロックで組み合わせ、コンテンツを配置していく画面設計手法のひとつです。元々紙媒体でよく使われたレイアウト方法ですが、Webでもレスポンシブデザインとの親和性が高く、最近よく見かけるレイアウトの1つです。
グリッドデザインを使用しているサイト
firadis.net
今回のパターンはブレイクポイントごとにカラム落ちしていくパターンで、
PCでは３カラム
タブレットでは２カラム
スマホでは１カラム
になるレイアウトです。
通常、レスポンシブレイアウトは幅などに固定値を使用せず、フルード化（可変）していきますが、今回のようにカラムの中の大きさが変わらない場合はフルードレイアウトとは違い、横幅などが今までと同じように固定値を指定出来るので簡単に作る事が出来ます。
画面幅に合わせてカラムが落ちていくグリッドデザイン
和洋女子大学
PCレイアウト 3カラム（960px以上）
タブレットレイアウト 2カラム（959px～641px以下）
スマホレイアウト 1カラム（640px以下）
使用素材
http://yachin29.com/photoshop/okazu.zip
index.html
<!DOCTYPE HTML> <html lang="ja"> <head> <meta charset="utf-8"> <title>グリッドデザイン</title> <link rel="stylesheet" href="style.css"> </head> <body> <div id="container"> <div class="column"> <header> <h1>タイトル</h1> <nav> <ul> <li><a href="#"><img src="img/nav01_01.png" alt=""></a></li> <li><a href="#"><img src="img/nav02_01.png" alt=""></a></li> <li><a href="#"><img src="img/nav03_01.png" alt=""></a></li> <li><a href="#"><img src="img/nav04_01.png" alt=""></a></li> </ul> </nav> </header> <ul> <li><a href="#"><img src="img/ph01_l.jpg" alt=""></a></li> <li class="right"><a href="#"><img src="img/ph02_mt.jpg" alt=""></a></li> <li><a href="#"><img src="img/ph03_s.jpg" alt=""></a></li> <li><a href="#"><img src="img/ph04_s.jpg" alt=""></a></li> <li><a href="#"><img src="img/ph05_my.jpg" alt=""></a></li> <li><a href="#"><img src="img/ph06_s.jpg" alt=""></a></li> <li><a href="#"><img src="img/ph07_s.jpg" alt=""></a></li> </ul> </div> <div class="column"> <ul> <li><a href="#"><img src="img/ph08_my.jpg" alt=""></a></li> <li><a href="#"><img src="img/ph09_s.jpg" alt=""></a></li> <li><a href="#"><img src="img/ph10_s.jpg" alt=""></a></li> <li><a href="#"><img src="img/ph11_l.jpg" alt=""></a></li> <li><a href="#"><img src="img/ph12_s.jpg" alt=""></a></li> <li class="right"><a href="#"><img src="img/ph13_mt.jpg" alt=""></a></li> <li><a href="#"><img src="img/ph14_s.jpg" alt=""></a></li> <li><a href="#"><img src="img/ph15_l.jpg" alt=""></a></li> <li><a href="#"><img src="img/ph16_s.jpg" alt=""></a></li> <li><a href="#"><img src="img/ph17_s.jpg" alt=""></a></li> <li><a href="#"><img src="img/ph18_my.jpg" alt=""></a></li> </ul> </div> <div class="column third"> <ul> <li><a href="#"><img src="img/ph19_l.jpg" alt=""></a></li> <li><a href="#"><img src="img/ph20_s.jpg" alt=""></a></li> <li class="right"><a href="#"><img src="img/ph21_mt.jpg" alt=""></a></li> <li><a href="#"><img src="img/ph22_s.jpg" alt=""></a></li> <li><a href="#"><img src="img/ph23_s.jpg" alt=""></a></li> <li><a href="#"><img src="img/ph24_s.jpg" alt=""></a></li> <li><a href="#"><img src="img/ph25_my.jpg" alt=""></a></li> <li><a href="#"><img src="img/ph26_s.jpg" alt=""></a></li> <li><a href="#"><img src="img/ph27_s.jpg" alt=""></a></li> <li><a href="#"><img src="img/ph28_s.jpg" alt=""></a></li> <li><a href="#"><img src="img/ph29_s.jpg" alt=""></a></li> <li><a href="#"><img src="img/ph30_l.jpg" alt=""></a></li> </ul> </div> </div> <footer> <p><small>Copyright © 2017 ○○ All Rights Reserved.</small></p> </footer> </body> </html>
@charset "utf-8"; /* CSS Document */ html,body,h1,p,ul,li { margin:0; padding:0; line-height:1.0; } ul { list-style:none; } a { text-decoration:none; } img { vertical-align:bottom; } /*PCレイアウト*/ #container { width:960px; margin:10px auto; overflow:hidden; } h1 { width:300px; height:300px; background:url(img/logo01.png) no-repeat; text-indent:100%; white-space:nowrap; overflow:hidden; } .column { width:320px; float:left; } h1,li { float:left; margin:10px; } li.right { float:right; } footer { width: 100%; height: 100px; background: #281605; } footer p { text-align: center; color: #FFF; font-size: 18px; line-height: 100px; } footer#sp { display:none; } /*タブレットレイアウト*/ @media screen and (max-width:959px){ #container { width:640px; } .third { width:640px; } footer#sp { display:block; width:300px; height:300px; background: #281605; float:left; margin:10px; } footer#pc { display:none; } } /*スマホレイアウト*/ @media screen and (max-width:640px){ #container { width:320px; } .third { width:320px; } }
Cotorier CafeのPCレイアウト
各要素のレイアウトが上手くいかない場合は背景色を入れて可視化したり、webデベロッパーツールで要素を可視化出来るようにしましょう。
コーディング例
HTML
<!DOCTYPE HTML> <html lang="ja"> <head> <meta charset="utf-8"> <title>Cotorier Cafe</title> <meta name="viewport" content="width=device-width"> <link rel="stylesheet" href="css/style.css"> </head> <body> <div id="container"> <header> <h1>Cotorier Cafe</h1> <p class="text">毎日のおいしいごはんとおまけをすこし</p> <p class="logo"><img src="img/logo.jpg" alt=""></p> <nav> <ul> <li><a href="#">お店のこと</a></li> <li><a href="#">メニュー</a></li> <li><a href="#">アクセス</a></li> </ul> </nav> </header> <div id="main"> <div id="mainText"> <h2>毎日食べたい、<br>おうちみたいなごはんやおやつ</h2> <p class="textInfo">Cotorier Cafe（コトリエ カフェ）は、あなたのもうひとつの「おうち」に なりたいごはんやさんです。毎日食べたくなるような、どこかホッとする ごはんにおやつ、飲みものを揃えて、ゆっくりくつろげる空間でお迎えし ます。気軽なおひるごはんに、お茶の時間に、会社帰りの晩ごはんに、 「ただいま」を心よりお待ちしています。</p> <p id="mainShop"><a href="#">お店について</a></p> </div> <p id="mainImg"><img src="img/main.jpg" alt=""></p> </div> <div id="menu"> <h3>おすすめメニュー</h3> <p id="all"><a href="#">すべてのメニュー</a></p> <div id="menuPhoto"> <div class="menuFood"> <h4>日替わりごはんセット</h4> <p class="photo"><img src="img/photo1.jpg" alt="#"></p> <p class="photoText">春野菜とあさりのチャウダー豆としらすのごはん、新ごぼうのきんぴら</p> </div> <div class="menuFood"> <h4>週替わりカレー</h4> <p class="photo"><img src="img/photo2.jpg" alt="#"></p> <p class="photoText">甘辛たけのこカレー ゆでたまごつき</p> </div> <div class="menuFood"> <h4>季節のおやつ</h4> <p class="photo"><img src="img/photo3.jpg" alt="#"></p> <p class="photoText">西か東か！さくらもち食べ比べ対決セット</p> </div> <div class="menuFood"> <h4>ひとくち晩酌</h4> <p class="photo"><img src="img/photo4.jpg" alt="#"></p> <p class="photoText">今だけ！いちごごろごろサングリア</p> </div> </div> </div> <div id="info"> <div id="infoShop"> <h3>お店からのお知らせ</h3> <dl> <dt>■ 2016-12-14</dt> <dd>年末年始の営業について</dd> <dt>■ 2016-11-21</dt> <dd>今週の日替わりメニュー（11/21 - 11/27)</dd> <dt>■ 2016-11-14</dt> <dd>今週の日替わりメニュー（11/14 - 11/20）</dd> <dt>■ 2016-11-10</dt> <dd>冬限定のおやつがスタートしました！</dd> </dl> </div> <div id="sns"> <p>こちらもどうぞ</p> <ul> <li><a href="#">Facebook</a></li> <li><a href="#">Twitter</a></li> <li><a href="#">Pinterest</a></li> <li><a href="#">Blog</a></li> </ul> </div> </div> <div id="access"> <h3>店舗情報</h3> <p><a href="#">地図・アクセス方法</a></p> <dl> <dt>住所</dt> <dd>東京都杉並区高円寺南7丁目7-4 ことりやビル２F<br>(東京メトロ丸ノ内線新高円寺駅から徒歩7分)</dd> <dt>電話</dt><dd>03-0000-0000</dd> <dt>営業時間</dt><dd>11:00 - 23:30（L.O. 23:00）<br>ランチタイム：11:00 - 15:00（L.O. 14:30）</dd> <dt>定休日</dt><dd>日曜日・祝日</dd> </dl> </div> <footer> <p><small>Copyright© Cotorier Cafe. All rights Reserved.</small></p> </footer> </div> </body> </html>
@charset "utf-8"; /* CSS Document */ /*reset*/ html, body, div, h1, h2, h3, h4, p, ul, li, dl, dt, dd { margin:0; padding:0; line-height:1.0; font-family:"Hiragino Kaku Gothic ProN", Meiryo, sans-serif; } a { text-decoration:none; color:#222; } ul { list-style:none; } img { border:0; vertical-align:bottom; } /*PCレイアウト*/ #container { width: 960px; margin:0 auto; position: relative; } header { background: #F9E4C0; overflow:hidden; padding-top: 10px; } header h1 { font-size:30px; position: absolute; top: 50px; left: 100px; } header .text{ font-size: 14px; position: absolute; top: 30px; left: 100px; } header .logo { position:absolute; top:20px; left:20px; } header nav { float: right; margin: 0 10px 10px 0; } header ul { overflow: hidden; } header li { float: left; margin-right: 20px; } header li:last-child { margin-right:0; } header li a { display: block; width:140px; height:80px; background:#FFF9CC; text-align: center; line-height: 80px; } /*メイン部分*/ #main { overflow: hidden; padding-top: 40px; } #mainText { width:600px; float: left; } h2 { font-size: 40px; font-weight:normal; line-height: 1.6; } .textInfo { line-height:1.6; margin-bottom: 20px; } p#mainImg { width: 300px; float: right; margin-top: 30px; } #mainShop a { display: block; width:500px; height:60px; background:#FFF9CC; border: 1px #333 solid; box-sizing: border-box; margin-bottom: 40px; text-align: center; line-height:60px; font-size:20px; } /*メニュー部分*/ #menu { background:#FFE380; overflow: hidden; } #menu h3 { width:320px; float: left; font-size: 36px; margin: 20px 10px 40px 10px; font-weight: normal; } #all { margin: 20px 10px 10px 0; } #all a { display: block; float: right; background:#FFC; width:220px; height:50px; text-align:center; line-height:50px; } #menuPhoto { overflow: hidden; clear: both; } #menu h4 { text-align: center; font-size:18px; font-weight:normal; margin-bottom: 10px; } .menuFood { float: left; width:220px; margin:10px; } .photo img { border-radius: 20px; } .photoText { margin: 10px 0 30px 0; line-height: 1.5; } /*お知らせ部分*/ #info { overflow: hidden; padding-top: 40px; } #info h3 { font-size:28px; font-weight: normal; margin-bottom: 30px; } #infoShop { float: left; width: 440px; margin:0 0 30px 10px; } #info dt { float: left; clear:both; } #info dd { margin-left:30px; margin-bottom: 20px; } #sns { float: right; width:480px; overflow:hidden; } #sns p { font-size:28px; text-align: center; margin-bottom: 10px; } #sns li { float: left; margin: 10px; } #sns li a { display: block; width:220px; height:60px; border-radius: 8px; background: #FFCC66; line-height: 60px; text-align:center; } /*アクセス部分*/ #access { background: #FACFB3; padding: 10px; } #access h3 { font-size: 28px; margin-top: 20px; font-weight: normal; width:120px; float: left; } #access p { width:190px; height: 40px; background: #FFC; float: left; margin:10px 0 40px 40px; } #access p a { display:block; text-align:center; line-height:40px; } #access dl { clear: both; overflow: hidden; margin-bottom: 30px; } #access dt, #access dd { float: left; line-height: 1.6; } #access dt { width: 80px; height: 70px; } #access dd { width: 380px; height: 70px; } /*フッター部分*/ footer { background: #FFF683; height:60px; text-align:center; } footer p { line-height: 60px; font-size: 18px; }
覚えると便利なnth-child()
これまでの授業でもCSS3の疑似クラス「:nth-child(odd)」「:nth-child(even)」や「:nth-child(3)」は使って来ましたが、（）の内に数式を入れる事で非常に便利になります。
「:nth-child(2n+1)」= 「:nth-child(odd)」（奇数のみ指定）
計算式
n=0: 2*0+1= 1 = nth-child(1)
n=1: 2*1+1= 3 = nth-child(3)
n=2: 2*2+1= 5 = nth-child(5)
「:nth-child(2n)」= 「:nth-child(even)」（偶数のみ指定）
「:nth-child(3n)」= （3の倍数のみ）
「:nth-child(3n+2)」= （2番目から3つずつ）
「:nth-child(n+3)」= （3番目から全部）
「:nth-child(-n+3)」= （3番目まで全部）
nth-child()とnth-of-type()の違い
「nth-child」と「nth-of-type」の違いと使いわけをしっかりと理解しましょう。
E:nth-child(n)
親要素のn番目の子要素であるE要素ということになります。「nth-child」の使い方は授業でも度々やっているので、問題ないと思います。
E:nth-of-type(n)
問題は「nth-of-type」の方です。親要素内で同じE要素内でn番目のものということになります。
言葉にすると判り難い部分もあるので、実際にコーディングしてみましょう。
それぞれの奇数列だけ、文字色を変えてみましょう。
<ul> <li>リスト１</li> <li>リスト２</li> <li>リスト３</li> <li>リスト４</li> <li>リスト５</li> </ul>
<dl> <dt>リスト１</dt><dd>リスト１の説明</dd> <dt>リスト２</dt><dd>リスト１の説明</dd> <dt>リスト３</dt><dd>リスト１の説明</dd> <dt>リスト４</dt><dd>リスト１の説明</dd> <dt>リスト５</dt><dd>リスト１の説明</dd> </dl>
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>dlを可変</title> <meta name="viewport" content="width=device-width"> <link rel="stylesheet" href="0809.css"> </head> <body> <div id="News_area"> <div id="News_release"> <h2 id="News_click">ニュースリリース</h2> <dl id="News_text"> <dt>2016年8月5日</dt><dd>[スプリングバレーブルワリー東京（代官山）限定]「サワーバケーション」を新発売</dd> <dt>2016年8月3日</dt><dd>「プードゥ スパークリング」を新発売</dd> <dt>2016年8月3日</dt><dd>「キリン 午後の紅茶 大人のこだわりミルクティー」9月6日（火）期間限定で新発売</dd> <dt>2016年8月3日</dt><dd>「淡麗プラチナダブル」の中味・パッケージともにリニューアル</dd> <dt>2016年8月3日</dt><dd> ディズニーの仲間たちによる夢のパーティーへご招待！「東京ディズニーリゾート(R)・ドリームパーティーキャンペーン」9月12日（月）より全国で実施</dd> <dt>2016年8月2日</dt><dd> 「シャトー・メルシャン 桔梗ヶ原メルロー 2012」、「同 北信シャルドネRDC千曲川右岸収穫 2015」が金賞・部門最高賞を受賞</dd> <dt>2016年8月1日</dt><dd>「シャトー・メルシャン」シリーズの新ヴィンテージを発売</dd> </dl> </div><!--/#News_release--> </div><!--/#News_area--> </body> </html>
@charset "utf-8"; /* CSS Document */ /* reset */ html, body, div, h1, h2, h3, h4, h5, h6,p, blockquote, pre, address,ul, ol, li, dl, dt, dd,table, th, td, form, fieldset { margin: 0; padding: 0; line-height: 1.0; font-family: "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; } ul { list-style: none; /* マーカーを消す */ } a { text-decoration: none; /* 下線を消す */ color: #222; } img { border: none; } img, input { vertical-align: bottom; } #News_area { width:960px; margin:50px auto 0; overflow: hidden; } #News_release { width:720px; float:left; } #News_area h2 { margin-bottom:20px; } dl#News_text { width:100%; overflow: hidden; } #News_text dt, dd { font-size: 12px; line-height: 22px; } #News_text dt { width:16%; text-align: center; float: left; padding: 10px 0; } #News_text dd { width:80%; padding:10px 2%; } #News_text dt:nth-of-type(odd), dd:nth-of-type(odd) { background: #999; }
