アンケート フォームの作成

●ただのフォームから

<form method="POST" action="xxx.php">
    <label>名前：<input type="text" name="name" placeholder="山田　太郎" /></label><br /><br />
    <label>メールアドレス：<input type="email" name="email" /></label><br /><br />
    <label>郵便番号：<input type="number" name="zip" /></label><br /><br />
    性別：　<label>女：<input type="radio" name="sexes" value="wman" /></label>
          　<label>男：<input type="radio" name="sexes" value="man" checked /></label><br /><br />
    <label>年齢：
    <select name="age">
     <option value="age_10">10代</option>
     <option value="age_20">20代</option>
     <option value="age_30">30代</option>  
     <option value="age_40">40代</option>
    </select>
    </label><br /><br />
    ご使用のOS：<br />
    <label><input type="checkbox" name="os" value="win" checked/>Win</label>
    <label><input type="checkbox" name="os" value="mac" />Mac</label><br /><br />

    <label>サイトへのご意見：<br />
     <textarea name="message" placeholder="ここにテキスト"></textarea>
    </label><br /><br />
  
  <input type="submit" value="送信" />
</form>

※『placeholder』属性はhtml5から
※半角入力はCSSで制御（ime-mode）できるが、IE独自仕様、使うのにためらう。絶対半角ではない。googleが制御してないから使わない
※『type="email"』は『html5』で追加された機能
※ラジオボタンやセレクトなど選択肢が複数の場合は、nemeとvalueで一組








------------------------　参考サイト　-----------------------------

html5ありのフォーム
http://www.htmq.com/html5/input.shtml

htmlフォーム
http://www7b.biglobe.ne.jp/~homepage-note/html-base-3.html

フォームのおさらい　※HTML
http://hinaoka.blogspot.jp/2011/06/html.html


ime-mode－スタイルシートリファレンス
http://www.htmq.com/style/ime-mode.shtml

日本語入力(IME)の状態を制御する方法
http://allabout.co.jp/gm/gc/23804/

HTML4からHTML5でかわったこと（一部）

◆strongとemの役割/強調するタグの使いわけ　

→strong
強調箇所→重要性

→em
よくつかってないからわからん→強調



～～～例～～～

今日の課題は、「きんぴらごぼう」です。

↓↓↓（重要だとして）

<strong>今日の課題は、<em>「きんぴらごぼう」</em>です。</strong>

※必ずしも一緒に使う必要はなし

◆dlタグは定義リストという意味あいがなくなった

定義リストとして使いたい場合は、


<dt>タグの中に<dfn>で囲む。

<dl>
 <dt><dfn>なつめ そうせき</dfn></dt>
  <dd>1867年2月生まれ、日本の小説家、評論家、英文学者。</dd>
 <dt><dfn>みやざわ けんじ</dfn></dt>
  <dd>1896年8月生まれ、日本の詩人、童話作家。
 </dd>
</dl>

◆aタグにブロック要素も入れてOKになった

<a>
<dl>
 <dt><img></dt>
  <dd>きょうのごはん</dd>
</dl>
</a>
<a>
 <dl>
 <dt><img></dt>
  <dd>きのうのごはん</dd>
</dl>
</a>

html5に関する作業メモ

figcaption　行間きかない　スマートフォン

display:block;で回避。


◆アドレスタグにイタリックがかかる。ななめになる。

スタイルシートで

address {
font-style:normal;
}

参考サイト↓
http://template.b-cures.net/dl/stylecss/index9.html

◆Dreamweaverテンプレートにすると文字化け
諦める。テンプレートのみの文字化け回避はあったけど、
編集可能領域が文字化けする。

ライブラリーでわける

ライブラリーも勝手にタグがはいるので削除。

◆テーブルのcellpaddingとcellspacingのかわりになるもの
border-collapse： separate;
border-spacing:： 0px 0px;



◆線にグラデーション
キャンバスでもできるが、空要素になる。
特に線に意味が無い場合は、divでやる

IE7と8 『ie-css3』がうまくいかないとき 【CSS3】

◆『ie-css3』がうまくいかないとき『角丸』

→CSS3で指定したところが、消えた
原因↓
背景の色の指定
なぜか、背景の色を指定したいとき、一番下に表示される。

CSS3プラス
position:relative;
z-index:1;

と、かくと直った。




◆IE用にまとめたCSSをつくってみる。

スタイル名{
position:relative;
z-index:1;
behavior: url(ie-css3.htc);
}


何気に動く、IE8・IE7は動いた。IE9は知らない。

※注意点

置くところは、CSS3でかいたCSSより上に置かないとできない。
一番上らへんに置けば問題ない。今のところ角丸だけ？

＜例＞
{IE用にまとめたCSS}
｛角丸してねCSS3｝



『PIE.htc』を使うと、↑これらはいらない。

各ブラウザで見えるようにする。【HTML5】

◆ベンダープレフィックス

IE→-ms-

Firefox→-moz-

Safari→-webkit-

Chrome→-webkit-

opera→-0-


今の段階では全部付けておいた方がいい。
後で、消す。

IEは、ほぼ無視する。付けても使えない。.htcを使っても使いたいの使えない。
IEだけ別でつくる。

※IE以外は簡単なCSS3なら最新版はだいたい見れた。display:BOX;はなくちゃ見れない。

CSS 【HTML5】

◆角丸
border-radius(ラディウス)


◆影を付ける(ボタン)

親切サイト→CSS3でドロップシャドウを作る『box-shadow』プロパティのまとめ｜MONODEZ


CSS3をIEに対応させてくれる？？↓
http://www.hislab.net/blog/2010/12/ie-css3.html

IE対策 【HTML5】

これをコピーするだけ
→http://remysharp.com/

IE7IE8は見れたIE9は？




----------とっても親切参考サイト---------
・html5をIEに対応させるには | yoseyama Blog
http://www.yoseyama.jp/blog/2011/01/html5ie.html

追加された要素 【HTML5】

◆文章構造化の為に追加された要素一覧

※注：右側のコメントはなんとなく覚えるための私的なものです。

header…ID="head"と指定していたところ+セクションの中に入れることで意味もまた違ってくる
footer…ID="foot"と指定していたところ+セクションの中に入れることで意味もまた違ってくる
nav…ID="navi"と指定していたところ
section…見出しがあるものをすべてこれで囲む
article…ただの記事・独立したもの　※これは入れ子に出来ない
aside…サブナビ・関連性の低いもの
address…プロフィールや連絡先、お問い合わせなど
→ページの中で使うと、その内容の連絡先
→フッターに入れると、ページ全体の連絡先

hgroup…見出しをまとめたりする
figure(フィギア)…画像
figcaption(フィグキャプション)…画像のキャプション※勝手に改行される
↑figure(フィギア)の中に入れるのが正解らしい
mark…重要なもの、検索で引っかかったみたいになるらしい色が付く
rudy…ふりがながつくもの
rt…↑のそのふりがなそのもの
rp…↑のふりがなに対応していないものに使う
time…時間・日付とか

ｈｔｍｌ5のメモ

◆末尾に『/』スラッシュを入れなくなくてもよくなったもの

<img > <ｂｒ>
<inqut><link>



そのほかいろいろあるけどあんまりつかわない。
hrとか

◆終了タグの省略

<li>※ulとかにはいってるから

<dt>※ｄｌにはいってるから
<dd>※ｄｌにはいってるから

<p>

<tr>※tableにはいってるから
<th>※tableにはいってるから
<td>※tableにはいってるから



引用符を省略…HTML5になれるまでは、無理して省略しなくてもいいや

ｈｔｍｌ5の理解

◆何が変わったのか

・記述がちょっと簡単になった。
・大文字と小文字の区別がない。
・html側での装飾がなくなった。
(例：strong→太字にならなくなった、意味は同じ)
　すべてCSS／CSS3でやる。
　装飾がすべてできるようにCSS3がどんどんでてくる。

・W3Cの仕様だけど、WHATWG(ワットダブルジー)
.あと3年くらいには主流になってくる？？
・高度な文書構造が可能に
・的確なリスティング広告が可能に
・フォーム機能がすごい
・動画や音声の配信が手軽になった
・javascriptを使って2D・3Dもできちゃう
・APIで位置情報の取得
・スマートフォンはｈｔｍｌ5で


変わったけど、過去のものを躍起になって書き換える必要はにらしい。
ブラウザでサポートしてくれるらしい。

各ブラウザがｈｔｍｌ5をどれくらいサポートしてるのかどうかなど知りたい時は↓
http://www.findmebyip.com/litmus/
…CSS3は大分使えるみたいだ

◆とりあえずコピペ

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>javascript</title>
<script src="js/test.js" ></script>
<link rel="stylesheet" href="css/style.css">
</head>
<body>


ここに内容

</body>
</html>

◆基礎のきそ～だから何がどんなふうに変わったのか～

【今までのhtml】
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

↓↓↓長ったらしい宣言がこれだけに…

【html5】
<!doctype html>


------

【今までのhtml】
<html xmlns="http://www.w3.org/1999/xhtml"
xml:lang="ja" lang="ja">
↓↓↓長ったらしいhtml要素が…

【html5】
<html lang="ja" >




最終的に↓↓↓


<!doctype html>
<html lang="ja">
<head>
メタタグ
タイトルタグ
</head>

と、なってメタタグの変更は、
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />↓

<meta charset=utf-8" >※utf-8にしないと、文字化けの恐れがあります。

それ以外は、そのままで。

次に、javaスクリプトとCSSを指定する。scriptとlinkのtyp属性が省略できます。

↓↓

<script src="js/jquery.js">

<link rel="stylesheet" href="css/common.css" >
↑linkは閉じタグがいりません！ｂｒ（改行）にもいらなくなりました。



▼よくわからなかったもの【基準言語の指定】
<meta http-equiv="content-style-type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">

↑多分かく必要がないみたい→とほほより

チェックしてもエラーがでるので削除


◆HTML5チェックhttp://nuevvo.com/labs/html5-validator-bookmarklet/





---------------------　参考サイト　--------------------------

「HTML5でサイトをつくろう」
http://www.html5-memo.com/first-html5/html5-001/
HTML5リファレンス
http://www.htmq.com/html5/index.shtml
HTML5とは？変わるWebと注目の新要素 HTML5.0の情報サイト
http://www.html5-guide.com/add/layout/section.html