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

トライデントWebデザイン学科の最新情報を紹介しています。学生へのインタビュー記事から学生作品の解説、Webデザイン・マークアップ・プログラミングの授業風景、プロジェクト発表会、名古屋のWeb制作会社情報、イベント参加レポートやWeb制作の技術解説記事などWeb制作に関連する記事を掲載しています。トライデントコンピュータ専門学校は、いま話題の名古屋駅からユニモール地下街を歩いて3分です。 

2014.10.12 [日] input要素のおさらい(form関連要素編②)

前回に引き続き、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属性
あらかじめ選択した状態にします。

type="radio"

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

■属性
name属性、value属性、disabled属性、form属性
※type="hidden"参照
required属性
入力を必須にします。HTML5
checked属性
あらかじめ選択した状態にします。

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関連要素は、まだまだありますので残りは次回以降。

2009.10.17 [土] WCAN 2009 Autumnに行ってきました。

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

WCAN2009Autumun01.jpg


今回は、現在の業界的に旬な話題の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ブランディングをお話させていただきたいと思います。
いつも、名村さんの講演は、メモを忘れて聞き入ってしまうのですが、今回もメモを見渡しても、ほとんど記入してありませんでした。
学生にとっては、今後の指針となる話でした。経験を血肉にすべし。

2009.06.12 [金] WCAN mini Markup vol.10

6月5日に行われたWCAN mini Markupの第10回に参加してきました。

WCANminiMU0605_01.jpg

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

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

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

検索フォーム
プロフィール

担当:Webデザイン学科+

名古屋駅から歩いて6分、トライデントコンピュータ専門学校のWebデザイン学科を紹介します。

トライデントロゴ

質問などはLINEでどうぞ。

友だち追加数
Instagram
Webデザイン学科実績
<プレゼン>
WCAN 2016 Springに参加してきました。
WCAN 2015 Winterに参加しました。
建設業入職者増加プロジェクトの発表会に参加
WCAN 2015 Summerに参加してきました。
WCAN 2013 Winterに参加
WCAN(秋)に参加しました。
無事、発表が終わりました【WordFes Nagoya 2013】
WCAN 2013 Summerに参加してきました。
WCAN 2011 Winter LT&LOGO
学生がライトニングトークで話しました。
<展示会>
1年生進級展「お母さんの2度見展」を開催中です。
「うぇ~~~~~~~ぶ2016」終了しました。ご来場ありがとうございました!
「うぇ〜〜〜〜〜ぶ!!」終了。ご来場ありがとうございました!
<コンテスト>
NCF2017でグランプリを受賞しました!
信州アプリコンテスト0 [ゼロ] KDDI賞受賞!
NCF2014(スマホアプリ開発テーマ2) 準グランプリ獲得!
最優秀賞!HTML5スマートアプリ&クリエイティブコンテスト
NCF2013グランプリ受賞!!!
<Webサイト制作>
ミス・ユニバース・ジャパン岐阜大会公式Webサイトを作成しました。
建設業入職者増加プロジェクト発表会
Webサイト制作発表会2014
99eagle Webサイトリニューアル公開
99eagle Webサイト公開
「Bloom*Block」Webサイト公開
セントレア「日本の四季 キルト展」Webサイト公開
かっぱ商店街サイト制作
ココストア共同企画「アサココ!」公開
<技能五輪全国大会>
第53回技能五輪全国大会(ウェブデザイン職種)その3
第52回技能五輪全国大会が開催されました。
銀メダル・銅メダル獲得【第51回技能五輪全国大会】
第49回技能五輪全国大会結果発表 敢闘賞受賞
第48回技能五輪全国大会結果発表(銀賞・敢闘賞受賞)
第47回技能五輪閉会式 & 結果発表
第46回技能五輪
<若年者ものづくり競技大会>
第11回若年者ものづくり競技大会 2日目&結果
第9回若年者ものづくり競技大会2日目(競技日)
第8回若年者ものづくり競技大会2日目
第7回若年者ものづくり大会
第6回若年者ものづくり大会2日目
第5回若年者ものづくり大会
第4回若年者ものづくり競技大会閉会式
タグリスト 改

トライデントコンピュータ専門学校Webデザイン学科WCAN業界研究技能五輪ウェブデザイン職種ウェブデザイン2013若年者ものづくり競技大会Webサイト名古屋映画ECCコンピュータ専門学校ポートフォリオWinter2009学生ブログWebサイト制作WebデザインJavaScript2011WordPressかっぱ商店街礒田優cmsライトニングトーク矢野りんa-blog入学式NagoyaWordpress技能五輪全国大会2014卒業制作展オープンキャンパス瀬川大勝石黒雄介Summer1年生進級展面白法人カヤックAutumnCGイラスト学科アクセス解析Webテンプレート作成アクアリングホームページ・ビルダー若年者ものづくり大会GIOウェブデザイン技能競技会杉本拓也IIJ2015体験入学miniFlashhtml5あいちカレーラーメンコンテスト大阪Japan東京研修HCD2012Web制作会社ココストア卒展第48回技能五輪全国大会名古屋駅Adobein2010企業訪問jQueryセントレアSpringプロジェクト卒業制作愛知県99eagleCSS3HTML5合同企業展情報デザインGoogle田中睦翔プレゼンテーションgifアニメCentOS水野裕太情報デザインフォーラム専門学校閉館日学生人間中心設計BananaAd成田篤紀ラーメン上村水月Webワークショップマールウェブデザイン技能検定ブログパーツサイバーエージェントYahoo!Japaninput要素名古屋市科学館鷹野雅弘阿部淳也StoreWEBサイト制作者のためのHCDの理解in名古屋ワークショップコミュニケーションデザインワークショップ茂森仙直写真林田実樹LikeAnalytics作品集熊谷佳紀Apple幕張メッセ佐藤歩CSSCSSNiteBoxFICCカメラCMS戸田芳裕output要素SEOモンキーワークスNTTドコモ東海企業課題学生インタビュー空気人形知多みるくナゴヤドーム長屋めぐみ中日ドラゴンズスマホアプリ静岡UXparticletextarea要素ポートフォリオサイトカリキュラムcanvasForumうぇーぶ1年生作品展まぼろしoption要素レイアウトselect要素アンティー・ファクトリー岩手県2008トライデントF-site堀尾真衣NEXTビジュアルエディタ名古屋開府400年祭ウェブデザイン技能競技大会塚本碧たこ焼きCOMMUNICATIONトライデント合同企業展豊田市美術館グループ制作導入授業WordCampアサココ!ディプロス笈瀬本通りCalendar5T(ファイヴティー)イラストマップ和みAdventPluginWebデザインギャラリー産学協同fieldset要素会社訪問情報デザイン基礎DTPWORLDlabel要素就職活動legend要素WordFes名商連真鍋大度謹賀新年jbstyleform要素卒業式MarkupスマートフォンサーティファイWebクリエイター能力認定試験iPhone結果発表メ~テレRunstant初期設定スタジオジブリ・レイアウト展松坂屋美術館技能五輪予選unoplusWebDirectionEast'08デザインのへそネスカフェゴールドブレンドVideopuppetry鳥取WCAN46TAFF名古屋おもてなし武将隊武豊アニメーションフェスティバル鳥取砂丘福みつアンドリュー・ワイエス愛知県美術館デザイン浜松餃子武将都市ナゴヤ2008WinterXRAYフナ犬ポートピア名古屋プロ野球SIGGRAPHWEBサイト制作者のためのHCDの理解道頓堀ASIA新世界求人大沢たかお知多半島細川太郎増田悟名古屋サイト改善研究会HPデザイン小林信次デザインコンテスト中部国際空港株式会社01CODEポスターデザイン・コンペティション中級編名駅経済新聞商店サイト制作プチ・フレーズ三蔵UltimateGA名チャリ愛知商業高校ブラザー工業株式会社株式会社アクアリングLazyカンファレンス大西健太Loadforウェブリテラシー協会Slimbox2田中稚妃呂横浜デジタルアーツWEBTHECONTESTカメラワーク石井研二ウェブデザイン部門GoogleAnalyticsみの治商店TwitterStefan商店街金シャチ商店街タロヲW+KTokyo(+CRUZ)1→10designQubibi名古屋メディアボンドアクセシビリティビジュアルデベロップメント伊藤頼子プロトコル分析YORKE.IASagmeisterサーバーペルソナシナリオ笈瀬本通名古屋グランパスチタハン10名古屋クリエイターフットサルCODEグラフィクデザインポスターデザイン・コンペディション丹下紘希WEBサイト制作者のためのHCD(人間中心設計)の理解柴乃櫂人広島弁iPhone4ITCIRCUSArtlessAndrioidNamHelveticaNightカナバングラフィックス富岡聡学科ウサビッチ電信柱エレミの恋CMS特集ソバットシアターコマ撮りアニメWebリテラシー造形基礎ActionScriptヱヴァンゲリヲン新劇場版:破西田幸司ActionScript基礎HTML+CSS基礎旭食品サンプル製作所食品サンプル学生参加アイディグラフィックスanimationescalatorCS4モーション演習CG・イラストコンテストギレン総帥LPO第4回アックゼロヨン・アワードアニメーションMozoramaデッサングラフィックデザイン今井佳子ガンダムDesign後期入賞国家検定インターネットスキル認定普及協会山村浩二デコクレセキュリティADVENT□□□switch音楽ゲーム日本ファルコムGENOウィルスワークスコーポレーションUTZOOMLabuatTokyoBlogCOMPLETE「ヤノベケンジ-ウルトラ」展CHILDRENファルコム音楽フリー宣言VIIカスタマイズセミナー西村真里子WCAN×CSSNiteプレゼン演習ヤノベケンジライブペイント黒い太陽ウルトラ展広告批評TAFF'09CALENDARUNIQLO荒俣宏FANTASYFINAL武豊町アートアニメーションUNIQLOCKサムライクリ博就職フェスタペルソナ&シナリオ法浅野智CollegeFLEX横浜デジタルアーツ専門学校3校合同発表会FLASHおかだよういちペルソナ/シナリオ法イラストコンテストデュエル・マスターズ長谷川恭久ヨウイチSakae情報デザイン教育勉強会ウェブDeBLOG日本電子専門学校鎌倉ThereThenAndWasSalsaIA2010キックオフセミナー夢プロジェクト2009・成果報告会ウェブリテラシー協会第一回セミナーデザイナーのためのプログラミング入門NIKE箱根合宿森川眞行会社見学横浜中華街新横浜ラーメン博物館慶華飯店MAXスーパーエレメンツ山崎デザイン事務所ストリートビューTEXTUREJAPANインターネットクリエイティブアワードカラーJISHCDプロセスブランディングAutuminYahoo!世界のCMフェスティバル人喰いの大鷲トリコ是枝裕和監督ナゴヤデザインウィーク2009東京ゲームショウ2009大富豪スコアシートITホワイトボックスPHP勉強会中村勇吾dotFesロゴ公募FITCCREAM教育勉強会#infoedu佐藤可士和コピーライティング小野裕子ごはんとFlashマークアップ演習Flash-GameswonderflKyotoゆるキャラ閉会式マクロマリオネット映画のオープニングPHP5月11日バイドゥ平野健太郎ポートフォリオアイデア帳採用担当者の心に響くUI仕事レスポンシブWebデザインウェブアートデザイナーうぇ~~~~~~~ぶワイヤーフレーム高校14源賢司UXデザインDmm.com岡田陽一アクティビティシナリオKaizenグロースハッカーグロースハックPlatform職業実践専門課程出席率制作実績津田直明2016原一浩坂本貴史平野秀幸河地芳明沼田啓助カークスヴィルIA/UXプラクティス坂本邦夫Webプログラマー合同制作合同制作合宿専門士学位合宿懇親会WebデザイナーWebディレクターWeb制作のおしごとFlexibleBoxFlexboxWF1でBLOGインターンシップスマートフォンサイトUI図鑑CSS3&jQueryで作る新入生2015年度森田霞HighlighterSyntaxCrayon名古屋駅麺通りNCF2014HTMLbutton要素datalist要素keygen要素第52回技能五輪全国大会オリエンタル新年のご挨拶親孝行麺の匠マークアップエンジニアアップルップル熊﨑彩第53回ワクワク建設タウン建設経営者倶楽部クリスマス東京コスモ味仙CGスペシャリスト松田洋樹3DCGアクセシビリティからはじめる、WebサイトのUXデザイWebアクセシビリティ夏麺フェア飯田淳介フロントエンドエンジニア木村哲朗竹中民男八木智章Velocity.jsScrollMagicScrollmagicAO入試プログラムクイズスタジオディテイルズ服部友厚佐藤洋介ターミナルフォトアルバム鈴木雄太衣台高校梅澤朝樹株式会社エイチーム山川綾那学校ProxyES6ECMAScriptライデントコンピュータ専門学校お母さんの二度見展ES2015制作合宿WCAN2017Springv4.0.1SyntaxHighlighter尾鷲高校出張講座アプリコンテストミス・ユニバース・ジャパン岐阜大会北濱大輔久保怜也信州アプリコンテスト[ゼロ]NCF2017堀川志維安藤WebアプリContentsofD3.jsスクラップブック夏休みの課題ノートPC貸与出身高校AWARDSTableTOC2017学習進級展タカガールサイト水曜日のカンパネラプラネタリアンResurgence日清食品グループジムナストコロン沖縄トライデント祭り夏季閉館日夏休みDay:IndependencePlunkerJSFiddleJSBinCodePenCodeplyjsdo.itクイズ駅麺通り涼麺学生作品集Monaca美大芸大水野怜美株式会社LIGNodeListHTMLCollectionマイクロソフトWebプログラミング初級講座appendChild()料理ドラマ驛麺通り再進学学園祭情報系いな世Instagramインスタグラム醐りょうoptgroup要素type属性ドコモ2011年度迎春敢闘賞docomoFutureTeamイマジンカップNHNStationツインメッセ静岡静岡県神戸神戸国際展示場鈴木東京ゲームショウゲーム大賞アマチュア部門ロゴマークメールマガジンOhanaBloosumBloom*Block張山大祐JQuery第50回結果画像をチェックボタンにするMuseモリサワFacebookたこ焼きパーティWeb制作合宿長野IllustratorTOKYO東京ゲームショウ2012第7回若年者ものづくり競技大会尾花大輔GAMESHOWSVGFacebookページベースキャンプ名古屋プラネタリウムライアン・ウッドワード円JOY!map卒業・修了制作展愛知県立芸術大学キルト展絵文字CustomSmilies英国王のスピーチ卒業制作・研究発表会2011ぬいぐるみのラパンKtaistyle日本の四季中部国際空港名古屋市中村区FLAVER3.0FLV8341-3:2010笈瀬本通商店街キルターズフェスティバル2011GAINAXSUBARU放課後のプレアデスUntitled!!!!!!!!トライデントカレッジDRAGONドラゴンゲート愛知淑徳大学みつけものGATEゴールデンウィークマーサ・グレアム友章Googleロゴ恵那市岩村プロジェクションマッピング伊達千代DTPの勉強部屋ablogcms北岡弘至Magnumバルサマン3JAPANWORLDCUPウェブアクセシビリティみんなのICT熊野古道マカベン名古屋マークアップ勉強会table八鬼山串本熊野三山大門坂那智の大滝本州最南端テーブル宇野剛志栗山聡一備忘録parseFloat()parseInt()concrete5道家陽介石原愛実ランチ中村健太和歌山中華そばアロチ本家愛知県選手団青山敬司山田拓生加藤ひとみ結団式アイチータ紅茶専門店Liyn-anアイテムカンパニーネイルサロンマウア授業西岡克真Animationスパルタキャンプ岩出本店丸田屋丸高柏木祥太名古屋市営地下鉄AO特別授業青空学区Designergoogleあいちトリエンナーレ2013そこにいない。展PARTYPerfumeWebデザイン演習第51回技能五輪全国大会フジ家55さかなや晴れやか嵐が如くbyinspired木下健太郎就職東京佐藤ねじThree.jsプレゼンRhizomatiks田代豊たにぐちまこと麺屋ココイチ麺やOK最優秀賞ジョルテKDDIHTML5スマートアプリ&クリエイティブコンテスト卒業研究制作展10日でおぼえるLinuxサーバー入門教室GWDF81教室トライデント合同企業説明会モテ声ボーダーlist-item芸術大学AWARD高橋雅人カレーラーメン美術大学NCF2013displaylist-style-typeNTTドコモ東海支社X

メールフォーム

名前:
メールアドレス:
件名:
本文:

東京コスモ
トライデントコンピュータ専門学校
Pagetop