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

2015.12.23 [水] そろそろFlexboxを勉強し始めてもいいんじゃないだろうか

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

学校は冬休みに入りました。こういった長期の休みで新しい知識や技術を習得するのも良いのではないでしょうか。

flexbox_001.jpg
素材:PAKUTASO

Webデザイン学科の新入生がHTML, CSSを学ぶ上で、なかなか理解しづらいのが要素を横に並べたりするときに使うfloatの扱い方です。いまのところ、Webサイトでレイアウトを組む上で、必ずと言っていいほど利用されています。ただ、親要素の高さがなくなるため、clearfixというテクニックを使ったり、幅などを計算して数値を設定しなければいけないなど、なかなかくせ者です。学生のソースを見てみると、やたらとclearfixを使ったり、positionで無理やり置いたりとあらゆる手でfloatを避けようとしていますが、避ければ避けるほどハマってしまいます。

昔からなぜ、こんなに理解しづらいものしかないのか、と思っていたんですが、そろそろCSS3 Flexible Box (可変ボックス)またはflexboxが最新のブラウザ(IEはまだ微妙ですが)で、利用ができるようになってきました。最近、Web技術系のブログでもたびたび取り上げられています。

flexbox_002.jpg

年明けの1月12日からInternet Explorerのサポートポリシーが変更になります。これで現在サポート中のWindowsOSでのInternet Explorer11以上の利用が促されます。これから購入するPCのブラウザはEdgeになりますので、近い将来flexboxの利用が普通になってくるはずです。

ということで、flexboxの使い方を調べてみました。

Flexible Box Layoutとは

まずは、CSSの策定をしているW3Cの仕様を見てみます。どうやら最終草案のようですね。

Abstract
The specification describes a CSS box model optimized for user interface design. In the flex layout model, the children of a flex container can be laid out in any direction, and can “flex” their sizes, either growing to fill unused space or shrinking to avoid overflowing the parent. Both horizontal and vertical alignment of the children can be easily manipulated. Nesting of these boxes (horizontal inside vertical, or vertical inside horizontal) can be used to build layouts in two dimensions.

この仕様は、ユーザインタフェースの設計に最適化されたCSSボックスモデルを記述する。Flexible Box Layout Modelでは、flex containerの子は、任意の方向に配置することができ、いずれかの未使用のスペースを埋めるために拡大または親のオーバーフローを避けるために縮小し、そのサイズを「曲げる」ことができます。子供の両方の水平および垂直位置合わせを簡単に操作することができます。これらのボックスのネスティング(垂直、または垂直内側水平内側横)が2次元でのレイアウトを構築するために使用することができます。

Google翻訳のおかげでもあるのですが、相変わらずわかりづらいですね。flex containerの中で水平、垂直に「曲げる」ことができるらしいです。「曲げる」ってなんだ?実際に使って理解するほうがいいですね。

では、実際に使ってみましょう

横並びといえば、ナビゲーションですので、作ってみましょう。


floatだとCSSは下記のように書きます。

ul{
    list-style-type: none;
    overflow: hidden;
}
li{
    float: left;
    width: 25%;
    padding: 1em 0;
    text-align: center;
    background-color: #33CCCC;
}
li:nth-child(even){
    background-color: #00CCFF;
}

親要素の高さを付けるために、ulにoverflow:hiddenをつけます。
違いが分かりやすくするために、liのひとつを改行しておきます。
さらに、色を付けたり、整えたりすると

では、Flexboxを使います。先ほどと同じhtmlを使います。CSSからliのfloat:leftやulのoverflow:hiddenを外して、横並びにしたいliの親要素ulにdisplay:flexと入れます。

ul{
    display: flex;
}

横並びになりました。もちろん高さも持っていますし、さらにFlex itemの高さが揃います。並べるという行為は同じですが、ちょっと感動です。このdisplay:flexで定義された親要素をFlex container (Flex コンテナ)、子要素をFlex item (Flex アイテム)と呼びます。並び方は初期値flex-direction:rowが入っていて、横並びなるようになっています。変更して並び方を見てみましょう。

まずは、上から下へ並べます。

ul{
    display: flex;
    flex-direction:column;
}

続いて、横並びで逆方向から並べます。

ul{
    display: flex;
    flex-direction:row-reverse;
}

そして縦並びで逆方向から並べます。

ul{
    display: flex;
    flex-direction:column-reverse;
}

なんなんでしょうか!この簡単さは!中身を「並べるよ~」「横並び逆!」な感じですので、理解しやすいですね。

さらにfloatでよくあるのがカラム落ちですが、親要素の横幅に入らなかった場合は、どうなるのでしょうか。liの横幅を30%にします。4つありますので120%ではみ出しますね。

初期値はnowrapで、そのままはみ出されます。これを折り返すようにするには、ulにflex-wrap:wrapと書きます。

ul{
    display: flex;
    flex-wrap: wrap;
}
li{
    min-width: 30%;
}

こちらも逆方向に設定ができるので、flex-wrap:wrap-reverseと書きます。さらに flex-directionとflex-wrapはショートハンドで一緒に書けますので、横並び逆で、改行も逆にしてみます。

ul{
    display: flex;
    flex-flow: row-reverse wrap-reverse;
}
li{
    min-width: 30%;
}

追記:min-width:30%だけだとsafariでは、flex-wrapが効きませんでしたのでflex-basisを一緒に書くことで解決しました。flex-basisの解説は後の方でしています。

では、逆に小さくしてul内で移動、変更してみましょう。

親要素内で表示位置をカスタマイズ justify-content

justify-contentプロパティで変更します。justify-content:space-betweenとすると、最初の要素が左、最後の要素が右に移動して他の要素が均等に配置されます。

ul{
    display: flex;
    justify-content:space-between;
}
li{
    width: 15%;
}

これも、とても便利ですね。space-aroundだと、最初の要素の左と最後の要素の右にも、他の要素との空きの半分の数値が入ります。もう親要素の横幅と子要素の横幅、marginを計算してpaddinやborderが…なんてのも必要ありません。

さらに左揃え(flex-start)や右揃え(flex-end)もできますが、中央揃え(center)が便利です。

ul{
    display: flex;
    justify-content: center;
}
li{
    width: 15%;
    margin: 0 10px;
}

1行しか書きかえてないのに自由自在です。今はナビゲーションで検証していますが、本来はWebサイトのコンテンツをレイアウトすることが可能です。

ちょっと長くなってきましたが、今回は、この記事内に収めたいと思いますので、続けます。

flexbox_003.jpg
素材:PAKUTASO

垂直方向の揃え方 align-items

レイアウトの時に高さの基準を揃えるのに苦労しますよね。それもFlexboxでは解決してくれます。align-itemsを利用します。

高さをバラバラにした、要素を用意します。初期値はstretchで、Flexアイテムの高さを自動で合わせてくれます。高さをバラバラにした場合、flex-startで上または、左(※縦に並んでるとき)に揃います。flex-endで下または右(※)に揃います。下にしてみましょう。

ul{
    display: flex;
    align-items: flex-end;
}

その他、centerで縦の中央揃え、baselineでベースラインで揃います。レスポンシブWebデザインでスマートフォンの場合、flex-wrapで改行され、複数行で配置された場合は、align-contentを使い、まとめたブロックとして縦の位置を設定できまます。ul, liに高さをつけて、ulの背景に色を入れてわかりやすくしておきます。

Flexコンテナには、軸があります。主軸 (main axis) は flex アイテムのいずれに対しても平行な軸で、交差軸 (cross axis) は main axis に対して垂直な軸となります。このcross axisがアイテムよりも大きく余白ができた場合、align-contentを利用できます。初期値は、余白を各行に分割して配置します。

ul{
    display: flex;
    flex-wrap: wrap;
    height: 10em;
    background-color:#FFFF99;
}
li{
    min-width: 50%;
    height: 2em;
}

flex-startで上または左(※縦に並んでいるとき)に、flex-endで下または右(※)centerで中央、space-betweenで均等に揃います。均等はjustify-contentと同じような配置ですので、space-aroundをしてみましょう。

この通り、各行の空白は均等になり、さらに一番上の上部と一番下の下部にも、他の行との空間の半分が入ります。

解説していませんでしたが、Flexboxを設定した場合、縦の位置を揃えるときによく使うvertical-alignは効きません。また、float:noneやclearをしても何も変化はありません。

さて、ここまでFlexコンテナに設定をしていきましたが、この後はFlexアイテムのプロパティを解説します。

Flexboxアイテムに設定する

まずは、orderです。これは、並び順を指定することができます。初期値は0で数値が小さい順に並びます。マイナスの数値も選べます。扱いやすいように各liにclassを設定します。


続いて、cssでFlexboxの設定をします。orderで数値を変更してみます。

ul{
    display: flex;
}
li{
     padding: 1em 0;
     text-align: center;
     background-color: #33CCCC;
}
li:nth-child(even){
     background-color: #00CCFF;
}
li.flex-order1{
    order: 3;
}
li.flex-order6{
    order: -1;
}

初期値が0なので、-1のNav6が一番左に移動し、3を設定したNav1が一番右に移動しました。こちらもスマートフォン表示の時に順番を変えたいときなどに利用できますね。

つづいて、flex-basisを使います。初期値はautoとなり、widthの数値のように扱います。

ul{
    display: flex;
}
li{
    flex-basis: 10%;
}

Nav3だけに数値を設定すると、他のアイテムはautoになり、親要素の幅を分割するのでこうなります。

flex-growプロパティは、FlexアイテムがFlexコンテナ内に入っている場合、残りの領域を埋めるように拡大します。何も設定しない場合は、1が入ります。

ul{
    display: flex;
}
li{
    flex-basis: 10%;
}
li.flex-order4{
    flex-grow: 5;
}

Nav4に5を設定し、他の5つは何も記入しません。設定がない場合は、1になりますので、1×5=5、5×1=5となりますので、合計10に分割されます。Nav4はこれの5つ分の大きさになります。

flex-shrinkプロパティは、flex-growの逆にどこまで縮小できるかの設定です。FlexアイテムがFlexコンテナを超えている場合、超えた領域を各アイテムの数値(割合)で割り当てて縮小します。

ul{
    display: flex;
}
li{
    flex-basis: 25%;
}
li.flex-order2{
    flex-shrink: 2;
}
li.flex-order6{
    flex-shrink: 4;
}

これが一番わかりづらいんですが、まず初期値は1です。Nav2に2、Nav6に4を設定しました。1×4=4と2×1=2, 4×1=4で合計すると10です。flex-basisが25%になっているので、ひとつのliの横幅はul幅約630pxの25%で約157.5pxになります。liは6つあるので、2つ分約315pxほどはみ出します。これを先ほどの合計数10の内どの割合で縮小するのかということになります。

設定していないliは1ですので、約31.5px、Nav2は2ですので約63pxを約157.5pxから引きますので、約94.5pxとなります。Nav6は4ですので31.5×4の約126pxを引き、約32.5pxとなります。

ちょっとわかりづらいですね。flex-growよりは使う機会が少ないかと思います。
追記(20160902):幅の計算方法でわかりやすい記事がありました。
Flexboxを使うなら知っておきたい「flexアイテム」の幅の計算方法| Rriver

また、flex-grow、flex-shrink、flex-basisはflexというショートハンドとして利用することができます。数値の数でどのプロパティに割り当てらるかが変わります。

flex: none                                            /* 値 'none' の場合 */
flex: <'flex-grow'>                                   /* 値が 1 つの構文、パターン 1 */
flex: <'flex-basis'>                                  /* 値が 1 つの構文、パターン 2 */
flex: <'flex-grow'> <'flex-basis'>                    /* 値が 2 つの構文、パターン 1 */
flex: <'flex-grow'> <'flex-shrink'>                   /* 値が 2 つの構文、パターン 2 */
flex: <'flex-grow'> <'flex-shrink'> <'flex-basis'>    /* 値が 3 つの構文 */

参考:flex - CSS | MDN

また、noneの場合は、 0 0 auto、autoの場合は、1 1 auto、nitialの場合は、0 1 auto と同じになります。

align-selfは、個別のFlexアイテムの垂直方向の揃えを設定します。

ul{
    display: flex;
   height: 10em;
}
li{
    height: 4em;
}
li.flex-order2{
    align-self: flex-end;
}
li.flex-order6{
    align-self: center;
}

これで、Flexbox関連のプロパティの基本設定と、どんなことができるのかがわかりました。これらを組み合わせると、Pintarestのような、Masonryレイアウトもそれほど多くない行数で実現することができます。
参考:Flexboxを使った2カラム・3カラム・マルチレイアウトの基本と応用 | Webクリエイターボックス

Internet Explorer11でも、今回紹介したプロパティは、Chromeなどと同じように表示されていますので、徐々に使っていってもいいのではないでしょうか。とはいえ、まだまだfloatを使ったレイアウトは現役ですので、学校でも最初はfloatを勉強していくことになると思います。

お疲れ様でした。

flexbox_004.jpg
素材:PAKUTASO

参考:CSS3のFlexboxを基本から理解して、使い倒そう! | 株式会社LIG
参考:Flexboxについて勉強したい・理解を深めたい時に参考になるエントリーやサイトまとめ | NxWorld

2012.11.27 [火] Adobe MuseでWebサイト

最終更新:-0001.11.30Webサイト制作Tips
先日、約3年ぶりに行われた「WCAN mini Markup」のLTをしてきました。内容は「Adobe InDesign」を使ったものだったのですが「Adobe Muse」も検証をしたので、今後に役に立つかもしれないなと、使い方を紹介しておきます。
とりあえず、体験版を試すためにAdobeのサイトからMuseをダウンロードします。

今回は、こんなサイトを作ろうと思います。
muse017.jpg

起動そして、準備


起動画面は正方形ですね。AdobeCS6シリーズとは違います。

museStart.jpg

まずは、新規Webサイトの作成です。ファイルメニューから新規サイトを選択してダイアログを表示させます。新しく作成するサイトの“横幅”“マージン”“パディング“を設定してOKボタンを押します。
muse001.jpg

最初はプランモードが表示されますので、ページや階層などを構築していきます。また、ヘッダーやフッターなど統一されたものは、マスターページに制作をすれば流用が簡単です。このへんは、「InDesignの操作に似ている」とよく言われてる部分です。
カーソルを合わせると左右下に「+」ボタンがでてくるので、横はグローバルメニュー、下はローカルメニューのページが作成されます。
muse002_3.jpg

今回は6ページほどのページで作ろうと思います。これで、準備は完了です。
muse004.jpg

マスターページを設定


ヘッダーとフッターのデザインは統一して流用したいので、マスターページを設定します。マスターページもページと同様、左右に「+」ボタンがありますので、複数作成することができます。「A-マスター」のサムネイルをダブルクリックすると編集ができるようになります。ツールは数が少なくシンプルです。
muse0052.jpg

ヘッダー領域に“サイトタイトル”と“グローバルナビゲーション”、フッター領域に“コピーライト”を作成します。
グローバルナビゲーションは、ウィジェットライブラリ>メニュー>水平方向をドラッグ&ドロップするとプラン画面で作成したページ数、ページ名を反映したメニューが生成されます。
ウィジェットライブラリを使うとHTMLが<li>でマークアップされますし、自動的にページリンクもしてくれます。
muse0062.jpg

あまり複雑な形には変換できませんが、四角や角丸、グラデーションなど変更ができます。
muse007.jpg

ウィジェットライブラリーには他にもライトボックスやツールヒントを実装できる「コンポジション」「スライドショー」、アコーディオン、タブつきパネルなどの「パネル」「フォーム」なども用意されていて、JavaScriptやHTML, CSSを知らないとできない表現が簡単に取り入れられるようになっています。

フッター領域に配置したいアイテムは、右クリックをして「フッターアイテム」にチェックを入れておきます。チェックが無いと、領域に移動させることができません。
muse008.jpg


これで、マスターページは完成です。プランモードを確認してみると、すべてのページに反映されているのがわかります。
muse009.jpg

Topページの作成&段落スタイルの設定


続いて、ページの作成をしてきます。テキストは他のグラフィックソフトと同じく、テキストボックスを使用します。
muse010.jpg

画像は、ファイルメニュー>配置で読み込みます。ハンドルや数値で大きさなどを決めます。最初からマスクが設定してあり、画像をワンクリックした場合はマスクの大きさ、ダブルクリックして枠が茶色っぽくなれば中身を変更することができます。ここは、他のグラフィックソフトのように“ダイレクト選択ツール”などツールの使い分けではないので、少々迷うかもしれません。
muse011.jpg

段落スタイルの設定は「InDesign」とほぼ一緒です。

  1. 登録したいテキストにカーソルを合わせます。

  2. 段落スタイルパネルで名前と段落タグ(p,h1~h6)を設定します。


これでHTMLに書き出した時に、設定したタグでマークアップされます。

muse012.jpg

その他の便利な設定


Museには、その他にも便利な設定が最初からついています。
まず、各オブジェクトには、最初からステート設定されており“通常”“ロールオーバー”“マウスダウン”“アクティブ”時のビジュアルを変更することができます。いまのWebサイトでは、ボタンのロールオーバーは必須になっているので、これはとても便利です。
muse013.jpg

ページ内のリンクも簡単に、ドラッグ&ドロップでアンカーをつけられます。さらに自動でアニメーションの処理がされます。muse014.jpg

HTMLで書き出し


サイトの確認は、プレビューモードで確認できます。
muse015.jpg

また、ブラウザでも確認ができます。
muse016.jpg

確認ができたら、HTMLで書き出せば終了です。
ディレクトリもわかりやすく、html, css, script, imageに分かれます。
muse018.jpg

また、パブリッシュをするとAdobe Business Catalystにアップされます。アップされるとアクセス解析など、独自の管理ツールが使えるようです。
muse019.jpg

Adobeのグラフィックソフトを使っている人であれば、簡単に操作することができると思います。Adobeが提唱している通り、htmlなどを知らない人でも簡単にとはいかないにしろ、手軽に数ページの静的サイトが完成できるのは、魅力的です。
また、コーディングができる人は、簡単にワイヤーフレームを作って、そのまま書き出したhtmlを使って作業を進めることで時間短縮にもつながるかもしれません。簡単にWebサイトを制作するソフトも色々とあると思うのですが、Museは構造がわかりやすくなっているので、html, cssのカスタマイズもすんなりできそうです。
今回サンプルとして制作したサイトはこちら

今ぐらいのシンプルなメニュー数、ツール数でバージョンアップしていってくれると嬉しいですね。(今は、表組とかはできない、みたいです。)
書き出したら、とても長い記事になってしまいました。

追記:モバイル/タブレットレイアウト機能を追加した3.0が公開されているようです。
検索フォーム
Yahoo!基金

2024年1月1日、石川県能登地方を震源とする地震が発生し、甚大な被害をもたらしています。
謹んで令和6年能登半島地震のお見舞いを申し上げます。
支援のためのYahoo!基金のリンクです。

プロフィール

担当:Webデザイン学科

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

トライデントロゴ

質問などはLINEでどうぞ。

Instagram
Webデザイン学科実績
〈進級制作展〉
2022年度1年生「進級制作展」終了しました。
2021年度1年生「進級制作展」終了しました。
2020年度 1年生進級制作展(オンライン)終了しました。
2019年度 1年生進級制作展終了しました。
1年生進級展2018「線の群生」終了しました。
1年生進級展「WWW(Welcome to Web World)」を開催しました。
1年生進級展「お母さんの2度見展」を開催中です。
「うぇ~~~~~~~ぶ2016」終了しました。ご来場ありがとうございました!
「うぇ〜〜〜〜〜ぶ!!」終了。ご来場ありがとうございました!
〈コンテスト〉
信州未来アプリコンテスト0(ZERO)2023《U-29》DemoDay
令和4年度 起業家甲子園パートナー企業特別賞受賞!!
第6回「専門学校HTML5作品アワード」入選
信州未来アプリコンテスト0 (ZERO) 2022 《U-29》優秀賞&起業家甲子園出場権
第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回若年者ものづくり競技大会閉会式
〈プレゼンテーション〉
WCAN 2016 Springに参加してきました。
WCAN 2015 Winterに参加しました。
建設業入職者増加プロジェクトの発表会に参加
WCAN 2015 Summerに参加してきました。
WCAN 2013 Winterに参加
WCAN(秋)に参加しました。
無事、発表が終わりました【WordFes Nagoya 2013】
WCAN 2013 Summerに参加してきました。
WCAN 2011 Winter LT&LOGO
学生がライトニングトークで話しました。
月別アーカイブ
タグリスト 改

トライデントコンピュータ専門学校Webデザイン学科業界研究WCAN技能五輪ウェブデザイン職種若年者ものづくり競技大会Webサイトポートフォリオ名古屋ウェブデザインECCコンピュータ専門学校学生ブログ2013映画JavaScriptWordPress卒展Webデザイン1年生進級展2009WinterWebサイト制作卒業制作展CSS技能五輪全国大会2011進級制作展閉館日合同企業展オープンキャンパスかっぱ商店街アクアリング入学式礒田優cmsa-blogWordpress矢野りんライトニングトークWebNagoyaアクセス解析2014夏休み石黒雄介夏季閉館日モリサワ就職活動体験入学ウェブデザイン技能競技大会若年者ものづくり大会Web制作会社AutumnCGイラスト学科面白法人カヤックSummerテンプレート作成卒業制作アンティー・ファクトリーホームページ・ビルダーフォトアルバム瀬川大勝卒業研究制作展冬休みHCDプレゼンテーション大阪第48回技能五輪全国大会20122010inminiAdobeココストアJapan東京研修jQueryFlashHTML5ウェブデザイン技能競技会Webアプリ学生インタビューHappyNew名古屋駅2023佐藤歩Year杉本拓也あいちカレーラーメンコンテストGIOIIJ田中睦翔2015html5上村水月99eagle企業訪問プロジェクトウェブアクセシビリティSpringNEXTセントレア専門学校COMMUNICATIONラーメンBananaAdCSS3マールウェブデザイン技能検定ブログパーツCentOS学生情報デザインフォーラム人間中心設計情報デザインWebワークショップGoogle愛知県display:grid2018エイチーム鈴木優太グリッドレイアウトGridLayout新年あけましておめでとう水野裕太東京電子専門学校神戸電子専門学校2020北濱大輔株式会社スタメンWebデザインギャラリーYahoo!JapanUX制作合宿gifアニメWebクリエイター能力認定試験林田実樹水野怜美トライデント祭りサイバーエージェント成田篤紀Pluginfor会社訪問メ~テレ堀尾真衣卒業式ビジュアルエディタナゴヤドーム中日ドラゴンズゴールデンウィークWEBサイト制作者のためのHCDの理解in名古屋知多みるく戸田芳裕AnalyticsCSSNite産学協同作品集名商連レイアウトBoxWordFesたにぐちまことAdvent5T(ファイヴティー)Like岩手県静岡ポートフォリオサイトコミュニケーションデザインワークショップ敢闘賞FICC塚本碧真鍋大度名古屋市科学館SEOアサココ!DTPWORLD情報デザイン基礎ディプロスWordCamp豊田市美術館導入授業WebリテラシーStore鷹野雅弘2008Calendar茂森仙直企業課題Appleグループ制作F-site名古屋開府400年祭カメラワークショップウェブDeBLOG写真トライデント合同企業展イラストマップ笈瀬本通りモンキーワークス結果発表jbstyleMarkupCMSカリキュラムiPhone空気人形トライデント阿部淳也出張講座ES2015ES62017久保怜也信州アプリコンテスト[ゼロ]アプリコンテストECMAScript学習RunstantWebデザイナーサーティファイ沖縄ドラマ進級展株式会社LIGイークリエイト桝田草一Photoshop学生ポートフォリオ2021信州未来アプリコンテスト0(ZERO)SmartHR2024和み中島優美鈴木英心オンライン授業Zoom日本総合ビジネス専門学校松井友奈後期集中授業田口和磨2022初期設定松本渚input要素愛知県選手団fieldset要素textarea要素option要素select要素output要素label要素form要素AWARDスマートフォンUXデザインdisplayたこ焼きForumHTMLlegend要素フロントエンドエンジニアアップルップルparticle飯田淳介長屋めぐみ謹賀新年熊谷佳紀幕張メッセcanvasマークアップエンジニア1年生作品展NTTドコモ東海うぇーぶスマホアプリまぼろしインターンシップドコモdocomoBloom*BlockFutureStation2011年度イマジンカップTeamNHNBloosumOhana尾花大輔東京ゲームショウ神戸ゲーム大賞アマチュア部門メールマガジンツインメッセ静岡静岡県ロゴマーク迎春Web制作合宿Muse画像をチェックボタンにする張山大祐JQueryたこ焼きパーティFacebook神戸国際展示場東京佐藤ねじみんなのICT第50回結果SHOWGAMETOKYO東京ゲームショウ2012ベースキャンプ名古屋Facebookページ長野IllustratorSVG第7回若年者ものづくり競技大会愛知県立芸術大学CustomSmilies絵文字円JOY!map卒業・修了制作展KtaistyleぬいぐるみのラパントライデントカレッジUntitled!!!!!!!!英国王のスピーチ卒業制作・研究発表会2011就職キルト展キルターズフェスティバル2011笈瀬本通商店街名古屋市中村区FLAVER3.0放課後のプレアデスSUBARU日本の四季中部国際空港GAINAXablogcmsGoogleロゴGATEDRAGONドラゴンゲート5月11日マーサ・グレアム鈴木プラネタリウムライアン・ウッドワード愛知淑徳大学みつけものMagnum北岡弘至伊達千代DTPの勉強部屋JAPANWORLDCUP3恵那市岩村プロジェクションマッピングバルサマントライデント合同企業説明会和歌山中華そば熊野三山大門坂那智の大滝アロチ本家丸高柏木祥太スパルタキャンプ岩出本店丸田屋本州最南端串本テーブル宇野剛志石原愛実ランチtable名古屋マークアップ勉強会八鬼山熊野古道マカベン名古屋市営地下鉄青空学区optgroup要素type属性紅茶専門店Liyn-anアイテムカンパニーkeygen要素datalist要素FLV第52回技能五輪全国大会button要素ネイルサロンマウア授業西岡克真AnimationAO特別授業加藤ひとみ山田拓生アイチータ結団式青山敬司中村健太道家陽介さかなや晴れやか嵐が如く第51回技能五輪全国大会フジ家55麺屋ココイチ高橋雅人カレーラーメン麺やOKWebデザイン演習あいちトリエンナーレ2013Rhizomatiks田代豊プレゼンThree.jsinspiredbyそこにいない。展PARTYPerfume芸術大学美術大学DesignergoogleGWDF81教室parseInt()parseFloat()concrete5栗山聡一備忘録10日でおぼえるLinuxサーバー入門教室最優秀賞list-style-typeNTTドコモ東海支社NCF2013卒業展list-itemモテ声ボーダージョルテKDDIHTML5スマートアプリ&クリエイティブコンテスト木下健太郎東京ゲームショウ2009FITCCREAMごはんとFlashマークアップ演習ロゴ公募教育勉強会山崎デザイン事務所コピーライティング小野裕子#infoeduマクロマリオネット映画のオープニングdotFesHCDプロセスブランディングAutuminKyotowonderfl閉会式ゆるキャラFlash-Gamesスーパーエレメンツ長谷川恭久森川眞行会社見学鎌倉日本電子専門学校箱根合宿横浜中華街NIKE慶華飯店新横浜ラーメン博物館横浜デジタルアーツ専門学校3校合同発表会情報デザイン教育勉強会ヨウイチイラストコンテストデュエル・マスターズペルソナ/シナリオ法おかだよういちクリ博就職フェスタペルソナ&シナリオ法浅野智カラーストリートビューCMS特集ソバットシアターコマ撮りアニメ電信柱エレミの恋学生参加アイディグラフィックスガンダムグラフィックデザイン今井佳子ウサビッチカナバングラフィックスヱヴァンゲリヲン新劇場版:破西田幸司国家検定インターネットスキル認定普及協会ActionScript食品サンプル富岡聡学科旭食品サンプル製作所入賞後期大富豪スコアシートオリエンタル人喰いの大鷲トリコ是枝裕和監督PHP勉強会ITホワイトボックスJAPANインターネットクリエイティブアワードYahoo!世界のCMフェスティバルナゴヤデザインウィーク2009UNIQLOCKanimationescalatorアニメーションMozoramaモーション演習CG・イラストコンテストギレン総帥LPO第4回アックゼロヨン・アワードAndThenみの治商店Twitterグラフィクデザインポスターデザイン・コンペディション三蔵プチ・フレーズ愛知商業高校GAUltimate商店サイト制作CODE名古屋クリエイターフットサルITCIRCUS柴乃櫂人広島弁iPhone4AndrioidWEBサイト制作者のためのHCD(人間中心設計)の理解笈瀬本通名古屋グランパスチタハン10名チャリ名駅経済新聞Lazy大西健太田中稚妃呂横浜デジタルアーツLoadSlimbox2XJISウェブリテラシー協会GoogleAnalytics石井研二小林信次増田悟名古屋サイト改善研究会中級編CODEポスターデザイン・コンペティション中部国際空港株式会社カメラワーク株式会社アクアリングブラザー工業株式会社シナリオペルソナナゴヤ武将都市名古屋おもてなし武将隊武豊アニメーションフェスティバル道頓堀新世界ネスカフェゴールドブレンド大沢たかお求人TAFFWCAN46ウェブリテラシー協会第一回セミナーSalsaWasThere夢プロジェクト2009・成果報告会IA2010キックオフセミナー福みつ餃子浜松フナ犬ポートピア名古屋名古屋メディアボンドアクセシビリティサーバーIA金シャチ商店街商店街1→10design細川太郎タロヲYORKE.ビジュアルデベロップメント松坂屋美術館スタジオジブリ・レイアウト展知多半島プロ野球unoplus技能五輪予選伊藤頼子プロトコル分析WEBサイト制作者のためのHCDの理解8341-3:2010堀川友章2020アカデミー賞企業賞第3回専門学校HTML5作品アワード株式会社COTSパラサイトem信州未来アプリコンテストvhvwremOriginalTshirt.st進級制作メンバーズ三瓶2019年MILK池田泰延フロントエンドマイクロインタラクションICS福田将也小林隼大ReDesigner第4回専門学校HTML5作品アワード2021年令和3年Studentグッドパッチノマドランド2021アカデミー賞TypeScript神谷友理恵松本健太海老江優太Frontend株式会社メイクリー小林健人中村享介ニシヤマナガヤ業界研究授業名古屋市名東区未完美術館令和2年classes企業見学株式会社MTG2020新卒線の群生新入生オリエンテーションわたし、定時に帰ります。LIGCBCTBSFigmaツールメーカー・ブランドコーヒー用品前川元成NextDoor平成31年あけおめUIデザイン牧野史門株式会社サイバーエージェントSTUDIO髙橋茜音eat足立丈也、平子卓哉、増田隼也信州アプリコンテストゼロライフスタイルmarkerフェンシング株式会社LIGHTzスポーツアナリティクスエペ仙直茂森株式会社アンティー・ファクトリーPhotoshopCS6祐司髙橋茜音コンテストソレコン☆ポスコン2019原田ゆい穂刈謙亮サードスコープ清風情報工科学院岐阜協立大学HOPTERTECHSCHOOLスタメン伊藤愛Mapnewarray.map()ReDesignerforStudentザ・ホエールエブリシング・エブリウェア・オール・アット・ワンス辻さん後藤さん働くの学び舎福田さん桝田さんトライデントコンピュータ専門学校Webデザイン学科卒2023アカデミー賞Webサイト起業家甲子園24年卒株式会社マベリカ鶴田信博スプレッドシートScriptAppsいいねボタンGAS加藤さん25年卒進級制作展卒業研究制作展トライデントコンピュータ専茂吉さんDemoDay前野拓馬Element.prepend(),Element.append(),キャリア教育オープンカンパニーElement.after(),Element.before(),エスケイワードブログテーマElement.insertAdjacentHTML(),トライデントコンピュータ専門学校第6回専門学校HTML5Y.O23年卒@include@mixin@import印刷CSSSCHOOLTECHHOPTER@useSass山本智香子杉山知央エンタメイロコト特別企画『謎解き~7つの学科の謎を解け~』contents第5回専門学校HTML5作品アワード2022年後藤拓也マネーフォワード2022アカデミー賞Webサイト令和5年卒業制作展卒展進級制作展名古屋2022トライデントコンピュータ専門学校合同企業展就職活動NICT賞2023年新年あけましておめでとうM.S小林明日香GrowGroup優秀賞コピーライタートライデントコンピュータ専門学校Webデザイン学科フドライブ・マイ・カーあいのうたコーダ夏休み夏季閉館日2022株式会社アビリブ森健安藤さん風呂谷さん斉藤洸貴cyma合同制作合宿専門士学位出席率合同制作合宿WebプログラマーWebディレクターWeb制作のおしごと懇親会職業実践専門課程レスポンシブWebデザインバイドゥ平野健太郎ポートフォリオアイデア帳採用担当者の心に響くUI仕事ウェブアートデザイナーうぇ~~~~~~~ぶワイヤーフレーム坂本邦夫原一浩PlunkerJSFiddleJSBinCodePenCodeplyjsdo.itクイズ駅麺通り涼麺プログラムクイズAO入試坂本貴史制作実績津田直明2016平野秀幸IA/UXプラクティス河地芳明沼田啓助カークスヴィル高校14夏麺フェア木村哲朗森田霞Highlighter竹中民男八木智章Velocity.jsScrollMagicScrollmagicSyntaxCrayon名古屋駅麺通りNCF2014新年のご挨拶親孝行CSS3&jQueryで作るスマートフォンサイトUI図鑑2015年度新入生WF1でBLOGWebアクセシビリティアクセシビリティからはじめる、WebサイトのUXデザイ源賢司Dmm.com岡田陽一FlexibleBoxアクティビティシナリオKaizenグロースハッカーグロースハックPlatformFlexbox味仙熊﨑彩第53回ワクワク建設タウン建設経営者倶楽部クリスマス東京コスモCGスペシャリスト松田洋樹3DCGIndependenceDay:堀川志維安藤NCF2017友章WWW(WelcomeWebデザインスペシャルデー北川パーヤンWorld)toミス・ユニバース・ジャパン岐阜大会フォントおじさんTOCAWARDS出身高校D3.jsTableof関口浩之安藤志維Contents期末テスト脆弱性なんと読む?沖縄県第56回GOOculuspicturesourceEC事業第56回技能五輪全国大会srcsetVRカルタ東京ゲームショウ2018JIHYEHEOホ・ジヘ韓国藤井英一冨田伴成出前授業青山高校新城高校スクラップブック夏休みの課題醐りょういな世驛麺通りインスタグラムInstagram美大芸大料理再進学学園祭タカガールサイト水曜日のカンパネラプラネタリアンResurgence日清食品グループジムナストコロン情報系Monaca学生作品集NodeListHTMLCollection山川綾那鈴木雄太スタジオディテイルズ服部友厚株式会社エイチーム梅澤朝樹ノートPC貸与尾鷲高校衣台高校佐藤洋介ターミナルお母さんの二度見展マイクロソフトWebプログラミング初級講座appendChild()SyntaxHighlighterv4.0.1学校ProxyWCAN2017Spring麺の匠

メールフォーム

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

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