ActionScript（アクションスクリプト）とは、アドビシステムズ社の製品であるFlashに使用されるプログラミング言語
ECMAScript(ECMA-262)を拡張したスクリプト（European Computer Manufacturer Association）

ActionScriptでできること

タイムラインに関係なく動くアニメーションを作る
ユーザーインターフェースの作成に役立てる
サーバーアプリケーションとデータのやりとりをする
サウンド・ビデオをストリーミング配信する

ActionScriptを学ぶ理由

各ユーザーが個別の体験を得られる環境の提供
ムービークリップとそのプロパティに対するより柔軟な制御
ムービー内の要素の、プログラムによる（タイムラインを使わない）アニメーション化
フォームやチャットプログラムなどを作成するためのデータ入出力
時間経過や現在の日付に反応する動的なプロジェクトの作成
サウンドのボリュームやパンの動的な制御

ActionScript の 6W1H

What「何がしたいのか」を考える
How「どうすればよいのか」を考える
When「動きの流れ」を考える
Who「それぞれの役割」を考える
What「それぞれの関係」を考える
Write「Script」を書いてる
Why「なぜ動かないか」を考える

HTML5とFlashの機能比較

ActionScriptの実行環境

Flash Playerがインストールされた環境

コンパイラ型とインタプリタ型

どちらも人間が記述したテキスト形式
正確には「ソース・プログラム」と呼びます
ソース・プログラムはそのままではコンピューターには理解できないため、「オブジェクト・プログラム」と呼ばれるコンピューターが直接実行できる形式に変化する必要があります
オブジェクト・プログラムの中身はコンピューターのCPUが直接実行できる形式です
機械用の言語という意味で、「機械語（マシン語）」と呼びます

コンパイラ型

ソース・プログラムを「コンパイル」という処理を行なって一気にオブジェクト・プログラムに変換します
その処理を行うプログラムのことを「コンパイラ」と呼びます
ソース・プログラムはテキストファイルですが、オブジェクト・プログラムは「バイナリファイル」です

インタプリタ型

オブジェクト・プログラムを作成することなく、インタプリタと呼ばれるプログラムが、ソース・プログラムを逐次解釈しながら実行していきます
ActionScriptの仲間である「JavaScript」は、インタプリタ型です

ActionScriptは、両方の機能をもつ中間のタイプです。

AVM (ActionScript Virtual Machine)と呼ばれる仮想環境で動作するマシン語のコードです。

インタプリタ型の言語のように手軽に使用できるプログラム言語のことを「スクリプト言語」と呼びます。

アクションの種類

アクションには2種類の記述の方法があります。

オブジェクトアクション
フレームアクション

※ActionScript3.0は、フレームアクションのみ

オブジェクトアクション

ムービークリップやボタンに直接割り当てる
記述したアクションは、そのインスタンスにだけ作用する
どのオブジェクトが何を実行するのか、直感的にわかりやすい
あとで見直したとき、どのオブジェクトにどんなアクションを書いたのかわからなくなりやすい
アクションに制限がある

オブジェクトアクションの書き方

ステージ上のインスタンスを選択し、アクションパネルに記述する

フレームアクション

メインのタイムラインもしくはムービークリップのタイムラインのキーフレームに書き込む
ターゲットパスを多用するため、どのインスタンスに何を実行させるのかわかりにくい
アクションに制限がない

フレームアクションの書き方

アクションの記述用レイヤーを作成
タイムラインの空白キーフレームを選択し、アクションパネルに記述する

アクションパネル

初心者は、いま書いているActionが「フレーム」になのか「オブジェクト」になのかがわからないときがあります。

まず、「アクションパネルの左上」に注意してみましょう。

フレームアクション

オブジェクトアクション

初心者の記述ミスの原因は、記述しているところが「フレーム」か「オブジェクト」かを確認せずに記述をはじめることです。

2014-10-14

2014-12-11

メディアクエリ基礎

RWD

Media Queries

Media Queries

menu1
menu2
menu3

Contents 
Menu1
Contents 
Menu2

2014.10.07
レスポンシブWebデザインのサイトを制作するには、メディアクエリを自由に使いこなせることが必要です。きちんと把握するようにしましょう。
2014.10.06
メディアクエリに加えて、フルードイメージとフルードグリッドの利用も必須です。あらゆるデバイスに対応する際に重要な知識になります。
2014.10.03
このページはメディアクエリの使い方を解説するための簡易的なページです。構成は非常にシンプルですが、メディアクエリの使い方がよくわかると思います。
2014.10.02
今後はレスポンシブWebデザインのサイト制作が非常に重要になることが考えられます。とても奥の深い制作方法ですので、さまざまな情報を参照して制作方法を学んでください。
2014.10.01
PC向けでは２カラム構成ですが、スマートフォン向けでは１カラム構成になるように設定しています。
© 2014 Webデザインの勉強

<!DOCTYPE html>
<htmllang="ja">
<head>
<metacharset="utf-8">
<metaname="viewport"content="width=device-width">
<linkrel="stylesheet"href="css/style.css">
<title>メディアクエリ</title>
<!--[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>
<divid="container">

<header>
<h1>Media Queries</h1>
</header><!-- /header -->

<nav>
<ul>
<li><ahref="#">menu1</a></li>
<li><ahref="#">menu2</a></li>
<li><ahref="#">menu3</a></li>
</ul>
</nav><!-- /nav -->

<divid="content">

<aside>

<section>
<h2>content Menu1</h2>

</section>
<section>
<h2>content Menu2</h2>
</section>

</aside>

<article>

<section>
<h3>2014.10.07</h3>
<p>レスポンシブWebデザインのサイトを制作するには、メディアクエリを自由に使いこなせることが必要です。きちんと把握するようにしましょう。</p> 
</section>

<section>
<h3>2014.10.06</h3>
<p>メディアクエリに加えて、フルードイメージとフルードグリッドの利用も必須です。あらゆるデバイスに対応する際に重要な知識になります。</p>
</section>

<section>
<h3>2014.10.03</h3>
<p>このページはメディアクエリの使い方を解説するための簡易的なページです。構成は非常にシンプルですが、メディアクエリの使い方がよくわかると思います。</p>
</section>

<section>
<h3>2014.10.02</h3>
<p>今後はレスポンシブWebデザインのサイト制作が非常に重要になることが考えられます。とても奥の深い制作方法ですので、さまざまな情報を参照して制作方法を学んでください。</p>
</section>

<section>
<h3>2014.10.01</h3>
<p>PC向けでは２カラム構成ですが、スマートフォン向けでは１カラム構成になるように設定しています。</p>
</section>

</article>

</div>

<footer>
<small>&copy; 2014 Webデザインの勉強</small>
</footer><!-- /footer -->

</div><!-- /#container -->
</body>
</html>

@charset "UTF-8";

/* reset */
html, body, div, h1, h2, h3, p, small, dl, dt, dd, ul, li,
article, aside, footer, header, nav, section {
  margin:0;
  padding:0;
}
ul {
  list-style:none;
}
a {
  text-decoration: none;
}

/* 共通設定およびスマートフォン向けのスタイル */
body {
  font-family:
    "Hiragino Kaku Gothic ProN",
    Meiryo,
    sans-serif;
  width: 100%;
  font-size: 16px;
  line-height: 1.5;
  background: #FFF;
}
header {
  text-align: center;
  background: #333;
}
header h1 {
  font-size: 2.3em;
  padding: 0.4em 0 0.4em 0;
  margin: 0 0 0.2em;
  color: #FFF;
}

nav {
  background: #B9DEF3;
  overflow: hidden;
}
nav ul li {
  width: 100%;
  text-align: center;
  line-height: 2.0em;
  color: #FFF;
  border-bottom: 1px solid #FFF;
}
nav li a {
  color: #000;
  font-weight: bold;
}
nav li a:hover {
  color: #FFF;
  background: #379DEC;
  display: block;
}

#content {
  width: 80%;
  margin: 1em auto 1em;
}
#content h1{
  font-weight: bold;
}
section h2 {
  color: #FFF;
  font-size: 1.2em;
}
section h3 {
  font-size: 1.1em;
}
section {
  margin: 0 0 1em 0;
}
article p {
  margin-left: 2em;
}
aside > section {
  height: 130px;
  background: #1D80EF;
  padding: 15px 0 0 20px;
}
article > section {
  padding-bottom: 10px;
  border-bottom: 1px solid #CCC;
}
footer {
  width: 100%;
  text-align: center;
}

/* Media Queries による切り替え */

/* タブレット向けのスタイル：481px ～ 768px */
@media only screen and (min-width: 481px) {
 nav {
   padding: 0 0 0 7%;
 }
 nav ul {
 }
 nav ul li {
  float:left;
  width: 100px;
  text-align: center;
  line-height: 3.0em;
  border-left: 1px solid #FFF;
  border-right: 1px solid #FFF;
  border-bottom: none;
 }
aside section {
   width: 90%;
   float: left;
   display: block;
 }
}

/*  PC向けのスタイル：769px～960px */
@media only screen and (min-width: 769px) {
 article {
   width: 65%;
   float: right;
 }
 aside {
   width: 30%;
   float: left;
 }
 footer {
   clear: both;
}

2014-10-14

2014-12-10

グリッドレイアウト

HTML5

HTML5でのカラムレイアウト

素材

html5shiv.js

IE8以前のブラウザにも、HTML5の新要素を認識させるためのライブラリ

ie9.js

internetexplore6,7,8をie9に近づけるためのライブラリ
position:fixed;
max-heightやmin-heightなどの最大サイズ設定
aタグ以外での:hover
margin: 0 autoで中央寄せ
透過PNG
opacityで透明度

《index.html》

<!DOCTYPE html>
<htmllang="ja">
<head>
<metacharset="UTF-8">
<title>おいしいおかず</title>
<linkrel="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>
<divid="container">
<divclass="content">
<header>
<h1><imgsrc="img/logo01.png"alt="ロゴ"></h1>
<nav>
<ul>
<li><imgsrc="img/nav01_01.png"alt="CONCEPT"></li>
<li><imgsrc="img/nav02_01.png"alt="MENU"></li>
<li><imgsrc="img/nav03_01.png"alt="ACCESS"></li>
<li><imgsrc="img/nav04_01.png"alt="NEWS"></li>
</ul>
</nav>
</header>
<section>
<figure><imgsrc="img/ph26_l.jpg"alt=""></figure>
</section>
</section>
<figure><imgsrc="img/ph36_mt.jpg"alt=""></figure>
<figure><imgsrc="img/ph19_s.jpg"alt=""></figure>
<figure><imgsrc="img/ph37_s.jpg"alt=""></figure>
</section>
<section>
<figure><imgsrc="img/ph23_my.jpg"alt=""></figure>
<figure><imgsrc="img/ph28_s.jpg"alt=""></figure>
<figure><imgsrc="img/ph05_s.jpg"alt=""></figure>
</section>
</div>
<divclass="content">
<section>
<figure><imgsrc="img/ph12_my.jpg"alt=""></figure>
<figure><imgsrc="img/ph02_s.jpg"alt=""></figure>
<figure><imgsrc="img/ph22_s.jpg"alt=""></figure>
</section>
<section>
<figure><imgsrc="img/ph10_l.jpg"alt=""></figure>
</section>
<section>
<figure><imgsrc="img/ph21_s.jpg"alt=""></figure>
<figureclass="right"><imgsrc="img/ph07_mt.jpg"alt=""></figure>
<figure><imgsrc="img/ph03_s.jpg"alt=""></figure>
</section>
<section>
<figure><imgsrc="img/ph09_l.jpg"alt=""></figure>
</section>
<section>
<figure><imgsrc="img/ph13_s.jpg"alt=""></figure>
<figure><imgsrc="img/ph27_s.jpg"alt=""></figure>
<figure><imgsrc="img/ph24_my.jpg"alt=""></figure>
</section>
</div>
<divclass="content">
<section>
<figure><imgsrc="img/ph11_l.jpg"alt=""></figure>
</section>
<section>
<figure><imgsrc="img/ph18_s.jpg"alt=""></figure>
<figureclass="right"><imgsrc="img/ph01_mt.jpg"alt=""></figure>
<figure><imgsrc="img/ph17_s.jpg"alt=""></figure>
</section>
<section>
<figure><imgsrc="img/ph20_s.jpg"alt=""></figure>
<figure><imgsrc="img/ph06_s.jpg"alt=""></figure>
<figure><imgsrc="img/ph15_my.jpg"alt=""></figure>
</section>
<section>
<figure><imgsrc="img/ph25_s.jpg"alt=""></figure>
<figure><imgsrc="img/ph08_s.jpg"alt=""></figure>
<figure><imgsrc="img/ph16_s.jpg"alt=""></figure>
<figure><imgsrc="img/ph04_s.jpg"alt=""></figure>
</section>
<section>
<figure><imgsrc="img/ph14_l.jpg"alt=""></figure>
</section>
</div>
</div>
</body>
</html>

《style.css》

@charset "utf-8";

/* reset */
body, article, section, figure, header, nav, h1, ul, li, img {
  margin: 0;
  padding: 0;
}
ul {
  list-style: none;
}
a {
  text-decoration: none;
}
img {
  border: none;
  vertical-align: bottom;
  margin: 10px;
  float: left;
}

/* layout */
#container {
  width: 960px;
  margin: 0 auto;
}
header, section {
  width: 320px;
  float: left;
}
header li {
  float: left;
  display: inline;
}
.content {
  width: 320px;
  margin: 10px 0;
  float: left;
  display: inline;
  overflow: hidden;
}
.right {
  float: right;
}

2014-10-14

2014-12-09

文字サイズのバランスで見せる

Photoshop

まとまって見える文字組みのコツ

Illustratorでの文字詰め
Webでの文字詰めは、カーニングが基本

限定アイテムをつくる

練習素材

文字ツールを使う

文字入力（配置したい位置ではなく、別の開いているスペースで入力する）
入力後、移動ツールで配置したい位置に置く

行間・字間を調節する

テキストで表示する場合は不要ですが、画像にする場合は微調整が必要です

行間を詰める

文字サイズより少し大きめにする程度（例：23px/25px）

字間を詰める

カーニングを「オプティカル」に設定

縦書き

「縦書き文字ツール」を選択する

ワープテキスト

「ワープテキスト」→「円弧」を選択する

自由変形

「編集」→「自由変形」を選択する
角度を微調整する

境界線

「レイヤー効果」→「境界線」を選択する

段組テキスト

「文字ツール」で文字を入れたいスペースをドラッグする
禁則処理を「強い禁則」を選択すると、句読点などが行頭に来てしまうことを防ぐことができます
画像ではなくテキストで展開する場合は、左揃えのままにします

その他の文字も入れて完成させます

2014-10-14

2014-12-08

Googleフォームでsend-mail

フォーム

Googleドライブでフォーム作成

Googleドライブを選択

フォームを選択

入力フィールド（テキスト）を作成

テキストを選択、「質問のタイトル」を「お名前」にする

アイテムを追加

テキストを選択、「質問のタイトル」を「メールアドレス」にする
エラーチェック：@が記入されない場合は、エラーを返す

アイテムを追加

テキストを選択、「質問のタイトル」を「件名」にする

アイテムを追加

段落テキストを選択、「質問のタイトル」を「お問い合わせ内容」にする

「回答先を選択する」をクリック

「新規スプレッドシート」を選択し、任意のシート名を入力

作成

確認ページに表示する内容を記述

「回答を表示」をクリックする

「ツール」→「スクリプトエディタ」を選択

「スプレッドシート」を選択

以下のスクリプトを「コピー&ペースト」

function sendMailFromForm() {
    Logger.log('sendMailFromForm() debug start');

    //------------------------------------------------------------
    // 設定エリアここから
    //------------------------------------------------------------

    // 件名、本文、フッター
    var subject = "[お問い合わせ]"; 
    var body
        = "お問い合わせありがとうございます。\n\n"
        + "------------------------------------------------------------\n";
    var footer
        = "------------------------------------------------------------\n\n"
        + "後ほど担当者よりご連絡させていただきます。";

    // 入力カラム名の指定
    var NAME_COL_NAME = 'お名前';
    var MAIL_COL_NAME = 'メールアドレス';
    var SUBJ_COL_NAME = '件名';

    // メール送信先
    var admin = "admin@example.com"; // 管理者（必須）
    var cc    = "";    // Cc:
    var bcc   = admin; // Bcc:
    var reply = admin; // Reply-To:
    var to    = "";    // To: （入力者のアドレスが自動で入ります）

    //------------------------------------------------------------
    // 設定エリアここまで
    //------------------------------------------------------------

    try{
        // スプレッドシートの操作
        var sh   = SpreadsheetApp.getActiveSheet();
        var rows = sh.getLastRow();
        var cols = sh.getLastColumn();
        var rg   = sh.getDataRange();
        Logger.log("rows="+rows+" cols="+cols);

        // メール件名・本文作成と送信先メールアドレス取得
        for (var j = 1; j <= cols; j++ ) {
            var col_name  = rg.getCell(1, j).getValue();    // カラム名
            var col_value = rg.getCell(rows, j).getValue(); // 入力値
            body += "【"+col_name+"】\n";
            body += col_value + "\n\n";
            if ( col_name === NAME_COL_NAME ) {
                body = col_value+" 様\n\n"+body;
            }
            if ( col_name === MAIL_COL_NAME ) {
                to = col_value;
            }
            if ( col_name === SUBJ_COL_NAME ) {
                subject += col_value;
            }
        }
        body += footer;

        // 送信先オプション
        var options = {};
        if ( cc )    options.cc      = cc;
        if ( bcc )   options.bcc     = bcc;
        if ( reply ) options.replyTo = reply;

        // メール送信
        if ( to ) {
            MailApp.sendEmail(to, subject, body, options);
        }else{
            MailApp.sendEmail(admin, "【失敗】Googleフォームにメールアドレスが指定されていません", body);
        }
    }catch(e){
        MailApp.sendEmail(admin, "【失敗】Googleフォームからメール送信中にエラーが発生", e.message);
    } 
}

23行目の発信者のメールアドレスを変更する

「リソース」→「現在のプロジェクトのトリガー」をクリック

「プロジェクト名」を記述して「OK」

「トリガー設定されていません。」をクリック

最後のプルダウンを「フォーム送信時」に変更し、保存する

[sendMailFromForm][スプレッドシートから][フォーム送信時]の順

承認を聞かれるので「続行」

「承認する」をクリックする

フォームを送信

「共有するリンク - 埋め込む」で、iframeソースコードを取得
HTMLドキュメントにiframeソースコードを貼り付ける
サーバーにアップロードして完了

2014-10-14

2014-12-07

フォームの各部品

Form

お問い合せフォーム

各部品の確認

テキスト入力

<!DOCTYPE html>
<htmllang="ja">
<head>
<metacharset="UTF-8">
<title>お問い合わせ</title>
</head>
<body>
<h1>お問い合わせフォーム</h1>
<formaction="#"method="post">
<p>名前：<inputtype="text"name="name"size="20"maxlength="10"value="お名前"></p>
<p>内容：<textareaname="subject"rows="5"cols="40">お問い合せ内容</textarea></p>
<p><inputtype="submit"value="送信"></p>
</form>
</body>
</html>

チェックボックス

<!DOCTYPE html>
<htmllang="ja">
<head>
<metacharset="UTF-8">
<title>チェックボックス</title>
</head>
<body>
<h1>チェックボックス</h1>
<formaction="#"method="post">
<p>スマートフォン：
<label><inputtype="checkbox"name="mobile"value="1"checked>iPhone</label>
<label><inputtype="checkbox"name="mobile"value="2">Android</label>
<label><inputtype="checkbox"name="mobile"value="3">その他</label>
</p>
<p><inputtype="submit"value="送信"></p>
</form>
</body>
</html>

ラジオボタン

<!DOCTYPE html>
<htmllang="ja">
<head>
<metacharset="UTF-8">
<title>ラジオボタン</title>
</head>
<body>
<h1>ラジオボタン</h1>
<formaction="#"method="post">
<p>性別：
<label><inputtype="radio"name="sex"value="male"checked>男性</label>
<label><inputtype="radio"name="sex"value="female">女性</label>
</p>
<p><inputtype="submit"value="送信"></p>
</form>
</body>
</html>

<!DOCTYPE html>
<htmllang="ja">
<head>
<metacharset="UTF-8">
<title>リスト</title>
</head>
<body>
<h1>リスト</h1>
<formaction="#"method="post">
<p>言語：
<selectname="language">
<optionvalue=""selected>以下の言語を選択してください</option>
<optionvalue="1">日本語</option>
<optionvalue="2">英語</option>
<optionvalue="3">フランス語</option>
<optionvalue="4">スペイン語</option>
<optionvalue="5">韓国語</option>
</select>
</p>
<p><inputtype="submit"value="送信"></p>
</form>
</body>
</html>

ラベルを付ける

ラジオボタンでは、選択する文字のみにラベルを付けても機能します

<!DOCTYPE html>
<htmllang="ja">
<head>
<metacharset="UTF-8">
<title>ラベルを付ける</title>
</head>
<body>
<h1>ラベルを付ける</h1>
<formaction="#"method="post">
<p>スマートフォン：
<label><inputtype="checkbox"name="mobile"value="1"checked>iPhone</label>
<label><inputtype="checkbox"name="mobile"value="1">Android</label>
<label><inputtype="checkbox"name="mobile"value="1">その他</label>
</p>
<p>性別：
<inputtype="radio"name="sex"value="male"id="male"checked><labelfor="male">男性</label>
<inputtype="radio"name="sex"value="female"id="female"><labelfor="female">女性</label>
</p>
<p><inputtype="submit"value="送信"></p>
</form>
</body>
</html>

パスワード

<!DOCTYPE html>
<htmllang="ja">
<head>
<metacharset="UTF-8">
<title>パスワード</title>
</head>
<body>
<h1>パスワード入力</h1>
<formaction="#"method="post">
<p>パスワード：<inputtype="password"name="password"size="10"maxlength="5"></p>
<p><inputtype="submit"value="送信"></p>
</form>
</body>
</html>

ファイルをアップロード

<!DOCTYPE html>
<htmllang="ja">
<head>
<metacharset="UTF-8">
<title>ファイルをアップロード</title>
</head>
<body>
<h1>写真をアップロード</h1>
<formaction="#"method="post"enctype="multipart/form-data">
<p>写真：
  <inputtype="file"name="picture">
</p>
<p><inputtype="submit"value="送信"></p>
</form>
</body>
</html>

隠しデータの送信

<!DOCTYPE html>
<htmllang="ja">
<head>
<metacharset="UTF-8">
<title>隠しデータの送信</title>
</head>
<body>
<h1>隠しデータの送信</h1>
<formaction="#"method="post">
<p><inputtype="hidden"name="user_id"value="012345"></p>
<p><inputtype="submit"value="送信"></p>
</form>
</body>
</html>

基本形（1）

<!DOCTYPE html>
<htmllang="ja">
<head>
<metacharset="UTF-8">
<title>フォームの練習（1）</title>
<style>
#myform label	{
	font-size: 0.875em;
	margin-bottom: 3px;
	display: block;
}
</style>
</head>
<body>
<formaction="#"method="post"id="myform">
<p>
<labelfor="user" >名前</label>
<inputtype="text"id="user"name="username">
</p>
<p>
<labelfor="mail" >メールアドレス</label>
<inputtype="text"id="mail"name="mailaddress">
</p>
<p>
<labelfor="com" >コメント</label>
<textareaid="com"name="comment"cols="40"rows="8"></textarea>
</p>
<p><inputtype="submit"value="送信"id="submit"></p>
</form> 
</body>
</html>

基本形（2）

<!DOCRTPE html>
<htmllang="ja">
<head>
<metacharset="UTF-8">
<title>フォームの練習（2）</title>
<style>
#myform label	{
	font-size: 0.875em;
	width: 100px;
	display: block;
	float: left;	
}
</style>
</head>
<body>
<formaction="#"method="post"id="myform">
<p>
<labelfor="user" >名前</label>
<inputtype="text"id="user"name="username">
</p>
<p>
<labelfor="mail" >メールアドレス</label>
<inputtype="text"id="mail"name="mailaddress">
</p>
<p>
<labelfor="com" >コメント</label>
<textareaid="com"name="comment"cols="40"rows="8"></textarea>
</p>
<p><inputtype="submit"value="送信"id="submit"></p>
</form> 
</body>
</html>

table

表示の崩れがなくなる
色が付けやすくなる

<!DOCRTPE html>
<htmllang="ja">
<head>
<metacharset="UTF-8">
<title>テーブルで組むフォーム</title>
<style>
#myform	{
	font-size: 0.875em;
	width: 500px;
}
#myform label	{
	font-size: 0.875em;
}
#myform table	{
	width: 100%;
	border-collapse: collapse;
}
#myform th {
	text-align: left;
	width: 100px;
	padding: 8px;
	background-color: #DFF5B8;
	border: solid 1px #AAA;
}
#myform td {
	padding: 8px;
	border: solid 1px #AAA;
}
#myform p	{
	text-align:center;
}
</style>
</head>
<body>
<formaction="#"method="post"id="myform">
<table>
<tr>
<th><labelfor="user" >名前</label></th>
<td><inputtype="text"id="user"name="username"></td>
</tr>
<tr>
<th><labelfor="mail" >メールアドレス</label></th>
<td><inputtype="text"id="mail"name="mailaddress"></td>
</tr>
<tr>
<th><labelfor="com" >コメント</label></th>
<td><textareaid="com"name="comment"cols="38"rows="8"></textarea></td>
</tr>
</table>
<p><inputtype="submit"value="送信"id="submit"></p>
</form> 
</body>
</html>

focus

「:focus」を使った擬似クラスの設定

#user:hover, #mail:hover, #com:hover {
	background-color: #FFFEE8;
}
#user:focus, #mail:focus, #com:focus {
	background-color: #EBFEFB;
}

実際には、ブラウザの初期値が使用しやすいので設定しません

検索フォーム

<!DOCTYPE html>
<htmllang="ja">
<head>
<metacharset="UTF-8">
<title>検索フィールド</title>
<style>
#search #text  {
  width: 150px;
  padding: 4px 10px;
  border-radius: 6px;
}
#search #submit  {
  font-size: 18px;
  width: 50px;
  margin-left: 2px;
  vertical-align: middle;
  cursor: pointer;
}
</style>
</head>
<body>
<formaction="#"method="get"id="search">
<p>
<inputtype="text"id="text"name="keyword">
<inputtype="submit"id="submit"value="検索">
</p>
</form>
</body>
</html>

2014-10-14

2014-12-06

ユーザーからの入力を受け取るフォーム

Form

フォームとは

ブラウザからサーバー側へ情報を送信するための仕組み
HTMLタグで作成し、情報を受け取る処理はPHPで記述します

フォームの種類

文字を入力する部分	テキストボックス
	パスワード用テキストボックス
	テキストエリア
選択肢を提示する部分	ラジオボタン
	セレクトボタン
	チェックボックス
その他	サブミット（送信）ボタン

フォームの仕組み

formタグを使う
action属性：送信先のPHPプログラムを指定する（Webサーバーの「URI」）
method属性：送信方法を指定する

フォーム作成

入力フォームを表示
フォームは通常ひとつのサブミット（実行）ボタンを持つ
「method 属性」で指定した転送方法で、「action 属性」で指定したアクションを呼び出す

文字を入力する部品

form要素のaction属性に送信先「request.php」を設定する
送信方法は「post」
name属性を指定することが必須

<formaction="request.php"method="post"> 
名前<br>
<inputtype="text"name="name"><br>
パスワード<br>
<inputtype="password"name="password"><br>
備考<br>
<textareaname="note"cols="40"rows="5"></textarea>
</form>

選択肢の中からひとつ選択する部品

複数の選択肢から「１つ」選択してもらう場合は、「ラジオボタン」を指定する
選択肢が多い場合は「セレクトボックス」を指定する
送信方法は「post」
name属性を指定することが必須
選択肢のvalue属性は数字にすると､データベースで扱いやすくなります

<formaction="request.php"method="post"> 
性別<br>
<inputtype="radio"name="sex"value="1"> 男性
<inputtype="radio"name="sex"value="2"> 女性
<inputtype="radio"name="sex"value="9"> 解答しない <br>
都道府県<br>
<selectname="pref">
<optionvalue="1"> 北海道 </option>
<optionvalue="2"> 青森県 </option>
<optionvalue="3"> 岩手県 </option>
<!-- 中略 -->
<optionvalue="47"> 沖縄県 </option>
</select>
</form>

選択肢の中から複数選択する部品

複数の選択肢から複数選択してもらう場合は、「チェックボックス」を指定する
type属性に「checkbox」を指定します
name属性に角括弧（ブラケット）を指定し､配列形式で受け取れるようにします

<formaction="request.php"method="post"> 
趣味<br>
<inputtype="checkbox"name="hobby[]"value="1">インターネット
<inputtype="checkbox"name="hobby[]"value="2"> 読書
<inputtype="checkbox"name="hobby[]"value="3">ショッピング
<inputtype="checkbox"name="hobby[]"value="4">サイクリング
<inputtype="checkbox"name="hobby[]"value="5">音楽鑑賞
</form>

送信ボタン

送信ボタンを用意することで、利用者にフォームを送信してもらうことができます
type属性に「submit」を指定します

<formaction="request.php"method="post"> 
<inputtype="submit"name="submit"value=" 送信 "> 
</form>

Dreamweaverでformを作成

Dreamweaver 挿入ツールの使い方

コードビューとデザインビューでは挿入されるタグが違う
formの場合、コードビュー：シンプル、デザインビュー：アクセシビリティ付加

挿入パネル（フォーム）

通常はパネルを使用することはありませんが、あえて機能を使うとどうなるのか試してみます。

forｍを作成

form挿入

テキストフィールド挿入

一般で挿入

コードビューで挿入する。

アクセシビリティで挿入

デザインビューで挿入する。

p要素で囲むことにより、２行目以降は改行されて表示されます。

ActionScriptとは

ActionScriptでできること

ActionScriptを学ぶ理由

ActionScript の 6W1H

HTML5とFlashの機能比較

ActionScriptの実行環境

コンパイラ型とインタプリタ型

コンパイラ型

インタプリタ型

アクションの種類

オブジェクトアクション

オブジェクトアクションの書き方

フレームアクション

フレームアクションの書き方

アクションパネル

フレームアクション

オブジェクトアクション

HTML5でのカラムレイアウト

html5shiv.js

ie9.js

限定アイテムをつくる

文字ツールを使う

行間・字間を調節する

行間を詰める

字間を詰める

縦書き

ワープテキスト

自由変形

境界線

段組テキスト

Googleドライブでフォーム作成

入力フィールド（テキスト）を作成

アイテムを追加

アイテムを追加

アイテムを追加

「回答先を選択する」をクリック

「新規スプレッドシート」を選択し、任意のシート名を入力

確認ページに表示する内容を記述

「回答を表示」をクリックする

「ツール」→「スクリプトエディタ」を選択

「スプレッドシート」を選択

「リソース」→「現在のプロジェクトのトリガー」をクリック

「プロジェクト名」を記述して「OK」

「トリガー設定されていません。」をクリック

最後のプルダウンを「フォーム送信時」に変更し、保存する

承認を聞かれるので「続行」

フォームを送信

お問い合せフォーム

テキスト入力

リスト

ラベルを付ける

パスワード

ファイルをアップロード

隠しデータの送信

基本形（1）

基本形（2）

table

focus

検索フォーム

フォームとは

フォームの種類

フォームの仕組み

フォーム作成

文字を入力する部品

選択肢の中からひとつ選択する部品

選択肢の中から複数選択する部品

送信ボタン

Dreamweaverでformを作成

Dreamweaver 挿入ツールの使い方

挿入パネル（フォーム）

forｍを作成

form挿入

テキストフィールド挿入

一般で挿入

アクセシビリティで挿入

テキストエリア挿入

ラジオボタン挿入

チェックボックス挿入

選択（リスト / メニュー）