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

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

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

最終更新:2017.10.26Webサイト制作Tips

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

検索フォーム
#NoHeartNoSNS

ハートがなけりゃSNSじゃない!

プロフィール

担当: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
学生がライトニングトークで話しました。
<進級展>
2019年度 1年生進級制作展終了しました。
1年生進級展2018「線の群生」終了しました。
1年生進級展「WWW(Welcome to Web World)」を開催しました。
1年生進級展「お母さんの2度見展」を開催中です。
「うぇ~~~~~~~ぶ2016」終了しました。ご来場ありがとうございました!
「うぇ〜〜〜〜〜ぶ!!」終了。ご来場ありがとうございました!
<コンテスト>
信州未来アプリコンテスト0 [ゼロ] 2020 NTTドコモ長野支店賞受賞!
信州未来アプリコンテスト0 [ゼロ] 2019 KDDI賞受賞!
第5回 ソレコン☆ポスコン特別賞受賞
「第1回 専門学校 HTML5作品アワード」技術賞を受賞しました!
NCF2017でグランプリを受賞しました!
信州アプリコンテスト0 [ゼロ] KDDI賞受賞!
NCF2014(スマホアプリ開発テーマ2) 準グランプリ獲得!
最優秀賞!HTML5スマートアプリ&クリエイティブコンテスト
NCF2013グランプリ受賞!!!
<Webサイト制作>
ミス・ユニバース・ジャパン岐阜大会公式Webサイトを作成しました。
建設業入職者増加プロジェクト発表会
Webサイト制作発表会2014
99eagle Webサイトリニューアル公開
99eagle Webサイト公開
「Bloom*Block」Webサイト公開
セントレア「日本の四季 キルト展」Webサイト公開
かっぱ商店街サイト制作
ココストア共同企画「アサココ!」公開
<技能五輪全国大会>
第56回技能五輪全国大会(ウェブデザイン職種)敢闘賞受賞!
第53回技能五輪全国大会(ウェブデザイン職種)その3
第52回技能五輪全国大会が開催されました。
銀メダル・銅メダル獲得【第51回技能五輪全国大会】
第49回技能五輪全国大会結果発表 敢闘賞受賞
第48回技能五輪全国大会結果発表(銀賞・敢闘賞受賞)
第47回技能五輪閉会式 & 結果発表
第46回技能五輪
<若年者ものづくり競技大会>
第14回若年者ものづくり競技大会
第11回若年者ものづくり競技大会 2日目&結果
第9回若年者ものづくり競技大会2日目(競技日)
第8回若年者ものづくり競技大会2日目
第7回若年者ものづくり大会
第6回若年者ものづくり大会2日目
第5回若年者ものづくり大会
第4回若年者ものづくり競技大会閉会式
月別アーカイブ
タグリスト 改

トライデントコンピュータ専門学校Webデザイン学科業界研究WCAN技能五輪ウェブデザイン職種若年者ものづくり競技大会ウェブデザインWebサイトポートフォリオ映画2013名古屋ECCコンピュータ専門学校学生ブログWebデザインWinter2009Webサイト制作1年生進級展JavaScriptWordPress技能五輪全国大会2011アクアリング礒田優卒業制作展入学式かっぱ商店街オープンキャンパスアクセス解析2014矢野りん卒展ライトニングトークWebNagoyaWordpressCSSa-blogcms合同企業展Summer石黒雄介卒業制作若年者ものづくり大会Autumnホームページ・ビルダー体験入学面白法人カヤックWeb制作会社瀬川大勝CGイラスト学科テンプレート作成名古屋駅東京研修2012学生インタビューあいちカレーラーメンコンテスト2015html5閉館日GIOIIJ夏休み佐藤歩杉本拓也夏季閉館日第48回技能五輪全国大会ココストア大阪ウェブデザイン技能競技大会AdobeプレゼンテーションminiJapanHCDin2010HTML5ウェブデザイン技能競技会Flash学生林田実樹jQueryマールCSS3Webクリエイター能力認定試験サイバーエージェントフォトアルバム北濱大輔GridLayoutdisplay:grid制作合宿ブログパーツ情報デザインフォーラムウェブデザイン技能検定トライデント祭り成田篤紀gifアニメ上村水月モリサワBananaAdラーメン愛知県セントレアSpringグリッドレイアウトプロジェクト企業訪問人間中心設計NEXT水野裕太就職活動UXWebデザインギャラリーGoogleCentOSCOMMUNICATION専門学校情報デザインWebワークショップ田中睦翔99eagle2018Calendar桝田草一Advent和み5T(ファイヴティー)たにぐちまことAWARDたこ焼きform要素ForumエイチームスマートフォンWordFesウェブアクセシビリティFICCアンティー・ファクトリー静岡ポートフォリオサイト阿部淳也真鍋大度塚本碧レイアウトlabel要素BoxLike岩手県作品集fieldset要素アップルップルフロントエンドエンジニアマークアップエンジニアparticlecanvas飯田淳介Yahoo!Japan初期設定サーティファイ謹賀新年熊谷佳紀幕張メッセまぼろしうぇーぶtextarea要素option要素input要素愛知県選手団legend要素output要素select要素1年生作品展スマホアプリNTTドコモ東海長屋めぐみコミュニケーションデザインワークショップゴールデンウィーク豊田市美術館F-site2020導入授業WordCamp名古屋開府400年祭MarkupSEO空気人形カリキュラムCMSjbstyleディプロスアサココ!企業課題グループ制作茂森仙直鷹野雅弘2008オンライン授業Zoom情報デザイン基礎DTPWORLDWebリテラシーStoreAppleiPhone結果発表産学協同株式会社スタメンAnalyticsCSSNite戸田芳裕堀尾真衣Plugin卒業式会社訪問メ~テレビジュアルエディタ松本渚知多みるくナゴヤドームカメラ写真ワークショップウェブDeBLOGモンキーワークストライデント合同企業展笈瀬本通りWEBサイト制作者のためのHCDの理解in名古屋中日ドラゴンズ名商連トライデントイラストマップWebデザイナー名古屋市科学館アプリコンテスト鈴木優太久保怜也沖縄学習信州アプリコンテスト[ゼロ]Webアプリ出張講座進級展ドラマ2017ES2015株式会社LIGES6Runstant水野怜美慶華飯店新横浜ラーメン博物館横浜中華街NIKEAndWasThereThen箱根合宿WCAN46日本電子専門学校横浜デジタルアーツ専門学校3校合同発表会鎌倉会社見学森川眞行武豊アニメーションフェスティバルナゴヤSalsaWebデザインスペシャルデー鈴木雄太山川綾那浜松武将都市marker福みつ餃子足立丈也、平子卓哉、増田隼也クリ博就職フェスタTAFF名古屋おもてなし武将隊株式会社エイチームウェブリテラシー協会第一回セミナー夢プロジェクト2009・成果報告会フェンシングIA2010キックオフセミナーeatおかだよういちFlash-GameswonderflKyotodotFesゆるキャラ夏休みの課題マークアップ演習マクロマリオネット映画のオープニング閉会式スポーツアナリティクスHCDプロセスストリートビューclassesJAPANインターネットクリエイティブアワードYahoo!カラー株式会社LIGHTzブランディングスクラップブックAutuminごはんとFlashCREAM情報デザイン教育勉強会ヨウイチイラストコンテストデュエル・マスターズペルソナ/シナリオ法尾鷲高校浅野智梅澤朝樹衣台高校スタジオディテイルズ長谷川恭久スーパーエレメンツ#infoedu教育勉強会ロゴ公募FITC小野裕子コピーライティングノートPC貸与山崎デザイン事務所エペペルソナ&シナリオ法新世界プチ・フレーズ三蔵みの治商店Twitter商店サイト制作v4.0.1愛知商業高校GAUltimateWCAN2017Springグラフィクデザイン茂森名古屋グランパスチタハン10WEBサイト制作者のためのHCD(人間中心設計)の理解コンテスト笈瀬本通ポスターデザイン・コンペディションCODE名古屋クリエイターフットサル名チャリ名駅経済新聞GoogleAnalytics石井研二カメラワーク茜音髙橋期末テスト大西健太田中稚妃呂横浜デジタルアーツSyntaxHighlighter株式会社アクアリング増田悟名古屋サイト改善研究会ソレコン☆ポスコン中級編小林信次CODEポスターデザイン・コンペティションブラザー工業株式会社中部国際空港株式会社2019Andrioid仙直Proxy知多半島学校ターミナルスタジオジブリ・レイアウト展松坂屋美術館ライフスタイルunoplus杉浦麻紀佐藤洋介プロ野球大沢たかお求人世界のCMフェスティバル道頓堀ネスカフェゴールドブレンド落合祐介ポートピア名古屋フナ犬服部友厚技能五輪予選WEBサイト制作者のためのHCDの理解ペルソナ1→10design細川太郎タロヲシナリオiPhone4ITCIRCUS柴乃櫂人広島弁商店街金シャチ商店街ビジュアルデベロップメント伊藤頼子プロトコル分析冬休みYORKE.IA名古屋メディアボンドアクセシビリティサーバー信州アプリコンテストゼロ東京ゲームショウ2009企業賞NCF2017NightCollegeSakae佐藤可士和CS4サムライTEXTURE中村勇吾FLEXFLASHPHP志維堀川友章デザイナーのためのプログラミング入門安藤2020アカデミー賞パラサイトMAX進級制作展DesignFANTASYFINALアートアニメーション武豊町VIIADVENTフォントおじさんCOMPLETECHILDRENTAFF'09広告批評HTML+CSS基礎造形基礎第3回専門学校HTML5作品アワードデッサンActionScript基礎プレゼン演習WCAN×CSSNite西村真里子ミス・ユニバース・ジャパン岐阜大会松井友奈愛知県美術館小林健人FrontendHPデザインデザインコンテスト小林隼大福田将也丹下紘希後期集中授業信州未来アプリコンテストWorld)01CONTESTウェブデザイン部門ニシヤマナガヤカンファレンス未完美術館中村享介toTHEWEB海老江優太NamArtlessASIASIGGRAPHemremVideopuppetry鳥取アンドリュー・ワイエスデザイン鳥取砂丘vwXRAYSagmeisterStefanW+KTokyo(+CRUZ)QubibiHelveticavh2008WinterWebDirectionEast'08デザインのへそ関口浩之株式会社COTSCMS特集新年ソバットシアターコマ撮りアニメ学生参加アイディグラフィックスガンダム2019年グラフィックデザイン今井佳子電信柱エレミの恋ウサビッチ旭食品サンプル製作所食品サンプルNewActionScriptHappyあけましておめでとうカナバングラフィックス富岡聡学科入賞後期D3.jsナゴヤデザインウィーク2009令和2年UNIQLOCK是枝裕和監督人喰いの大鷲トリコPHP勉強会大富豪スコアシートLazyギレン総帥LPOescalatorアニメーションMozoramaAWARDSanimationモーション演習出身高校第4回アックゼロヨン・アワードCG・イラストコンテストヱヴァンゲリヲン新劇場版:破西田幸司デコクレContentsセキュリティGENOウィルス山村浩二フロントエンド音楽ゲーム日本ファルコム□□□switchワークスコーポレーション「ヤノベケンジ-ウルトラ」展安藤志維Tokyo堀川友章OriginalTshirt.stLabuatUTZOOM北川パーヤン進級制作Blogファルコム音楽フリー宣言ofウルトラ展ヤノベケンジYear三瓶黒い太陽TOC国家検定インターネットスキル認定普及協会ライブペイントカスタマイズセミナーマイクロインタラクションCALENDARUNIQLO荒俣宏TableICSメンバーズMILK池田泰延ITホワイトボックスウェブリテラシー協会アイチータ結団式水曜日のカンパネラタカガールサイト授業ネイルサロンマウアtype属性プラネタリアン紅茶専門店Liyn-anアイテムカンパニー日清食品グループジムナストコロンsrcsetAnimationAO特別授業西岡克真加藤ひとみ藤井英一青山敬司山田拓生ResurgenceDay:NCF2014新年のご挨拶親孝行麺の匠涼麺名古屋駅麺通りPlunkerCodeplyjsdo.itオリエンタル第52回技能五輪全国大会keygen要素クイズIndependenceoptgroup要素datalist要素button要素source駅麺通りHTMLJIHYE青空学区栗山聡一EC事業備忘録parseFloat()ホ・ジヘconcrete5HEO第56回技能五輪全国大会中村健太道家陽介parseInt()Designer10日でおぼえるLinuxサーバー入門教室斉藤洸貴NextDoor前川元成cymaトライデント合同企業説明会googleGWDF81教室ランチ石原愛実丸高アロチ本家和歌山中華そば熊野三山丸田屋岩出本店名古屋市営地下鉄柏木祥太スパルタキャンプ大門坂那智の大滝名古屋マークアップ勉強会tableテーブル宇野剛志マカベン熊野古道本州最南端串本八鬼山CSS3&jQueryで作るスマートフォンサイトUI図鑑高校14出前授業平野秀幸採用担当者の心に響くポートフォリオアイデア帳バイドゥ平野健太郎青山高校坂本貴史東京ゲームショウ2018VRカルタアクティビティシナリオ源賢司UXデザインDmm.comKaizenPlatformOculusグロースハッカーグロースハックUI仕事WebディレクターWeb制作のおしごと懇親会合宿制作実績Webプログラマー2016原一浩坂本邦夫合同制作合同制作合宿ウェブアートデザイナーうぇ~~~~~~~ぶワイヤーフレーム新城高校レスポンシブWebデザイン職業実践専門課程専門士学位出席率岡田陽一IA/UXプラクティス木村哲朗AO入試プログラムクイズ森田霞河地芳明沼田啓助八木智章竹中民男カークスヴィル夏麺フェアCodePenHighlighterpictureJSBinJSFiddleインターンシップWF1でBLOG新入生SyntaxCrayon2015年度ScrollmagicScrollMagic冨田伴成3DCG東京コスモGO松田洋樹CGスペシャリストFlexibleBoxFlexbox味仙第56回クリスマス沖縄県アクセシビリティからはじめる、WebサイトのUXデザイWebアクセシビリティVelocity.js建設経営者倶楽部ワクワク建設タウン熊﨑彩イークリエイト第53回コーヒー用品卒業研究制作展HTMLCollectionappendChild()プラネタリウムWWW(Welcome鈴木STUDIO神戸神戸国際展示場髙橋茜音ライアン・ウッドワードマーサ・グレアムドラゴンゲート愛知淑徳大学みつけもの恵那市岩村DRAGONGATE5月11日GoogleロゴWebプログラミング初級講座NodeList東京ゲームショウdocomoドコモTBS2011年度FutureStationNHNわたし、定時に帰ります。芸大CBCLIGロゴマークメールマガジンOhanaゲーム大賞アマチュア部門美大静岡県迎春敢闘賞ツインメッセ静岡プロジェクションマッピングバルサマンGAINAXSUBARU放課後のプレアデスキルターズフェスティバル2011中部国際空港日本の四季卒業・修了制作展愛知県立芸術大学お母さんの二度見展キルト展ECMAScript笈瀬本通商店街JIS津田直明Slimbox2forX8341-3:2010名古屋市中村区FLAVER3.0FLV円JOY!map株式会社アンティー・ファクトリーDTPの勉強部屋ablogcmsマイクロソフト伊達千代北岡弘至3JAPANWORLDCUPMagnumトライデントカレッジKtaistyleCustomSmilies絵文字PhotoshopCS6ぬいぐるみのラパン卒業制作・研究発表会2011Untitled!!!!!!!!祐司英国王のスピーチイマジンカップTeamMonaca情報系学園祭第51回技能五輪全国大会牧野史門脆弱性なんと読む?学生作品集さかなや晴れやか嵐が如くWebデザイン演習UIデザインPerfumebyinspiredRhizomatiksPARTYそこにいない。展ツールFigmaあいちトリエンナーレ2013フジ家55麺屋ココイチlist-itemdisplaylist-style-typeメーカー・ブランドモテ声ボーダーHTML5スマートアプリ&クリエイティブコンテスト最優秀賞ジョルテKDDI韓国NTTドコモ東海支社株式会社サイバーエージェント高橋雅人カレーラーメン麺やOKあけおめ芸術大学NCF2013平成31年美術大学田代豊再進学SVGFacebookページインスタグラムInstagramIllustrator長野張山大祐JQuery第50回結果ベースキャンプ名古屋新入生オリエンテーション料理尾花大輔Bloom*BlockBloosum第7回若年者ものづくり競技大会東京ゲームショウ2012SHOWGAMETOKYO画像をチェックボタンにするMuse東京佐藤ねじいな世みんなのICT就職驛麺通りプレゼンThree.js木下健太郎線の群生株式会社MTG名古屋市名東区企業見学醐りょう日本総合ビジネス専門学校2020新卒Facebookたこ焼きパーティWeb制作合宿Load

メールフォーム

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

東京コスモ
トライデントコンピュータ専門学校
教務課のびのび日記
オフィス川口
Pagetop