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

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

2014.11.01 [土] 実際にformをどうやって使うの?(form関連要素おまけ)

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

2014年10月28日にHTML5仕様がW3C勧告(W3C Recommendation)となりました。HTML5の話が聞かれ始めた当初には、勧告されたら全世界大騒ぎになるのかと思っていましたが、意外と普段通りでしたね。

html5logo.jpg

これでHTML5は一段落ですが、引き続きHTML 5.1が2016年の勧告に向けて策定中であったりしますので、まだまだ進化は進みそうです。




さて本題。前回で最後と書きましたが、さらにform関連の要素や属性に関して具体的に使う場合、どのようなHTMLを書くと何が送られるのかなど、もう少しおさらいしたいと思います。


基本はform要素で囲まれた中に書いていきます。form属性を利用するとform要素の外においても関連付けさせることができます。action属性で送信先のURLを指定し、input要素のtype属性がsubmit, imageもしくはbutton要素のtype属性submitで送信することができます。JavaScriptを利用すると他の要素やinput type="button"でも送信できますが、今回は説明しません。

……

form要素、label要素、fieldset要素、legend要素、input要素


fieldset

input type hidden

input type text

input type search

input type tel

input type url

input type email

input type password

input type datatime

input type data

input type month

input type week

input type time

input type datatime-local

input type number

input type range

input type color

  • input type chekubox
  • input type radio

input type file

input type submit ※押すとデータが送信されます。

input type image ※こちらも押すと送信されます。働きはtype="submit"と同じです。

input type reset

input type button


受信するPHPファイルに下記のようなプログラムを記述します。type="file"は送信する画像から受け取るデータが複数あり表示させてあります。


textarea要素、option要素、select要素、output要素、keygen要素、button要素


datalist

output 0 100 + = 60

※output要素は表示させるためですので、値は送信されません。

keygen

button ※これを押すと送信されます。


これで、具体的な利用がイメージできるのではないでしょうか。

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

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

担当: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年生進級展2018「線の群生」終了しました。
1年生進級展「WWW(Welcome to Web World)」を開催しました。
1年生進級展「お母さんの2度見展」を開催中です。
「うぇ~~~~~~~ぶ2016」終了しました。ご来場ありがとうございました!
「うぇ〜〜〜〜〜ぶ!!」終了。ご来場ありがとうございました!
<コンテスト>
信州アプリコンテスト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デザイン2009WinterJavaScript1年生進級展Webサイト制作WordPress技能五輪全国大会2011礒田優かっぱ商店街オープンキャンパスアクアリング入学式cmsa-blogWebWordpress卒業制作展ライトニングトーク卒展Nagoya矢野りんアクセス解析2014CGイラスト学科体験入学若年者ものづくり大会卒業制作Web制作会社瀬川大勝面白法人カヤック合同企業展AutumnCSSSummerホームページ・ビルダーテンプレート作成石黒雄介第48回技能五輪全国大会ウェブデザイン技能競技会東京研修杉本拓也html5大阪名古屋駅HCDminiココストアあいちカレーラーメンコンテスト20152012AdobeJapan2010学生インタビューウェブデザイン技能競技大会HTML5inFlash閉館日GIOIIJ佐藤歩display:gridグリッドレイアウトgifアニメGridLayout夏季閉館日UXサイバーエージェント水野裕太北濱大輔SpringWebデザインギャラリー夏休み企業訪問トライデント祭りセントレアプロジェクト愛知県2018jQueryCSS3ブログパーツ学生専門学校COMMUNICATIONNEXTBananaAdWebクリエイター能力認定試験マール林田実樹ウェブデザイン技能検定フォトアルバム情報デザインフォーラム田中睦翔99eagle人間中心設計ラーメンCentOSGoogle制作合宿情報デザインWebワークショップ上村水月プレゼンテーション成田篤紀和みスマートフォンAWARDselect要素アップルップルフロントエンドエンジニアマークアップエンジニアparticleまぼろしcanvas飯田淳介Yahoo!Japan初期設定サーティファイ謹賀新年熊谷佳紀2008幕張メッセうぇーぶ1年生作品展legend要素愛知県選手団fieldset要素label要素たこ焼きform要素input要素textarea要素NTTドコモ東海スマホアプリ長屋めぐみoutput要素option要素Forum名古屋市科学館モンキーワークスウェブDeBLOGワークショップ結果発表iPhoneSEO空気人形カメラ写真名商連WEBサイト制作者のためのHCDの理解in名古屋トライデントイラストマップトライデント合同企業展笈瀬本通りカリキュラムCMS情報デザイン基礎DTPWORLDアサココ!WebリテラシーStore企業課題AppleディプロスWordCampMarkupjbstyle名古屋開府400年祭F-site導入授業豊田市美術館中日ドラゴンズナゴヤドーム真鍋大度塚本碧岩手県アンティー・ファクトリーFICCポートフォリオサイト静岡Likeレイアウト5T(ファイヴティー)AdventWordFes作品集モリサワウェブアクセシビリティ鷹野雅弘阿部淳也産学協同茂森仙直堀尾真衣AnalyticsCSSNite知多みるく戸田芳裕Pluginビジュアルエディタグループ制作コミュニケーションデザインワークショップ就職活動会社訪問メ~テレ卒業式CalendarBox学習出張講座水野怜美株式会社LIG進級展沖縄久保怜也WebデザイナーエイチームRunstant鈴木優太ドラマ信州アプリコンテスト[ゼロ]2017アプリコンテストES6ES2015浅野智GOペルソナ&シナリオ法3校合同発表会クリ博就職フェスタイラストコンテスト第56回ペルソナ/シナリオ法沖縄県pictureおかだよういちヨウイチ情報デザイン教育勉強会横浜デジタルアーツ専門学校森川眞行夢プロジェクト2009・成果報告会ウェブリテラシー協会第一回セミナーOculusSalsaIA2010キックオフセミナーVRカルタ浜松青山高校出前授業東京ゲームショウ2018WasThere箱根合宿デュエル・マスターズ会社見学鎌倉横浜中華街新横浜ラーメン博物館ThenAndNIKE慶華飯店日本電子専門学校srcsetcymaカラーストリートビューAutuminEC事業dotFesHCDプロセスブランディング斉藤洸貴JAPANインターネットクリエイティブアワード東京ゲームショウ2009人喰いの大鷲トリコ是枝裕和監督大富豪スコアシートPHP勉強会Yahoo!世界のCMフェスティバルITホワイトボックスKyotowonderfl#infoedu教育勉強会ロゴ公募小野裕子コピーライティングスーパーエレメンツsource山崎デザイン事務所FITCCREAM第56回技能五輪全国大会ゆるキャラFlash-Games閉会式映画のオープニングごはんとFlashマークアップ演習マクロマリオネット長谷川恭久冨田伴成WWW(Welcome名古屋グランパスチタハン10WEBサイト制作者のためのHCD(人間中心設計)の理解友章笈瀬本通ポスターデザイン・コンペディションCODE名古屋クリエイターフットサルAndrioidtoペルソナ1→10design細川太郎タロヲシナリオiPhone4ITCIRCUS柴乃櫂人広島弁グラフィクデザイン堀川増田悟名古屋サイト改善研究会安藤中級編小林信次CODEポスターデザイン・コンペティションブラザー工業株式会社中部国際空港株式会社Webアプリ名駅経済新聞名チャリプチ・フレーズ三蔵みの治商店Twitter商店サイト制作志維愛知商業高校GAUltimate商店街金シャチ商店街求人新世界道頓堀JIHYE大沢たかおネスカフェゴールドブレンドフナ犬ホ・ジヘHEO藤井英一ナゴヤイークリエイトNextDoor新城高校福みつWCAN46TAFF武将都市名古屋おもてなし武将隊武豊アニメーションフェスティバルポートピア名古屋プロ野球ビジュアルデベロップメント伊藤頼子プロトコル分析World)YORKE.IA名古屋メディアボンドアクセシビリティサーバーWEBサイト制作者のためのHCDの理解技能五輪予選知多半島期末テスト脆弱性なんと読む?韓国Webデザインスペシャルデースタジオジブリ・レイアウト展unoplus北川パーヤン松坂屋美術館餃子前川元成杉浦麻紀NightCollegeFLEXライフスタイル冬休みTEXTURE中村勇吾佐藤可士和SakaeFLASH落合祐介eatmarkerフェンシングエペPHPデザイナーのためのプログラミング入門信州アプリコンテストゼロMAX足立丈也、平子卓哉、増田隼也サムライCS4TAFF'09広告批評WCAN×CSSNite西村真里子武豊町アートアニメーションVIIFANTASYFINAL2019ソレコン☆ポスコン茂森デッサンDesign仙直コンテスト造形基礎プレゼン演習ActionScript基礎HTML+CSS基礎愛知県美術館アンドリュー・ワイエス三瓶HPデザインデザインコンテストYearNew2019年新年あけましておめでとうHappy01CONTESTウェブデザイン部門ICSカンファレンスマイクロインタラクション池田泰延MILKTHEWEBメンバーズ丹下紘希NamSIGGRAPHスポーツアナリティクス株式会社LIGHTzclassesASIAVideopuppetryデザイン鳥取砂丘鳥取XRAY2008WinterStefanW+KTokyo(+CRUZ)QubibiArtlessSagmeisterHelveticaWebDirectionEast'08デザインのへそ令和2年ADVENTCHILDRENカナバングラフィックス富岡聡学科桝田草一ウサビッチ電信柱エレミの恋CMS特集株式会社サイバーエージェントソバットシアターコマ撮りアニメ牧野史門旭食品サンプル製作所国家検定インターネットスキル認定普及協会ライブペイントツール西田幸司ヱヴァンゲリヲン新劇場版:破食品サンプルUIデザインActionScript学生参加アイディグラフィックス第4回アックゼロヨン・アワードCG・イラストコンテストモーション演習animationコーヒー用品LPO株式会社アクアリングUNIQLOCKギレン総帥escalatorアニメーションガンダムあけおめグラフィックデザイン今井佳子入賞平成31年Mozoramaメーカー・ブランド後期黒い太陽ウルトラ展ワークスコーポレーション「ヤノベケンジ-ウルトラ」展祐司髙橋茜音GENOウィルスデコクレSTUDIOセキュリティBlogUTZOOM株式会社スタメン髙橋茜音COMPLETE松本渚株式会社アンティー・ファクトリーLabuatPhotoshopCS6Tokyo山村浩二LIG日本総合ビジネス専門学校株式会社MTG企業見学新入生オリエンテーションカスタマイズセミナー2020新卒ヤノベケンジFigma線の群生わたし、定時に帰ります。TBS音楽ゲーム日本ファルコム□□□switchファルコム音楽フリー宣言CBCCALENDARUNIQLO荒俣宏ナゴヤデザインウィーク2009フォントおじさん特別授業タカガールサイト青空学区名古屋市営地下鉄AOAnimation加藤ひとみ西岡克真水曜日のカンパネラ柏木祥太スパルタキャンプ熊野三山大門坂那智の大滝本州最南端和歌山中華そばアロチ本家岩出本店丸田屋丸高山田拓生青山敬司optgroup要素涼麺type属性駅麺通りjsdo.itCodeplybutton要素datalist要素keygen要素紅茶専門店Liyn-anアイテムカンパニーIndependenceDay:Resurgenceプラネタリアンクイズ結団式ネイルサロンマウア授業アイチータ串本八鬼山学園祭再進学驛麺通り卒業研究制作展情報系10日でおぼえるLinuxサーバー入門教室F81教室トライデント合同企業説明会Monaca最優秀賞ジョルテlist-style-typeいな世NTTドコモ東海支社displaylist-itemKDDIHTML5スマートアプリ&クリエイティブコンテストモテ声ボーダーGWDgoogle宇野剛志石原愛実ランチ日清食品グループテーブルtable熊野古道マカベン名古屋マークアップ勉強会ジムナストコロン中村健太parseFloat()parseInt()Designer備忘録学生作品集道家陽介concrete5栗山聡一HTMLPlunker懇親会FlexibleBoxFlexbox味仙岡田陽一Dmm.comアクティビティシナリオ源賢司UXデザインCGスペシャリスト松田洋樹熊﨑彩Webプログラマー第53回ワクワク建設タウンクリスマスWebディレクターWeb制作のおしごと3DCG東京コスモKaizenPlatformバイドゥ平野健太郎職業実践専門課程出席率UI仕事うぇ~~~~~~~ぶワイヤーフレームレスポンシブWebデザインポートフォリオアイデア帳採用担当者の心に響く合同制作合宿グロースハッカーグロースハック合同制作合宿専門士高校14学位建設経営者倶楽部坂本邦夫スマートフォンサイトUI図鑑CSS3&jQueryで作る河地芳明AO入試インターンシップ沼田啓助WF1でBLOGIA/UXプラクティスカークスヴィルプログラムクイズ名古屋駅麺通り麺の匠オリエンタル第52回技能五輪全国大会JSFiddle親孝行新年のご挨拶CodePenJSBinNCF2014新入生2015年度八木智章竹中民男原一浩夏麺フェアScrollmagicScrollMagicアクセシビリティからはじめる、WebサイトのUXデザイWebアクセシビリティVelocity.js2016津田直明HighlighterSyntaxCrayon平野秀幸森田霞木村哲朗制作実績坂本貴史NCF2013醐りょうみつけもの恵那市岩村プロジェクションマッピングバルサマン愛知淑徳大学ドラゴンゲートゴールデンウィークGATEDRAGON3JAPANWORLDCUPAWARDSトライデントカレッジUntitled!!!!!!!!ablogcmsDTPの勉強部屋Magnum北岡弘至伊達千代Googleロゴ5月11日Ohanaゲーム大賞アマチュア部門東京ゲームショウノートPC貸与メールマガジンロゴマークツインメッセ静岡静岡県尾鷲高校神戸神戸国際展示場プラネタリウム出身高校ライアン・ウッドワードマーサ・グレアムD3.jsスクラップブック夏休みの課題鈴木TOCTableJISウェブリテラシー協会Slimbox2forX8341-3:2010名古屋市中村区FLAVER3.0FLV関口浩之Loadミス・ユニバース・ジャパン岐阜大会GoogleAnalytics石井研二カメラワーク横浜デジタルアーツウェブアートデザイナーLazy大西健太田中稚妃呂笈瀬本通商店街堀川友章CustomSmilies絵文字Contents円JOY!mapKtaistyleぬいぐるみのラパン英国王のスピーチ卒業制作・研究発表会2011of卒業・修了制作展愛知県立芸術大学SUBARU放課後のプレアデスキルターズフェスティバル2011GAINAX中部国際空港安藤志維キルト展日本の四季敢闘賞迎春Rhizomatiks田代豊たにぐちまことプレゼンinspiredbyそこにいない。展PARTYPerfumeThree.js木下健太郎お母さんの二度見展Facebookたこ焼きパーティWeb制作合宿みんなのICT佐藤ねじマイクロソフト就職東京あいちトリエンナーレ2013Webプログラミング初級講座カレーラーメン麺やOK麺屋ココイチフジ家55高橋雅人Instagram美術大学芸術大学インスタグラム料理さかなや第51回技能五輪全国大会Webデザイン演習HTMLCollectionappendChild()NodeList美大晴れやか嵐が如く芸大ECMAScriptSyntaxHighlighterTeamイマジンカップ服部友厚NHNBloosumBloom*Blockターミナル佐藤洋介尾花大輔スタジオディテイルズ鈴木雄太株式会社エイチーム2011年度梅澤朝樹衣台高校ドコモdocomo山川綾那StationFuture第7回若年者ものづくり競技大会東京ゲームショウ2012JQuery第50回結果長野張山大祐画像をチェックボタンにするv4.0.1WCAN2017SpringMuseIllustratorSVGSHOWGAMETOKYO学校ベースキャンプ名古屋FacebookページフロントエンドProxyNCF2017

メールフォーム

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

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