ウェブDeBLOG｜トライデントコンピュータ専門学校 Webデザイン学科

新しいiPhoneのOS、iOS12のアップデートが始まりました。
今回は対象がiPhone5s以降ということで、様々なiPhoneに対応しています。
これにより、ますます一般的に利用されているデバイスの大きさが、多彩になってきました。

画面いっぱいに画像を表示するデザインもよく見かけるようになり、さらに動画を全画面で表示するWebサイトも珍しくありません。
画像はデバイスの大きさだけでなく、搭載されているCPUの性能も差があり、Webページの高速化（最適化）に大きく関わっています。

そういった状況を受け、HTML5.1（現在5.2）では、デバイスの状況によって画像を切り替えられるpicture要素などが加わり、対応ブラウザでは、閲覧しているデバイスに適した画像が表示できるようになっています。

picture要素

2018年9月現在、Internet Explorer以外のWebブラウザで対応済みです。
W3Cの5.3仕様書を調べたのですが、わかりづらいですので、MDNから引用しました。

HTMLの<picture>要素は、0個以上の<source>要素と一つの<img>要素を内包し、異なる表示機器の条件に応じた画像を提供します。ブラウザーは複数の<source>子要素を検討して、最もふさわしい一つを選択します。<source>要素に適切なものがなければ、<img>要素のsrc属性で指定された値が選択されます。選択された画像は<img>要素が占有する空間に表示されます。

picture要素の中に、source要素がある場合は、環境に最適なものを選んで表示してくれます。
source要素になければimg要素のフォールバック画像が表示されるわけですね。

前回に引き続き、form要素関連のおさらいです。今回はHTML5になってから属性や値が大幅に進化したinput要素です。

input要素

input要素は、通常、ユーザーがデータを編集できるようにするためのフォームコントロールと、型指定されたデータフィールドを表す。type属性は、要素のデータ型（および関連するコントロール）を制御する。

W3C HTML5 仕様書より

input要素は、type属性（型）を変えることで、様々なデータの入力や送信を可能にするコントロールを作成できます。
type属性の初期値は、type="text"（1行入力欄）です。HTML5から新しく追加された属性値に対応しないブラウザは、デフォルトのtype="text" （1行入力欄）になります。

対応したスマートフォンなど、ソフトウェアキーボードを備えたデバイスでは、type属性値の種類によって、キーボードが適宜、初期表示されたりしますので、フォームをより便利にすることができます。

このtype属性の値によって、データの種類を指定し、さまざまなコントロールを作成することができます。

accept、alt、autocomplete、checked、dirname、formaction、formenctype、formmethod、formnovalidate、formtarget、height、list、max、maxlength、min、minlength、multiple、pattern、placeholder、readonly、required、size、src、step、widthコンテンツ属性、checked、files、valueAsDate、valueAsNumber、およびlistIDL属性、select()メソッド、selectionStart、selectionEnd、およびselectionDirectionIDL属性、setRangeText() and setSelectionRange()メソッド、stepUp() and stepDown()メソッド、inputおよびchangeイベントが、そのtype属性の状態に依存するinput要素に適用する。
各タイプを定義するサブセクションはまた、各タイプにこれらの機能を適用するものと適用しないものを、規範的"簿記"セクションで明瞭に定義する。これらの機能の動作は、それら様々なセクションで定義されるため、それらが適用するかどうかに依存する。

W3C HTML5 仕様書より

type属性値で指定できる属性

※HTML5はHTML5から新しく追加された属性値、属性になります。

type="hidden"

ブラウザ上に表示されない非表示データ（閲覧者の入力に関係なく送るクエリ値）を送信することができます。 隠しデータとも呼ばれますがHTMLソースには記述されています。

■属性

name属性

データが送信される際のクエリ名を指定します。

value属性

初期値を指定します。

disabled属性

入力コントールを無効にします。

form属性

任意のform要素に付与されたid属性値を指定することで関連付けを行います。

※name属性、value属性、disabled属性、form属性は全てのtype属性値に指定できます。

type="text"

1行入力欄が作成されます。name属性は入力欄に名前を付ける属性ですが、formでデータが送信される際、 name属性で指定した名前と入力された値が一組になって送信されます。

■属性

name属性、value属性、disabled属性、form属性

※type="hidden"参照

dirname属性

送信データの書字方向に関するクエリ値のクエリ名を指定します。

autofocus属性

文書読み込み時、自動的にフォーカスさせます。

autocomplete属性

オートコンプリートの有効 / 無効を設定します。HTML5

list属性

入力候補リストを指定します。HTML5

maxlength属性

入力可能な最大字数を指定します。

pattern属性

正規表現による入力チェックを行います。HTML5

placeholder属性

ダミーテキスト（プレースホルダ）を設定します。HTML5

readonly属性

読み込み専用にします。（編集不可）

required属性

入力を必須にします。HTML5

size属性

入力欄のサイズ（文字数）を指定します。

text

type="search"HTML5

検索テキスト入力欄が作成されます。name属性は入力欄に名前を付ける属性ですが、formでデータが送信される際、 name属性で指定した名前と入力された値が一組になって送信されます。

■属性

name属性、value属性、disabled属性、form属性

※type="hidden"参照

dirname属性

送信データの書字方向に関するクエリ値のクエリ名を指定します。

autofocus属性

文書読み込み時、自動的にフォーカスさせます。

autocomplete属性

オートコンプリートの有効 / 無効を設定します。HTML5

list属性

入力候補リストを指定します。HTML5

maxlength属性

入力可能な最大字数を指定します。

pattern属性

正規表現による入力チェックを行います。HTML5

placeholder属性

ダミーテキスト（プレースホルダ）を設定します。HTML5

readonly属性

読み込み専用にします。（編集不可）

required属性

入力を必須にします。HTML5

size属性

入力欄のサイズ（文字数）を指定します。

search

type="tel"HTML5

電話番号の入力欄となります。

■属性

name属性、value属性、disabled属性、form属性

※type="hidden"参照

autofocus属性

文書読み込み時、自動的にフォーカスさせます。

autocomplete属性

オートコンプリートの有効 / 無効を設定します。HTML5

list属性

入力候補リストを指定します。HTML5

maxlength属性

入力可能な最大字数を指定します。

pattern属性

正規表現による入力チェックを行います。HTML5

placeholder属性

ダミーテキスト（プレースホルダ）を設定します。HTML5

readonly属性

読み込み専用にします。（編集不可）

required属性

入力を必須にします。HTML5

size属性

入力欄のサイズ（文字数）を指定します。

Telephone

type="url"HTML5

URL入力欄が作成されます。対応しているブラウザでは、入力された値が「http://」で始まる妥当な絶対URLでは無い場合にエラーを返します。ユーザーは空文字を入力することができます。入力必須にする場合には、required属性を併用します。

■属性

name属性、value属性、disabled属性、form属性

※type="hidden"参照

autofocus属性

文書読み込み時、自動的にフォーカスさせます。

autocomplete属性

オートコンプリートの有効 / 無効を設定します。HTML5

list属性

入力候補リストを指定します。HTML5

maxlength属性

入力可能な最大字数を指定します。

pattern属性

正規表現による入力チェックを行います。HTML5

placeholder属性

ダミーテキスト（プレースホルダ）を設定します。HTML5

readonly属性

読み込み専用にします。（編集不可）

required属性

入力を必須にします。HTML5

size属性

入力欄のサイズ（文字数）を指定します。

Add your homepage

type="email"HTML5

メールアドレスの入力欄となります。対応しているブラウザでは、入力された値にアットマーク（ @ ）を含む妥当なメールアドレスでは無い場合にエラーを返します。
ユーザーは空文字を入力することができます。入力必須にする場合には、required属性を併用します。
multiple属性を指定すると、ユーザーが複数のメールアドレスを選択・入力できるようにすることができます。 この場合、送信される値は半角カンマ（ , ）区切りのリストとなります。

■属性

name属性、value属性、disabled属性、form属性

※type="hidden"参照

autofocus属性

文書読み込み時、自動的にフォーカスさせます。

autocomplete属性

オートコンプリートの有効 / 無効を設定します。HTML5

list属性

入力候補リストを指定します。HTML5

maxlength属性

入力可能な最大字数を指定します。

pattern属性

正規表現による入力チェックを行います。HTML5

placeholder属性

ダミーテキスト（プレースホルダ）を設定します。HTML5

readonly属性

読み込み専用にします。（編集不可）

required属性

入力を必須にします。HTML5

size属性

入力欄のサイズ（文字数）を指定します。

multiple属性

複数メールアドレスの入力を可能にします。HTML5

E-mail

type="password"

パスワードの入力欄となります。ブラウザ上では、入力内容は アスタリスク（ * ） など伏せ字で置き換えられ、画面上では見ることができないようになりますが、入力されたデータが暗号化されて送信されるわけではなく、 送信されたデータを受け取ることができれば内容を見ることができます。

■属性

name属性、value属性、disabled属性、form属性

※type="hidden"参照

autofocus属性

文書読み込み時、自動的にフォーカスさせます。

autocomplete属性

オートコンプリートの有効 / 無効を設定します。HTML5

list属性

入力候補リストを指定します。HTML5

maxlength属性

入力可能な最大字数を指定します。

pattern属性

正規表現による入力チェックを行います。HTML5

placeholder属性

ダミーテキスト（プレースホルダ）を設定します。HTML5

readonly属性

読み込み専用にします。（編集不可）

required属性

入力を必須にします。HTML5

size属性

入力欄のサイズ（文字数）を指定します。

type="datetime"HTML5

UTC（協定世界時）による日時の入力欄が作成されます。
入力された値はグローバル日時を表すことになります。 入力必須にする場合には、required属性を併用します。step属性の単位は秒、初期値は60となります。

ここで言うグローバル日時（global date and time）とは、協定世界時（UTC）をベースに指定する日時のことです。 UTC（Universal Time, Coordinated、協定世界時）とは、世界の公式な標準時刻のことです。 天体観測から決定されるグリニッジ標準時（GMT）とほぼ同じですが、UTCはセシウム原子時計が刻む国際原子時をもとに決定されています。 日本のローカル時刻はUTCに対して9時間進んでいるので、以下の書式でグローバル日時として指定します。

YYYY-MM-DDThh:mm:ssTZD
YYYY	年（4桁）
MM	月（2桁／01～12）
DD	日（2桁／01～31）
T	ここから時間が始まることを表す文字（大文字のT）
hh	時（2桁／00～23）
mm	分（2桁／00～59）
ss	秒（2桁／00～59）
TZD	タイムゾーン（Z,+hh:mm,-hh:mm） Z …… UTCそのものであることを表す文字（大文字のZ） +hh:mm …… UTCよりローカル時刻が進んでいる場合 -hh:mm …… UTCよりローカル時刻が遅れている場合

■属性

name属性、value属性、disabled属性、form属性

※type="hidden"参照

autofocus属性

文書読み込み時、自動的にフォーカスさせます。

autocomplete属性

オートコンプリートの有効 / 無効を設定します。HTML5

list属性

入力候補リストを指定します。

readonly属性

読み込み専用にします。（編集不可）

required属性

入力を必須にします。HTML5

size属性

入力欄のサイズ（文字数）を指定します。

max属性

入力可能な日時の最大値を指定します。HTML5

min属性

入力可能な日時の最小値を指定します。HTML5

step属性

日時の値の精度を秒単位で指定します。初期値は「60」です。HTML5

Birthday (date and time) 

Birthday (date and time)

type="date"HTML5

日付けの入力欄となります。対応するブラウザでは多くは、カレンダーのUIで表示され、選択することで日付けを入力できるようになります。
送信される値は、指定した日付けをyyyy-mm-ddという形式にした、2014-10-11（2014年10月11日） のような形式で送信されます。step属性の単位は日、初期値は1となります。

■属性

name属性、value属性、disabled属性、form属性

※type="hidden"参照

autofocus属性

文書読み込み時、自動的にフォーカスさせます。

autocomplete属性

オートコンプリートの有効 / 無効を設定します。HTML5

list属性

入力候補リストを指定します。

readonly属性

読み込み専用にします。（編集不可）

required属性

入力を必須にします。HTML5

size属性

入力欄のサイズ（文字数）を指定します。

max属性

入力可能な日時の最大値を指定します。HTML5

min属性

入力可能な日時の最小値を指定します。HTML5

step属性

日時の値の精度を秒単位で指定します。初期値は「1」です。HTML5

Birthday 

Birthday

type="month"HTML5

月の入力欄となります。対応するブラウザでは多くは、カレンダーのUIで表示され、選択することで日付けを入力できるようになります。送信される値は、指定した日付けをyyyy-mmという形式にした、2014-10（2014年10）のような形式で送信されます。step属性の単位は日、初期値は1となります。

■属性

name属性、value属性、disabled属性、form属性

※type="hidden"参照

autofocus属性

文書読み込み時、自動的にフォーカスさせます。

autocomplete属性

オートコンプリートの有効 / 無効を設定します。HTML5

list属性

入力候補リストを指定します。

readonly属性

読み込み専用にします。（編集不可）

required属性

入力を必須にします。HTML5

size属性

入力欄のサイズ（文字数）を指定します。

max属性

入力可能な日時の最大値を指定します。HTML5

min属性

入力可能な日時の最小値を指定します。HTML5

step属性

日時の値の精度を秒単位で指定します。初期値は「1」です。HTML5

Birthday (month and year)  

Birthday (month and year)

type="week"HTML5

週の入力欄となります。対応するブラウザでは多くは、カレンダーのUIで表示され、選択することで日付けを入力できるようになります。送信される値は、指定した日付けをyyyy-Wwwという形式にした、2014-W30（2014年第30週 7月21日〜7月27日）のような形式で送信されます。step属性の単位は日、初期値は1となります。

■属性

name属性、value属性、disabled属性、form属性

※type="hidden"参照

autofocus属性

文書読み込み時、自動的にフォーカスさせます。

autocomplete属性

オートコンプリートの有効 / 無効を設定します。HTML5

list属性

入力候補リストを指定します。

readonly属性

読み込み専用にします。（編集不可）

required属性

入力を必須にします。HTML5

size属性

入力欄のサイズ（文字数）を指定します。

max属性

入力可能な日時の最大値を指定します。HTML5

min属性

入力可能な日時の最小値を指定します。HTML5

step属性

日時の値の精度を秒単位で指定します。初期値は「1」です。HTML5

Select a week 

Select a week

type="time"HTML5

週の入力欄となります。対応するブラウザでは多くは、カレンダーのUIで表示され、選択することで日付けを入力できるようになります。
送信される値は、指定した日付けをhh:mm:ssという形式にした、18:30:55（18時30分55秒）のような形式で送信されます。step属性の単位は日、初期値は60となります。

■属性

name属性、value属性、disabled属性、form属性

※type="hidden"参照

autofocus属性

文書読み込み時、自動的にフォーカスさせます。

autocomplete属性

オートコンプリートの有効 / 無効を設定します。HTML5

list属性

入力候補リストを指定します。

readonly属性

読み込み専用にします。（編集不可）

required属性

入力を必須にします。HTML5

size属性

入力欄のサイズ（文字数）を指定します。

max属性

入力可能な日時の最大値を指定します。HTML5

min属性

入力可能な日時の最小値を指定します。HTML5

step属性

日時の値の精度を秒単位で指定します。初期値は「60」です。HTML5

Select a time 

Select a time

type="datetime-local"HTML5

日時の入力欄となります。対応するブラウザでは多くは、カレンダーのUIで表示され、選択することで日付けを入力できるようになります。
送信される日時は閲覧者の現地時間となり、送信される値は、日時を ISO 8601 形式 （yyyy-mm-ddThh:mm:ss） にした2014-10-11T18:30:55（2014年10月11日18時30分55秒）のような形式で送信されます。step属性の単位は日、初期値は60となります。

■属性

name属性、value属性、disabled属性、form属性

※type="hidden"参照

autofocus属性

文書読み込み時、自動的にフォーカスさせます。

autocomplete属性

オートコンプリートの有効 / 無効を設定します。HTML5

list属性

入力候補リストを指定します。

readonly属性

読み込み専用にします。（編集不可）

required属性

入力を必須にします。HTML5

size属性

入力欄のサイズ（文字数）を指定します。

max属性

入力可能な日時の最大値を指定します。HTML5

min属性

入力可能な日時の最小値を指定します。HTML5

step属性

日時の値の精度を秒単位で指定します。初期値は「60」です。HTML5

Birthday (date and time)  

Birthday (date and time)

type="number"HTML5

数値の入力欄となります。対応しているブラウザでは、入力された値に数値以外の入力が送信されようとするとエラーを返します。step属性の初期値は1となります。

■属性

name属性、value属性、disabled属性、form属性

※type="hidden"参照

autofocus属性

文書読み込み時、自動的にフォーカスさせます。

autocomplete属性

オートコンプリートの有効 / 無効を設定します。HTML5

list属性

入力候補リストを指定します。

pattern属性

正規表現による入力チェックを行います。

placeholder属性

ダミーテキスト （プレースホルダ） を設定します。

readonly属性

読み込み専用にします。（編集不可）

required属性

入力を必須にします。HTML5

max属性

入力可能な日時の最大値を指定します。HTML5

min属性

入力可能な日時の最小値を指定します。HTML5

step属性

日時の値の精度を秒単位で指定します。初期値は「1」です。HTML5

Quantity (between 1 and 5) 

Quantity (between 1 and 5)

type="range"HTML5

数値のレンジ入力欄が作成されます。ただし、それほど厳密ではない、音量のボリュームや明るさの調節など大まかな数値の入力となります。
min属性の初期値は0、max属性の初期値は100となります。 また、step属性の初期値は1となります。 ユーザーが指定できる度合いの範囲や刻み方は強制され、ユーザーは空の値を指定することはできません。

■属性

name属性、value属性、disabled属性、form属性

※type="hidden"参照

autofocus属性

文書読み込み時、自動的にフォーカスさせます。

autocomplete属性

オートコンプリートの有効 / 無効を設定します。HTML5

list属性

入力候補リストを指定します。

max属性

入力可能な日時の最大値を指定します。HTML5

min属性

入力可能な日時の最小値を指定します。HTML5

step属性

日時の値の精度を秒単位で指定します。初期値は「1」です。HTML5

type="color"HTML5

RGB カラーの入力欄となります。対応するブラウザでは、色を選択するためのユーザインタフェースが表示され、それを操作することで数値を入力できます。
常に何らかの色が選択された状態となり、 空の値を指定することはできません。

■属性

name属性、value属性、disabled属性、form属性

※type="hidden"参照

autofocus属性

文書読み込み時、自動的にフォーカスさせます。

autocomplete属性

オートコンプリートの有効 / 無効を設定します。HTML5

list属性

入力候補リストを指定します。

Select your favorite color 

Select your favorite color

type="checkbox"

複数用意された選択肢の中から複数の項目を選択できるチェックボックスが作成されます。

■属性

name属性、value属性、disabled属性、form属性

※type="hidden"参照

required属性

入力を必須にします。HTML5

checked属性

あらかじめ選択した状態にします。

AAAAA
BBBBB
CCCCC

• AAA
• BBB
• CCC

type="radio"

用意された選択肢の中からひとつを選択できるラジオボタンが作成されます。

■属性

name属性、value属性、disabled属性、form属性

※type="hidden"参照

required属性

入力を必須にします。HTML5

checked属性

あらかじめ選択した状態にします。

 AAAAA
 BBBBB
 CCCCC

• AAAAA
• BBBBB
• CCCCC

type="file"

ファイル名の入力フィールドと[参照]ボタンが表示され、サーバーへ送信するファイルを選択できるようになります。
HTML5 では、multiple属性が新たに策定されたことによって、複数のファイルを選択して送信することが可能になりました。

■属性

name属性、value属性、disabled属性、form属性

※type="hidden"参照

autofocus属性

文書読み込み時、自動的にフォーカスさせます。

required属性

入力を必須にします。HTML5

accept属性

受け付けるファイルの MIME タイプ、または拡張子を指定します。

multiple属性

複数ファイルの選択を可能にします。HTML5

file 

type="submit"

フォームの送信ボタンを作成します。formaction属性（送信先URL）・formenctype属性（送信するデータの形式）・formmethod属性（送信方法）・formnovalidate属性（入力されたデータの妥当性を確認しない）・formtarget属性（フォーム送信するターゲット先）は、formの属性でも同様の指定をすることができますが、input要素側でこれらの属性を指定すると、formの指定より優先されます。

■属性

name属性、value属性、disabled属性、form属性

※type="hidden"参照

autofocus属性

文書読み込み時、自動的にフォーカスさせます。

required属性

入力を必須にします。HTML5

accept属性

受け付けるファイルの MIME タイプ、または拡張子を指定します。

multiple属性

複数ファイルの選択を可能にします。HTML5

formaction属性

form要素のaction 属性値を上書きします。HTML5

formenctype属性

form要素のenctype 属性値を上書きします。HTML5

formmethod属性

form要素のmethod 属性値を上書きします。HTML5

formnovalidate属性

form要素のnovalidate 属性値を上書きする。HTML5

formtarget属性

form要素のtarget 属性値を上書きします。HTML5

type="image"

画像形式のボタンを作成します。 画像ファイルはsrc属性で指定します。画像ボタンにはalt属性が必須となります。

■属性

name属性、value属性、disabled属性、form属性

※type="hidden"参照

autofocus属性

文書読み込み時、自動的にフォーカスさせます。

src属性（必須属性）

ボタン画像の URI を指定します。

alt属性（必須属性）

ボタン画像の代替テキストを指定します。

width属性

ボタンの表示サイズの横幅（px）を指定します。

height属性

ボタンの表示サイズの高さ（px）を指定します。

formaction属性

form要素のaction 属性値を上書きします。HTML5

formenctype属性

form要素のenctype 属性値を上書きします。HTML5

formmethod属性

form要素のmethod 属性値を上書きします。HTML5

formnovalidate属性

form要素のnovalidate 属性値を上書きする。HTML5

formtarget属性

form要素のtarget 属性値を上書きします。HTML5

type="reset"

フォームに入力した内容のリセットボタンとなります。

■属性

name属性、value属性、disabled属性、form属性

※type="hidden"参照

autofocus属性

文書読み込み時、自動的にフォーカスさせます。

type="button"

汎用ボタンを作成します。イベントハンドラ属性などによって、JavaScriptなどの発動ボタンとしても利用します。

■属性

name属性、value属性、disabled属性、form属性

※type="hidden"参照

autofocus属性

文書読み込み時、自動的にフォーカスさせます。

HTML5から途端に属性が増えたので、ついつい後回しにしてしまいがちなinput要素ですが、CMSやシステムと絡めた制作の場合は、必ず利用するタグになりますので、しっかりと理解しておいて損はありません。ChromeとOperaが先行していますが、他のブラウザも対応が進んでいます。
各type属性値・input属性のブラウザ対応状況は、Mozillaのサイトに掲載、随時更新されているようです。
input 要素 - HTML | MDN 参照
input 要素 | HTML5 タグリファレンス | W3 Watch Reference
HTML5 Input Types｜W3Schools.com
<input>－HTML5タグリファレンス｜HTMLクイックリファレンス
form関連要素は、まだまだありますので残りは次回以降。

Webデザイン学科の学生を連れて、今年3回目のWCANに参加してきました。学生のブログでもレポートがあると思いますので、是非ご覧下さい。



今回は、現在の業界的に旬な話題のiPhone、HTML5＋CSS3、Webブランディングの3セッションでした。

SESSION-1
■80カ国に広がる世界スタンダード iPhoneが生み出したモバイルWebの世界
林 信行さん

日本でも累計出荷台数200万台突破と言われるiPhoneだが、世界では80カ国で3000万台以上が売れている。iPhoneアプリ開発ビジネスは「21世紀のゴールドラッシュ」と呼ばれひと月で5000万円を売り上げるiPhone長者を次々と生み出している。一方、iPhoneのWeb機能も注目に値する。実はiPhoneと同じブラウザ技術がAndroidやPalm Preといった他社の次世代スマートフォンにも採用され、次世代Webのデファクト・スタンダードとなっているからだ。iPhoneのWebを知ることは、モバイルWebの未来を知ることにもつながる。

私も実際に、iPhone3GSを使用していますが、3Gの頃に比べて、3GSが発売されてから、使っている人が増えたように感じます。でもWeb業界の普及率が異常だとは思いますが。
他のWeb系セミナー同様、会場内で6割ぐらいの人がiPhone使用者でした。
今、全世界で3000万台、iPodTach2000万台と爆発的に普及しているIPhoneですが、まだまだその勢いは、止まらなさそうですね。
Appleのしぶとい商法に、日本メーカーも見習うべきですね。

SESSION-2
■60分できる！実践 HTML5 & CSS3ウェブサイト
菊池 崇さん

HTML5のウェブサイトをいかに、実装できるのか、簡単なステップにそって、jsの実装、reset.cssの作成方法を教えます。また、CSS3を効果的に実装しワークフローを効率アップさせる方法について説明をします。

最近、まわりで何かと話題になっている、HTML5とCSS3ですが、ここまで盛り上がっているのは日本だけで、アメリカやイギリスでは、少し落ち着いたそうです。新し物好きの日本人としては、やはりチェックしておくべきでしょう。
HTMLは5で簡略化される感じがしますが、CSSは3で覚える事が増えそうですね。デザイナーはどこまで理解するべきなのか、教える身としては考えさせられます。

SESSION-3
■Webディレクターとしての経験密度とWebブランディング
名村晋治さん

「コミュニケーション力」「営業力」「人前でうまくしゃべれない」「モチベーションが上がらない」etc・・・・。
Webサイトの制作におけるディレクションについては、常々迷う事がついて回ると思います。名村もいつも迷っています（笑）それはどれだけ経験を積んだとしても、ついて回ります。しかしそれをカバー出来るのは恐らく「経験」。しかし経験は時間に対して同等に増えるものではなく、その時々の考え方、受け止め方によって密度が全くに変わってきます。
ディレクションをする上での経験の密度をあげる為のマインドセットと、それを持った上でのディレクターとしての自立と自律について話をさせていただければと思います。その上で、サイト規模に関係ないツールとしてのWebブランディングをお話させていただきたいと思います。

いつも、名村さんの講演は、メモを忘れて聞き入ってしまうのですが、今回もメモを見渡しても、ほとんど記入してありませんでした。
学生にとっては、今後の指針となる話でした。経験を血肉にすべし。

今回のテーマは「CSS3＋jQueryを実際に使ってみよう！」ということで、スピーカーの皆さんが、それぞれCSS3やjQueryを使った作例を説明されました。
CSS3の実装はやはりsafariが圧倒的です。safari4にバージョンが上がって、ブラウジングの高速化も進みました。

HTML5の話題もあり、今後の制作環境が垣間みれた気がします。

kazumichiさんにa-blog cmsをステッカーをいただきました。ありがとうございます。
このステッカーは、貼っても剥がせるそうで、再利用が可能です。