2013-03-25

82回目授業内容　CSS3〜イラストレーターでバナー作成

[授業][Dreamweaver][PhotoShop][JavaScript][jQuery]

CSS3

CSS3に慣れよう
癖を付けよう

<meta name="viewport" content="width=device-width">

class属性やid属性も含め、属性の値を使うセレクタ

[class] {color: hotpink;}

[class="ham"]と指定した要素に適用

[class="ham"] {color: hotpink;}

class属性の値が「ham」を含む場合に適用

[class*="ham"] {color: hotpink;}

class属性の値が「ham」で始まる場合に適用

[class^="ham"] {color: hotpink;}

class属性の値が「ham」で終わる場合に適用

[class$="ham"] {color: hotpink;}

class属性の値が「ham」というスペース区切りの語句を含む場合に適用

[class~="ham"] {color: hotpink;}

class属性の値が「ham」」というハイフン区切りの語句から始まる場合に適用

[class|="ham"] {color: hotpink;}

擬似クラス

a:link { color: green; }
a:visited { color: gray; }
a:hover { color: orange; }
a:focus { color: hotpink; }
a:active { color: red; }

:after擬似要素

h2:before, h2:after {
  content: "★";
  color: red;
}
h2 {
  font-size: 32px;
  font-family: 'Arial Black';
  background-color: greenyellow;
}
h2:before, h2:after {
  margin-right: 10px;
  font-family: 'メイリオ';
}

<h2>HAM SANDWICHES</h2>
<p>:before擬似要素は、要素の直前に内容を挿入する際に使用します。</p>
<p>:after擬似要素は、要素の直後に内容を挿入する際に使用します。</p>

:first-letter擬似要素

p:first-letter {
  font-size: 32px;
  font-weight: bold;
  line-height: 24px;
  padding: 10px;
  background-color: greenyellow;
  float: left;
}

<p>焼きたての手作りパンで新鮮なハム、トマト、チーズ、レタスを挟んだサンドイッチです。マスタードをピリッときかせたマヨネーズソースがおいしくて、お店の近くを通るたびに買いこんでしまいます。日替わりメニューもあって、毎日いろいろなサンドイッチが楽しめます。</p>

バナー広告作成

Illustratorで作成

脱線話（復活）

[http://tokiyo.hateblo.jp:title=四十路男Tokiyoの人生再スタートblogもやってます。

2013-03-22

81回目授業内容　HTML5の基本2

[授業][Dreamweaver][PhotoShop][JavaScript][jQuery]

HTML5の基本2

smallは短い1行文に使うこと

CSS3

ナビゲーションバーを角丸にする

脱線話（復活）

[http://tokiyo.hateblo.jp:title=四十路男Tokiyoの人生再スタートblogもやってます。

2013-03-21

80回目授業内容　HTML5の基本

[授業][Dreamweaver][PhotoShop][JavaScript][jQuery]

HTML5の基本

2012年12月17日に勧告候補がリリース

HTML5.1
- HTML5の次期バージョンとしてW3Cがリリースしている規格
HTML Living Standard
- Apple、Mozilla、Operaによって設立されたグループ

セマンティック（semantics）Web
- 意味付けによってページの中身を人間以外のものが理解できるようにすること
- どれが何の見出しであるかまで明示する
  - imgのaltの仕様上注意が必要

「何月何日ナニのもの」的な説明が必要。
分からなければ書かずに無くした方が良い。

タグの省略
- 現時点では難しいので付けておくべし。

a(アンカー）でDiv要素を囲むことが出来る。

新しいフォームパーツ

type="datetime"
type="number"
type="range"
type="color"
type="url"
type="email"
type="tel"
type="search"

フォーム以外のインターフェイス

progress要素
meter要素

outline

headerは必須！

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>HTML5の基本</title>
</head>
<body id="top">
<div id="container">
<header>
<h1>章見出し</h1>
<p>要約</p>
</header>
	<section>
	<h2>節見出し</h2>
		<section>
		<h3>本文見出し1</h3>
		<p>本文をここに書きます。</p>
		<div class="note">
		注意：デザイン上の都合でsection要素は使用しません。
		</div>
		</section>
		<section>
		<h3>本文見出し2</h3>
		<p>本文をここに書きます。</p>
		</section>
	</section>
<footer>
<p><small>&copy;Tokyo Q Studio</small></p>
<address>お問合せ：tokiyo@tqs.jp</address>
</footer>
</div>
</body>
</html>

article要素

ブログなどの記事に使う
独立した記事として成立する内容に使う

仕様上弱い記事内容であれば使わない方が良い。

aside要素

前で言うsidebar
contentと同等の扱いになる（outline上のsectionと同等）

nav要素

主要なナビゲーションに使う

header要素とfooter要素

必須！必ず付ける！

IE対策

<!--[if lte IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!--[if lte IE 9]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
<![endif]-->
<style>
  article, aside, dialog, figure, footer, header,
  hgroup, menu, nav, section { display: block; }
</style>

microdata

次世代のSEOになり得るのか？
見本として

<article itemscope itemtype="http://schema.org/Article">
  <h1 itemprop="headline">????? ??????</h1>
  <p itemprop="author">17 ?????? ???</p>
  <p itemprop="articleBody">12 ??? ?????? ?????????? ?? 8 ??? ?????? ???, ?????? ????? ????, ??????-kyo ?????????? ???? ??? ?????????????.</p>
</article>

論理構造を意識したアウトライン

HTML5の絶対条件

HTML5を打ってみる

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>生活を楽しくする情報をもっと身近にお届けします | Green Leaf</title>
<link rel="stylesheet" href="css/style.css">
<!--[if lte IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!--[if lte IE 9]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
<![endif]-->
<style>
  article, aside, dialog, figure, footer, header,
  hgroup, menu, nav, section { display: block; }
</style>
</head>
<body>

<div id="container">
<header>
<h1><img src="images/logo.gif" width="168" height="32" alt="Green Leaf"></h1>
<h2>生活を楽しくする情報をもっと身近にお届けします | Green Leaf</h2>
</header>
<nav>
<ul>
		<h1>menu</h1>
    <li class="nav_top"><a href="#">トップ</a></li>
    <li><a href="#">森の工房について</a></li>
    <li><a href="#">季節のイベント</a></li>
    <li><a href="#">お問い合わせ</a></li>
    <li><a href="#">ブログ</a></li>
</ul>
</nav>



<section id="tree">
<h2>森の工房について</h2>
<img src="images/photo01.jpg" width="250" height="165">
<p>Forest Studioでは、自然の中にある「森の工房」を運営しています。森の工房では、四季を通してイベントを開催したり、さまざまな商品の開発を行っています。
森の中にある工房</p>

<p>森の中の様子 森の工房は、木々のあふれる森の中にあります。森の入口から細い小道を通り、森の奥に進んでください。しばらくすると、森の中にある小さな丘に出てきます。その丘の上にある木造の建物が「森の工房」です。</p>

<p>この丘はちょうど森の中央に位置しており、森の中を散歩したり、自然の中で遊んだりするときにも、ちょうどいい拠点になります。森全体を見渡すことも可能で、夜は満点の星空を満喫できます。</p>
</section>


<section id="shiki">
<h2>四季を楽しむことができる場所</h2>
<img src="images/photo02.jpg" width="250" height="165">
<p>冬の風景 森の工房では、春、夏、秋、冬と、四季折々の自然を楽しむことができます。</p>
<p>春には、雪解け水の中から芽を出す新しい命や、新緑の鮮やかな緑。夏には、緑濃く茂った木々の間を吹き抜けるさわやかな風に、川の清流での水遊び。秋には、森全体が赤や黄色に染まり、色鮮やかな紅葉に包まれます。木々の葉が落ち、冬になると、ここは雪に覆われて一面の銀世界になります。</p>
</section>

<section id="animal">
<h2>工房のまわりにいる動物たち</h2>
<img src="images/photo03.jpg" width="250" height="165">
<p>キツネさん 工房のまわりにはいろいろな動物たちが棲んでいます。キツネ、タヌキ、イタチ、ウサギ、リス、シカ、イノシシ…。森の中で出会うこともあれば、ひょこっと工房に顔を出すこともあります。土や雪の上に残った足跡から、正体を探るのも楽しみです。</p>

<p>ただし、森の工房では彼らに餌をやることはしていません。自然にあるがままの姿で、いっしょに生活していきたいと考えているからです。彼らに出会ったときには、びっくりさせないように遠くからそっと眺めてあげてください。</p>
</section>


<footer>
<address>
<small>Copyright (C) Green Leaf, All rights reserved.</small>
</address>
</footer>
</div>
</body>
</html>

@charset "UTF-8";

* {
	margin: 0;
	padding: 0;
}

#container {
	margin: 0 auto;
	width: 760px;
}
header {
	background-image: url(../images/sky.jpg);
	background-repeat: no-repeat;
	width: 760px;
	height: 230px;
}
header h1 {
	padding: 20px;
}
header h2 {
	padding: 0 0 0 20px;
	color: #FFF;
}

nav {
	height: 25px;
	background-color: #960;
	margin-bottom: 10px;
}
nav h1 {
	float: left;
	display: inline;
	font-size: 18px;
	margin: 3px 10px;
	color: #FC6;
	line-height: 18px;
}
nav li {
	float: left;
	display: inline;
	width: auto;
	border-right: solid 1px #fff;
	line-height: 28px;
}
nav .nav_top {
	border-left: solid 1px #fff;
}
nav a {
	margin: 5px 10px;
	text-align: center;
	text-decoration: none;
	color: #fff;
}
nav a:hover {
	color: #F00;
}

section {
	clear: both;
}

section h2 {
	background-image: url(../images/bar-darkblue.png);
	background-repeat: no-repeat;
	width: 564px;
	height: 46px;
	padding: 4px 0 0 20px;
	color: #FFF;
}
#tree {
	height: 280px;
}
#tree img{
	float: left;
	display: inline;
	margin: 5px 10px 5px 0;
	width: 250px;
}
section p{
	font-size: 14px;
	margin: 5px 0 10px 0;
}
#shiki {
	height: 240px;
}
#shiki img{
	float: left;
	display: inline;
	margin: 5px 10px 5px 0;
	width: 250px;
}
#animal img{
	float: left;
	display: inline;
	margin: 5px 10px 5px 0;
	width: 260px;
}
footer {
	margin-top: 40px;
	text-align: right;
	clear: both;
}

脱線話（復活）

[http://tokiyo.hateblo.jp:title=四十路男Tokiyoの人生再スタートblogもやってます。

2013-03-18

79回目授業内容　WordPress PlugIn

[授業][Dreamweaver][PhotoShop][JavaScript][jQuery]

WordPress PlugIn

Akismet
- コメントのスパムを防ぐプラグイン

Wp Multibyte Patch
- 日本語処理の問題点を補完する必須プラグイン

WPtouch
- スマートフォンからの閲覧に最適化させるプラグイン

Ktai Style
- 日本の携帯電話に最適化して表示させるプラグイン

Breadcrumb NavXT
- パンくずリストを自動設定するプラグイン
- パンくずリストを表示させたい位置に以下のような記述を追加します

My Category Order
- カテゴリの並び順を変更できるプラグイン

jQuery Lightbox
- 投稿した写真画像をアルバム風に拡大して見せるプラグイン

WordPress Database Backup
- データベースのバックアップをするプラグイン
- 「ツール」→「バックアップ」

WordPress HTTPS
- 管理画面やフォームをSSLに対応させるプラグイン

Tweetable
- TwitterとWordPressを相互に連携させるプラグイン
- Twitter API キーが必要です

Feedback Champuru
- コメント欄にその記事のTwitterのつぶやきを表示させるプラグイン

TinyMCE Advanced
- 投稿画面のビジュアルエディターを強化するプラグイン

Smart YouTube PRO
- YouTubeの動画を記事とFeedに挿入するプラグイン

WP Super Cache
- アクセス耐性を高めてサイト表示を早くするプラグイン
- 「キャッシング」をチェックして、「ステータスを更新」ボタンを押す
- 有効化した状態でカスタマイズをしていると「更新状態」が見えない場合があるので注意が必要です

Jetpack
- 便利な複数の機能がまとまったプラグイン
- いろいろな機能が盛りだくさんのため、他のプラグインとバッティングする場合があります

WordPress Plugin SEO対策

ShowID for Post/Page/Category/Tag/Comment
- 投稿一覧及びカテゴリ一覧ページに「ID」が表示されるようになります

All in One SEO Pack
- タイトルやmeta要素を最適化し、内的SEOを強化するプラグイン

PS Auto Sitemap
- サイトマップを生成するプラグイン
- 表示設定には、ページの「id」が必要

Google XML Sitemaps
- Google、Yahoo!、bingのクローラー用サイトマップを自動生成するプラグイン

Yet Another Related Posts Plugin
- 各記事の下に、関連記事を自動的に表示するプラグイン
- 画面右上にある「表示オプション」をクリックし、設定窓を開いた後、すべてにチェックを入れる

Redirection
- 外部からリンクされている旧URLを、新URLにリダイレクトするプラグイン
- 「ソースURL：リダイレクト元のURL」
- 「ターゲットURL：リダイレクト先のURL」

404 Notifier
- 外部から存在しないページヘリンクされていることを通知してくれるプラグイン

Broken Link Checker
- サイト内のリンク切れを通知してくれるプラグイン

RSS Footer
- 配信されるRSSフィードの最後に、Copyrightの文章とURLを埋め込むプラグイン

Twitter Widget Pro
- Twitterのつぶやきを表示できるウィジェット表示用プラグイン

Facebook Comments for WordPress
- Facebookのニュースフィードに投稿されたコメントを表示するプラグイン

お問合せ

Contact Form 7
-

脱線話（復活）

[http://tokiyo.hateblo.jp:title=四十路男Tokiyoの人生再スタートblogもやってます。

2013-03-15

78回目授業内容　jQuery Mobileの続き・Mobile版〜WordPress・PlugIn

[授業][Dreamweaver][PhotoShop][JavaScript][jQuery]

jQuery Mobileの続き・Mobile版

GoogleMap

脱線話（復活）

[http://tokiyo.hateblo.jp:title=四十路男Tokiyoの人生再スタートblogもやってます。

2013-03-14

77回目授業内容　jQuery Mobileの続き・Mobile版、ThemeRoller

[授業][Dreamweaver][PhotoShop][JavaScript][jQuery]

jQuery Mobileの続き

ThemeRoller

GoogleMapを表示する
- ・・・出来ませんでした・・・。

明日またトライです！

Facebookいいねボタン・Twitterボタンの設置

FacebookはFacebookページを作成しないと作成できないようだ。

脱線話（復活）

[http://tokiyo.hateblo.jp:title=四十路男Tokiyoの人生再スタートblogもやってます。

2013-03-13

76回目授業内容　jQuery Mobileの続き・Mobile版、お問合せフォーム

[授業][Dreamweaver][PhotoShop][JavaScript][jQuery]

jQuery Mobileの続き

Mobile版、お問合せフォーム

下記のcheckboxのif文で時間を取られました。

チェックphpで入力されていない項目をif文で振り分けたかったのですが、チェックボックスはまだまだわかっていません。勉強が足りませんでした・・・。
次回頑張ります！

って事で帰ってから「Mobile版、お問合せフォーム」を完成させました。
- index.html

<div data-role="page" id="contact">
<div data-role="header">
<h1>TQS Contact</h1>
</div>
<div data-role="content">
<h2>jQuery Mobileのフォーム</h2>
<form id="Contents" action="php/form.php" method="post">

<div data-role="fieldcontain">
<label for="name">お名前：</label>
<input type="text" name="name" id="name" value="" placeholder="お名前を入力">
</div>

<div data-role="fieldcontain">
<label for="email">メールアドレス：</label>
<input type="email" id="email" name="email" placeholder="メールアドレスを入力">
</div>

<div  data-role="fieldcontain">
<fieldset data-role="controlgroup" data-type="horizontal">
<legend>お問い合わせ種類を選んで下さい。</legend>
<input type="checkbox" name="checkbox[]" id="check1" value="web" data-theme="d">
<label for="check1">Web製作</label>
<input type="checkbox" name="checkbox[]" id="check2" value="music" data-theme="d">
<label for="check2">音楽製作</label>
<input type="checkbox" name="checkbox[]" id="check3" value="question" data-theme="d">
<label for="check3">ご質問</label>
</fieldset>
</div>

<div data-role="fieldcontain">
<label for="textarea-a">お問い合わせ内容:</label>
<textarea name="message" id="message"></textarea>
</div>


<div data-role="fieldcontain">
<label for="gender">性別：</label>
<select name="gender" id="gender" data-role="slider" data-theme="b">
<option value="男性">男性</option>
<option value="女性">女性</option>
</select>
</div>

<div data-role="fieldcontain">
<label for="select-choice">オプション：</label>
<select name="shipper" id="shipper">
<option>選択してください</option>
<option value="プロフェッショナル">プロフェッショナル</option>
<option value="スタンダード">スタンダード</option>
<option value="エンタープライズ">エンタープライズ</option>
</select>
</div>

<div data-role="fieldcontain">
<label for="slider">満足度:</label>
<input type="range" name="slider" id="slider" value="0" min="0" max="5" data-theme="d" data-track-theme="d">
</div>

<div class="ui-grid-a">
<div class="ui-block-a">
<input type="reset" id="reset" data-theme="c" value="リセット">
</div>
<div class="ui-block-b">
<input type="submit" id="submit" data-theme="b" value="送信">
</div>
</div>

</form>
</div><!--content-->

- form.php

<?php
$name = $_POST['name'];
$email = $_POST['email'];
$checkbox = implode(", ", $_POST['checkbox']);
$message = $_POST['message'];
$gender = $_POST['gender'];
$shipper = $_POST['shipper'];
$slider = $_POST['slider'];
$name = htmlspecialchars($name);
$email = htmlspecialchars($email);
$checkbox = htmlspecialchars($checkbox);
$message = htmlspecialchars($message);
$gender = htmlspecialchars($gender);
$shipper = htmlspecialchars($shipper);
$slider = htmlspecialchars($slider);
?>
<!DOCTYPE html> 
<html> 
<head> 
<title>入力確認画面</title> 
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, maximum-scale=1.0">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script>
$(document).bind("mobileinit", function() {
	$.mobile.page.prototype.options.addBackBtn = true;
});
</script>
<script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
</head> 
<body> 

<div data-role="page" data-add-back-btn="true" data-back-btn-text="戻る">

<div data-role="header" data-position="inline">
<h1>確認画面</h1>
</div><!-- /header -->

<div data-role="content" id="Contents">
<?php
		if ($name==''){
			print '<th>お名前</th><td>' . 'お名前が入力されていません。</td></tr><br>';
		} else {
			print '<th>お名前：</th><td>' . $name. ' 様。</td></tr><br>';
		}
		if ($email==''){
			print '<th>メールアドレス</th><td>メールアドレスが入力されていません。</td></tr><br>';
		} else {
			print '<th>メールアドレス：</th><td>' . $email . '</td></tr><br>' . "\n";
		}
		if ($checkbox==''){
			print '<th>種類</th><td>種類が入力されていません。</td></tr><br>';
		} else {
			print '<th>種類：</th><td>' . $checkbox . '</td></tr><br>' . "\n";
		}
		if ($message==''){
			print '<th>お問合せ内容</th><td>お問合せ内容が入力されていません。</td></tr>';
		} else {
			print '<th>お問合せ内容：</th><td>' . $message . '</td></tr><br>' . "\n";
		}
		if ($gender==''){
			print '<th>性別</th><td>性別が入力されていません。</td></tr>';
		} else {
			print '<th>性別：</th><td>' . $gender . '</td></tr><br>' . "\n";
		}
		if ($shipper==''){
			print '<th>オプション</th><td>オプションが入力されていません。</td></tr>';
		} else {
			print '<th>オプション：</th><td>' . $shipper . '</td></tr><br>' . "\n";
		}
		if ($slider==''){
			print '<th>満足度</th><td>満足度が入力されていません。</td></tr>';
		} else {
			print '<th>満足度：</th><td>' . $slider . '</td></tr><br>' . "\n";
		}
?>

<div data-role="fieldcontain">
<?php
if ($name=='' || $email=='' || $checkbox=='' || $message=='' || $gender=='' || $shipper=='' || $slider==''){
	print '<form>' . "\n";
	print '<input type="button" onClick="history.back()" value="戻る">';
	print '</form>' . "\n";
} else {
print '<form action="thanks.php" method="post">' . "\n";
print '<input type="hidden" name="name" value="' . $name . '">';
print '<input type="hidden" name="email" value="' . $email . '">';
print '<input type="hidden" name="checkbox" value="' . $checkbox . '">';
print '<input type="hidden" name="message" value="' . $message . '">';
print '<input type="hidden" name="gender" value="' . $gender . '">';
print '<input type="hidden" name="shipper" value="' . $shipper . '">';
print '<input type="hidden" name="slider" value="' . $slider . '">';
print '<input type="button" onClick="history.back()" value="戻る">'."\n";
print '<input type="submit" value="送信">' . "\n";
print '</form>' . "\n";
}
?>

</div> 
</div><!-- /content -->

<div data-role="footer" class="footer-docs ui-bar" id="footer" data-theme="c">
<div data-role="controlgroup" data-type="horizontal">
<a href="#about" data-role="button" data-icon="back" data-rel="back" data-direction="reverse">Back</a>
<a href="#portfolio" data-role="button" data-icon="star">portfolio</a>
<a href="#access" data-role="button" data-icon="home">access</a>
<a href="#contact" data-role="button" data-icon="check">contact</a>
</div><!--controlgroup-->
		<form method="get" action="/doc/jquery_mobile/" style="float:left;margin-left:5px;">
			<input type="search" name="q" value="" data-theme="d" placeholder="ドキュメント検索..." />
		</form>
		<div style="float:right; margin-top:10px; margin-right:10px;">
			<a href="http://twitter.com/TokiyoTQS"><img src="http://dev.screw-axis.com/img/twitter.gif" /></a>
			<a href="http://facebook.com/ttokiyo"><img src="http://dev.screw-axis.com/img/facebook.png" /></a>
			<a rel="author" href="https://plus.google.com/103040855988995841420/posts"><img src="https://www.google.com/images/icons/ui/gprofile_button-16.png" width="16" height="16"></a>
		</div>
</div><!--footer-->
</div><!-- /page -->

</body>
</html>

- thanks.php

<!DOCTYPE html> 
<html> 
<head> 
<title>お問合せありがとうございました</title> 
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, maximum-scale=1.0">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script>
$(document).bind("mobileinit", function() {
	$.mobile.page.prototype.options.addBackBtn = true;
});
</script>
<script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
</head> 
<body> 

<div data-role="page" data-add-back-btn="true" data-back-btn-text="戻る">

<div data-role="header" data-position="inline">
<h1>ありがとうございました</h1>
</div><!-- /header -->

<div data-role="content" id="Contents">
<?php
 $dsn = 'mysql:dbname=_emailxxxxx;host=mysqlxxx.heteml.jp';
 $user = 'xxxxxxx';
 $password = 'xxxxxxxxx';
 $dbh = new PDO($dsn, $user, $password);
 $dbh -> query('SET NAMES UTF8');

$name = $_POST['name'];
$email = $_POST['email'];
$checkbox = $_POST['checkbox'];
$message = $_POST['message'];
$gender = $_POST['gender'];
$shipper = $_POST['shipper'];
$slider = $_POST['slider'];
$name = htmlspecialchars($name);
$email = htmlspecialchars($email);
$checkbox = htmlspecialchars($checkbox);
$message = htmlspecialchars($message);
$gender = htmlspecialchars($gender);
$shipper = htmlspecialchars($shipper);
$slider = htmlspecialchars($slider);

	print $name . '様<br>' . "\n";
	print 'お問合せありがとうございます。<br>' . "\n";
	print '種類「'.$checkbox.'」<br>' . "\n";
	print 'お問い合わせ内容「'.$message.'」<br>' . "\n";
	print '性別「'.$gender.'」<br>' . "\n";
	print 'オプション「'.$shipper.'」<br>' . "\n";
	print '満足度「'.$slider.'」を<br>' . "\n";
	print $email . 'にメールでお送り致しましたのでご確認下さい。' . "\n";
	
// メール本文の組み立て
mb_language("Ja");
mb_internal_encoding("UTF-8");

$mail_head = 'From:tokiyo@tqs.jp';
$subject = "お問い合せを受け付けました。";
$to = "tokiyo@tqs.jp, {$email}";
$title = "【メールフォームより】";
$body =  <<<EOM
--------------------------------------------------
【Tokyo Q Studio からのメール】
お問合せありがとうございました。

・お問合せ内容は
お名前：{$name}
メールアドレス：{$email}
種類：{$checkbox}
メッセージ：{$message}
性別：{$gender}
オプション：{$shipper}
満足度：{$slider}

です。
--------------------------------------------------
EOM;

// メール送信の実行
$rc = mb_send_mail($to, $title, $body, $mail_head);
 $sql = 'INSERT INTO email_temp(name, email, checkbox, message, gender, shipper, slider) VALUES("'.$name.'","'.$email.'","'.$checkbox.'","'.$message.'","'.$gender.'","'.$shipper.'","'.$slider.'")';
 $stmt = $dbh -> prepare($sql);
 $stmt -> execute();

 $dbh = null;
?>

</div><!-- /content -->

<div data-role="footer" class="footer-docs ui-bar" id="footer" data-theme="c">
<div data-role="controlgroup" data-type="horizontal">
<a href="#about" data-role="button" data-icon="back" data-rel="back" data-direction="reverse">Back</a>
<a href="#portfolio" data-role="button" data-icon="star">portfolio</a>
<a href="#access" data-role="button" data-icon="home">access</a>
<a href="#contact" data-role="button" data-icon="check">contact</a>
</div><!--controlgroup-->
		<form method="get" action="/doc/jquery_mobile/" style="float:left;margin-left:5px;">
			<input type="search" name="q" value="" data-theme="d" placeholder="ドキュメント検索..." />
		</form>
		<div style="float:right; margin-top:10px; margin-right:10px;">
			<a href="http://twitter.com/TokiyoTQS"><img src="http://dev.screw-axis.com/img/twitter.gif" /></a>
			<a href="http://facebook.com/ttokiyo"><img src="http://dev.screw-axis.com/img/facebook.png" /></a>
			<a rel="author" href="https://plus.google.com/103040855988995841420/posts"><img src="https://www.google.com/images/icons/ui/gprofile_button-16.png" width="16" height="16"></a>
		</div>
</div><!--footer-->
</div><!-- /page -->

</body>
</html>

サンプル

脱線話（復活）

最近は色々と仕事が入ってくるようになりました。
頑張らないといけません！
やるぞ！

[http://tokiyo.hateblo.jp:title=四十路男Tokiyoの人生再スタートblogもやってます。