スマートフォンサイトの特徴
- カラムのリキッドデザインが基本
- 縦位置と横位置の両方を考慮する
- 画面サイズとページ容量を考慮する
- 情報量、ページの長さ、遷移のバランスを考慮する
- HTML5+CSS3で制作する
- Flashは使用しない
基本的にはJavascriptと同じですが、PHP独自のフォーマットをしっかりと覚えましょう。
1、「どのような形式で」を指定できる関数:date関数(フォーマット文字列)
2、「いつの日付を」を指定できる関数:mktime関数(タイムスタンプ)
本来は「php.ini」ファイル上で設定しますが、設定していない場合は、phpファイルに直接、以下のように記述します。
<?php date_default_timezone_set ( 'Asia/Tokyo' ); echo '現在は ' . date ( 'G時 i分 s秒' ) . ' です';
echo date('Y年m月d日');
echo date('H時i分s秒');
echo date('Y年m月d日 H時i分s秒');
echo date('Y-m-d'); echo date('Y/n/d'); echo date('Y年'); echo date('n月'); echo date('M d, Y'); echo date('F d, Y'); echo date('l F d, Y'); echo date('g:i A'); echo date('G:i');
Javascriptと同様、曜日の日本語表記は用意されていないので、配列を使って日本語の曜日を表示させてみましょう。
<?php $week = array('日', '月', '火', '水', '木', '金', '土'); // date関数 $w = date('w'); echo $week[$w]; ?>
上記のフォーマット一覧表にもあるように('w')で曜日を数字で取得します。
日曜0 → 土曜6
これを応用して、以下のように曜日を日本語表記させます。
日曜=0~土曜=6
time — 現在の Unix タイムスタンプを返す
この関数はある日付を指定すると、その指定した日付までのタイムスタンプが表示されます。(1970 年 1 月 1 日 00:00:00 UTC からの経過秒数)。 日付が指定されていない場合は現在日時に変換します
<!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>'; ?>