WEBサイト制作の勉強

WEBサイト制作の勉強の為の解説ブログです。

フェリカテクニカルアカデミー

スマートフォンサイトの特性を知る

スマートフォンサイトの特徴

  • カラムのリキッドデザインが基本
  • 縦位置と横位置の両方を考慮する
  • 画面サイズとページ容量を考慮する
  • 情報量、ページの長さ、遷移のバランスを考慮する
  • HTML5+CSS3で制作する
  • Flashは使用しない


www.slideshare.net

既存サイトのトレース|全面レイアウト1

今回トレースするサイトは非常にシンプルで今時な感じがする全画面を使ったグリッドデザインで出来たサイトです。
今の段階で細かい部分の作りをするのは少し難しいので、まずはワイヤーフレームのようにレイアウトのみにしぼって作っていきましょう。

f:id:yachin29:20170105130714p:plain

www.bloomingville.com

今回のレイアウトのポイント
  • フルスクリーンでのグリッドレイアウト
  • ドミナントカラーを使ったデザイン
  • 可変のブロックに固定値のマージン
  • ある程度スクロールするとグローバルナビがページ上部に固定

などです。



作例
http://yachin29.webcrow.jp/bloom/

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]は月曜なので、月と表示される

time関数

time — 現在の Unix タイムスタンプを返す

strtotime関数

この関数はある日付を指定すると、その指定した日付までのタイムスタンプが表示されます。(1970 年 1 月 1 日 00:00:00 UTC からの経過秒数)。 日付が指定されていない場合は現在日時に変換します

PHPの演習問題

問1

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

問2

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

問3

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


問4

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


問5

問4の「input.php」に複数選択可のチェックボックスを追加し、その値を「POST」で取得して「output.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を削除するため
 } 
});
});

liskul.com

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>';
?>