問1
現在の年月日・時刻をPHPで記述し、ブラウザに表示させなさい
問2
数字「1」から「10」までの数字を、ブラウザにランダムに表示させなさい
問3
九九の表をPHPで繰り返し文で記述し、ブラウザに表示させなさい
<!DOCTYPE HTML> <html lang="ja"> <head> <meta charset="utf-8"> <title>スクロールすると固定になるナビ</title> <meta name="viewport" content="width=device-width"> <link rel="stylesheet" href="css/nav.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> <script src="nav2.js"></script> </head> <body> <div id="container"> <header> <a href="#"><h1>Bloomingville</h1></a> <nav> <p id="btn"><span id="hum"></span></p> <ul> <li><a href="#">Home</a></li> <li><a href="#">Shop</a></li> <li><a href="#">Collections</a></li> <li><a href="#">Design philosophy</a></li> <li><a href="#">Press</a></li> <li><a href="#">About</a></li> </ul> </nav> </header><!--/header--> <div id="content"></div> </div> </body> </html>
@charset "utf-8"; /* CSS Document */ /* reset */ html, body, div, h1, h2, h3, h4, h5, h6,p,ul, ol, li { 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; /* 下線を消す */ } img { border: 0; vertical-align: bottom; } #container { background:#f0ede7; } header { width:100%; padding-top: 30px; background:#e4dfd6; } header > a { display: block; width: 500px; margin: 0 auto; } h1 { background: url(../img/logo.svg) no-repeat center center/contain; height: 100px; text-indent: 100%; white-space: nowrap; overflow: hidden; margin-bottom: 30px; display: block; } nav { width:100%; height: 50px; background:#f0ede7; transition:0.1s; } nav ul { width:70%; margin:0 auto; overflow: hidden; } nav li { float:left; width:calc(100% / 6); } nav li a { display: block; padding-top:20px; padding-bottom:16px; font-size: 14px; text-align:center; color:#222; } nav li a:hover { border-bottom: 4px solid #96F; padding-bottom:12px; } #content { height: 2000px; background: #D9C0BC; } /*ナビゲーションのスクロール*/ header.fixed > #nav { position:fixed; left:0; top:0; } header.fixed h1 { background:url(../img/logo-small.svg) no-repeat center center/contain; width: 140px; height: 50px; position: fixed; left: 20px; top: 0; z-index: 100; } @media screen and (max-width:767px){ header { width:100%; height: 40px; background:#e4dfd6; position: fixed; top: 0; left: 0; padding: 10px 10px 10px 0; } header > a { display: block; width: 200px; float: right; } h1 { background:url(../img/logo-small.svg) no-repeat center center/contain; height: 40px; margin-bottom: 0; } nav { background:#e4dfd6; } #btn { width: 40px; height: 40px; border: 1px solid #000; border-radius: 4px; position: relative; margin-left: 20px; } #hum { display: block; width: 30px; height: 2px; background: #000; position: absolute; top:0; right: 0; bottom: 0; left: 0; margin: auto; transition: 0.2s; } #hum:before { display: block; content: ""; width: 30px; height: 2px; background: #000; position: absolute; top:-20px; right: 0; bottom: 0; left: 0; margin: auto; transition: 0.2s; } #hum:after { display: block; content: ""; width: 30px; height: 2px; background: #000; position: absolute; top:0; right: 0; bottom: -20px; left: 0; margin: auto; transition: 0.2s; } #hum.click { background: transparent; } #hum.click:before { top:0; transform: rotate(45deg); } #hum.click:after { bottom: 0; transform: rotate(135deg); } nav ul { width:100%; position: fixed; top: 60px; padding-left: 10px; background:#f0ede7; display: none; } nav li { float:none; width:100%; line-height: 30px; } nav li a { text-align:left; } nav li a:hover { border-bottom: none; padding-bottom:0; } header.fixed h1 { display: none; } }
// JavaScript Document $(function() { if(window.innerWidth > 767){ $(window).scroll(function() { if ($(window).scrollTop() > 10) { $('header').addClass('fixed').slideDown(900); } else { $('header').removeClass('fixed'); } }); } $('#btn').on('click touchstart',function(){ $('#hum').not(':animated').toggleClass('click'); $('nav ul').not(':animated').slideToggle(200); }); });
修正後のjQuery
// JavaScript Document $(function() { if(window.innerWidth > 767){ var $header = $('header'); $(window).scroll(function() { if ($(window).scrollTop() > 160) { $header.addClass('fixed'); } else { $header.removeClass('fixed'); } }); } $('#btn').on('click touchstart',function(){ if($(window).innerWidth() <= 767){ $('#hum').not(':animated').toggleClass('click'); $('nav ul').not(':animated').slideToggle(200); }; }); $(window).resize(function(){ $('nav ul').hide();//スマホの時 if($(window).innerWidth() > 768){ $('nav ul').show();//タブレット以上の時 $('#hum').removeClass('click');//PCから戻る時に邪魔な.clickを削除するため } }); });
以下のような入力フォームと確認画面を作りなさい。
・お名前は必須項目
・興味がある科目は複数選択可
・生まれ年は1945年~2000年までの設定
入力画面
確認画面
配列はJavascriptでも出て来ましたが、まずは配列の特性を復習しましょう。
通常、変数は1つの値しか入れる事が出来ず、新しい値を入れると上書きされてしまいます。
一方、配列ではひとつの箱に複数の値を入れることができます。データベースと連動させる事の多いPHPではこの配列の使い方が非常に重要になってきます。
<?php $color = array('red', 'blue', 'green'); echo $color[0]; ?>
<?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に代入されます。
<?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>'; ?>
PHPでは情報を別のデータに受け渡すときにGETとPOSTの2つの方法(メソッド)が使われます。
GETメソッドはURLの末尾に「?」をつけ、「パラメーター名="値"」という形式でデータを送ります。
そのせいで、URLにデータが表示されてしまい、誰からでも見ることができます。なので、フォームやECサイトなどの個人情報を扱うデータ送信には向いていません。
また送ることのできるデータ量が制限されています。テキストデータのみ送信可能です。
Internet ExplorerではURLに使用できる文字数が2,083文字と決まっており、パスに使用できる最大文字数は2,048文字となっています。
GETメソッドはデータをURLの末尾につけて送るので、制限されることになります。
URLなどを送信したい場合はGETを使いましょう。
POSTメソッドで送るデータはWebブラウザ上には現れないので、秘匿性の高いデータやデータベースなど重要度の高いデータは必ずPOSTメソッドを使いましょう。
また、送ることの出来るデータ量も特に明確な制限があるわけでは無いので、大量のデータを送る際も必ず、POSTメソッドを使いましょう。
なので、基本的にはデータ送信の際のメソッドはPOSTと覚えておきましょう。
データを送信する方の設定
<form action="output.php" method="post">
データを受け取る側の設定
$name = htmlspecialchars( $_POST[ 'name' ], ENT_QUOTES, 'UTF-8' );
シングルクオートとダブルクオートを共に文字列に変換します。
<!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では3カラム
タブレットでは2カラム
スマホでは1カラム
になるレイアウトです。
通常、レスポンシブレイアウトは幅などに固定値を使用せず、フルード化(可変)していきますが、今回のようにカラムの中の大きさが変わらない場合はフルードレイアウトとは違い、横幅などが今までと同じように固定値を指定出来るので簡単に作る事が出来ます。
画面幅に合わせてカラムが落ちていくグリッドデザイン
和洋女子大学
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; } }