CSS3によるanimation
bg-color部分はIDなので自由な文字を設定できる。
0%と50%を同じ色にしないと急に色が変わったようになってしまうので、注意すること！
rgbaによる透過指定もできる。
body{ background: #C6F; -webkit-animation: bg-color 10s infinite; /* --moz-animation: bg-color 10s infinite;*/ animation: bg-color 10s infinite; /*bg^colorはIDなので自由に設定できる*/ } @-webkit-keyframes bg-color{ 0% {background-color: #C6F;} 50% {background-color: #FC3;} 100% {background-color: #C6F;} @keyframes bg-color{ 0% {background-color: #C6F;} 50% {background-color: #FC3;} 100% {background-color: #C6F;} /*0%と100%は同じ色にする。そうしないと 急に色が切り替わる*/ }
午前中は昨日の.htaccsessを使用したスマホ対応の続きを作成した。
newsfeed作成
昨日より始まったSQL文とPHPにてnewsfeed作成が始まった。
<?php //new PDO(PHP Data Object)オブジェクトを作っている //これでデータベースに接続しに行っている //new演算子 オブジェクトを作る演算子 $dbh = new PDO('mysql:host=localhost;dbname=newsfeed0220;charset=utf8;','root','root'); //var_dump($dbh); $stmt=$dbh->query('SELECT * FROM news'); //var_dump($row) //->アロー演算子 //queryという機能(メソッド) //foreach($stmt as $row){ //echo $row['news_id'].'<br>'; //} ?> <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>NEWSFEED</title> </head> <body> <table border=1> <tr><th>見出し</th><th>日付</th></tr> <?php foreach($stmt as $row){ ?> <tr><td><a href="#"><?php echo $row['news_headline'] ?></a></td> <td><?php echo $row['news_date'] ?></td></tr> <?php } ?> </table> </body> </html>
レスポンシブサイトの練習（全て固定値で列ごとにカラム落ち）
ポイントは2段表示になったとき3段目を横並びにする。
HTML
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>楽しいおかず</title> <link rel="stylesheet" href="style.css"> </head> <body> <div id="container"> <div class="content"> <header> <h1><img src="img/logo01.png" alt="美味しいおかず"></h1> <ul> <li><img src="img/nav01_01.png" alt=""></li> <li><img src="img/nav02_01.png" alt=""></li> <li><img src="img/nav03_01.png" alt=""></li> <li><img src="img/nav04_01.png" alt=""></li> </ul> </header> <nav> <ul> <li><img src="img/ph01_l.jpg" alt=""></li> <li><img src="img/ph02_mt.jpg" alt=""></li> <li><img src="img/ph03_s.jpg" alt=""></li> <li><img src="img/ph04_s.jpg" alt=""></li> <li><img src="img/ph05_my.jpg" alt=""></li> <li><img src="img/ph06_s.jpg" alt=""></li> <li><img src="img/ph07_s.jpg" alt=""></li> </ul> </nav> </div><!--/.content--> <div class="content"> <ul> <li><img src="img/ph08_my.jpg" alt=""></li> <li><img src="img/ph09_s.jpg" alt=""></li> <li><img src="img/ph10_s.jpg" alt=""></li> <li><img src="img/ph11_l.jpg" alt=""></li> <li><img src="img/ph12_s.jpg" alt=""></li> <li class="right"><img src="img/ph13_mt.jpg" alt=""></li> <li><img src="img/ph14_s.jpg" alt=""></li> <li><img src="img/ph15_l.jpg" alt=""></li> <li><img src="img/ph16_s.jpg" alt=""></li> <li><img src="img/ph17_s.jpg" alt=""></li> <li><img src="img/ph18_my.jpg" alt=""></li> </ul> </div><!--/.content--> <div class="content3"> <ul> <li><img src="img/ph19_l.jpg" alt=""></li> <li><img src="img/ph20_s.jpg" alt=""></li> <li class="right"><img src="img/ph21_mt.jpg" alt=""></li> <li><img src="img/ph22_s.jpg" alt=""></li> <li><img src="img/ph23_s.jpg" alt=""></li> <li><img src="img/ph24_s.jpg" alt=""></li> <li><img src="img/ph25_my.jpg" alt=""></li> <li><img src="img/ph26_s.jpg" alt=""></li> <li><img src="img/ph27_s.jpg" alt=""></li> <li><img src="img/ph28_s.jpg" alt=""></li> <li><img src="img/ph29_s.jpg" alt=""></li> <li><img src="img/ph30_l.jpg" alt=""></li> </ul> </div><!--/.content3--> </div><!--/#container--> </body> </html>
@charset "utf-8"; /* reset */ html, body, div, h1, h2, h3, h4, h5, h6,p, blockquote, pre, address,ul, ol, li, dl, dt, dd,table, th, td, form, fieldset { margin: 0; padding: 0; line-height: 1.0; font-family: "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; } ul, ol { list-style: none; } a { text-decoration: none; } img { border: 0; vertical-align: bottom; } footer,header,nav{ display: block;} /*layout*/ body{ background: #fff;} #container{ width:320px; margin: 0 auto; overflow: hidden;} .content,.content3{ float: left; width: 320px;} .content h1{ padding: 10px;} .content li,.content3 li{ float:left; padding: 10px;} .content li.right,.content3 li.right{ float: right;} @media screen and (min-width:640px){ #container{width:640px;} .content3{ width: 640px;} } @media screen and (min-width:960px){ #container{width:960px;} .content3{ width: 320px;}}
メールフォーム完成
本日でメールフォーム制作が終了した。
午後は少しだけDBに入った。百人一首のデータをさわった。
index.php
<?php //func.phpを呼び出し //ファイルを読み込む命令 ↓パスを読む書き方 require_once dirname(__FILE__) . '/func.php'; //初期化：ここの部分で空文字を設定してあげている $name=''; $email=''; $message=''; $error_name=''; $error_email=''; $error_message=''; //session_start(); この部分はfunc.phpにまとめた if(isset($_SESSION['mail']['name'])){ $name=$_SESSION['mail']['name']; }//sessionの値がセットされていたら$nemeに値を代入する if(isset($_SESSION['mail']['email'])){ $email=$_SESSION['mail']['email']; } if(isset($_SESSION['mail']['message'])){ $message=$_SESSION['mail']['message']; } //エラー情報をセッションから取得 if(isset($_SESSION['mail']['error_name'])){ $error_name=$_SESSION['mail']['error_name']; } if(isset($_SESSION['mail']['error_email'])){ $error_email=$_SESSION['mail']['error_email']; } if(isset($_SESSION['mail']['error_message'])){ $error_message=$_SESSION['mail']['error_message']; } ?> <!DOCTYPE HTML> <html lang="ja"> <head> <meta charset="utf-8"> <title>入力画面</title> <style> #container{ width: 800px; margin: 0 auto;} table{ border-collapse:collapse; margin-bottom:10px;} th{ background: pink; white-space: nowrap;} span{ font-size:12px;} span.red{ color: red; margin: 0 1em;} </style> </head> <body> <div id="container"> <form action="check.php" method="post"> <h1>入力画面</h1> <p>必要項目を入力して「確認する」ボタンをクリックしてください。</p> <table border="1"> <tr><th><label for="name">お名前<span>（30文字以内 :必須）</span></label></th><td><input style="text" name="name" id="name" value="<?php echo h($name); ?>" maxlength="30" placeholder="例：猫山猫尾" required autofocus><?php if(!empty($error_name)){echo '<span class="red">'.h($error_name).'</span>';} ?></td></tr> <tr><th><label for="email">Eメール<span>（50文字以内 :必須）</span></label></th><td><input type="email" name="email" id="email" value="<?php echo h($email); ?>" maxlength="50" placeholder="aaaa@aaaa.com" required><?php echo h($error_email); ?></td></tr> <tr><th><label for="message" >お問い合わせ<span>（150文字以内 :必須）</span></label></th><td><textarea name="message" id="message" maxlength="150" placeholder="お問い合わせ内容" required><?php echo h($message); ?></textarea><?php echo h($error_message); ?></td></tr> </table> <input type="submit" value="確認する"> </form> </div><!--/#container--> </body> </html>
check.php
<?php //func.phpを呼び出し require_once dirname(__FILE__) . '/func.php'; if(!isset($_POST['name'])||!isset($_POST['email'])||!isset($_POST['message'])){ header('Location:index.php');//本来はここに相対パスではなくフルパスを入れる exit; } $name=$_POST['name']; $email=$_POST['email']; $message=$_POST['message']; //初期化 $error_name=''; $error_email=''; $error_message=''; $success_flg = true; //空白を判定 //トリムで削除すると文字数が変わる 文字数をカウント if(mb_strlen(trim(mb_convert_kana($name,"s",'utf-8')))!=mb_strlen($name,'utf-8')){ $error_name ='名前の前後、あるいは全てに空白が使われています'; $success_flg = false; } //@マークが入っているかチェック if(strpos($email,'@')===false){ $error_email = '@がありません'; $success_flg = false; } //メールアドレスの半角全角チェック if(mb_strlen($email,'utf-8')!=strlen($email)){//文字のバイト数をチェック $error_email = '全角文字が入っています'; $success_flg = false; } //長さチェック if(mb_strlen($name,'utf-8')>30){ $error_name = 'お名前が長すぎます'; $success_flg = false; } if(mb_strlen($email,'utf-8')>50){ $error_email = 'アドレスが長すぎます'; $success_flg = false; } if(mb_strlen($message,'utf-8')>150){ $error_message = 'お問い合わせ内容が長すぎます'; $success_flg = false; } //空のチェック if(empty($name)){ $error_name='お名前を入力してください'; $success_flg = false; } if(empty($email)){ $error_email='Eメールを入力してください'; $success_flg = false; } if(empty($message)){ $error_message='お問い合わせ内容を入力してください'; $success_flg = false; } //session_start(); この部分はfunc.phpにまとめた $_SESSION['mail']['name']=$_POST['name']; $_SESSION['mail']['email']=$_POST['email']; $_SESSION['mail']['message']=$_POST['message']; $_SESSION['mail']['success_flg'] = $success_flg; //エラー情報をindexに渡すためにセッション利用 $_SESSION['mail']['error_name'] = $error_name; $_SESSION['mail']['error_email'] = $error_email; $_SESSION['mail']['error_message'] = $error_message; if(!$success_flg){ header('Location:index.php'); exit; } //メールの改ざんを防ぐため、セッションにもサクセスフラグ情報を埋め込む。 ?> <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>入力確認画面</title> <style> #container{ width: 800px; margin: 0 auto;} table{ border-collapse:collapse; margin-bottom:10px;} th{ background: pink; white-space: nowrap;} </style> </head> <body> <div id="container"> <h1>入力確認画面</h1> <table border="1"> <tr><th>お名前：</th><td><?php echo h($name); ?></td></tr> <tr><th>Eメール：</th><td><?php echo h($email); ?></td></tr> <tr><th>お問い合わせ内容：</th><td><?php echo nl2br(h($message)); ?></td></tr> </table> <p><a href="index.php">フォームに戻る</a></p> <p><a href="send.php">メールを送信する</a></p> </div><!--/#container--> </body> </html>
send.php
<?php //func.phpを呼び出し require_once dirname(__FILE__) . '/func.php'; //session_start(); この部分はfunc.phpにまとめた // ↓直接打ち込んでセッションデータがないとき ↓値がfalseの時 if(!isset($_SESSION['mail']['success_flg']) || !$_SESSION['mail']['success_flg']){ header('Location:index.php'); exit; } $name=$_SESSION['mail']['name']; $email=$_SESSION['mail']['email']; $message=$_SESSION['mail']['message']; //var_dump($_SESSION); $_SESSION=array();//sessionファイルの中身を空にする unset($_SESSION['mail']);//sessionの小部屋を破棄するイメージ //cookieの削除 session_destoroyの前に書くにはそうしないとセッションネームが削除されているから。 if(isset($_COOKIE[session_name()])){ setcookie(session_name(),'',time()-200000,'/'); } session_destroy();//接続する設定を破壊しているイメージ //ヒアドキュメント $body=<<<EOF {$name}さんからメールが送信されました。 メールアドレスは{$email}です。 内容は、以下の通りです。 {$message} EOF; //var_dump($body); mb_send_mail('thouarttheman5@gmail.com','お問い合わせがありました',$body); ?> <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>メール送信画面</title> </head> <body> <h1>メール送信画面</h1> <p>以下内容でメールが送信されました</p> <table> <tr><th>お名前：</th><td><?php echo h($name); ?></td></tr> <tr><th>Eメール：</th><td><?php echo h($email); ?></td></tr> <tr><th>お問い合わせ内容：</th><td><?php echo nl2br(h($message)); ?></td></tr> </table> <p><a href="index.php">入力画面に戻る</a></p> </body> </html>
fanc.php
<?php //htmlspecialcharsが長いので関数化 function h($str){ return htmlspecialchars($str,ENT_QUOTES,'utf-8'); } session_start();
sessionとヒアドキュメントについて
先週までの続きでメールフォームを作成した。
session
check.php内<?php session_start(); $_SESSION['name']=$_POST['name']; $_SESSION['email']=$_POST['email']; $_SESSION['message']=$_POST['message']; ?>
ヒアドキュメント
send.php内<?php session_start(); $name=$_SESSION['name']; $email=$_SESSION['email']; $message=$_SESSION['message']; ?>
send.php内
<?php $body=<<<EOF {$name}さんからメールが送信されました。 メールアドレスは{$email}です。 内容は、以下の通りです。 {$message} EOF; ?>
これで概ね基本的な設定は出来たが、このままでは細かいところがいろいろいけない。
check.phpでチェックしたとき修正したい場合はどうするか？ボタンを書き足す
<p><a href="index.php">フォームに戻る</a></p> <p><a href="send.php">メールを送信する</a></p>
index.php内に書き足す
ただ、これでフォームに戻った場合入力内容が消えてしまう。
index.php内上部に書き足し
<?php session_start(); $name=$_SESSION['name']; $email=$_SESSION['email']; $message=$_SESSION['message']; ?>
<table border="1"> <tr><th><label for="name">お名前</label></th> <td><input style="text" name="name" id="name" value="<?php echo htmlspecialchars($name,ENT_QUOTES,'utf-8'); ?>"></td></tr> <tr><th><label for="email">メールアドレス</label></th> <td><input type="text" name="email" id="email" value="<?php echo htmlspecialchars($email,ENT_QUOTES,'utf-8'); ?>"></td></tr> <tr><th><label for="message" >メッセージ</label></th> <td><textarea name="message" id="message"><?php echo htmlspecialchars($message,ENT_QUOTES,'utf-8'); ?></textarea></td></tr> </table> <input type="submit" value="確認する"> </form>
※注意
textareaはvalueが使えない！
なので
間にコードを書く。
企業サイト制作プレゼンテーション3日目
本日がサイト制作プレゼンテーション最終日となった。
photoshopについて
CS5と6で大分違う。カンプを作る際は左上を原点0,0で、余白を作らずぴったりで作る。（例：960px）
新規ガイドで数値入力してラインを引いていく。
長方形ツールと矩形ツールの違いは？
使い慣れない場合はシェイプがいいが、SC5はシェイプに難がある。
→余計なアンチエイリアスがでる。
なので長方形ツールで固定で1px*Xpxで書く。
ラインツールは信用しないこと。斜めは使用してよい。
デザインについて
奥行きと不透明感をどうやって出すか？フラットデザインは平べったいものを置いてあるのではなく、平べったいけれども奥行きをどうやってみせるのか。
参考サイト：動画マニュアル.com
いろいろな学習動画がある。
タイトルについて
h1はキーワード出現率の1,2,3位を組み合わせる。h1→p pの内容が大切であり、meta descriptionが拾われずpが拾われることもある。
企業サイト制作【完成】
後から追記予定。
知人のソフビフィギュア会社の一ブランドのサイトを制作した。
仕様：モバイル対応（レスポンシブ） IE9以上より対応
構想：約1週間
画像加工：約1日
コーディング：1週間
wordpressでのテーマ制作は初めてでもろもろの仕様について理解していなかったため、時間がかかった。実際にコードを打った時間よりはほぼ調べていた時間である。
一からwordpressでサイトを作るのは難しかったため、Bonesというカスタマイズ前提のスターターテーマを使用した。
■bonesの落とし穴（修正点）
・そのままではアウトラインを見たときにUntitled BODYになるのとsectionの後に見出しが入らないためUntitled SECTIONになってしまう。
・管理ページより入力するサイトのタイトルとキャッチコピーがタイトルの後ろにキャッチコピーがくっついて表示される。タイトルはタイトルのみでmeta descriptionが空なのでキャッチコピーを入れるようにした。
wp-titleがfunction.phpでフックされており、その内容がテーマ固有のbones.php。
■苦労した点
index.phpはあくまでブログ画面のインデックスでトップページをサイト風の好きな見た目にするには固定ページのテンプレートを追加して実装する。
テンプレートはデフォルト以外に3つ制作した。
- トップページ
- 作品紹介のトップ画面
- 作品紹介の作品の個別ページ
固定ページのデフォルトは古紙風の背景画像を表示するようにした。
トップページはヘッダー画像とその下に投稿記事とサイドバーを表示した。
作品紹介のトップはモンスターを画面の横幅いっぱいに可変するように表示した。課題としてポジションで上に載せているサイドバー部分の見た目の問題が残る。
作品の個別ページは黒く透過するようにし作品をよりすっきり見せるように心がけた。
カスタマイズ元テーマ：Bones
参考書籍：「基礎からのWordPress 改訂版」高橋のり著
「WordPressレッスンブック HTML5&CSS準拠」エビスコム著
企業サイト制作プレゼンテーション1日目
いよいよ本日より5月初めより取り掛かっていた企業サイト制作の発表が行われた。
メモ
- 黒字に赤文字は視認性が悪いのやってはいけない
- デザインとして行間の空きより外枠の空きが少ないのはダメ
- フォントについて太いフォントを使うと途端に素人っぽくなる
- 格好良いのは細い文字。繊細さ。細部に気を使えているか。
