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

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

2016.03.01 [火] ホームページ・ビルダーでheader周りをコーディング

では、ホームページ・ビルダー14でヘッダー周辺をコーディングしていきます。
前回制作した、素材をhtmlに組み込んでいきます。

homepagebuilder5_001.jpg
素材:PAKUTASO

わかりやすいように、編集ページを「ページ/ソース」の表示にしておきます。
以前、オプションのソース編集タブで左右に分割に設定しましたので、左にソース、右側にビュー画面が表示されます。
上部の「画像ファイルの挿入」ボタンを押して、ロゴを配置します。

homepagebuilder5_002.jpg

ロゴを選択して、右上の「属性の変更」からIMGを選択します。
代替テキスト欄に「トライデント高等学校ロゴ」と記入します。
つづけて、メイン画像も同じように読み込んで、代替テキストを「体験入学参加者募集中」と設定します。

homepagebuilder5_003.jpg

2016.02.27 [土] ホームページ・ビルダー付属の「ウェブアート デザイナー」

前回までで、どんなWebサイトを制作するか決まりました。では、久しぶりにホームページ・ビルダー14を起動したいと思います。

homepagebuilder4_001.jpg
素材:PAKUTASO

以前、サイト設定したフォルダにWebサイトを構成するフォルダを作っていきましょう。
index.htmlは最初に作ったファイルで、こちらがTOPページのファイルになります。
さらにJavaScriptのファイルを入れておく「js」、写真などを入れる「images」、スタイルシートを入れる「css」とそれぞれフォルダを作ります。

homepagebuilder4_007.jpg

2016.02.15 [月] ホームページ・ビルダーで作業する前に

前回までで、ホームページ・ビルダーでWebサイトを制作する準備が整いました。
では、いざホームページ・ビルダーで作業というわけではなく、まずは、どんなWebサイトを作るのか決めなければいけません。

homepagebuilder3_001.jpg
素材:【私たち、無料です。】フリー素材アイドル MIKA☆RIKA

サイトの構成を考える

必要なページを考えて、カテゴリーごとに分けていきます。
本来であれば、カードソートなどして時間をかけたいとことですが、このシリーズでは、とにかくホームページ・ビルダーでWebサイトを制作するのが目的ですので、いろいろな高校のWebサイトを参考にCacooを使ってサイトマップを作ってみました。
だいぶ省略していますが、基本的な学校のWebサイトの構成にはなっているかと思います。

homepagebuilder3_002.jpg

Webページのコンテンツを決める

このサイトマップをもとに、ワイヤーフレームを制作します。
こちらも独りで作っちゃいますので、ワイヤーフレームとレイアウトラフも兼ねて、レイアウトを意識しながらCacooで作っていきます。
まずは、スマートフォン用のワイヤーフレーム。
更新のしやすさを考えて、レスポンシブWebデザイン(※一つのHTMLでPC用とスマホ用で見せ方を変える)を採用します。
スマートフォンでWebサイトを利用する場合、どんな場面、どんな人が、何を求めてアクセスするのかなども考えて必要なものを配置しました。
トップページに地図を置いてあるのも、来校途中での用途を考えてのことです。

homepagebuilder3_003.jpg

続けて、PCサイト用のワイヤーフレームを書き出します。
画面の大きさが限られているスマホサイトから考えることで、コンテンツの重要度やユーザーの動線などが整理しやすくなります。
広い画面であるPCからコンテンツの配置などを考えてしまうと、後からスマホサイトを制作する場合に苦労します。
やはり利用する年齢層を考えるとスマートフォンからのアクセスが多いと考えられますので、今はスマートフォンを重要視して制作していきます。

homepagebuilder3_004.jpg

一番悩んだのが学校のWebサイトでよく見かける「在校生」「保護者」「卒業生」などのアクセスした人でカテゴリー分けするリンクが必要かどうかでした。
結果的に「卒業生」必要としているコンテンツは区別ができると考えましたが「在校生」「保護者」が必要としているコンテンツの境界はとても曖昧だと感じましたので「卒業生の皆様へ」というカテゴリーだけ用意しました。
各学校によって、コンテンツの違いは出てきますので、この段階で取捨選択し設計をしておきます。
今回はなるべくいろいろな学校のベースとなるような汎用性を考えて設計していきます。

また、今回はブログで紹介しようと考えてましたので、Cacooでワイヤーフレームなどを制作しましたが手描きでも、もちろんOKです。
手軽に、ささっと考えながら描けるのでおすすめです。

homepagebuilder3_005.jpg

全ページは完成していませんが、とりあえず主要ページの構成を考えて、ホームページ・ビルダーの作業に進みたいと思います。

参考にした高校Webサイト

サイトマップとワイヤーフレームを考えるのに参考にした高校のWebサイトを紹介しておきます。

愛知工業大学名電高等学校(愛知県)

homepagebuilder3_006.jpg

昨年、リニューアルされた愛工大名電のWebサイトです。
ナビゲーションメニューが整理されており、特色でもある強豪ぞろいの部活動もメニューで目立つように配置されています。
レイアウトもホワイトスペースを多くとり、ボタンを大きく置くことでページ遷移がわかりやすくなっています。
ただ、スマートフォンサイト対応がされていませんので、スマホで使うときにボタンが押しづらいです。

修文女子高等学校(愛知県)

homepagebuilder3_007.jpg

普通に考えると、メインナビゲーションの項目はこのようになるんじゃないでしょうか。
私学ではFacebookやTwitterなどSNSを活用する高校が多いのですが、修文女子高等学校は若者中心にブームのInstagramも活用して、学校の様子を更新しています。
入学後の自分をイメージさせることができるような、卒業生インタビュー、先生へのQ&Aなどコンテンツも充実しています。
ただ、NEWSの記事をクリックすると別タグが開き、ロゴマークを押してもTOPページに戻れない仕様はちょっと戸惑います。
レスポンシブWebデザインを採用しており、スマートフォンでの閲覧も見やすくできています。

名古屋市立工芸高等学校(愛知県)

homepagebuilder3_010.jpg

学科が多いためか、情報量が多い印象ですが、順を追えばどこに何があるのか、目的の項目にたどり着きますので、わかりやすく整理されています。
スマートフォン用のWebサイトも用意されており、アクセスなど必要な情報はスマホでも閲覧することができます。
ただ、利用者は意外とPCよりもスマートフォンのほうが、ちょっとした分量の文章は読まれているという話もあり、PC版へ遷移させるのはもったいないかなとも思います。
情報が網羅されていますので、高校ではどういったことをWebサイトに表示させたいのか、表示するべきなのか参考にさせてもらいました。

三田国際学園中学校・高等学校(東京都)

homepagebuilder3_011.jpg

東京にある三田国際学園中学校・高等学校のWebサイトです。
幾何学形をモチーフにしたビジュアルが今っぽいですね。
スマートフォンにもレスポンシブWebデザインで対応されています。中高一貫校ですが、必要最低限のコンテンツで構成されています。
大学のサイトなどでは、活用されている動画コンテンツもふんだんに利用されており、動画を利用することで、学校生活がイメージしやすいですね。

島根県立津和野高等学校(島根県)

homepagebuilder3_009.jpg

全国的に公立高校のWebサイトは、学校の先生がひと昔前に頑張って作ったんだろうなと思われる物が少なくありません。
ただ島根県の公立高校ではWeb制作会社が制作したWebサイトが複数みられ、その中でもこの津和野高校のWebサイトは、個性的なデザインとなっています。
TOPページでは、イメージ動画を背景に流し、デザイン化された「ツコウ」をキーワードにシングルカラムレイアウトでコンテンツへのリンクを表示していきます。
レスポンシブWebデザインでスマートフォンに対応され、更新にはWordPressが利用されています。
ただ、現在つながらず、白い画面になってしまうページがあります。※修正されていました20160226

いろいろ調べていくと、自治体によっては、教育機関向けCMSなどが利用されている学校のWebサイトもあります。
機会があれば、触ってみたいと思います。

ホームページ・ビルダー14でWebサイトを作るシリーズ過去記事

2016.01.27 [水] ホームページ・ビルダーで<head>内を記述していく

前回に引き続き、ホームページ・ビルダーのバージョン14を使って制作していきます。
最終的には学校、高校のWebサイトの制作を目指したいと思います。

homepagebuilder2_001.jpg
素材:PAKUTASO

前回、新規ページ制作でhtmlファイルができましたので、今回はそのファイルの<head>内をホームページ・ビルダーを使って記述していきたいと思います。

<meta>情報

ソースビューとページビューでは、上部のかんたんナビの表示が変わります。
ページビュー内をクリックしてカーソルを点滅させ、「SEO設定」>「ページのSEO設定」ボタンをクリックします。

homepagebuilder2_002.jpg

ページのSEO設定ダイアログが表示されますので、上から順番に記述していきます。

homepagebuilder2_003.jpg
ページタイトル
こちらには、Webページのタイトルを記述します。
河合塾学園 トライデント高等学校|名古屋市中村区」と記述します。
キーワード
Webサイトのキーワードを文字列に記述します。
ただ最近では、ほとんど検索結果に関係がないため、記述しないWebサイトもあります。
名古屋市 中村区 名古屋駅 Webデザイン学科」と記述します。
説明
検索結果画面にWebサイトの説明が表示されます。
何のWebサイトなのかわかりやすく書きます。「名古屋駅から徒歩5分。河合塾学園の仮想高等学校、トライデント高等学校のホームページです。Webデザインなどコンピュータ系の5学科。」と記述します。
検索対象
何かの理由で検索結果に表示させたくない時にチェックを入れますが、今回は必要ないでしょう。

続けて、その他のメタ情報を記述していきます。
ここまで書いても、ページビューには何も表示されません。

homepagebuilder2_004.jpg

ページの属性ボタンをクリックし、属性ダイアログを表示します。
「メタ情報」タブを選択すると、先ほど記述した、キーワード、説明のメタ情報が追加されています。
こちらにさらに、メタ情報を追加していきます。

homepagebuilder2_005.jpg

最初は、一番上の項目が選択されています。
このまま記述していくと、書き換えになってしまうので、クリアボタンを押して、フォームに何も表示されていない状態にします。

属性
「NAME」を選択します。
項目
右端の▼をクリックすると候補が出てきますので、[author]を選びます
authorは、制作者情報となります。
トライデントコンピュータ専門学校 Webデザイン学科」と記述しました。

「登録」ボタンを押すと、登録されます。

続けてhttp-equivの設定をしましょう。http-equivとは、情報をサーバーに伝えて正確に処理がなされるよう指定する属性です。クリアを押して白紙に戻します。

属性
「HTTP-EQUIV」を選択します。
項目
選択項目から[X-UA-Compatible]を選びます
ie=edge」と記述しました。
これで、Internet Explorlerで閲覧する場合、そのブラウザの最新の表示設定で閲覧させることができます。
下位互換モードだと表示が崩れたりする場合があります。

そして、スマートフォン対応に必須のviewport(ビューポート)を記述していきます。
さらに、表の右下にある▲▼は、選択することでメタ情報の順番を変更することができます。

homepagebuilder2_007.jpg
属性
「NAME」を選択します。
項目
選択項目にはありませんので、直接「viewport」と記述します
width=device-width, initial-scale=1」と記述します。
今は、この値で大丈夫です。値についての詳しい解説は、Google先生にお尋ねください。

最後に前回記述しなかった文字コード<meta charset="UTF-8">をソースビューに直接記述します。
HTML5では、<meta charset="UTF-8">と簡単に表記できます。
ただホームページ・ビルダー14では、構文エラーになってしまいますが、気にせず進めましょう。
ソースビューに

<!DOCTYPE html>
<html lang="ja">
<head>







河合塾学園 トライデント高等学校|名古屋市中村区
</head>
<body></body>
</html>

と表示されていれば、OKです。
ページの属性機能で追加できない、もしくは面倒な場合は、上記をソースビューにコピペして、書き換えれば自動的に追加されます。
ここで、随分作業をしましたので、ファイルを保存します。

htmlファイルを保存する

一番上のバー(かんたんナビバー)の「ページの保存」ボタンをクリックします。
新規ファイルですが、上書き保存もしくは名前を付けて保存のボタンが表示されますので、「上書き保存」ボタンをクリックします。

homepagebuilder2_008.jpg

デスクトップに新しく「trident」フォルダを作り、ファイル名をindex.htmlに書き換えて、保存ボタンを押します。

homepagebuilder2_009.jpg

続けて、サイトの設定も行います。
かんたんナビバーの「全体の確認」ボタンをクリックして、ダイアログを表示させ、[編集中のファイルをトップページにしたサイトを新規に作成します]のアイコンを選択し、「次へ」ボタンをクリックします。

homepagebuilder2_010.jpg

トップにするページを先ほど保存した「index.html」を選択して、「次へ」ボタンを押します。
構文エラーがでますが、気になるようであれば、ツールメニュー>オプション>一般タブ>HTML構文エラー時の動作を[重大なエラーのみ、修正ダイアログを開く]に変更しておきます。

homepagebuilder2_011.jpg

サイト名を決めます。
こちらは、Webサイトに表示されることはなく、後からでも、サイトメニュー>サイト一覧/設定から編集ができますので、見たら思い出すような、わかりやすい名前にしておきます。
「トライデント高校20160127」と日付を入れておきました。

homepagebuilder2_012.jpg

完了ボタンを押せば、サイトの設定終了です。

前回と今回で、とりあえずWebサイトを制作する準備ができました。
次からは、Webサイトを作り始められるといいな~。

ホームページ・ビルダー14でWebサイトを作るシリーズ過去記事

2016.01.25 [月] ホームページ・ビルダーでWebサイト制作

homepagebuilder1_001.jpg
素材:PAKUTASO

ホームページ・ビルダーはジャストシステムが開発・販売している、HTMLタグを知らなくてもWebページ及び、Webサイトを作成することができるWebオーサリングツールである(Wikipedia)。
ホームページ・ビルダーで制作されたWebサイトは、TABLEタグによるレイアウトやFLAMEタグが使用されるなど、Web標準では非推奨なHTMLの使い方がされるため、プロの現場では利用されていません。(※トライデントコンピュータ専門学校 Webデザイン学科でも使用していません。)

ただ、初心者向けのソフトとしての知名度や手軽さなどから、実際に利用されているWebサイトは数多くあり、ホームページ・ビルダーも毎年新しいバージョンが発表(Var.20・2015年10月発売)されます。
もし使い慣れているのであれば、ホームページ・ビルダーで、今風のWebサイトが作れたら余計なコストが掛からないので良いよねっていうことで、調べてみました。

homepagebuilder1_002.jpg

今回、使用する「ホームページ・ビルダー」はバージョン14。
2009年発売ということは、約5年前のソフトです。IBMのロゴが懐かしいです。
現在は、ATOKなどでお馴染みのジャストシステムが販売、開発をしています。
ホームページ・ビルダーは他のソフトと同じように、一度購入してまったら、自分の環境で動く限り使い続ける方が多いようです。
未だにバージョン7(2002年発売)などで更新されているようなWebサイトも見かけますので、あえて古いバージョンを使ってみます。

動作環境

主要な動作環境を公式サイトから調べてみました。

OS
Microsoft® Windows® 7, Windows Vista®, Windows XP, Windows 2000 Professional
CPU
Intel®Pentium®III以上を推奨
メモリ
256MB以上(512MB以上を推奨)
ハードディスク必要容量
最小構成:250MB以上、最大構成:600MB以上の空き容量が必要
画面サイズ
解像度 800×600、High Color以上(解像度1024×768以上を推奨)
サポート終了日
2016年3月31日

意外とまだ(2016年1月現在)サポート期間中なんですね。
また、Windows8, Windows10での利用もアップデートモジュールを利用することで対応(Windows8対応状況Windows10対応状況)しているようです。
Windows10でインストールしてみましたが、問題なく利用できています。
アップデートモジュールは、こちらにあります。(※サポート期間が過ぎるとダウンロードできなくなるかもしれません。)

さっそく、起動してみましょう

インストール、アップデートが終了したら、さっそく起動しています。
起動すると「ホームページ・ビルダーへようこそ」という画面が出てきます。
こちらで編集スタイルを選択します。

homepagebuilder1_003.jpg

この編集スタイルは、後からでも変更できますので、どれを選んでもいいです。
無難にスタンダードを選びました。

homepagebuilder1_004.jpg

スタンダート編集スタイルの画面は上の画像になります。
他の編集スタイルに変更したい場合は、表示メニュー>編集スタイルの切り替えを選んで、再度「ホームページ・ビルダーへようこそ」を表示して切り替えます。

homepagebuilder1_005.jpg

かんたん編集スタイル↓

homepagebuilder1_009.jpg
homepagebuilder1_010.jpg

エディターズ編集スタイルは上記のような画面になります。
ホームページ・ビルダーに慣れてから自分にあった表示スタイルを選択すればいいと思います。

初期設定を変更します

ホームページ・ビルダーには、初心者向けの機能として、自動的にHTMLを整形や修正してくれたりする機能があります。
しかし今では逆に迷惑な、非推奨のタグなどを入れたりしてくれますので、初期設定を変更してなるべく、今風の使い方ができるようにカスタマイズします。
初期設定を変更するには、ツールメニュー>オプションでダイアログを開きます。

homepagebuilder1_006.jpg homepagebuilder1_007.jpg

まずはオプションダイアログから、一般タブを選択し設定を変更していきます。

一般タブ

homepagebuilder1_008.jpg
HTMLソースを自動整形する
このチェックボックスにチェック マークを付けると、HTMLファイルを開いたときなど、ソースのインデントなどが自動整形されてしまいます。
上手に使えればと思ったのですが、閉じタグが無くなってしまうなど、色々と問題がありそうですので、外しておきます
HTML構文エラーの自動修正する
このチェックボックスはデフォルトでにチェックが入っています。
こちらも勝手に修正してしまうと思わぬエラーの原因になりますので、チェックを外します
HTML構文エラー時の動作
エラーしている時は通知がでるように[すべてのエラーを無視]ではなく、[すべてのエラーで、修正ダイアログを開く]もしくは [重大なエラーのみ、修正ダイアログを開く]に設定しておきます。
最初は[すべてのエラーで、修正ダイアログを開く]にしておきました。
ページ作成モード
デフォルトでは、[作成時に選択する]になっています。
こちらもで構わないのですが、基本的に利用するのは[標準モード]になりますので変更しておきましょう。
[どこでも配置モード]は、ホームページ・ビルダー上では見たままで、Webページの作成ができますが、今のようにブラウザの種類やスマートフォンなどデバイスが多様になっている現在、見る人によって見えなくなってしまうこともあります。
[標準モード]で利用するようにします。

編集タブ

要素を作成時の設定が出来るようになっています。

homepagebuilder1_011.jpg
表の属性
表(table)を作成するときの「空白セルに空白コードを自動挿入する」のチェックを外しておきます。

表示タブ

表示タブは、制作時に表示されるモノの設定ですね。
プレビューの表示モードが「Internet Explorer 8」というのが、ちょっと気になりますが、あと特に変更するところはありません。

homepagebuilder1_012.jpg

次のネットワークは、プロキシの設定がある環境で制作している場合に、FTPやファイルサーバーへの接続が必要な場合に設定します。
今回はローカルで制作しますので、特に設定は必要ないですね。

ファイルタブ

ファイルタブは、htmlファイルの初期設定になりますので、変更する箇所が多いです。

homepagebuilder1_013.jpg
ファイルオプション
出力漢字コードを[Unicode(UTF-8)]に変更します。
「新規ファイルを作成する場合のフォーマット」は、そのまま[HTML 4.0]を選択しておきます。
「DOCTYPEを出力する」にチェックを入れて、<!DOCTYPE html>に書き換えちゃいます。
これは、HTML5用のDOCTYPEです。今ならHTML5で良いですね。
さらに、「HTMLソースにGENERATORを組み込む」のチェックは外してもいいのですが、ホームページ・ビルダーの利用年数を考慮すると、どのバージョンで編集しているのかわかりやすいので、入れておいてもいいのではないでしょうか。
保存オプション
「バックアップファイルを作成する」「自動保存を行う」 「文字エンコードを META タグで指定する」 「基準スタイルシート言語をMETAタグで指定する」 のチェックを外します
「文字エンコードを METAタグで指定する」や 「基準スタイルシート言語をMETAタグで指定する」をチェックすると<meta>タグで情報が記述されるので、便利ですがHTML5の記述とはちょっと違うので、後から直接、記述し直します。
「LANG属性を指定する」 にチェックを入れます

ソース編集タブ

homepagebuilder1_014.jpg

こちらは、ソースを編集するときに利用する設定です。
とりあえず、色設定はチェックを入れておきます。

表示設定
ソースコードの表示サイズは12ptにしておきます(※デフォルトの9ptでも構いません。
最近、細かい文字が見えづらいです…)。
ソースの自動改行、行数表示にチェックを入れておきます。
ページ/ソースで分割して作業する場合、左右に表示するようにしました。
出力文字
「タグ」「属性」ともに[小文字]を選びます。
XHTMLからの流れがありますので、HTML5でも小文字で書くほうがいいでしょう。
文字下げ
インデントの設定です。
2文字か4文字、好みで大丈夫です。
コードアシスト
これも好みですが、タグを書くと同時に閉じタグも書いてくれる機能です。チェックしておきます。
スタイルシート
「ソース設定」ボタンを押すと、ダイアログが表示されます。
行数表示にチェックを入れて、「詳細設定」ボタンを押します。ショートハンドを使ったほうが作業しやすいので、「お勧め」ボタンを押します。
homepagebuilder1_015.jpg

ビジュアルサイト

展開レベルタブ
「エラーのあるページまで展開」のチェックを外します
チェックが入っているとファイルを開けなくなる時があるそうです。
homepagebuilder1_016.jpg

初期設定の変更はこのぐらいです。結構、変更しないといけないのですが、今回使用しているホームページ・ビルダーのバージョンを考えると仕方がないのかなとも思います。
「OK」ボタンを押して、設定が終わらせます。
スタンダード編集スタイルの画面であれば、上から2段目の「新規ページ」ボタンを押して、HTMLファイルを作成します。

homepagebuilder1_017.jpg

HTMLソースタグを選択して、ソースを表示させると下記のように記述されていればOKです。
タイトルや文字コードなどは、別途追加していきます。

<!DOCTYPE html>
<html lang="ja">
<head>


</head>
<body></body>
</html>

今後、Webサイトを制作していくのですが、なるべくホームページ・ビルダーの機能を使って作成していきたいと思います。
さて、どこまでできるのでしょうか(・・;)

検索フォーム
#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
学生がライトニングトークで話しました。
〈進級展〉
2020年度 1年生進級制作展(オンライン)終了しました。
2019年度 1年生進級制作展終了しました。
1年生進級展2018「線の群生」終了しました。
1年生進級展「WWW(Welcome to Web World)」を開催しました。
1年生進級展「お母さんの2度見展」を開催中です。
「うぇ~~~~~~~ぶ2016」終了しました。ご来場ありがとうございました!
「うぇ〜〜〜〜〜ぶ!!」終了。ご来場ありがとうございました!
〈コンテスト〉
第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回技能五輪
〈若年者ものづくり競技大会〉
第14回若年者ものづくり競技大会
第11回若年者ものづくり競技大会 2日目&結果
第9回若年者ものづくり競技大会2日目(競技日)
第8回若年者ものづくり競技大会2日目
第7回若年者ものづくり大会
第6回若年者ものづくり大会2日目
第5回若年者ものづくり大会
第4回若年者ものづくり競技大会閉会式
月別アーカイブ
タグリスト 改

トライデントコンピュータ専門学校Webデザイン学科業界研究WCAN技能五輪ウェブデザイン職種若年者ものづくり競技大会Webサイトウェブデザインポートフォリオ名古屋映画ECCコンピュータ専門学校2013学生ブログWebデザインJavaScriptWinter20091年生進級展Webサイト制作WordPress技能五輪全国大会2011卒展卒業制作展アクアリングオープンキャンパスCSSかっぱ商店街礒田優入学式Wordpressa-blogNagoyaWebcms矢野りん合同企業展ライトニングトーク2014石黒雄介アクセス解析Summerウェブデザイン技能競技大会体験入学CGイラスト学科AutumnWeb制作会社面白法人カヤック若年者ものづくり大会卒業制作瀬川大勝テンプレート作成夏休み夏季閉館日閉館日ホームページ・ビルダーHCDプレゼンテーション大阪2010第48回技能五輪全国大会inminiAdobeココストアJapan就職活動jQueryFlashHTML5ウェブデザイン技能競技会html52015杉本拓也佐藤歩2012フォトアルバム田中睦翔学生インタビューGIO東京研修モリサワ名古屋駅あいちカレーラーメンコンテストIIJ企業訪問Springアンティー・ファクトリープロジェクトセントレアBananaAd愛知県NEXTラーメン上村水月99eagleマールCSS3ウェブデザイン技能検定ブログパーツCOMMUNICATION学生情報デザインフォーラム情報デザインWebワークショップGoogle人間中心設計トライデント祭りGridLayoutWebアプリ北濱大輔制作合宿display:grid2018専門学校2020株式会社スタメンエイチーム水野怜美グリッドレイアウトWebデザインギャラリーgifアニメ水野裕太CentOSYahoo!JapanUXサイバーエージェント成田篤紀Webクリエイター能力認定試験林田実樹Plugin堀尾真衣forメ~テレAnalytics卒業式ビジュアルエディタWEBサイト制作者のためのHCDの理解in名古屋トライデント名商連会社訪問中日ドラゴンズナゴヤドーム戸田芳裕知多みるくCSSNiteLikeBoxイラストマップ岩手県レイアウトウェブアクセシビリティWordFes作品集塚本碧真鍋大度コミュニケーションデザインワークショップ名古屋市科学館阿部淳也ポートフォリオサイトFICC静岡ゴールデンウィークカリキュラムDTPWORLD情報デザイン基礎Webリテラシーアサココ!ディプロス導入授業WordCampStoreApple2008たにぐちまこと鷹野雅弘茂森仙直グループ制作企業課題豊田市美術館F-siteウェブDeBLOGモンキーワークスワークショップカメラトライデント合同企業展写真結果発表iPhoneMarkup名古屋開府400年祭jbstyleCMS空気人形SEO笈瀬本通り産学協同ECMAScript学習進級展ES6ES20152017出張講座株式会社LIGドラマ初期設定謹賀新年サーティファイWebデザイナー沖縄Runstant久保怜也アプリコンテスト進級制作展YearNewZoomオンライン授業松井友奈5T(ファイヴティー)Happyあけましておめでとう鈴木優太信州アプリコンテスト[ゼロ]日本総合ビジネス専門学校松本渚新年冬休み熊谷佳紀桝田草一legend要素fieldset要素label要素愛知県選手団Adventtextarea要素input要素たこ焼きForum幕張メッセCalendar和みAWARD卒業研究制作展スマートフォンoption要素form要素particle飯田淳介まぼろしマークアップエンジニアアップルップルフロントエンドエンジニアoutput要素うぇーぶcanvasHTMLselect要素長屋めぐみNTTドコモ東海1年生作品展スマホアプリ中級編名古屋サイト改善研究会小林信次増田悟中部国際空港株式会社カメラワークブラザー工業株式会社株式会社アクアリングCODEポスターデザイン・コンペティションプチ・フレーズ三蔵みの治商店石井研二Twitter商店サイト制作Ultimate名チャリ愛知商業高校GA名駅経済新聞キルターズフェスティバル2011放課後のプレアデス笈瀬本通商店街名古屋市中村区FLAVER3.0SUBARUGAINAXキルト展グラフィクデザイン日本の四季中部国際空港FLV8341-3:2010Lazy大西健太田中稚妃呂横浜デジタルアーツLoadSlimbox2XJISウェブリテラシー協会GoogleAnalytics知多半島松坂屋美術館スタジオジブリ・レイアウト展愛知県立芸術大学プロ野球unoplus技能五輪予選ビジュアルデベロップメント伊藤頼子プロトコル分析WEBサイト制作者のためのHCDの理解ポートピア名古屋フナ犬ナゴヤ武将都市名古屋おもてなし武将隊武豊アニメーションフェスティバル道頓堀新世界ネスカフェゴールドブレンド大沢たかお求人YORKE.IAAndrioidITCIRCUS柴乃櫂人広島弁WEBサイト制作者のためのHCD(人間中心設計)の理解チタハン10CODE名古屋クリエイターフットサル笈瀬本通名古屋グランパスiPhone4シナリオ金シャチ商店街名古屋メディアボンドアクセシビリティサーバー商店街タロヲペルソナ1→10design細川太郎ポスターデザイン・コンペディション神戸国際展示場Facebookページベースキャンプ名古屋SHOWGAMESVGIllustratorJQuery第50回結果長野TOKYO東京ゲームショウ2012イマジンカップNHNStationFutureTeamBloosum第7回若年者ものづくり競技大会尾花大輔Bloom*Block張山大祐画像をチェックボタンにするbyinspiredRhizomatiks田代豊PerfumePARTYTAFFWebデザイン演習あいちトリエンナーレ2013そこにいない。展プレゼンThree.jsFacebookたこ焼きパーティWeb制作合宿MuseみんなのICT佐藤ねじ木下健太郎就職東京docomoドコモMagnum北岡弘至伊達千代DTPの勉強部屋JAPANWORLDCUP3みつけもの恵那市岩村プロジェクションマッピングバルサマンablogcmsKtaistyleCustomSmilies絵文字円JOY!mapぬいぐるみのラパン卒業制作・研究発表会2011トライデントカレッジUntitled!!!!!!!!英国王のスピーチ愛知淑徳大学ドラゴンゲートロゴマークメールマガジンOhanaゲーム大賞アマチュア部門静岡県ツインメッセ静岡2011年度迎春敢闘賞東京ゲームショウ神戸5月11日GoogleロゴGATEDRAGONマーサ・グレアムライアン・ウッドワード鈴木プラネタリウム卒業・修了制作展WCAN×CSSNiteTokyoCOMPLETECHILDRENADVENTLabuatUTZOOMGENOウィルスワークスコーポレーション「ヤノベケンジ-ウルトラ」展BlogVIIFANTASY第51回技能五輪全国大会西村真里子プレゼン演習ActionScript基礎広告批評TAFF'09FINALアートアニメーション武豊町セキュリティデコクレインターネットスキル認定普及協会ライブペイント黒い太陽ウルトラ展国家検定西田幸司旭食品サンプル製作所食品サンプルActionScriptヱヴァンゲリヲン新劇場版:破ヤノベケンジカスタマイズセミナーゲーム日本ファルコム□□□switch山村浩二音楽ファルコム音楽フリー宣言CALENDARUNIQLO荒俣宏HTML+CSS基礎造形基礎SagmeisterStefanW+KTokyo(+CRUZ)QubibiHelveticaデザインのへそSIGGRAPHXRAY2008WinterWebDirectionEast'08ArtlessNamTHEWEBウェブデザイン部門カンファレンスCONTEST01丹下紘希HPデザインデザインコンテストASIAVideopuppetry中村勇吾佐藤可士和SakaeNightTEXTUREサムライデッサンDesignCS4CollegeFLEXアンドリュー・ワイエスデザイン鳥取砂丘鳥取愛知県美術館PHPFLASHMAXデザイナーのためのプログラミング入門学科富岡聡イラストコンテストデュエル・マスターズ長谷川恭久スーパーエレメンツヨウイチ情報デザイン教育勉強会ペルソナ&シナリオ法浅野智おかだよういちペルソナ/シナリオ法山崎デザイン事務所コピーライティングCREAMごはんとFlashマークアップ演習マクロマリオネットFITCロゴ公募小野裕子#infoedu教育勉強会クリ博就職フェスタ3校合同発表会SalsaWasThereThenウェブリテラシー協会第一回セミナー夢プロジェクト2009・成果報告会福みつ餃子浜松IA2010キックオフセミナーAndNIKE会社見学鎌倉日本電子専門学校横浜デジタルアーツ専門学校森川眞行箱根合宿慶華飯店新横浜ラーメン博物館横浜中華街映画のオープニング閉会式アニメーションMozorama後期入賞escalatoranimationLPO第4回アックゼロヨン・アワードCG・イラストコンテストモーション演習ガンダムグラフィックデザインコマ撮りアニメ電信柱エレミの恋ウサビッチカナバングラフィックスソバットシアターCMS特集今井佳子アイディグラフィックス学生参加ギレン総帥UNIQLOCKHCDプロセスブランディングAutuminカラーdotFesKyotoゆるキャラFlash-GameswonderflストリートビューJAPANインターネットクリエイティブアワード東京ゲームショウ2009人喰いの大鷲トリコ是枝裕和監督ナゴヤデザインウィーク2009大富豪スコアシートPHP勉強会Yahoo!世界のCMフェスティバルITホワイトボックスWCAN46職業実践専門課程冨田伴成イークリエイト藤井英一JIHYE新城高校青山高校OculusVRカルタ東京ゲームショウ2018出前授業HEOホ・ジヘWorld)toWWW(Welcome友章北川パーヤンWebデザインスペシャルデー韓国脆弱性なんと読む?期末テストGO第56回株式会社サイバーエージェントあけおめ平成31年メーカー・ブランド牧野史門UIデザイン2020新卒線の群生Figmaツールコーヒー用品前川元成srcsetsourcepicture沖縄県第56回技能五輪全国大会EC事業NextDoor斉藤洸貴cyma堀川志維ProxyWCAN2017Springv4.0.1SyntaxHighlighter学校ターミナル鈴木雄太スタジオディテイルズ服部友厚佐藤洋介お母さんの二度見展マイクロソフト芸大料理Instagramインスタグラム美大NodeListWebプログラミング初級講座appendChild()HTMLCollection山川綾那株式会社エイチーム堀川友章安藤志維Contentsof関口浩之フォントおじさん安藤NCF2017ミス・ユニバース・ジャパン岐阜大会TableTOCノートPC貸与尾鷲高校衣台高校梅澤朝樹夏休みの課題スクラップブックAWARDS出身高校D3.js株式会社MTG企業見学中村享介海老江優太Frontend株式会社メイクリーニシヤマナガヤ未完美術館松本健太業界研究授業2022名古屋市名東区小林健人小林隼大rememパラサイト2020アカデミー賞vwvh福田将也信州未来アプリコンテスト後期集中授業神谷友理恵令和3年穂刈謙亮中島優美鈴木英心原田ゆいイロコトエンタメ特別企画『謎解き~7つの学科の謎を解け~』2021山本智香子杉山知央ノマドランド2021アカデミー賞ReDesigner田口和磨第4回専門学校HTML5作品アワード2021年Studentグッドパッチ東京電子専門学校神戸電子専門学校TypeScript企業賞第3回専門学校HTML5作品アワードソレコン☆ポスコン2019茜音髙橋コンテスト茂森落合祐介杉浦麻紀ライフスタイル仙直株式会社アンティー・ファクトリーPhotoshopCS6CBCTBSわたし、定時に帰ります。新入生オリエンテーションLIGSTUDIO祐司髙橋茜音信州アプリコンテストゼロ足立丈也、平子卓哉、増田隼也ICS池田泰延MILKメンバーズマイクロインタラクションフロントエンド株式会社COTSOriginalTshirt.st進級制作三瓶エペフェンシングmarkereatスポーツアナリティクス株式会社LIGHTz2019年令和2年classes醐りょう加藤ひとみ西岡克真AnimationAO山田拓生青山敬司ネイルサロンマウア授業アイチータ結団式特別授業青空学区丸高アロチ本家和歌山中華そば熊野三山丸田屋岩出本店名古屋市営地下鉄柏木祥太スパルタキャンプアイテムカンパニー紅茶専門店Liyn-anインターンシップスマートフォンサイトUI図鑑CSS3&jQueryで作る名古屋駅麺通りWF1でBLOG新入生HighlighterSyntaxCrayon2015年度NCF2014新年のご挨拶datalist要素keygen要素optgroup要素type属性button要素第52回技能五輪全国大会親孝行麺の匠オリエンタル大門坂那智の大滝モテ声ボーダーlist-itemdisplaylist-style-typeHTML5スマートアプリ&クリエイティブコンテストKDDIトライデント合同企業説明会10日でおぼえるLinuxサーバー入門教室最優秀賞ジョルテNTTドコモ東海支社NCF2013麺屋ココイチフジ家55さかなや晴れやか麺やOKカレーラーメン美術大学芸術大学高橋雅人F81教室GWD名古屋マークアップ勉強会tableテーブル宇野剛志マカベン熊野古道本州最南端串本八鬼山石原愛実ランチparseFloat()parseInt()Designergoogle備忘録栗山聡一中村健太道家陽介concrete5森田霞木村哲朗カークスヴィルIA/UXプラクティス平野秀幸坂本貴史沼田啓助河地芳明JSBinCodePenプログラムクイズAO入試制作実績津田直明Web制作のおしごと懇親会合宿合同制作WebディレクターWebプログラマー2016原一浩坂本邦夫JSFiddlePlunkerMonaca学生作品集ジムナストコロン日清食品グループ情報系学園祭いな世驛麺通り再進学タカガールサイト水曜日のカンパネラ駅麺通り涼麺jsdo.itCodeplyクイズIndependenceプラネタリアンResurgenceDay:合同制作合宿専門士3DCG東京コスモクリスマス熊﨑彩松田洋樹CGスペシャリスト岡田陽一FlexibleBoxFlexbox味仙第53回ワクワク建設タウンScrollmagic八木智章竹中民男夏麺フェアScrollMagicVelocity.js建設経営者倶楽部アクセシビリティからはじめる、WebサイトのUXデザイWebアクセシビリティDmm.comUXデザインワイヤーフレーム仕事UIバイドゥうぇ~~~~~~~ぶウェブアートデザイナー学位出席率レスポンシブWebデザイン平野健太郎ポートフォリオアイデア帳PlatformKaizenアクティビティシナリオ源賢司グロースハックグロースハッカー採用担当者の心に響く高校14嵐が如く

メールフォーム

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

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