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

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

2014.10.24 [金] textarea要素、option要素、select要素、button要素 他のおさらい(form関連要素編③)

涼しくなってきて過ごしやすい季節になりました。学校ではイベントの多い季節でもあり、トライデントコンピュータ専門学校でも学園祭が11月15日(土)に開催されます。
gakuensai2014.jpg
実行委員会も組織され、模擬店やビンゴ大会など楽しい催しなどもありますので、ぜひお越しください。

さて、3回にわけてまとめてきたHTMLのform関連要素ですが、今回で最終になります。
form要素、label要素、fieldset要素、legend要素のおさらい(form関連要素編①)
input要素のおさらい(form関連要素編②)

textarea要素

textarea要素は、複数行のテキスト入力欄を作成します。

■属性値
autofocus属性
文書読み込み時、自動的にフォーカスさせます。HTML5
cols属性(初期値は「20」)
テキスト入力欄を表示する際の横幅を文字数で指定します。
dirname属性
送信データの書字方向に関するクエリ値のクエリ名を指定します。
disabled属性
入力コントールを無効にします。
form属性
任意のform要素に付与されたid属性値を指定することで関連付けを行います。HTML5
maxlength属性
入力可能な最大字数を指定します。HTML5
name属性
データが送信される際のクエリ名を指定します。
placeholder属性
ダミーテキスト(プレースホルダ)を設定します。HTML5
readonly属性
読み込み専用にします。(リードオンリー)
required属性
入力を必須にします。HTML5
rows属性(初期値は「2」)
テキスト入力欄を表示する際の高さを文字数で指定します。
wrap属性
入力欄における、折り返しの指定を行います。HTML5
値にsoftを指定すると入力欄の横幅で入力したテキストは自動的に折り返しますが、送信されるクエリには折り返しは反映されません。(初期値)
値にhardを指定すると入力欄の横幅で入力したテキストは自動的に折り返しますが、送信されるクエリにもその折り返しが反映されます。

のように表示されます。

optgroup要素

optgroup要素は、option要素で作成する選択肢をグループ化する際に使用します。 select 要素と、option 要素によって作成されるメニューで、その選択肢を任意のグループにまとめることができます。これにより視認性や操作性を向上させることができます。

■属性値
label属性(必須属性)
選択肢グループにラベルを指定します。空ではない文字列を指定する必要があります。
disabled属性
この属性を指定された選択肢グループは、選択できない選択肢のグループになります。

option要素

option要素は、select要素で作成するセレクトボックスで入力候補リストの選択肢を指定する際に使用します。HTML5からや、 datalis要素の選択肢としても利用できるようになりました。disabled属性は、選択肢を無効にする際に使用します。 option要素の親要素となるoptgroup要素にdisabled属性を指定すると、選択肢グループ全体を無効にすることができます。

■属性値
disabled属性
操作を無効にする(disabled)
label属性
選択肢にラベル(項目名)を付ける
selected属性
選択肢をあらかじめ選択済みにする(selected)
value属性
選択肢の値を指定

select要素

select要素は、セレクトボックスを作成する際に使用します。 一般的なブラウザでは、ドロップダウン式のセレクトボックスや、スクロール式のセレクトウィンドウとして表示されます。
select要素ででセレクトボックス全体を囲み、 その中にoption要素を配置して個々の選択肢リストを作成します。さらにそのoption要素の選択肢をoptgroup要素で囲むと、選択肢をグループ化することができます。

■属性値
disabled属性
入力コントールを無効にします。
autofocus属性
文書読み込み時、自動的にフォーカスさせます。HTML5
form属性
任意のform要素に付与されたid属性値を指定することで関連付けを行います。HTML5
multiple属性
複数の選択肢を選択を可能にします。
required属性
該当するselect要素を、必ず選択しなければならないプルダウンメニューとします。
name属性
データが送信される際のクエリ名を指定します。
size属性
閲覧者に表示する選択肢の数を指定します。初期値は、multiple属性が指定されている場合で「4」、multiple属性が指定されていない場合で「1」です。

select要素、optgroup要素、option要素を利用するとこのように表示されます。

datalist 要素

datalist要素は閲覧者に入力候補のデータリストを提供します。入力候補はoption 要素で提供することができます。要素および内包される要素は、画面上に表示されません。
datalist要素に付与された id 属性値とinput要素のlist属性の値を同じにして入力欄とデータリストを関連付けることができます。この場合、datalist要素はサジェストとして機能します。

output要素HTML5

output要素は計算の結果出力を表します。JavaScript が実行できない環境では出力の表示ができず、output要素の内容が表示されます。

■属性値
form属性
任意のform要素に付与したid属性値を指定することで、そのフォームとoutput要素を関連付けます。
for属性
入力コントロールに付与したid属性値を指定することで、output要素と入力コントロールを関連付けます。

0 100 +
=

0 100 + =

keygen要素HTML5

>keygen要素は、key generatorの略で、フォーム送信時にキーを発行して暗号化する際に使用します。UAは公開鍵をサーバに送信し、秘密鍵を閲覧者のローカル環境に保存します。サーバ側でクライアント証明書を生成したい場合などに利用できます。keytypeパラメータは、生成する鍵の種類を指定します。有効な値は "RSA" (既定値)、"DSA"、"EC" です。name属性とchallenge 属性はすべての場合で必要です。

■属性値
autofocus属性
オートフォーカスする
keytype属性
暗号化の方式をキーワードで指定します。初期値は 「rsa」だが指定できる値はブラウザによる
disabled属性
キーを操作不能にする
form属性
要素と関連付ける
challenge属性
鍵ペアを生成する際に使用されるチャレンジ文字列を指定します。
name属性
キーに名前を付ける




button要素

button要素はボタンを表します。button要素でマークアップすることで、内包するテキストや画像などをボタンとして使用することができます。

■属性値
autofocus属性
自動フォーカスを指定する(autofocus)HTML5
disabled属性
操作を無効にする(disabled)
form属性
どのフォームと関連付けるかを
のid名で指定HTML5
formaction属性
送信先URLを指定HTML5
formenctype属性
送信するデータの形式を指定(application/x-www-form-urlencoded・multipart/form-data・text/plain)(初期値はapplication/x-www-form-urlencoded)HTML5
formmethod属性
送信方法(HTTPメソッド)を指定(get・post)(初期値はget)HTML5
formnovalidate属性
入力されたデータの妥当性を確認しない(formnovalidate)HTML5
formtarget属性
フォーム送信するターゲット先を指定(_blank・_self・_parent・_top・任意のターゲット名)HTML5
name属性
ボタンの名前を指定
type属性
ボタンの種類を指定(submit・reset・button)(初期値はsubmit)
value属性
値を指定


PHPなどサーバーサイドプログラムでシステムを構築する場合、データ入力インターフェースになりますので、すぐに書けるといいのですが、やはり手間ですよね。
そんな時はa-blog cmsのカスタムフィールドメーカーなどを利用して大まかに作ってからカスタマイズするのも良いかもしれません。
参考:a-blog cms の カスタムフィールドメーカーつくりました | maki-o memo

さらに、formを理解するために、PHPを使った簡単なシステムを作ってみようと思います。

2014.10.12 [日] Webサイト制作発表会2014

集中授業の最終日にWebデザイン学科2年生前期授業「Webサイト制作」の発表会を行いました。

website141010_01.jpg

2年生前期授業「Webサイト制作」は、4名1組のグループで、実際のクライアントからWebサイト制作の依頼をうけ、それぞれ役割を分担して公開をする事を目的にした授業となります。クライアント様との打ち合わせや、要件の調査、課題の抽出、設計、ビジュアルデザイン、コーディング、CMS実装、公開を学生が行います。

かっぱ商店街(笈瀬本通商店街)

http://oise.jp
website141010_16.jpg
かっぱ商店街(笈瀬本通商店街)名古屋駅西にある商店街です。数年前、先輩たちが制作したサイトがWordPressを狙った攻撃にあって改竄されてしまい、記事や店舗情報が読めない状態になってしまい、リニューアルの依頼でした。

website141010_04.jpg website141010_05.jpg
メンバー:山崎伊清、池田大地、笠井政慶 、水野裕太
以前のイラストを利用した親しみやすい雰囲気は継承しつつ、PHP製のオリジナル店舗情報システムもすべてWordPressで実装し、ページ全体の情報設計にも考慮したWebサイトになっています。これで、店舗情報やブログの更新もひとつの管理画面でできるようになりましたので、商店街の人が情報を発信しやすくなっています。

website141010_23.jpg website141010_07.jpg
かっぱ商店街の中西さん、湊さんにもお越しいただきました。終了後は、今後の運用や、要望など聞く事ができました。

ネイルサロン maua

http://maua.jp
website141010_17.jpg
マウアさんは個人で経営されているネイルサロンです。以前、名古屋市内にあった店舗を尾張旭市に移転され、現在運営しているアメーバブログだけでなく、Webサイトを開設したいという新規制作の依頼でした。オーナーとお客様へのアンケートを実施し、何度も打ち合わせを重ねて制作をしています。

website141010_13.jpg
メンバー:鈴木庸孝、伊藤鮎美、西山隼平、松岡祐弥
打ち合わせの回数は、他のグループに比べて圧倒的に多かったので、最終的にクライアント、制作者ともに納得のWebサイトになっています。デザインは、メインターゲットである“若すぎない大人の女性”を意識して空気感のあるレイアウト、色味になっています。またお店の特徴である、ネイルのデザインもわかりやすくギャラリー化し、さらにオリジナルのアップロードシステムを組み込みました。入力項目を限定する事で更新のしやすさも考慮しています。また、ほとんど(約9割)のお客様がリピーターということで、初見で行きやすいようにメニュー、料金も明瞭で細かく表示してあります。まだ実装が完了していませんが、予約システムを導入する事で、さらに集客に結びつける施策も用意しました。

website141010_15.jpg website141010_14.jpg
マウアのオーナー森下さん。株式会社アンティー・ファクトリーで活躍中の卒業生、石黒くんも、セキュリティー面と予約システムについてのアドバイスをしてくれました。

株式会社アイテムカンパニー

http://www.item-c.jp/
website141010_18.jpg
販売代行の株式会社アイテムカンパニーさんのWebサイトはあったのですが、汎用のテンプレートで制作されていたため、業務内容がわかりやすく、人材採用にも利用できるWebサイトにリニューアルして欲しいとの依頼でした。

website141010_02.jpg website141010_12.jpg
メンバー:河地芳明、栗山総一、田中睦翔、森瑛幹

まずは、一般の人にはあまり馴染みのない“販売代行”についてわかりやすく解説するとともに、目的である問い合わせ件数の増加、人材採用などを明確に分離し誘導できるように情報設計に気を配りました。ビジュアルに関しては、学生にお任せという事でユーザーの動きを邪魔しないように大きめなブロックでわかれています。会社のメインカラーである赤を中心にして、内容が引き立つように背景に色を入れていません。お問い合わせフォームのページもファーストビューに考慮したUIになっています。

website141010_22.jpg website141010_11.jpg
森先生からは「ユーザー層から1秒かかるトップページは離脱しちゃうよ」とトップページのローディング時間についての指摘をもらいました。また今回は、名古屋のWeb制作会社の方もお越しいただきました。株式会社アビリティコンサルタントの菅沼さんからは、お問い合わせフォーム上のQ&Aが増えた場合や、電話番号でのお問い合わせに関しての質問がありました。

紅茶専門店 Liyn-an

website141010_19.jpg
尾張旭市にある紅茶専門店 Liyn-anさんは、喫茶店の経営はもちろん、海外の紅茶の買い付け、業務用紅茶の販売、おいしく紅茶を飲むための研究や論文執筆、本物の紅茶の普及など、尾張旭市を紅茶で有名になった中心的なお店です。今回は古くから積み上がってきたコンテンツを整理して、新たに業務販売用のWebサイトを制作してほしいとの依頼でした。

website141010_09.jpg
メンバー:伊吹賢也、小林裕仁、高橋雅人、横井翼
現在あるメイン紅茶専門店 TEAS Liyn-anのサイトと通販サイトに加え、業務用のサイトを開設する事で販路を明確にして、それぞれのお客様に合った情報を提供することが目的になります。業務用サイトは商品の情報だけでなく、購入したお店が美味しい紅茶を提供できるように、奥の深い紅茶の世界、技術、知識を幅広く知ってもらいたいという、オーナーの堀田さんの想いも具現化します。今回はそのために、膨大な紅茶記事を分かりやすく分別し、ユーザーに迷わず情報を提供するためのシステムをWordPressを利用して実装する事になります。
残念ながら、まだトップページと数ページしか制作ができていませんが、トップページには、記事へ誘導するリンクがたくさん用意されていますので、設計思想と上手く組み合わされば、面白いサイトになるのではと期待してます。

website141010_08.jpg website141010_24.jpg
リンアンの堀田さんには「楽しみにしています!」と激励いただきました。期待にお応えしたいですね。株式会社アルタの田中さんからも、ご意見をいただきました。

会場の後ろには各グループのWebサイトが閲覧できるようになっていました。
website141010_20.jpg website141010_25.jpg
終了後には、アンケートにもお答えいただき、発表会内では聞けなかった、貴重なご意見も伺えました。改善の目安に致します。ありがとうございました。

website141010_06.jpg
発表会を終えて、ホッとした一幕。さて来週からは、後期の通常授業が始まります。今回のWebサイト制作も完成させることはもちろん、コンテストも卒業制作も始まりますので、頑張っていきましょう!

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

2014.10.09 [木] 技能五輪全国大会愛知県選手団結団式

来月の28日から行われる第52回技能五輪全国大会愛知県選手団の結団式が、名古屋市東区のウィル愛知イベントホールで開催されました。

2014will_03.jpg

■結団式次第
○開式
○主催者あいさつ
○技能五輪愛知県大会 成績優秀者表彰
・知事表彰
・協会長表彰
○愛知県障害者技能競技大会
○成績優秀者 披露
○選手団紹介
○県旗授与
○激励のことば
○激励文贈呈
○選手宣誓
○団長あいさつ
○写真撮影
○閉式

今年は、地元開催ということで、過去最高だった昨年を上回る251名の選手を擁し、10年連続の最優秀選手団賞を目指します。ウェブデザイン職種には、トライデントコンピュータ専門学校から3名、名古屋市立工芸高校から3名の6名の選手が愛知県代表として出場します。

大村愛知県知事の激励のあいさつ
2014will_07.jpg

金メダル目指して頑張るぞー!
2014will_04.jpg width= 2014will_05.jpg

結団式前には、マスコットキャラクターの“アイチータ”もクイズで盛り上げてくれました。記念撮影も毎年恒例です。ちなみにアイチータは、今年もゆるキャラグランプリにエントリー中です。
2014will_06.jpg 2014will_01.jpg

学校行事など盛りだくさん(制作発表会・学園祭・コンテスト)のこの時期ですが、コツコツ勉強して悔いのない大会にしましょう。

今年のパーカーはバックにアイチータ!結団式には、レアなアイチータグッズが貰えました!
2014will_02.jpg 2014will_08.jpg

全然関係ないですが、昨晩は3年ぶりの皆既月食でしたねー。過ごしやすい夜でしたので、外に出てデジカメでパチり。次回は来年の4月にあるそうですよ。

2014will_21.jpg

2014.10.06 [月] form要素、label要素、fieldset要素、legend要素のおさらい(form関連要素編①)

本州を縦断した台風18号の影響で、午前中の授業が休講になってしまいましたが、皆さんの地域では大丈夫でしたでしょうか。

さて、table要素に続き、あまり得意でない要素にform要素などがあります。簡単な投稿システムやCMSのカスタマイズ、お問い合わせフォームなど、使う機会も多々あるのですが、一概にform要素のみではなく、label要素やinput要素、各要素の属性などが複雑に組み合わさったりしており、面倒でついついコピペで済ませていたりします。
HTML5では、かなり追加や変更のあった要素(属性)なので、ここでおさらいなどしておきたいと思います。

form要素

formは、テキストフィールド、ボタン、チェックボックス、レンジコントロール、またはカラーピッカーなど、フォームコントロールを持つウェブページのコンポーネントである。さらなる処理(たとえば、検索または計算結果を返す)に対してサーバーに送信できるデータを提供して、ユーザーはそのようなフォームで情報を交換できる。スクリプトがユーザーエクスペリエンスを補強するか、またはサーバーにデータを送信する以外の意義に対してフォームを使用できるようなAPIが利用可能であるが、多くの場合クライアント側のスクリプトは必要ない。

すべてのフォームは、内部にコントロールを配置されたform要素で始まる。ほとんどのコントロールは、デフォルトで1行のテキストフィールドを提供するinput要素によって表される。コントロールをラベル付けするために、label要素が使用される。ラベルテキストおよびコントロール自身は、label要素の中に入る。フォームの各部分は段落とみなされ、通常はp要素を使用して他の部分から分離される。
W3C HTML5 仕様書より


のように表示されます。

フォームに入力されたデータは、送信ボタンを押すことでWebサーバーへ送信されます。 その際、属性と値でWebサーバーへ送信されるデータの処理や数値などが設定されます。例えば、送信先URLはaction属性で、データの送信方法はmethod属性で、送信するデータの形式はenctype属性でという具合です。

■属性値
accept-charset属性
送信するデータの文字エンコーディングを指定(UTF-8・Shift_JIS・EUC-JPなど)
action属性
送信先URLを指定
autocomplete属性(初期値はon)
オートコンプリートのオン/オフを指定(on・off)
enctype属性
送信するデータの形式を指定(application/x-www-form-urlencoded・multipart/form-data・text/plain)
初期値はapplication/x-www-form-urlencoded
method属性
送信方法(HTTPメソッド)を指定
get:get送信されるデータは、action 属性で指定された URI にクエリ文字列 として付加された状態で送信されます (初期値)
post:post送信データは本文として送信されます。大きなデータを送信するのに向いています。通常、サーバ側のプログラムで受け取るデータはこの post メソッドを使用します
name属性
フォームの名前を指定
novalidate属性
入力されたデータの妥当性を確認しない(novalidate)
target属性
フォーム送信するターゲット先を指定(_blank:新規のウィンドウに表示, _self:現在のウィンドウ(フレーム)に表示, _parent:親ウィンドウ(フレーム)に表示, _top:フレームを解除してウィンドウ全体に表示)

label要素

label要素は、フォーム部品と項目名(ラベル)を関連付ける際に使用できます。一般的な利用方法として、
とlabel要素で内包させて関連付けをします。ただし、for属性によって内包されているフォームと違う関連要素に変更した場合(後に説明※1)は間違いになります。

※これはまちがい
また、label要素内に複数のラベル付け可能なフォーム部品をおいた場合は、最初の要素が対象になるそうです。

■属性値
for属性
フォーム部品とラベルを関連付ける
form属性
form要素とラベルを関連付ける

for属性をつかってラベルと関連させる場合(※1)は、input要素のid属性値を、label要素のfor属性値に指定することで関連させることができます。

これで、項目名であるテキストをクリックすることで選択できるように関連付けすることができました。



さらに、HTML5から新しくform属性が加わりました。フォーム関連要素は、デフォルトでは、その直近の祖先となるform要素と関連づけられますがform属性を指定すれば、これより優先させることができます。たとえば任意のform要素にid属性値を指定し、同じ値をもつform属性値を入力コントロールなど(label要素、input要素)に指定すれば関連付けることができます。これを利用するとform要素の外に入力コントロールがあったとしても、送信などが可能になります。






filedset要素

fieldset要素は、フォームをグループ化することができます。fieldsetの名前はlegend要素によって与えられる。disabled属性は指定された場合、無効にするためにfieldset要素の所有する最初のlegend要素の子に属する子孫であるものを除き、fieldset要素の全フォームコントロールの子孫をもたらす。form属性は、フォームの所有者とfieldset要素を明示的に関連付けるために使用される。name属性は要素の名前を表す。
W3C HTML5 仕様書より

■属性値
disabled属性
グループ内のフォーム部品を無効にする(disabled)
form属性
どのフォームと関連付けるかを<form>のid名で指定
name属性
<fieldset>に名前を付ける

legend要素

legend 要素は fieldset 要素によってまとめられたグループの見出しを表します。legend 要素は、fieldset要素の最初の子要素としてひとつだけ配置しなくてはなりません。

input要素は、属性がたくさんありますので、次のエントリーで書きたいと思います。今回説明した要素や属性などで、下記のようなformの基本的な構文はできるのではないでしょうか?



Pizza Size





Pizza Size


と表示されます。

フォームまわりの要素は、button要素やselect要素、output要素などたくさんありますので、まだまだ続きます。
検索フォーム
熊本地震 支援・募金まとめ
募集イベントバナー(1年生制作)
BananaAd Banner
プロフィール

担当:Webデザイン学科+

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

トライデントロゴ

質問などはLINEでどうぞ。

友だち追加数
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」終了しました。ご来場ありがとうございました!
「うぇ〜〜〜〜〜ぶ!!」終了。ご来場ありがとうございました!
<コンテスト>
NCF2014(スマホアプリ開発テーマ2) 準グランプリ獲得!
最優秀賞!HTML5スマートアプリ&クリエイティブコンテスト
NCF2013グランプリ受賞!!!
<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回若年者ものづくり競技大会閉会式
Instagram
学生ブログリンク
<1年生ブログ>

WF1でBLOG 2017

<Webデザイン学科2年生ブログ>
タグリスト 改

トライデントコンピュータ専門学校Webデザイン学科WCAN業界研究技能五輪ウェブデザイン職種ウェブデザイン若年者ものづくり競技大会2013名古屋ポートフォリオECCコンピュータ専門学校2009WinterWebサイト学生ブログWordPressJavaScript映画Webデザイン2011Webサイト制作礒田優かっぱ商店街Wordpress入学式技能五輪全国大会卒業制作展ライトニングトークa-blogcms2014矢野りんNagoya面白法人カヤックCGイラスト学科Webテンプレート作成ホームページ・ビルダー瀬川大勝若年者ものづくり大会石黒雄介SummerオープンキャンパスAutumnAdobe杉本拓也IIJGIOhtml52010in大阪HCDアクセス解析第48回技能五輪全国大会1年生進級展2012ココストア東京研修名古屋駅アクアリングFlashmini2015あいちカレーラーメンコンテストウェブデザイン技能競技会Web制作会社体験入学Japangifアニメ愛知県専門学校水野裕太BananaAd田中睦翔合同企業展CentOSセントレアプロジェクトSpringラーメン99eagle企業訪問上村水月卒展卒業制作プレゼンテーション情報デザイン成田篤紀ブログパーツ情報デザインフォーラムウェブデザイン技能検定マール人間中心設計学生CSS3WebワークショップGoogleHTML55T(ファイヴティー)アサココ!CalendarディプロスAdvent導入授業MarkupjQueryレイアウト名古屋開府400年祭F-site豊田市美術館WordFes作品集WordCamp情報デザイン基礎form要素2008Webデザインギャラリーたこ焼きlabel要素fieldset要素textarea要素input要素legend要素ForumUXStoreスマートフォンBox和みAppleグループ制作鷹野雅弘CSS企業課題DTPWORLDアンティー・ファクトリー写真トライデント合同企業展笈瀬本通りAnalyticsカメラワークショップ結果発表産学協同モンキーワークスCSSNiteイラストマップ知多みるくoption要素ナゴヤドーム戸田芳裕WEBサイト制作者のためのHCDの理解in名古屋トライデント名商連ウェブデザイン技能競技大会堀尾真衣iPhoneFICCCMSカリキュラムSEOjbstyle中日ドラゴンズ岩手県塚本碧真鍋大度静岡ポートフォリオサイト卒業式メ~テレビジュアルエディタ会社訪問名古屋市科学館空気人形阿部淳也コミュニケーションデザインワークショップLike就職活動1年生作品展閉館日particlecanvasサーティファイ林田実樹Runstant初期設定佐藤歩熊谷佳紀学生インタビュースマホアプリ長屋めぐみうぇーぶoutput要素Webクリエイター能力認定試験謹賀新年まぼろしselect要素幕張メッセ坂本貴史ゆるキャラ津田直明閉会式デュエル・マスターズFlash-GameswonderfldotFes制作実績ブランディング映画のオープニングKyotoHCDプロセス長谷川恭久ロゴ公募FITC教育勉強会2016#infoeduコピーライティングCREAMAutumin小野裕子マークアップ演習スーパーエレメンツ原一浩山崎デザイン事務所ごはんとFlashマクロマリオネットYahoo!アニメーションMozoramaAO入試escalatoranimation第4回アックゼロヨン・アワードCG・イラストコンテストモーション演習後期プログラムクイズ今井佳子アイディグラフィックス学生参加グラフィックデザインCodePen入賞ガンダム河地芳明LPO世界のCMフェスティバルITホワイトボックスPHP勉強会イラストコンテストJAPANインターネットクリエイティブアワードカラーストリートビューIA/UXプラクティス大富豪スコアシート東京ゲームショウ2009沼田啓助UNIQLOCKギレン総帥ナゴヤデザインウィーク2009カークスヴィル人喰いの大鷲トリコ是枝裕和監督平野秀幸おかだよういち求人新世界道頓堀大沢たかおネスカフェゴールドブレンドフナ犬ウェブアートデザイナーレスポンシブWebデザイン職業実践専門課程出席率WCAN46学位専門士TAFF武豊アニメーションフェスティバルナゴヤ武将都市名古屋おもてなし武将隊ポートピア名古屋プロ野球WEBサイト制作者のためのHCDの理解技能五輪予選平野健太郎プロトコル分析伊藤頼子IAYORKE.ビジュアルデベロップメントunoplusバイドゥ仕事ワイヤーフレームうぇ~~~~~~~ぶ知多半島UI松坂屋美術館スタジオジブリ・レイアウト展合同制作合宿福みつ横浜デジタルアーツ専門学校3校合同発表会クリ博就職フェスタ日本電子専門学校鎌倉箱根合宿森川眞行会社見学ペルソナ&シナリオ法浅野智ペルソナ/シナリオ法情報デザイン教育勉強会ウェブDeBLOG坂本邦夫CMS特集WebデザイナーWebプログラマー横浜中華街新横浜ラーメン博物館Web制作のおしごとIA2010キックオフセミナー夢プロジェクト2009・成果報告会懇親会合宿餃子浜松合同制作ウェブリテラシー協会第一回セミナーWebディレクターAndNIKE慶華飯店ThenThereSalsaWasヨウイチ富岡聡PHP芸大美大デザイナーのためのプログラミング入門水野怜美料理株式会社LIGMAXNodeListHTMLCollection鳥取VideopuppetryASIA鳥取砂丘デザイン愛知県美術館アンドリュー・ワイエスFLASHFLEX醐りょうCS4サムライDesignデッサン造形基礎WebリテラシーTEXTURE中村勇吾ドラマNightCollegeInstagramインスタグラム佐藤可士和SakaeSIGGRAPHappendChild()デザインコンテスト01CONTESTHPデザイン制作合宿ECMAScriptES6ES2015THEWEBProxyカンファレンス学校ウェブデザイン部門WCAN2017SpringSyntaxHighlighterv4.0.1ライデントコンピュータ専門学校お母さんの二度見展デザインのへそ進級展HelveticaWebDirectionEast'082008WinterWebプログラミング初級講座マイクロソフトXRAYSagmeisterStefan丹下紘希学習茂森仙直NamArtlessW+KTokyo(+CRUZ)QubibiHTML+CSS基礎ActionScript基礎カスタマイズセミナークイズIndependence駅麺通り涼麺黒い太陽ウルトラ展ヤノベケンジDay:Resurgence荒俣宏タカガールサイトファルコム音楽フリー宣言UNIQLOCALENDARプラネタリアン水曜日のカンパネラjsdo.itライブペイントサーバー学科JSFiddleカナバングラフィックスウサビッチソバットシアターコマ撮りアニメ電信柱エレミの恋Plunker旭食品サンプル製作所西田幸司国家検定インターネットスキル認定普及協会ヱヴァンゲリヲン新劇場版:破ActionScript食品サンプルCodeply音楽ゲームVIIFANTASYFINALADVENTCHILDREN学園祭再進学COMPLETEアートアニメーション武豊町驛麺通りいな世プレゼン演習西村真里子WCAN×CSSNiteTAFF'09広告批評情報系MonacaジムナストコロンセキュリティGENOウィルスデコクレ山村浩二日本ファルコム□□□switch日清食品グループワークスコーポレーション「ヤノベケンジ-ウルトラ」展Labuat学生作品集TokyoUTZOOMBlogサイバーエージェント沖縄JSBinシナリオそこにいない。展PARTYPerfumeあいちトリエンナーレ2013HighlighterWebデザイン演習CrayonSyntaxbyinspiredThree.js木下健太郎森田霞プレゼンたにぐちまことRhizomatiks田代豊第51回技能五輪全国大会2015年度NEXT高橋雅人カレーラーメンCOMMUNICATIONAWARDスマートフォンサイトUI図鑑美術大学芸術大学麺やOK麺屋ココイチ嵐が如くWF1でBLOG新入生晴れやかさかなやフジ家55インターンシップ就職東京Facebookページ竹中民男八木智章SVGIllustrator第50回結果長野ベースキャンプ名古屋Scrollmagic第7回若年者ものづくり競技大会ScrollMagicVelocity.js東京ゲームショウ2012TOKYOSHOWGAMEJQuery張山大祐モリサワFacebookたこ焼きパーティウェブアクセシビリティみんなのICT佐藤ねじマークアップエンジニアWeb制作合宿アップルップルYahoo!JapanMuse画像をチェックボタンにする夏麺フェア飯田淳介木村哲朗フロントエンドエンジニアNCF2013NTTドコモ東海支社スパルタキャンプ岩出本店丸田屋柏木祥太名古屋市営地下鉄特別授業オリエンタル青空学区丸高アロチ本家本州最南端串本八鬼山那智の大滝大門坂和歌山中華そば熊野三山AOAnimation授業アイチータ結団式ネイルサロンマウアアイテムカンパニーtype属性keygen要素紅茶専門店Liyn-an愛知県選手団datalist要素加藤ひとみ西岡克真第52回技能五輪全国大会山田拓生青山敬司button要素HTML熊野古道マカベン10日でおぼえるLinuxサーバー入門教室名古屋駅麺通り卒業研究制作展NTTドコモ東海トライデント合同企業説明会googleGWDF81教室最優秀賞ジョルテdisplaylist-style-typeCSS3&jQueryで作るlist-itemモテ声ボーダーKDDIHTML5スマートアプリ&クリエイティブコンテストDesignerparseInt()石原愛実ランチ麺の匠宇野剛志テーブル名古屋マークアップ勉強会table親孝行中村健太NCF2014備忘録parseFloat()栗山聡一新年のご挨拶道家陽介concrete5尾花大輔Bloom*BlockGoogleAnalytics石井研二カメラワークKaizenアクティビティシナリオ田中稚妃呂源賢司横浜デジタルアーツPlatformグロースハックCODEポスターデザイン・コンペティション小林信次増田悟グロースハッカー中部国際空港株式会社株式会社アクアリングブラザー工業株式会社大西健太Lazy笈瀬本通商店街名古屋市中村区FLAVER3.0UXデザインキルターズフェスティバル2011GAINAXSUBARU放課後のプレアデスFLV8341-3:2010forPluginLoadSlimbox2ウェブリテラシー協会XJIS名古屋サイト改善研究会中級編ITCIRCUS柴乃櫂人広島弁AndrioidWEBサイト制作者のためのHCD(人間中心設計)の理解ポートフォリオアイデア帳名古屋グランパスチタハン10iPhone4optgroup要素商店街金シャチ商店街名古屋メディアボンドタロヲ細川太郎ペルソナ1→10design採用担当者の心に響く笈瀬本通Ultimate14商店サイト制作GA愛知商業高校名駅経済新聞名チャリプチ・フレーズ三蔵ポスターデザイン・コンペディションCODE名古屋クリエイターフットサルグラフィクデザイン高校みの治商店Twitter中部国際空港日本の四季東京ゲームショウ神戸神戸国際展示場ゲーム大賞アマチュア部門Ohanaクリスマスロゴマークメールマガジン東京コスモライアン・ウッドワードマーサ・グレアム5月11日松田洋樹プラネタリウム鈴木3DCG静岡県ツインメッセ静岡アクセシビリティからはじめる、WebサイトのUXデザイ建設経営者倶楽部ワクワク建設タウンNHNWebアクセシビリティBloosumTeamイマジンカップStationFuture熊﨑彩迎春敢闘賞2011年度第53回docomoドコモGoogleロゴゴールデンウィーク卒業制作・研究発表会2011FlexibleBoxぬいぐるみのラパン英国王のスピーチFlexboxトライデントカレッジUntitled!!!!!!!!味仙KtaistyleCustomSmilies愛知県立芸術大学Dmm.comキルト展卒業・修了制作展円JOY!map絵文字岡田陽一CGスペシャリストみつけもの恵那市岩村プロジェクションマッピング愛知淑徳大学ドラゴンゲートGATEDRAGONバルサマン3DTPの勉強部屋ablogcmsターミナル伊達千代北岡弘至JAPANWORLDCUPMagnumアクセシビリティ

zenback
メールフォーム

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

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