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

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

2018.10.02 [火] picture要素と、source要素と、srcset属性と

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

新しいiPhoneのOS、iOS12のアップデートが始まりました。
今回は対象がiPhone5s以降ということで、様々なiPhoneに対応しています。
これにより、ますます一般的に利用されているデバイスの大きさが、多彩になってきました。

pictureEl_002.jpg

画面いっぱいに画像を表示するデザインもよく見かけるようになり、さらに動画を全画面で表示するWebサイトも珍しくありません。
画像はデバイスの大きさだけでなく、搭載されているCPUの性能も差があり、Webページの高速化(最適化)に大きく関わっています。

そういった状況を受け、HTML5.1(現在5.2)では、デバイスの状況によって画像を切り替えられるpicture要素などが加わり、対応ブラウザでは、閲覧しているデバイスに適した画像が表示できるようになっています。

pictureEl_001.jpg
Can I use... Support tables for HTML5, CSS3, etc

picture要素

2018年9月現在、Internet Explorer以外のWebブラウザで対応済みです。
W3Cの5.3仕様書を調べたのですが、わかりづらいですので、MDNから引用しました。

HTMLの<picture>要素は、0個以上の<source>要素と一つの<img>要素を内包し、異なる表示機器の条件に応じた画像を提供します。ブラウザーは複数の<source>子要素を検討して、最もふさわしい一つを選択します。<source>要素に適切なものがなければ、<img>要素のsrc属性で指定された値が選択されます。選択された画像は<img>要素が占有する空間に表示されます。

picture要素の中に、source要素がある場合は、環境に最適なものを選んで表示してくれます。
source要素になければimg要素のフォールバック画像が表示されるわけですね。

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

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

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

WCAN2009Autumun01.jpg


今回は、現在の業界的に旬な話題のiPhone、HTML5+CSS3、Webブランディングの3セッションでした。

SESSION-1
■80カ国に広がる世界スタンダード iPhoneが生み出したモバイルWebの世界
林 信行さん
日本でも累計出荷台数200万台突破と言われるiPhoneだが、世界では80カ国で3000万台以上が売れている。iPhoneアプリ開発ビジネスは「21世紀のゴールドラッシュ」と呼ばれひと月で5000万円を売り上げるiPhone長者を次々と生み出している。一方、iPhoneのWeb機能も注目に値する。実はiPhoneと同じブラウザ技術がAndroidやPalm Preといった他社の次世代スマートフォンにも採用され、次世代Webのデファクト・スタンダードとなっているからだ。iPhoneのWebを知ることは、モバイルWebの未来を知ることにもつながる。
私も実際に、iPhone3GSを使用していますが、3Gの頃に比べて、3GSが発売されてから、使っている人が増えたように感じます。でもWeb業界の普及率が異常だとは思いますが。
他のWeb系セミナー同様、会場内で6割ぐらいの人がiPhone使用者でした。
今、全世界で3000万台、iPodTach2000万台と爆発的に普及しているIPhoneですが、まだまだその勢いは、止まらなさそうですね。
Appleのしぶとい商法に、日本メーカーも見習うべきですね。

SESSION-2
■60分できる!実践 HTML5 & CSS3ウェブサイト
菊池 崇さん
HTML5のウェブサイトをいかに、実装できるのか、簡単なステップにそって、jsの実装、reset.cssの作成方法を教えます。また、CSS3を効果的に実装しワークフローを効率アップさせる方法について説明をします。
最近、まわりで何かと話題になっている、HTML5とCSS3ですが、ここまで盛り上がっているのは日本だけで、アメリカやイギリスでは、少し落ち着いたそうです。新し物好きの日本人としては、やはりチェックしておくべきでしょう。
HTMLは5で簡略化される感じがしますが、CSSは3で覚える事が増えそうですね。デザイナーはどこまで理解するべきなのか、教える身としては考えさせられます。

SESSION-3
■Webディレクターとしての経験密度とWebブランディング
名村晋治さん
「コミュニケーション力」「営業力」「人前でうまくしゃべれない」「モチベーションが上がらない」etc・・・・。
Webサイトの制作におけるディレクションについては、常々迷う事がついて回ると思います。名村もいつも迷っています(笑)それはどれだけ経験を積んだとしても、ついて回ります。しかしそれをカバー出来るのは恐らく「経験」。しかし経験は時間に対して同等に増えるものではなく、その時々の考え方、受け止め方によって密度が全くに変わってきます。
ディレクションをする上での経験の密度をあげる為のマインドセットと、それを持った上でのディレクターとしての自立と自律について話をさせていただければと思います。その上で、サイト規模に関係ないツールとしてのWebブランディングをお話させていただきたいと思います。
いつも、名村さんの講演は、メモを忘れて聞き入ってしまうのですが、今回もメモを見渡しても、ほとんど記入してありませんでした。
学生にとっては、今後の指針となる話でした。経験を血肉にすべし。

2009.06.12 [金] WCAN mini Markup vol.10

最終更新:-0001.11.30セミナー・イベント
6月5日に行われたWCAN mini Markupの第10回に参加してきました。

WCANminiMU0605_01.jpg

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

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

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

検索フォーム
新型コロナウィルス感染症の影響で学費等支援が必要になった学生のみなさんへ

文部科学省Webサイト内「新型コロナウィルス感染症の影響で学費等支援が必要になった学生のみなさんへ」へのリンクです。

プロフィール

担当: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デザインWinter1年生進級展2009Webサイト制作JavaScript2011技能五輪全国大会WordPressかっぱ商店街卒業制作展入学式アクアリング礒田優オープンキャンパスアクセス解析2014NagoyaWordpressライトニングトーク卒展矢野りんa-blogWebcmsホームページ・ビルダーテンプレート作成石黒雄介Summer瀬川大勝体験入学若年者ものづくり大会卒業制作合同企業展面白法人カヤックWeb制作会社CGイラスト学科AutumnCSS杉本拓也html5miniHCD大阪GIOHTML5名古屋駅あいちカレーラーメンコンテストFlashウェブデザイン技能競技会佐藤歩IIJ2010第48回技能五輪全国大会ココストア2012JapanAdobeウェブデザイン技能競技大会2015in閉館日プレゼンテーション学生インタビュー東京研修北濱大輔COMMUNICATIONグリッドレイアウトウェブデザイン技能検定成田篤紀display:grid情報デザインフォーラム99eagleNEXTGridLayout夏休み制作合宿トライデント祭り学生セントレア就職活動プロジェクト夏季閉館日サイバーエージェントCSS3上村水月jQueryBananaAdフォトアルバムラーメンブログパーツ愛知県UX企業訪問情報デザインWebデザインギャラリーCentOS2018田中睦翔Webクリエイター能力認定試験人間中心設計gifアニメ林田実樹Springマール専門学校WebワークショップGoogle水野裕太2008サーティファイ愛知県選手団沖縄ウェブDeBLOGドラマワークショップ茂森仙直カメラ謹賀新年熊谷佳紀CMSモンキーワークス鷹野雅弘Zoom写真初期設定label要素ゴールデンウィーク空気人形和み飯田淳介フロントエンドエンジニアAnalyticsYahoo!JapanCSSNite株式会社LIGWebデザイナーiPhoneスマートフォンSEOForumカリキュラムアップルップルAWARDマークアップエンジニア幕張メッセ5T(ファイヴティー)Adventlegend要素Runstant結果発表Calendarfieldset要素form要素particleイラストマップ笈瀬本通りアサココ!ディプロストライデント知多みるくナゴヤドーム塚本碧岩手県ポートフォリオサイトWordCamp水野怜美1年生作品展豊田市美術館オンライン授業スマホアプリNTTドコモ東海Like導入授業Box長屋めぐみDTPWORLDStoreinput要素output要素select要素Apple静岡企業課題textarea要素option要素ビジュアルエディタ中日ドラゴンズ真鍋大度エイチーム情報デザイン基礎たこ焼きWebリテラシーFICCアンティー・ファクトリーメ~テレうぇーぶ鈴木優太canvasモリサワjbstyleウェブアクセシビリティ堀尾真衣コミュニケーションデザインワークショップMarkup名商連阿部淳也作品集ES2015トライデント合同企業展名古屋市科学館会社訪問産学協同WordFes進級展ES6グループ制作学習WEBサイト制作者のためのHCDの理解in名古屋出張講座久保怜也レイアウト2017アプリコンテスト戸田芳裕Pluginまぼろし信州アプリコンテスト[ゼロ]名古屋開府400年祭卒業式WebアプリF-siteunoplusIAWEBサイト制作者のためのHCDの理解伊藤頼子サーバーポートピア名古屋YORKE.技能五輪予選プロ野球スタジオジブリ・レイアウト展ビジュアルデベロップメント商店街金シャチ商店街フナ犬知多半島名古屋メディアボンド松坂屋美術館細川太郎プロトコル分析タロヲアクセシビリティネスカフェゴールドブレンド中部国際空港株式会社放課後のプレアデスキルターズフェスティバル2011笈瀬本通商店街SUBARUGAINAXキルト展日本の四季中部国際空港名古屋市中村区FLAVER3.0Slimbox2forLoadウェブリテラシー協会JISFLV8341-3:2010X愛知県立芸術大学卒業・修了制作展伊達千代DTPの勉強部屋ablogcms北岡弘至Magnumバルサマン3JAPANWORLDCUPトライデントカレッジCustomSmilies絵文字円JOY!mapKtaistyleぬいぐるみのラパンUntitled!!!!!!!!英国王のスピーチ卒業制作・研究発表会2011Lazy大西健太CODE名古屋クリエイターフットサル笈瀬本通ポスターデザイン・コンペディショングラフィクデザイン三蔵みの治商店Twitter名古屋グランパスチタハン10iPhone4シナリオペルソナ広島弁柴乃櫂人WEBサイト制作者のためのHCD(人間中心設計)の理解AndrioidITCIRCUSプチ・フレーズ商店サイト制作株式会社アクアリングブラザー工業株式会社大沢たかおカメラワーク石井研二田中稚妃呂横浜デジタルアーツGoogleAnalyticsCODEポスターデザイン・コンペティション小林信次愛知商業高校GAUltimate名チャリ名駅経済新聞増田悟名古屋サイト改善研究会中級編1→10designペルソナ/シナリオ法BlogUTZOOMLabuatTokyo「ヤノベケンジ-ウルトラ」展ワークスコーポレーション山村浩二デコクレセキュリティGENOウィルスCOMPLETECHILDRENTAFF'09広告批評WCAN×CSSNite西村真里子武豊町アートアニメーションADVENTVIIFANTASYFINAL□□□switch日本ファルコムActionScriptヱヴァンゲリヲン新劇場版:破西田幸司国家検定食品サンプル旭食品サンプル製作所ウサビッチカナバングラフィックス富岡聡学科インターネットスキル認定普及協会ライブペイント荒俣宏ファルコム音楽フリー宣言音楽ゲームUNIQLOCALENDAR黒い太陽ウルトラ展ヤノベケンジカスタマイズセミナープレゼン演習ActionScript基礎HelveticaSagmeisterStefanW+KTokyo(+CRUZ)デザインのへそWebDirectionEast'08ASIASIGGRAPHXRAY2008WinterQubibiArtlessTHEWEBウェブデザイン部門カンファレンスCONTEST01Nam丹下紘希HPデザインデザインコンテストVideopuppetry鳥取TEXTURE中村勇吾佐藤可士和SakaeサムライCS4HTML+CSS基礎造形基礎デッサンDesignNightCollege愛知県美術館アンドリュー・ワイエスデザイン鳥取砂丘PHPデザイナーのためのプログラミング入門FLEXFLASHMAX電信柱エレミの恋コマ撮りアニメクリ博就職フェスタペルソナ&シナリオ法浅野智おかだよういち3校合同発表会横浜デジタルアーツ専門学校森川眞行会社見学鎌倉日本電子専門学校プロジェクションマッピング情報デザイン教育勉強会コピーライティング小野裕子#infoedu教育勉強会山崎デザイン事務所スーパーエレメンツヨウイチイラストコンテストデュエル・マスターズ長谷川恭久箱根合宿横浜中華街TAFFWCAN46福みつ餃子武豊アニメーションフェスティバル名古屋おもてなし武将隊新世界道頓堀ナゴヤ武将都市浜松IA2010キックオフセミナーAndNIKE慶華飯店新横浜ラーメン博物館ThenThere夢プロジェクト2009・成果報告会ウェブリテラシー協会第一回セミナーSalsaWasロゴ公募FITC第4回アックゼロヨン・アワードCG・イラストコンテストモーション演習animationLPOギレン総帥人喰いの大鷲トリコ是枝裕和監督ナゴヤデザインウィーク2009UNIQLOCKescalatorアニメーションアイディグラフィックス学生参加CMS特集ソバットシアター今井佳子グラフィックデザインMozorama後期入賞ガンダム東京ゲームショウ2009大富豪スコアシートゆるキャラFlash-GameswonderflKyoto閉会式映画のオープニングCREAMごはんとFlashマークアップ演習マクロマリオネットdotFesHCDプロセスYahoo!世界のCMフェスティバルITホワイトボックスPHP勉強会JAPANインターネットクリエイティブアワードストリートビューブランディングAutuminカラー求人結果学校ターミナルProxyWCAN2017Springv4.0.1佐藤洋介服部友厚株式会社エイチーム山川綾那鈴木雄太スタジオディテイルズSyntaxHighlighterECMAScript芸大美大料理InstagramインスタグラムNodeListHTMLCollectionお母さんの二度見展マイクロソフトWebプログラミング初級講座appendChild()梅澤朝樹衣台高校ミス・ユニバース・ジャパン岐阜大会NCF2017フォントおじさん関口浩之堀川友章安藤志維toWWW(Welcome友章堀川安藤志維Contentsスクラップブック夏休みの課題ノートPC貸与尾鷲高校D3.js出身高校ofTableTOCAWARDS醐りょう制作実績坂本貴史津田直明2016原一浩平野秀幸IA/UXプラクティスAO入試河地芳明沼田啓助カークスヴィル坂本邦夫Webプログラマー学位専門士出席率職業実践専門課程レスポンシブWebデザイン合同制作合宿合同制作WebディレクターWeb制作のおしごと懇親会合宿プログラムクイズCodePenジムナストコロン学生作品集日清食品グループタカガールサイト水曜日のカンパネラMonaca情報系いな世驛麺通り再進学学園祭プラネタリアンResurgenceCodeplyPlunkerJSFiddleJSBinjsdo.it涼麺Day:Independenceクイズ駅麺通りWorld)北川パーヤン信州アプリコンテストゼロ足立丈也、平子卓哉、増田隼也落合祐介杉浦麻紀ライフスタイルeatmarker株式会社LIGHTzスポーツアナリティクスエペフェンシング冬休み仙直松本渚株式会社スタメン株式会社アンティー・ファクトリーPhotoshopCS6祐司髙橋茜音茂森コンテストソレコン☆ポスコン2019classes令和2年進級制作OriginalTshirt.st2020フロントエンドマイクロインタラクション株式会社COTS第3回専門学校HTML5作品アワードパラサイト2020アカデミー賞企業賞進級制作展ICS池田泰延Happyあけましておめでとう新年2019年NewYearMILKメンバーズ三瓶髙橋茜音GO第56回OculusVRカルタ東京ゲームショウ2018沖縄県pictureEC事業第56回技能五輪全国大会srcsetsource出前授業青山高校韓国ホ・ジヘ脆弱性なんと読む?期末テストWebデザインスペシャルデーHEOJIHYE新城高校冨田伴成イークリエイト藤井英一cyma斉藤洸貴株式会社MTG企業見学日本総合ビジネス専門学校2020新卒線の群生新入生オリエンテーションわたし、定時に帰ります。STUDIOLIGCBCTBSFigmaツールメーカー・ブランドコーヒー用品前川元成NextDoor平成31年あけおめUIデザイン牧野史門桝田草一株式会社サイバーエージェントウェブアートデザイナーうぇ~~~~~~~ぶあいちトリエンナーレ2013Webデザイン演習そこにいない。展PARTYPerfume第51回技能五輪全国大会嵐が如く麺屋ココイチフジ家55さかなや晴れやかbyinspired東京就職佐藤ねじみんなのICTFacebook木下健太郎Three.jsRhizomatiks田代豊たにぐちまことプレゼン麺やOKカレーラーメントライデント合同企業説明会F81教室10日でおぼえるLinuxサーバー入門教室卒業研究制作展最優秀賞GWDgoogle備忘録parseFloat()parseInt()DesignerジョルテKDDINCF2013美術大学芸術大学高橋雅人NTTドコモ東海支社list-style-typeHTML5スマートアプリ&クリエイティブコンテストモテ声ボーダーlist-itemdisplayたこ焼きパーティWeb制作合宿Ohanaメールマガジンゲーム大賞アマチュア部門東京ゲームショウ神戸ロゴマーク静岡県2011年度迎春敢闘賞ツインメッセ静岡神戸国際展示場DRAGONGATEドラゴンゲート愛知淑徳大学みつけものGoogleロゴ5月11日鈴木プラネタリウムライアン・ウッドワードマーサ・グレアムドコモdocomoSVGIllustratorFacebookページベースキャンプ名古屋SHOW長野第50回Muse画像をチェックボタンにする張山大祐JQueryGAMETOKYOイマジンカップNHNStationFutureTeamBloosum東京ゲームショウ2012第7回若年者ものづくり競技大会尾花大輔Bloom*Block栗山聡一concrete5Velocity.jsWebアクセシビリティScrollMagicScrollmagic八木智章アクセシビリティからはじめる、WebサイトのUXデザイ建設経営者倶楽部クリスマス熊﨑彩第53回ワクワク建設タウン竹中民男夏麺フェアWF1でBLOG新入生インターンシップスマートフォンサイトUI図鑑CSS3&jQueryで作る2015年度Crayon木村哲朗森田霞HighlighterSyntax東京コスモ3DCG高校採用担当者の心に響く14グロースハッカーグロースハックポートフォリオアイデア帳平野健太郎ワイヤーフレーム仕事UIバイドゥPlatformKaizenFlexbox味仙CGスペシャリスト松田洋樹FlexibleBox岡田陽一アクティビティシナリオ源賢司UXデザインDmm.com名古屋駅麺通りNCF2014和歌山中華そばアロチ本家熊野三山大門坂那智の大滝丸高丸田屋名古屋市営地下鉄柏木祥太スパルタキャンプ岩出本店本州最南端串本石原愛実宇野剛志ランチ中村健太道家陽介テーブルtable八鬼山熊野古道マカベン名古屋マークアップ勉強会青空学区特別授業datalist要素button要素keygen要素optgroup要素type属性HTML第52回技能五輪全国大会新年のご挨拶親孝行麺の匠オリエンタル紅茶専門店Liyn-anアイテムカンパニー加藤ひとみ西岡克真AnimationAO山田拓生青山敬司ネイルサロンマウア授業アイチータ結団式恵那市岩村

メールフォーム

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

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