WEBサイト制作の勉強

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

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

東京のダンス公演で活躍中の振付やダンスレッスン講師も行うモダンジャズダンサーJURI

東京のダンス公演で活躍中の
モダンジャズダンサー 振付 ダンス講師 JURI
東京のダンス公演を中心に活躍中のモダンジャズダンサーです。モダンダンス、ジャズダンスコンテンポラリーダンスでのダンス公演出演、振付を行っています。DANCE STUDIO FIRST渋谷校にて週に一回ジャズダンスレッスン開講中です。


juriii.webcrow.jp
http://juriii.webcrow.jp/


f:id:yachin29:20170202011211j:plain

アイシングクッキーのオーダーメイド 結婚式やイベント用はプティシュシュ

アイシングクッキーのオーダーメイド 結婚式やイベント用はプティシュシュ。
アイシングクッキーのオーダーメイド スイーツギフトpetit chou chou(プティシュシュ)。
結婚式用の席札やプチギフト、出産祝いやお誕生日などのイベントに最適です。アイシングクッキーで大切な人へプレゼントしませんか。


http://www.petit-chou-chou.com/

f:id:yachin29:20170202005906j:plain

動きのあるバナー

バナーのサイズを決める

広告の場合、ある程度はサイズに規定があります。仕事の場合大抵クライアントの方から指定があります。1種類のバナーに対し様々なサイズを用意する場合もあるので、色々なサイズに適したレイアウトのパターンを覚えておきましょう。

300×250(Yahoo!/Google)PC/スマホ ※推奨

728×90(Yahoo!/Google)PC ※推奨

160×600(Yahoo!/Google)PC ※推奨

336×280(Google)PC ※推奨

320×50(Yahoo!/Googleスマホ ※推奨

320×100(Yahoo!/Googleスマホ ※推奨

gifアニメを使ったバナー

f:id:yachin29:20160905035438g:plain


Photoshopのアニメーション機能を使う事で、比較的簡単に動きのあるバナーが作れてしまいます。
複数のフレームを順番に表示することで、画像が動いているように見せています。
必要なフレームをレイヤー別に作り、レイヤーの表示/非表示を切り替えて表示させるものを替えていきます。

f:id:yachin29:20160905032248j:plain

テキストレイヤーは全フレームで表示させておきたいので、常に表示の状態にしておきましょう。


blogs.adobe.com


動画を使ったバナー

動画ファイルを読み込んで、GIFアニメバナーをつくります。

1、Photoshopで動画を読み込む。
[ファイル]メニュー→[読み込み]→[ビデオフレームからレイヤー]を選択し、動画を読み込みます。Photoshopでは、mp4やmovなどの動画フォーマットを入力ファイルとして選択できます。
こうする事で動画をレイヤーに読み込ませる事が出来、写真を補正するようにトーンカーブや色補正、変形処理などをかけることができます。

f:id:yachin29:20160901142444p:plain

ただ、photoshopのバージョン(CS5)によっては32bit版でないと出来ないので注意が必要です。

32bitと64bitの切り替え方 for Win - Photoshopの情報集


32bitと64bitの切り替え方 for Mac - Photoshopの情報集


2、[ビデオをレイヤーに読み込み]をクリックするとダイアログボックスが開くので、動画プレビュー画面の下のスライダーで読み込む範囲を指定します。[頻度制限]を調整することで、GIFアニメバナーの容量を軽量化することができます。動画の長さは長くても10~15秒程度にし、[頻度制限]は5~10フレームおきに設定しないと、ものすごい数のレイヤーが出来てしまうので、注意が必要。だいたい30~50レイヤーくらいに抑えると良いと思います。
f:id:yachin29:20160901142636p:plain


3、タイムラインにフレームを置く
あとはgifアニメと同じ要領でフレームを置いていき、必要なテキストレイヤーを作り、gif形式で保存します。

f:id:yachin29:20160901142951p:plain


f:id:yachin29:20160905034903g:plain



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

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

  • カラムのリキッドデザインが基本
  • 縦位置と横位置の両方を考慮する
  • 画面サイズとページ容量を考慮する
  • 情報量、ページの長さ、遷移のバランスを考慮する
  • 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」に表示させなさい
(設問は自由)