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

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

フォームに
ついて
Copyright © 2015 Yoshihiro Takahashi All Rights Reserved. 2

Copyright © 2015 Yoshihiro Takahashi All Rights Reserved.
3
フォームについて
入力エリア
送信ボタン

4
Webサイトの
仕組みについて

5
現代のWebサイトの仕組み
• 提供者と利用者の垣根がなくなり、従来の利用者が容易
に情報を発信できる
– 例として、Twitter、facebookなどが分かりやすい、ユーザー参加型
の仕組みとなっている。
ユーザー
情報追加・更新
情報表示

6
Webサイトコンテンツの作り方
• 基本は、HTML + CSS
• 「動き」は、JavaScriptで作成される
• ショッピングサイトのようなシステム
• ブログやSNSのようなユーザ参加型システム

7
Webサイトが見られる仕組み
Webサーバー
ユーザー
③作成したファイル送信
①ユーザ入力情報を発信
②プログラムで
データベースから
ページ作成

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

フォームの重要性
• ユーザが意見を伝えられる唯一の機能
– Webサイトの目的のページとなることが多い
• 使いやすさを重要視する
– 入力数も重要
– 入力されないと、購入・資料請求などが行われない
• スマホでの入力を考慮する
– スマホは入力しずらいので、その点を意識する

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

input要素のtype属性
• type = “text”
– 文字入力エリア
• type = “email”
– メールアドレス入力用エリア
– PCでは入力チェック、スマホはキーボード変更
• type = “tel”
– 電話番号入力エリア
– スマホはキーボード変更

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

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

フォームの属性
• required属性
– 必須項目を設定する
– PCはブラウザ側で入力チェック
• placeholder属性
– 入力例を指定できる

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

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

17
フォームの仕組みについて
Webサーバー
＆
プログラム
abc
高橋
送信ボタン
<input type=“text” name=“abc”>
高橋
<input type=“radio” name=“gender” value=“man”>
gender
man
abc
gender

18
GoogleMap
の設置

簡単な方法
• 設置手順
– Google Mapサイトの更新が多いので、サイトを見て
判断しよう
– 「共有」がキーワードです

20
YouTube
の設置

簡単な方法
• 設置手順
– 動画の下にある [共有] をクリック
– [埋め込みコード] をクリック
– [もっと見る] をクリック
– [動画サイズ]を指定
– アドレスをコピーし、HTMLファイルの任意の場所に
ペースト

複雑なセレクタ
22

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を選択

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

25
セレクタについて
• CSSのセレクタは数多くので、サイト等で調査
した方が良い
– http://www.coolwebwindow.com/csstips/cssbasic/000243.php

CSS3について
26

27
CSS3とは
• 見た目の表現力が増したCSS
– 代表的なプロパティ
• ドロップシャドウ、半透明、角丸、アニメーション
外部フォントの読み込み・・・・など
– 対応ブラウザ
• 各ブラウザが独自に対応しているプロパティが一部ある
• Can I Useでブラウザ状況を確認

ベンダープレフィックス
について
28

29
『ベンダープレフィックス』とは、草案段階プロパティに対して先行し
て実装する場合に、それが拡張機能であることを明示するために付ける
プレフィックス（接頭辞）のこと。
-moz- Firefox
-webkit- Google Chrome、Safari
-o- Opera
-ms- Internet Explorer
box-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用

30
最近は、ベンダープレフィックスが不要なことが多い。
スマホのブラウザ(iosのsafariなど)では、ベンダープレフィック
スがないと適用されない場合がある。
必ず通常の記述とベンダープレフィックスを併記する

31
ドロップシャドウ
• box-shadow
box-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用

32
角丸
• border-radius
border-radius: 10px;
角の円の半径
border-radius: 10px; // プレフィックス無し
-webkit-border-radius: 10px; // chrome用、safari用
-moz-border-radius: 10px; // firefox用
10px

33
角丸について
• 角丸を個別に設定
border-radius: 左上右上右下左下;

34
テキストシャドウ
• text-shadow
text-shadow: 10px 10px 20px #000;
右方法のずれ
下方法のずれ
ぼかし幅
TEXT

35
半透明
• 要素全体の透明度を設定する
– opacity（不透明度）
• 値が 0 で透明、1 で不透明となるため、０～１の
値を設定する
– 記述例
opacity: 0.5;

36
グラデーション
• 背景画像として、要素にグラデーションを設定
できる
• ただし、記述が複雑で各ブラウザ対応する必要
があるため、ツールを利用したほうが良い
– grad３
– Ultimate CSS Gradient Generator

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

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

39
Google Web Fontについて
• 無償で利用できるフォントサービス
– Google Web Fonts（ http://www.google.com/webfonts ）
• コピー＆ペーストで利用できる

CSS3アニメーション
40

CSS3アニメーション
• transition
– :hoverなどのきっかけでアニメーションを実行
– 実行後、もとの状態に戻る
• animation
– 好きなタイミングでアニメーションを実行
– 動きは細かく自分で設定

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

transitionアニメーション
• 記述例
.sample {
transition: background-color 0.5s linear 0.1s;
}
.sample:hover{
background-color: red;
/* hover には transition は記述しない */
}

CSS3
オブジェクト変形
44

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

46
映像ファイルの再生

47
映像の制御の方法
• HTML5の機能である「video要素」を利用
して、映像の再生が可能
• 制御は、JavaScriptで行うことが出来る

48
Video要素の確認

49
videoタグ
• 基本の記述
• 値が必要な属性
– width, height
• 値が不要な属性
– autoplay, controls, loop, muted
<video src=“ファイル名”属性></video>

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

51
現実的な記述方法
• videoタグ内にsourceタグを記述
<video 属性たち・・・>
<source src=“ファイル名.mp4”>
<source src=“ファイル名.wevm”>
</video>

52
音楽ファイルの再生

53
音楽の制御の方法
• HTML5の機能である「audio要素」を利用
して、音楽ファイルの再生が可能
• 制御は、JavaScriptで行うことが出来る

54
audio要素の確認

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

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

57
現実的な記述方法
• audio要素内にsourceタグを記述
<audio 属性たち・・・>
<source src=“ファイル名.mp3”>
<source src=“ファイル名.ogg”>
</audio>

レスポンシブ
デザイン

59
レスポンシブデザインとは
• ブラウザの横幅に応じてレイアウト変化
– 共通のHTMLファイルで、PC用・タブレット用・ス
マフォサイト用を表示することができる
– ただし、スマフォサイトとして考えると情報量が多
すぎるのでダウンロードに時間が掛かるのが難点

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

viewport
について

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

63
viewportの一般的な記述例
• 拡大操作不可（現在の主流）
<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” />

64
レスポンシブデザインの記述
• CSSを切り替えるポイント(ブレークポイント)
– PC拡大用(ブラウザを最大化した場合)
• 横幅1200px以上
– PC用
• 横幅1199px~992px
– タブレット用
• 横幅991px～768px
– スマホ用
• 横幅767px以下

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

画像サイズ
について

67
画像サイズの設定
• 画像のサイズは自動調整にする
– ブラウザのサイズに合わせて、自動的に画像サ
イズが変更されるように設定する
– 記述例
img {
width:100%;
height: auto;
}

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

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (16)

Destacado

Destacado (20)

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

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

Más de Yossy Taka

Más de Yossy Taka (6)

Último

Último (8)

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