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

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

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

最終更新:2022.02.11Webサイト制作TipsWeb技術

涼しくなってきて過ごしやすい季節になりました。学校ではイベントの多い季節でもあり、トライデントコンピュータ専門学校でも学園祭が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

最終更新:2014.10.28学生作品発表・プレゼン
集中授業の最終日に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関連要素編②)

最終更新:2022.02.11Webサイト制作TipsWeb技術

前回に引き続き、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 [木] 技能五輪全国大会愛知県選手団結団式

最終更新: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関連要素編①)

最終更新:2022.02.11Webサイト制作TipsWeb技術

本州を縦断した台風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要素などたくさんありますので、まだまだ続きます。

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

トライデントコンピュータ専門学校Webデザイン学科業界研究WCAN技能五輪ウェブデザイン職種Webサイト若年者ものづくり競技大会ウェブデザインポートフォリオ名古屋ECCコンピュータ専門学校2013映画学生ブログJavaScriptWebデザイン1年生進級展2009WinterWordPressWebサイト制作卒展CSS技能五輪全国大会卒業制作展2011アクアリングかっぱ商店街オープンキャンパス入学式合同企業展礒田優WordpressNagoya矢野りんWeba-blogライトニングトーク2014cms石黒雄介閉館日アクセス解析Summerウェブデザイン技能競技大会体験入学面白法人カヤック就職活動CGイラスト学科若年者ものづくり大会Web制作会社夏季閉館日Autumn卒業制作夏休み瀬川大勝ホームページ・ビルダーテンプレート作成HCDプレゼンテーション大阪2010ウェブデザイン技能競技会第48回技能五輪全国大会inminiAdobeココストアJapan2012FlashHTML5jQuery佐藤歩杉本拓也学生インタビューフォトアルバム東京研修進級制作展html5Webアプリ2015名古屋駅あいちカレーラーメンコンテストモリサワGIO田中睦翔IIJ上村水月99eagleアンティー・ファクトリーSpringBananaAd企業訪問専門学校CentOSプロジェクト卒業研究制作展COMMUNICATIONNEXTラーメン学生マールCSS3ウェブデザイン技能検定ブログパーツ水野裕太情報デザインフォーラムGoogle愛知県人間中心設計情報デザインWebワークショップセントレア北濱大輔エイチーム株式会社スタメン2018鈴木優太グリッドレイアウト冬休みあけましておめでとう2020gifアニメYearNewHappydisplay:grid新年Yahoo!Japan林田実樹WebデザインギャラリーGridLayoutUX成田篤紀Webクリエイター能力認定試験制作合宿水野怜美トライデント祭りサイバーエージェント産学協同堀尾真衣PluginforAnalyticsビジュアルエディタメ~テレWEBサイト制作者のためのHCDの理解in名古屋名商連会社訪問トライデント中日ドラゴンズナゴヤドーム戸田芳裕知多みるくCSSNiteBoxLike岩手県塚本碧イラストマップレイアウト作品集ウェブアクセシビリティ真鍋大度FICCコミュニケーションデザインワークショップ名古屋市科学館阿部淳也ポートフォリオサイト敢闘賞静岡ゴールデンウィークCMSDTPWORLD情報デザイン基礎Webリテラシーアサココ!ディプロス導入授業WordCampStoreApple2008WordFes鷹野雅弘茂森仙直グループ制作企業課題豊田市美術館F-siteウェブDeBLOGモンキーワークスワークショップカメラトライデント合同企業展写真結果発表iPhoneMarkup名古屋開府400年祭jbstyleカリキュラム空気人形SEO笈瀬本通り卒業式ECMAScript学習進級展ES6ES20152017出張講座株式会社LIGドラマ初期設定謹賀新年熊谷佳紀サーティファイWebデザイナー沖縄Runstant久保怜也アプリコンテスト東京電子専門学校神戸電子専門学校2022鈴木英心中島優美2021たにぐちまこと後期集中授業松井友奈イークリエイト信州アプリコンテスト[ゼロ]日本総合ビジネス専門学校松本渚オンライン授業Zoom幕張メッセ桝田草一label要素form要素たこ焼きfieldset要素legend要素input要素愛知県選手団displayスマートフォン飯田淳介Advent5T(ファイヴティー)CalendarAWARD和みtextarea要素Forumcanvasフロントエンドエンジニアうぇーぶparticleマークアップエンジニアアップルップルoption要素1年生作品展まぼろしHTMLoutput要素長屋めぐみselect要素スマホアプリNTTドコモ東海放課後のプレアデスキルターズフェスティバル2011笈瀬本通商店街愛知県立芸術大学名古屋市中村区キルト展中部国際空港日本の四季GAINAXSUBARUSlimbox2Load卒業・修了制作展Lazy大西健太ウェブリテラシー協会JISFLV8341-3:2010XFLAVER3.0JAPANWORLDCUP3Magnum北岡弘至伊達千代バルサマンプロジェクションマッピング愛知淑徳大学田中稚妃呂みつけもの恵那市岩村DTPの勉強部屋ablogcmsぬいぐるみのラパンKtaistyleCustomSmilies絵文字卒業制作・研究発表会2011英国王のスピーチトライデントカレッジUntitled!!!!!!!!円JOY!map柴乃櫂人WEBサイト制作者のためのHCD(人間中心設計)の理解AndrioidITCIRCUSドラゴンゲートチタハン10名古屋グランパスポスターデザイン・コンペディションCODE名古屋クリエイターフットサル笈瀬本通広島弁iPhone4商店街金シャチ商店街名古屋メディアボンドアクセシビリティタロヲ細川太郎シナリオペルソナ1→10designグラフィクデザインTwitter中部国際空港株式会社CODEポスターデザイン・コンペティション小林信次増田悟ブラザー工業株式会社株式会社アクアリングGoogleAnalytics石井研二カメラワーク名古屋サイト改善研究会中級編商店サイト制作プチ・フレーズ三蔵みの治商店UltimateGA名駅経済新聞名チャリ愛知商業高校横浜デジタルアーツGAMEPARTYPerfumebyinspiredそこにいない。展あいちトリエンナーレ2013晴れやか嵐が如く第51回技能五輪全国大会Webデザイン演習Rhizomatiks田代豊佐藤ねじみんなのICTFacebookたこ焼きパーティ東京就職プレゼンThree.js木下健太郎さかなやフジ家55ジョルテKDDIHTML5スマートアプリ&クリエイティブコンテストモテ声ボーダー最優秀賞10日でおぼえるLinuxサーバー入門教室サーバーF81教室トライデント合同企業説明会list-itemlist-style-type高橋雅人カレーラーメン麺やOK麺屋ココイチ芸術大学美術大学NTTドコモ東海支社NCF2013卒業展Web制作合宿MuseロゴマークメールマガジンOhanaゲーム大賞アマチュア部門静岡県ツインメッセ静岡docomoドコモ2011年度迎春東京ゲームショウ神戸マーサ・グレアム5月11日GoogleロゴGATEライアン・ウッドワードプラネタリウム神戸国際展示場鈴木FutureStation長野IllustratorSVGFacebookページ結果第50回画像をチェックボタンにする張山大祐JQueryベースキャンプ名古屋SHOWBloosumTeamイマジンカップNHNBloom*Block尾花大輔TOKYO東京ゲームショウ2012第7回若年者ものづくり競技大会DRAGONデコクレ西田幸司国家検定インターネットスキル認定普及協会ライブペイントヱヴァンゲリヲン新劇場版:破ActionScript富岡聡学科旭食品サンプル製作所食品サンプル黒い太陽ウルトラ展ファルコム音楽フリー宣言音楽ゲーム日本ファルコム荒俣宏UNIQLOヤノベケンジカスタマイズセミナーCALENDARカナバングラフィックスウサビッチanimationescalatorアニメーションMozoramaモーション演習CG・イラストコンテストUNIQLOCKギレン総帥LPO第4回アックゼロヨン・アワード後期入賞CMS特集ソバットシアターコマ撮りアニメ電信柱エレミの恋学生参加アイディグラフィックスガンダムグラフィックデザイン今井佳子□□□switch山村浩二サムライTEXTURE中村勇吾佐藤可士和CS4DesignActionScript基礎HTML+CSS基礎造形基礎デッサンSakaeNightPHP愛知県美術館アンドリュー・ワイエスデザインデザイナーのためのプログラミング入門MAXCollegeFLEXFLASHプレゼン演習西村真里子BlogUTZOOMLabuatTokyo「ヤノベケンジ-ウルトラ」展ワークスコーポレーションGWDセキュリティGENOウィルスCOMPLETECHILDREN武豊町TAFF'09広告批評WCAN×CSSNiteアートアニメーションFINALADVENTVIIFANTASYナゴヤデザインウィーク2009是枝裕和監督夢プロジェクト2009・成果報告会ウェブリテラシー協会第一回セミナーSalsaWasIA2010キックオフセミナー浜松TAFFWCAN46福みつ餃子ThereThen箱根合宿森川眞行会社見学鎌倉横浜中華街新横浜ラーメン博物館AndNIKE慶華飯店武豊アニメーションフェスティバル名古屋おもてなし武将隊技能五輪予選unoplus松坂屋美術館スタジオジブリ・レイアウト展WEBサイト制作者のためのHCDの理解プロトコル分析YORKE.ビジュアルデベロップメント伊藤頼子知多半島プロ野球新世界道頓堀ナゴヤ武将都市求人大沢たかおポートピア名古屋フナ犬ネスカフェゴールドブレンド日本電子専門学校横浜デジタルアーツ専門学校KyotodotFesHCDプロセスブランディングwonderflFlash-Gamesマクロマリオネット映画のオープニング閉会式ゆるキャラAutuminカラーPHP勉強会大富豪スコアシート東京ゲームショウ2009人喰いの大鷲トリコITホワイトボックス世界のCMフェスティバルストリートビューJAPANインターネットクリエイティブアワードYahoo!マークアップ演習ごはんとFlashペルソナ/シナリオ法情報デザイン教育勉強会ヨウイチイラストコンテストおかだよういち浅野智3校合同発表会クリ博就職フェスタペルソナ&シナリオ法デュエル・マスターズ長谷川恭久教育勉強会ロゴ公募FITCCREAM#infoedu小野裕子スーパーエレメンツ山崎デザイン事務所コピーライティングIACodeply牧野史門株式会社サイバーエージェントあけおめ平成31年UIデザインツール株式会社MTG2020新卒線の群生Figmaメーカー・ブランドコーヒー用品第56回技能五輪全国大会srcsetsourcepictureEC事業cyma前川元成NextDoor斉藤洸貴企業見学新入生オリエンテーションコンテストソレコン☆ポスコン2019茜音茂森仙直落合祐介杉浦麻紀ライフスタイル髙橋株式会社アンティー・ファクトリーLIGCBCTBSわたし、定時に帰ります。STUDIO髙橋茜音PhotoshopCS6祐司沖縄県第56回堀川友章安藤志維Contentsof関口浩之フォントおじさん志維安藤NCF2017ミス・ユニバース・ジャパン岐阜大会TableTOCノートPC貸与尾鷲高校衣台高校梅澤朝樹夏休みの課題スクラップブックAWARDS出身高校D3.js堀川友章青山高校新城高校冨田伴成藤井英一出前授業東京ゲームショウ2018GOOculusVRカルタJIHYEHEO北川パーヤンWorld)toWWW(WelcomeWebデザインスペシャルデー期末テストホ・ジヘ韓国脆弱性なんと読む?信州アプリコンテストゼロ足立丈也、平子卓哉、増田隼也contents特別企画『謎解き~7つの学科の謎を解け~』山本智香子杉山知央後藤拓也2023@useSass第5回専門学校HTML5作品アワード2022年エンタメイロコトグッドパッチStudentReDesigner田口和磨TypeScript2021アカデミー賞穂刈謙亮原田ゆいノマドランド@import@mixinPhotoshopトライデントコンピュータ専門学校Webデザイン学科フ学生ポートフォリオドライブ・マイ・カーモリサワトライデントコンピュータ専門学校Webデザイ夏休み夏季閉館日2022安藤さん風呂谷さん株式会社アビリブあいのうたコーダ印刷CSS23年卒@includeHOPTERTECH2022アカデミー賞WebサイトマネーフォワードSCHOOL第4回専門学校HTML5作品アワード2021年ICS池田泰延MILKメンバーズマイクロインタラクションフロントエンド第3回専門学校HTML5作品アワード株式会社COTSOriginalTshirt.st進級制作三瓶エペフェンシングmarkereatスポーツアナリティクス株式会社LIGHTz2019年令和2年classes企業賞2020アカデミー賞未完美術館ニシヤマナガヤ中村享介海老江優太名古屋市名東区業界研究授業令和3年神谷友理恵松本健太Frontend株式会社メイクリーvwrememパラサイトvh信州未来アプリコンテスト小林健人小林隼大福田将也株式会社エイチーム山川綾那WF1でBLOGインターンシップスマートフォンサイトUI図鑑CSS3&jQueryで作る新入生2015年度森田霞HighlighterSyntaxCrayon名古屋駅麺通りNCF2014button要素datalist要素keygen要素optgroup要素第52回技能五輪全国大会オリエンタル新年のご挨拶親孝行麺の匠木村哲朗夏麺フェア松田洋樹3DCG東京コスモクリスマスCGスペシャリスト味仙岡田陽一FlexibleBoxFlexbox熊﨑彩第53回ScrollMagicScrollmagic八木智章竹中民男Velocity.jsWebアクセシビリティワクワク建設タウン建設経営者倶楽部アクセシビリティからはじめる、WebサイトのUXデザイtype属性紅茶専門店Liyn-anマカベン名古屋マークアップ勉強会tableテーブル熊野古道八鬼山大門坂那智の大滝本州最南端串本宇野剛志石原愛実備忘録parseFloat()parseInt()Designer栗山聡一concrete5ランチ中村健太道家陽介熊野三山和歌山中華そば青山敬司山田拓生加藤ひとみ西岡克真結団式アイチータアイテムカンパニーネイルサロンマウア授業AnimationAO岩出本店丸田屋丸高アロチ本家スパルタキャンプ柏木祥太特別授業青空学区名古屋市営地下鉄Dmm.comUXデザインMonaca学生作品集ジムナストコロン日清食品グループ情報系学園祭いな世驛麺通り再進学タカガールサイト水曜日のカンパネラ駅麺通り涼麺jsdo.itPlunkerクイズIndependenceプラネタリアンResurgenceDay:醐りょうインスタグラム学校ProxyWCAN2017Springv4.0.1ターミナル佐藤洋介鈴木雄太スタジオディテイルズ服部友厚SyntaxHighlighterお母さんの二度見展美大芸大料理InstagramNodeListHTMLCollectionマイクロソフトWebプログラミング初級講座appendChild()JSFiddleJSBinワイヤーフレーム仕事UIバイドゥうぇ~~~~~~~ぶウェブアートデザイナー学位出席率職業実践専門課程レスポンシブWebデザイン平野健太郎ポートフォリオアイデア帳PlatformKaizenアクティビティシナリオ源賢司グロースハックグロースハッカー採用担当者の心に響く高校14専門士合同制作合宿カークスヴィルIA/UXプラクティス平野秀幸坂本貴史沼田啓助河地芳明CodePenプログラムクイズAO入試制作実績津田直明Web制作のおしごと懇親会合宿合同制作WebディレクターWebプログラマー2016原一浩坂本邦夫google

メールフォーム

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

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