Movatterモバイル変換

Webデザイン基礎講座02HTML5, Form, CSS3, レスポンシブ

Copyright © 2015 Yoshihiro Takahashi All Rights Reserved.8フォームについて• フォーム画面が、ユーザからWebサービスへ情報のやり取りできる方法– Google検索– Facabook– Twitterなど• HTMLによる画面作成、サーバープログラムによるシステム作成の両方が必要となる• Webデザインは画面制作のみとなるので、プログラマとの共同作業が必要となる

Copyright © 2015 Yoshihiro Takahashi All Rights Reserved. 10フォームの要素• <form>要素– フォーム全体を囲む要素（必須）– action属性にサーバープログラム名、method属性に送信方式を設定例：<form action=“test.php" method="post">• <input>要素– type属性により内容を変更される– 違いをしっかり確認すること

Copyright © 2015 Yoshihiro Takahashi All Rights Reserved. 12input要素のtype属性• type = “radio”– name属性の値でグループ化– value属性で値を指定– <label>要素で文字と一緒に囲む• type = “checkbox”– value属性で値を指定– <label>要素で文字と一緒に囲む• type = “submit” または “reset”– value属性で値を表示内容を指定– 「送信」のように曖昧な表現は設定しない– “reset”は指定しない

Copyright © 2015 Yoshihiro Takahashi All Rights Reserved. 13フォームの要素• <select>要素– 値を選択するリストボックス全体を指定– option要素に値を設定する• <option>要素– リストボックスの各値を設定– value属性で値を指定• <textarea>要素– 複数行のテキスト入力– rows属性で行数，cols属性で列数を表す

Copyright © 2015 Yoshihiro Takahashi All Rights Reserved. 15CSSの設定• フォームにもCSSの設定が可能• input要素が多い場合の設定方法– 記述例input[type=text]{padding:10px;}input[type=submit]{border:1px #F0F solid;padding:15px 30px;cursor:pointer;}

Copyright © 2015 Yoshihiro Takahashi All Rights Reserved. 16フォームに関する属性• name = “半角英数字の名前”– サーバプログラムにデータを送るための「入れ物」の名前を指定する– 全てのフォーム用要素に設定する• value = “値”– サーバプログラムにデータを送るための「入れ物」に入るデータを指定する– ユーザが文字入力しないフォーム用要素に設定する

Copyright © 2015 Yoshihiro Takahashi All Rights Reserved.23セレクタの例• 主な要素の指定方法セレクタ説明E:first-child 親要素の最初の子要素Eを選択E:last-child 親要素の最後の子要素Eを選択E:nth-child(n)親要素の n 番目の子要素Eを選択oddやevenも指定可能E:first-of-type 兄弟関係にある最初のE要素を選択E:last-of-type 兄弟関係にある最後のE要素を選択E:nth-of-type(n) 兄弟関係にあるn番目のE要素を選択E + F E要素の次のF要素を選択E > F E要素の直接の子要素Fを選択

Copyright © 2015 Yoshihiro Takahashi All Rights Reserved.24セレクタの例• -childと-of-typeの違い– -childは並び順→要素、-of-typeは要素→並び順で要素を選択する<dl><dt></dt><dd></dd><dt></dt><dd></dd><dt></dt><dd></dd></dl>dl dd:first-child(正しく指定できない)dl dd:first-of-type

Copyright © 2015 Yoshihiro Takahashi All Rights Reserved.29ベンダープレフィックス『ベンダープレフィックス』とは、草案段階プロパティに対して先行して実装する場合に、それが拡張機能であることを明示するために付けるプレフィックス（接頭辞）のこと。-moz- Firefox-webkit- Google Chrome、Safari-o- Opera-ms- Internet Explorerbox-shadow: 10px 10px 20px #000; // プレフィックス無し-webkit-box-shadow: 10px 10px 20px #000; // chrome用、safari用-moz-box-shadow: 10px 10px 20px #000; // firefox用-o-box-shadow: 10px 10px 20px #000; // opera用-ms-box-shadow: 10px 10px 20px #000; // IE用

Copyright © 2015 Yoshihiro Takahashi All Rights Reserved.31ドロップシャドウ• box-shadowbox-shadow: 10px 10px 20px #000;右方法のずれ下方法のずれぼかし幅box-shadow: 10px 10px 20px #000; // プレフィックス無し-webkit-box-shadow: 10px 10px 20px #000; // chrome用、safari用-moz-box-shadow: 10px 10px 20px #000; // firefox用

Copyright © 2015 Yoshihiro Takahashi All Rights Reserved.32角丸• border-radiusborder-radius: 10px;角の円の半径border-radius: 10px; // プレフィックス無し-webkit-border-radius: 10px; // chrome用、safari用-moz-border-radius: 10px; // firefox用10px

Copyright © 2015 Yoshihiro Takahashi All Rights Reserved.37Webフォントについて• 通常ブラウザで表示できるフォントフォントの系統フォントの種類 Win Mac iPhoneゴシック系MS Pゴシック ○ - -メイリオ ○ - -Osaka - ○ -ヒラギノ角ゴ Pro - ○ ○明朝系MS P明朝 ○ - -ヒラギノ明朝 Pro - ○ -等幅MS ゴシック ○ - -Osaka-mono - ○ -

Copyright © 2015 Yoshihiro Takahashi All Rights Reserved.38Webフォントについて• Webフォントの利用– CSSで、外部にあるフォントを読み込んで利用する– 注意事項• フォントにはライセンス（著作権や使用制限）があるため、ライセンスフリーのフォント、もしくはライセンス保持者から許可を得ている場合以外は使用できない• フォントのファイル容量は大きいため、多用すると表示に時間が掛かる。また、日本語フォントは特に容量が大きので注意が必要

Copyright © 2015 Yoshihiro Takahashi All Rights Reserved. 42transitionアニメーション• 指定方法transition : CSSプロパティ再生時間速度変化遅延時間;– CSSプロパティ• 数値を指定するCSSプロパティならほぼOK• ,(カンマ)区切りで複数指定可能– 再生時間(単位s)• 0.5s など– 速度変化• linear, ease-in, ease-out, ease-in-out• 速度一定, 初速ゆっくり, 終速ゆっくり, 初速終速ゆっくり– 遅延時間(単位s)• 2s など

Copyright © 2015 Yoshihiro Takahashi All Rights Reserved. 43transitionアニメーション• 記述例.sample {transition: background-color 0.5s linear 0.1s;}.sample:hover{background-color: red;/* hover には transition は記述しない */}

Copyright Ⓒ Yoshihiro Takahashi 2012 All Rights Reserved.45CSS３を利用したオブジェクト変形• 位置の移動：X座標、Y座標個別– transform : translateX(数字px)、– transform : translateY(数字px)• 位置の移動：X、Y座標同時– transform : translate(X座標px, Y座標px)• 拡大縮小– transform : scale(数字)；• 回転– transform : rotate(角度deg);

Copyright © 2015 Yoshihiro Takahashi All Rights Reserved.50ファイルフォーマットの問題• 対応映像フォーマット（http://caniuse.com/#search=video）– H.264（拡張子 mp4）• IE、Safari、Chromeの最新版でサポート• WindowOSのみFirefoxも対応– WebM（拡張子 wevm）• Chrome、Firefox、Operaの最新版でサポート

Copyright © 2015 Yoshihiro Takahashi All Rights Reserved.55videoタグ• 基本の記述• 値の必要な属性– src ：ファイル名指定– preload ： none(ファイルを事前に読み込まない)auto (ファイルを事前に読み込み)• 値が不必要な属性– autoplay ：自動再生– controls ：コントローラー– loop ：繰り返し<auido src=“ファイル名”属性></video>

Copyright © 2015 Yoshihiro Takahashi All Rights Reserved.56スマホの問題• 対応フォーマット（http://caniuse.com/#search=video）– iOS• wav,aif,mp3,aac– Android• wav,mp3,ogg,aac• 問題点– 複数の音を同時に鳴らせない– Androidではバージョンにより対応していない場合がある

Copyright © 2015 Yoshihiro Takahashi All Rights Reserved.60レスポンシブデザインのやり方• CSS3のメディアクエリを利用– CSS3のメディアクエリを利用して、• PCサイズのCSS• タブレットサイズのCSS• スマフォサイズのCSSを振り分けて読み込む– HTMLファイルがほぼ共通で使えることが特長– スマホ・タブレット用にはviewportの記載が必須

Copyright © 2015 Yoshihiro Takahashi All Rights Reserved.62スマホ用画面サイズなどの設定• viewport– metaタグにviewport属性を指定して画面表示を制御• 指定内容– width：画面表示の横幅指定– height：画面表示の縦幅指定– initial-scale：倍率の初期値– minimum-scale：倍率の最小値– maximum-scale：倍率の最大値– user-scalable：拡大縮小の可否

Copyright © 2015 Yoshihiro Takahashi All Rights Reserved.63viewportの一般的な記述例• 拡大操作不可（現在の主流）<meta name=“viewport” content=“width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no” />iPhoneは横画面にすると１.5倍に拡大されるので、scaleを1.0と設定する場合が多い。• 拡大0.5倍～2.0倍まで拡大操作可<meta name=“viewport” content=“width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes” />

Copyright © 2015 Yoshihiro Takahashi All Rights Reserved.65レスポンシブデザインの記述• CSSファイル内の記述例– 後から読み込んだCSSが優先されるので効率よく記述する/* 767px以下のCSS *//* 768px～991pxのCSS */@media (min-width:768px){}/* 992px～768pxのCSS */@media (min-width:992px){}/* 1200px以上のCSS */@media (min-width:1200px){}

Movatterモバイル変換

Change Language

Webデザイン入門２－HTML5 フォーム,映像再生,音声再生, CSS3, レスポンシブWebデザイン－

Embed presentation

Recommended

More Related Content

What's hot

Viewers also liked

Similar to Webデザイン入門２－HTML5 フォーム,映像再生,音声再生, CSS3, レスポンシブWebデザイン－

More from Yossy Taka

Webデザイン入門２－HTML5 フォーム,映像再生,音声再生, CSS3, レスポンシブWebデザイン－