読者です 読者をやめる 読者になる 読者になる

求職者支援訓練webサイト制作科1月クラス

フェリカテクニカルアカデミー池袋の求職者支援訓練webサイト制作科1月クラスの授業解説ブログです。

PHP演習問題

問1

現在の年月日・時刻をPHPで記述し、ブラウザに表示させなさい

問2

数字「1」から「10」までの数字を、ブラウザにランダムに表示させなさい

問3

九九の表をPHPで繰り返し文で記述し、ブラウザに表示させなさい


問4

「input.php」に「名前」と「年齢」を記入し、その値を「POST」で取得して「output.php」に表示させなさい


問5

問4の「input.php」に複数選択可のチェックボックスを追加し、その値を「POST」で取得して「output.php」に表示させなさい
(設問は自由)

広告を非表示にする

モバイルファーストを意識したレスポンシブデザインサイトの制作 1

f:id:yachin29:20151120003303p:plain

モバイルファースト

モバイルファーストとは、Webサイトやソフトウェアの開発・運営方針の一つで、スマートフォンなどの携帯端末向けの版をパソコン向けなどより先に、あるいは同時に公開すること。また、サイトやソフトの機能や表示、操作方法を設計する際に、携帯端末での使いやすさを常に優先すること。

とありますが、モバイルファーストとは単にスマホレイアウトから作っていく、という作業手順の事では無く、ユーザーにとって必要なコンテンツや情報をスマホサイトにしっかりと入れ、見易さや使い易さも考慮して作っていく事が大切です。簡単に言うとスマホサイトで完結出来ているか、という事で、それをPCでみた際にも違和感が無いように手直しして行く事です。

業種にもよりますが、最近はPCよりもスマホからのアクセス数が多いwebサイトも珍しくありません。そもそもPCを持っていない人にとっては、スマホでネットを見る、という選択肢しか無いですし、PCを持っていても「ファーストスクリーン」がスマホ、というユーザーも少なくありません。なので、スマホサイトでもしっかりとユーザーのニーズに応える必要が出て来ます。

✕ PCサイトから余分な部分を削る
◯ スマホサイトで必要な物をしっかりと入れ、PCレイアウトで見ても違和感の無いように調整する

yachin29.hatenablog.com


使用する画像
http://yachin29.webcrow.jp/netsmart.zip


使用するテキスト
株式会社ネットスマート

メニュー

サービス紹介
実績紹介
会社概要
採用情報


メンテナンスのお知らせ


サービスピックアップ

CMS

SEO

ソーシャル

低価格&高機能なCMS導入。
充実の管理画面でサイト運用を効率的に。

検索ワードを短期間で上位表示。
スマートフォンサイトにも対応します。

Facebookページ作成からソーシャルメディアマーケティングまで幅広く支援致します。



サービス紹介

実績紹介

会社概要

採用情報





セミナー

2017年2月11日
テキストテキストテキストテキストテキスト

2017年1月19日
テキストテキストテキストテキストテキスト

2016年12月14日
テキストテキストテキストテキストテキスト

2016年10月10日
テキストテキストテキストテキストテキスト

2016年9月29日
テキストテキストテキストテキストテキスト



お知らせ

2017年2月18日
採用情報を更新しました

2017年2月11日
実績紹介を更新しました

2017年2月1日
サービスが紹介されました

2017年1月25日
社内ブログを開設しました



サイトマップ
プライバシーポリシー
サイトのご利用について
免責事項


©2017 Net Smart Co., Ltd. All rights Reserved.



ソースコード

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>モバイルファーストで作るRWD</title>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/rwd.css" media="only screen and (min-width:768px)">
</head>

<body>
<div id="container">
<header>
<h1>株式会社ネットスマート</h1>
</header>
<nav>
<p>メニュー</p>
<ul>
<li><a href="#">サービス紹介</a></li>
<li><a href="#">実績紹介</a></li>
<li><a href="#">会社概要</a></li>
<li><a href="#">採用情報</a></li>
</ul>
</nav>

<div id="alert">
<p>メンテナンスのお知らせ</p>
</div>

<div id="pickup">
<h2>サービスピックアップ</h2>
<ul>
<li><a href="#">CMS</a></li>
<li><a href="#">SEO</a></li>
<li><a href="#">ソーシャル</a></li>
</ul>

<div class="tabContents current" id="cms">
<div class="round">
<p><a href="#">
<img src="img/img_pickup_cms.png" alt="CMS">
</a></p>
</div><!--/round-->
<p class="text">低価格&amp;高機能なCMS導入。<br>
充実の管理画面でサイト運用を効率的に。</p>
</div><!--/tabContents-->

<div class="tabContents" id="seo">
<div class="round">
<p><a href="#">
<img src="img/img_pickup_seo.png" alt="SEO">
</a></p>
</div><!--/round-->
<p class="text">検索ワードを短期間で上位表示。<br>
スマートフォンサイトにも対応します。</p>
</div><!--/tabContents-->

<div class="tabContents" id="social">
<div class="round">
<p><a href="#"><img src="img/img_pickup_social.png" alt="ソーシャル"></a></p>
</div><!--/round-->
<p class="text">Facebookページ作成からソーシャルメディアマーケティングまで幅広く支援致します。</p>
</div><!--/tabContents-->
</div><!--/pickup-->


<div class="indexBoxes">
<ul>
  <li><a href="#"><div>サービス紹介</div></a></li>
  <li><a href="#"><div>実績紹介</div></a></li>
  <li><a href="#"><div>会社概要</div></a></li>
  <li><a href="#"><div>採用情報</div></a></li>
</ul>
</div>

<div class="seminar">
<h2>セミナー</h2>
<dl class="infoLink">
<dt>2017年5月11日</dt><dd><a href="#">テキストテキストテキストテキストテキスト</a></dd>
<dt>2017年4月19日</dt><dd><a href="#">テキストテキストテキストテキストテキスト</a></dd>
<dt>2017年3月14日</dt><dd><a href="#">テキストテキストテキストテキストテキスト</a></dd>
<dt>2017年2月10日</dt><dd><a href="#">テキストテキストテキストテキストテキスト</a></dd>
<dt>2017年1月29日</dt><dd><a href="#">テキストテキストテキストテキストテキスト</a></dd>
</dl>
</div><!--/seminar-->

<div class="information">
<h2>お知らせ</h2>
<dl class="infoLink">
  <dt>2017年3月18日</dt><dd><a href="#">採用情報を更新しました</a></dd>
  <dt>2017年3月11日</dt><dd><a href="#">実績紹介を更新しました</a></dd>
  <dt>2017年3月1日</dt><dd><a href="#">サービスが紹介されました</a></dd>
  <dt>2017年2月25日</dt><dd><a href="#">社内ブログを開設しました</a></dd>
</dl>
</div><!--/information-->

<footer id="globalFooter">
<nav>
<ul>
  <li><a href="#"><div>サイトマップ</div></a></li>
  <li><a href="#"><div>プライバシーポリシー</div></a></li>
  <li><a href="#"><div>サイトのご利用について</div></a></li>
  <li><a href="#"><div>免責事項</div></a></li>
</ul>
</nav>
<p id="copyright"><small>&copy;2017 Net Smart Co., Ltd. All rights Reserved.</small></p>
</footer>
</div>
</body>
</html>


スタイルシート

@charset "utf-8";
/* CSS Document */

/* reset */
html, body, div, h1, h2, h3, h4, h5, h6,p,
address,ul, ol, li, dl, dt, dd {
  margin: 0;
  padding: 0;
  line-height: 1.0;
  font-family:
    "Hiragino Kaku Gothic ProN",
    Meiryo, 
    sans-serif;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
ul, ol {
  list-style: none; /* マーカーを消す */
}
a {
  text-decoration: none; /* 下線を消す */
}
img {
  border: 0;
}
img, input {
  vertical-align: bottom;
}

/*モバイルのみ*/
header {
  width:100%;
  height:100px;
  background: linear-gradient(to bottom, #efefef, #ffffff); /*W3C*/
}
h1 {
  background:url(../img/logo.png) no-repeat center/contain;
  width:120px;
  text-indent:100%;
  white-space:nowrap;
  overflow:hidden;
}


完成例
http://yachin29.webcrow.jp/sp2/

for文を使ったセレクトボックスのフォーム

input.html

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>セレクトボックス</title>
<style>
html,body,dl,dt,dd {
  margin:0;
  padding:0;
}
form {
  margin: 100px;
}
dt {
  float: left;
  width:200px;
  margin-bottom:30px;
}
dd {
  margin-left:200px;
  margin-bottom:30px;
}
</style>
</head>

<body>
<form action="output.php" method="post">
<dl>
<dt>お住いの地域:</dt>
<dd>
<select name="home">
    <option>北海道</option>
    <option>東北</option>
    <option>関東</option>
    <option>中部</option>
    <option>近畿</option>
    <option>中国・四国</option>
    <option>九州・沖縄</option>
  </select>
</dd>

<dt>生年月日(西暦):</dt>
<dd>
<select name="year">
<?php
for ($i=1945; $i<=2000; $i++) {
  echo "<option value='$i'>" . $i . "年</option>";
}
?>
</select>
<select name="month">
<?php
for ($i=1; $i<=12; $i++) {
  echo "<option value='$i'>" . $i . "月</option>";
}
?>
</select>
</dd>
</dl>
<input type="submit" value="送信する">
</form>
</body>
</html>


output.php

<?php
$home = $_POST['home'];
$year = $_POST['year'];
$month = $_POST['month'];
?>

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>データの取得</title>
<style>
html,body,dl,dt,dd {
  margin:0;
  padding:0;
}
form {
  margin: 100px;
}
dt {
  float: left;
  width:200px;
  margin-bottom:30px;
}
dd {
  margin-left:200px;
  margin-bottom:30px;
}
</style>
</head>

<body>
<dl>
<dt>お住いの地域:</dt>
<dd><?php echo $home; ?></dd>

<dt>生年月日:</dt>
<dd><?php echo $year . ''; ?><?php echo $month . ''; ?></dd>
</dl>
</body>
</html>

Illustratorで放射状のオブジェクトを作る

よくバナーなんかで見る、放射状の背景。

こんなやつです。

f:id:yachin29:20160819234847p:plain
http://retrobanner.net/archives/6923


f:id:yachin29:20160819235108j:plain
http://retrobanner.net/archives/6895


作り方は色々なやり方がありますが、1番簡単なのは楕円を線のみにして、「線幅」と破線の「線分」と「間隔」で調整するやり方です。



1、まずは300✕250の長方形を作り、塗りの色を放射状の片方の色に設定する。塗りのみで線は無し。
2、楕円形ツールで60pxの正円を作り、整列パレットで中心に移動。
f:id:yachin29:20160819232837j:plain


3、円は線のみで塗りは無し。線の色は放射状のもう片方の色を指定。
f:id:yachin29:20160819233025j:plain


4、線パレットを出して、今回は細めの放射状を作りたいので「線幅」を1000px。破線にチェックを入れ「線分:
6px」と「間隔:6px」。この辺の値は放射状の線の細さや間隔によって変わります。
f:id:yachin29:20160819233610j:plain


これで、簡単に放射状のオブジェクトが出来ました。
あとは文字にアピアランスを掛け、袋文字などにしてみましょう。

文字をアウトライン化せずにグラデーションをかける方法

通常、文字はアウトライン化しパスにしてからグラデーションをかけますが、今回はテキストオブジェクトのままグラデーションをかける方法です。

まずはテキストツールで文字を書き、「塗り:無し」「線:無し」に設定します。
もちろん「塗り」も「線」も無しなので何も見えなくなります。
f:id:yachin29:20160820113836j:plain


次にアピアランスパネルを出して、新規塗りを追加します。
f:id:yachin29:20160820124913j:plain


新規塗りで追加した塗りに対してグラデーションを掛けます。
f:id:yachin29:20160820114419j:plain


グラデーションの色を調整しそれっぽくして、線を追加し袋文字に。
f:id:yachin29:20160820124440j:plain


最後に必要な文字や菱型などの飾りを追加しかんせいです。
f:id:yachin29:20160820123559p:plain

今回のポイント

今回、文字にアピアランスを設定する前に、塗りと線を一旦無しにしました。簡単に言うとその後の作業効率を高めるためですが、
詳しくは以下のブログに書いてあるので、興味のある人は見ておきましょう。

www.dtp-transit.jp

PHPでの日付や時間取得

基本的にはJavascriptと同じですが、PHP独自のフォーマットをしっかりと覚えましょう。


1、「どのような形式で」を指定できる関数:date関数(フォーマット文字列)
2、「いつの日付を」を指定できる関数:mktime関数(タイムスタンプ)

timezoneの設定

本来は「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秒');

様々なフォーマットでの表示例

f:id:yachin29:20161107134728j:plain


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 

  1. $weekに日〜土の値を順番に格納した配列を用意する
  2. 変数$wに今日の曜日の番号を格納する(月曜は1)
  3. 変数$weekは0から始まるキーが連番で振られているので、$week[$w]とすると$week[1]と同等となる
  4. $weekの[1]は月曜なので、月と表示される

チェックボックスの値を配列で渡す

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>複数選択可の項目があるフォームの作成</title>
<style>
html,body,h1,dl,dt,dd {
  margin:0;
  padding:0;
  line-height:1.0;
}
form {
  width:60%;
  margin: 100px auto 0;
}
dt {
  width:30%;
  float:left;
  margin-bottom:40px;
  font-weight:bold;
}
dd {
  margin-left:30%;
  margin-bottom:40px;
}
</style>
</head>

<body>
<form action="output.php" method="post">
<dl>
<dt>お名前</dt>
<dd><input type="text" name="name" required placeholder="山田 太郎"></dd>
<dt>メールアドレス</dt>
<dd><input type="email" name="email" required></dd>
<dt>好きな色(複数選択可)</dt>
<dd>
<input type="checkbox" id="black" name="color[]" value="0"><label for="black"></label> 
<input type="checkbox" id="red" name="color[]" value="1"><label for="red"></label> 
<input type="checkbox" id="green" name="color[]" value="2"><label for="green"></label> 
<input type="checkbox" id="blue" name="color[]" value="3"><label for="blue"></label>
</dd>
<dt></dt>
<dd><input type="submit" value="送信"> <input type="reset" value="リセット"></dd>
</dl>
</form>
</body>
</html>


受け取る側
output.php

<?php
$name = htmlspecialchars($_POST['name'], ENT_QUOTES, 'UTF-8');
$email = htmlspecialchars($_POST['email'], ENT_QUOTES, 'UTF-8');
?>


<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>複数選択可のフォーム|受け取り</title>
</head>

<body>
<dl>
<dt>お名前</dt>
<dd><?php echo $name; ?></dd>
<dt>メールアドレス</dt>
<dd><?php echo $email; ?></dd>
<dt>好きな色</dt>
<dd>
<?php
/*foreach( $_POST['color'] as $value ){
    echo "{$value}"; }
*/

$list = array('0' => '黒色', '1' => '赤色', '2' => '緑色', '3' =>'青色');

foreach( $_POST['color'] as $value ){
echo $list[$value] . ' ';}
?>
</dd>
</dl>
</body>
</html>

PHPでの配列

配列はJavascriptでも出て来ましたが、まずは配列の特性を復習しましょう。
通常、変数は1つの値しか入れる事が出来ず、新しい値を入れると上書きされてしまいます。

一方、配列ではひとつの箱に複数の値を入れることができます。データベースと連動させる事の多い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>';
?>
広告を非表示にする