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

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

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

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

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

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

検索フォーム
プロフィール

担当: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」終了しました。ご来場ありがとうございました!
「うぇ〜〜〜〜〜ぶ!!」終了。ご来場ありがとうございました!
<コンテスト>
「第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回技能五輪
<若年者ものづくり競技大会>
第11回若年者ものづくり競技大会 2日目&結果
第9回若年者ものづくり競技大会2日目(競技日)
第8回若年者ものづくり競技大会2日目
第7回若年者ものづくり大会
第6回若年者ものづくり大会2日目
第5回若年者ものづくり大会
第4回若年者ものづくり競技大会閉会式
月別アーカイブ
タグリスト 改

トライデントコンピュータ専門学校Webデザイン学科業界研究WCAN技能五輪ウェブデザイン職種ウェブデザインWebサイト若年者ものづくり競技大会映画2013ポートフォリオ名古屋ECCコンピュータ専門学校Webデザイン学生ブログWinter2009Webサイト制作2011WordPress1年生進級展技能五輪全国大会JavaScriptかっぱ商店街礒田優入学式2014オープンキャンパスa-blogライトニングトークアクアリングcms卒業制作展WebNagoya矢野りんWordpress瀬川大勝体験入学CGイラスト学科石黒雄介Web制作会社面白法人カヤックSummer若年者ものづくり大会Autumn合同企業展卒展ホームページ・ビルダーアクセス解析卒業制作CSSテンプレート作成ウェブデザイン技能競技大会大阪第48回技能五輪全国大会in名古屋駅東京研修20122010学生インタビューHCD佐藤歩HTML5miniGIOIIJ杉本拓也JapanAdobe2015ココストアhtml5ウェブデザイン技能競技会FlashあいちカレーラーメンコンテストプロジェクトWebクリエイター能力認定試験夏休み田中睦翔セントレアサイバーエージェント上村水月99eagleラーメンWebデザインギャラリー閉館日gifアニメNEXT専門学校成田篤紀COMMUNICATION愛知県BananaAdトライデント祭り水野裕太CentOSSpring夏季閉館日企業訪問制作合宿人間中心設計グリッドレイアウトウェブデザイン技能検定Googledisplay:grid2018情報デザインフォーラムGridLayoutマール北濱大輔ブログパーツWebワークショッププレゼンテーション学生CSS3jQuery情報デザインフォトアルバムForumlabel要素form要素DTPWORLDたこ焼きWordCampスマートフォン名古屋開府400年祭AWARDMarkupF-site豊田市美術館アサココ!ディプロスfieldset要素導入授業UXtextarea要素茂森仙直マークアップエンジニア企業課題グループ制作Appleparticleフロントエンドエンジニア飯田淳介2008林田実樹幕張メッセ鷹野雅弘Yahoo!Japancanvasまぼろし情報デザイン基礎select要素output要素option要素愛知県選手団input要素長屋めぐみWebリテラシー1年生作品展うぇーぶスマホアプリStoreNTTドコモ東海legend要素Advent就職活動名古屋市科学館会社訪問卒業式トライデントコミュニケーションデザインワークショップ阿部淳也静岡ポートフォリオサイト笈瀬本通りイラストマップメ~テレ名商連知多みるく熊谷佳紀産学協同戸田芳裕Analyticsナゴヤドーム中日ドラゴンズビジュアルエディタWEBサイト制作者のためのHCDの理解in名古屋Plugin堀尾真衣トライデント合同企業展写真作品集WordFesウェブアクセシビリティモリサワSEOカリキュラム5T(ファイヴティー)和みCMSCalendarCSSNite空気人形レイアウト塚本碧ワークショップ真鍋大度カメラFICC岩手県モンキーワークスBoxLikeiPhone結果発表jbstyleアンティー・ファクトリー鈴木優太2017出張講座初期設定学習信州アプリコンテスト[ゼロ]WebデザイナーアプリコンテストRunstant沖縄株式会社LIGドラマ進級展水野怜美謹賀新年サーティファイ久保怜也ヨウイチペルソナ/シナリオ法情報デザイン教育勉強会ウェブDeBLOGイラストコンテストデュエル・マスターズフォントおじさん山崎デザイン事務所スーパーエレメンツ関口浩之ミス・ユニバース・ジャパン岐阜大会長谷川恭久コピーライティング浅野智新横浜ラーメン博物館横浜中華街箱根合宿森川眞行慶華飯店NIKEThereThenAnd会社見学鎌倉小野裕子安藤志維堀川友章ペルソナ&シナリオ法クリ博就職フェスタ日本電子専門学校横浜デジタルアーツ専門学校3校合同発表会おかだよういちFITCITホワイトボックスPHP勉強会大富豪スコアシート東京ゲームショウ2009世界のCMフェスティバルYahoo!ストリートビュー安藤JAPANインターネットクリエイティブアワード人喰いの大鷲トリコ是枝裕和監督LPO友章第4回アックゼロヨン・アワードギレン総帥UNIQLOCK志維ナゴヤデザインウィーク2009堀川カラーWebアプリマークアップ演習マクロマリオネット映画のオープニングごはんとFlashCREAM教育勉強会ロゴ公募Was閉会式ゆるキャラブランディングNCF2017AutuminHCDプロセスdotFesFlash-GameswonderflKyoto#infoedu夢プロジェクト2009・成果報告会1→10design細川太郎タロヲ商店街ペルソナシナリオ柴乃櫂人広島弁iPhone4金シャチ商店街名古屋メディアボンド伊藤頼子プロトコル分析鈴木雄太ビジュアルデベロップメントYORKE.アクセシビリティサーバーIAITCIRCUSスタジオディテイルズみの治商店Twitterターミナルグラフィクデザイン三蔵プチ・フレーズUltimate学校商店サイト制作ポスターデザイン・コンペディションCODEチタハン10WEBサイト制作者のためのHCD(人間中心設計)の理解Andrioid名古屋グランパス服部友厚名古屋クリエイターフットサル笈瀬本通佐藤洋介WEBサイト制作者のためのHCDの理解技能五輪予選TAFFWCAN46出身高校AWARDS武豊アニメーションフェスティバル名古屋おもてなし武将隊D3.jsナゴヤ武将都市福みつ餃子IA2010キックオフセミナーCG・イラストコンテストウェブリテラシー協会第一回セミナーContentsof浜松TOCTableスクラップブック道頓堀梅澤朝樹知多半島衣台高校スタジオジブリ・レイアウト展松坂屋美術館山川綾那unoplus株式会社エイチーム尾鷲高校プロ野球大沢たかお求人新世界ネスカフェゴールドブレンド夏休みの課題ポートピア名古屋フナ犬ノートPC貸与SalsaescalatorFLEXFLASHあけおめ株式会社サイバーエージェントCollegeNightコーヒー用品メーカー・ブランド平成31年MAX桝田草一Figma愛知県美術館アンドリュー・ワイエスデザインツールUIデザインデザイナーのためのプログラミング入門PHP牧野史門Sakae佐藤可士和cymaプレゼン演習ActionScript基礎HTML+CSS基礎EC事業西村真里子TAFF'09広告批評WCAN×CSSNite造形基礎斉藤洸貴サムライTEXTURE中村勇吾CS4前川元成NextDoorデッサンDesign鳥取砂丘鳥取髙橋茜音HPデザインデザインコンテスト01STUDIOLIGわたし、定時に帰ります。TBSCBCCONTESTTHE株式会社アンティー・ファクトリーカンファレンス松本渚ウェブデザイン部門PhotoshopCS6WEB祐司新入生オリエンテーション企業見学日本総合ビジネス専門学校XRAY2008WinterWebDirectionEast'082020新卒線の群生VideopuppetryASIASIGGRAPHデザインのへそ株式会社MTGArtlessNam丹下紘希QubibiW+KTokyo(+CRUZ)HelveticaSagmeisterStefan武豊町アートアニメーション期末テストActionScriptヱヴァンゲリヲン新劇場版:破西田幸司食品サンプル旭食品サンプル製作所学科北川パーヤンWebデザインスペシャルデー国家検定インターネットスキル認定普及協会韓国ホ・ジヘHEOカスタマイズセミナーヤノベケンジウルトラ展ライブペイント脆弱性なんと読む?黒い太陽富岡聡カナバングラフィックス後期to入賞ガンダムWWW(WelcomeMozoramaanimationGAアニメーションWorld)グラフィックデザインコマ撮りアニメ電信柱エレミの恋ウサビッチソバットシアターCMS特集今井佳子アイディグラフィックス学生参加JIHYE藤井英一Labuat沖縄県TokyopictureUTZOOMBlog「ヤノベケンジ-ウルトラ」展GO第56回sourcesrcsetVIIFANTASYFINALADVENTCHILDREN第56回技能五輪全国大会エイチームCOMPLETEワークスコーポレーションOculusUNIQLO荒俣宏出前授業ファルコム音楽フリー宣言CALENDAR青山高校イークリエイト冨田伴成新城高校音楽ゲームVRカルタセキュリティGENOウィルスデコクレ山村浩二日本ファルコム□□□switch東京ゲームショウ2018モーション演習増田悟中村健太道家陽介concrete5WebディレクターWeb制作のおしごと懇親会宇野剛志石原愛実ランチ栗山聡一備忘録F81教室トライデント合同企業説明会WebプログラマーGWDgoogleparseFloat()parseInt()Designerテーブルtable岩出本店丸田屋丸高アロチ本家スパルタキャンプ柏木祥太合宿青空学区名古屋市営地下鉄和歌山中華そば熊野三山熊野古道マカベン名古屋マークアップ勉強会八鬼山串本大門坂那智の大滝本州最南端10日でおぼえるLinuxサーバー入門教室坂本邦夫フジ家55河地芳明さかなや晴れやか麺屋ココイチ麺やOK沼田啓助高橋雅人カレーラーメン嵐が如くAO入試Webデザイン演習PlunkerCodeply第51回技能五輪全国大会JSFiddleプログラムクイズCodePenJSBinカークスヴィルIA/UXプラクティスジョルテKDDIHTML5スマートアプリ&クリエイティブコンテストモテ声ボーダー最優秀賞卒業研究制作展原一浩2016津田直明list-itemdisplay平野秀幸美術大学芸術大学NCF2013NTTドコモ東海支社list-style-type制作実績坂本貴史特別授業AOアップルップルPlatform森田霞グロースハック木村哲朗Kaizen源賢司夏麺フェアアクティビティシナリオHighlighterSyntax14インターンシップスマートフォンサイトUI図鑑グロースハッカーWF1でBLOGCrayon2015年度新入生竹中民男八木智章東京コスモ岡田陽一クリスマス熊﨑彩3DCGFlexibleBox味仙CGスペシャリスト松田洋樹Dmm.com第53回Velocity.jsScrollMagicScrollmagicWebアクセシビリティアクセシビリティからはじめる、WebサイトのUXデザイワクワク建設タウン建設経営者倶楽部UXデザインCSS3&jQueryで作る高校授業アイチータ結団式職業実践専門課程ネイルサロンマウアアイテムカンパニーtype属性レスポンシブWebデザイン紅茶専門店Liyn-an出席率学位西岡克真合同制作Animation加藤ひとみ山田拓生専門士合同制作合宿青山敬司ウェブアートデザイナーうぇ~~~~~~~ぶ新年のご挨拶親孝行麺の匠オリエンタルNCF2014平野健太郎採用担当者の心に響くポートフォリオアイデア帳名古屋駅麺通り第52回技能五輪全国大会バイドゥ仕事ワイヤーフレームoptgroup要素keygen要素datalist要素UIHTMLbutton要素jsdo.itあいちトリエンナーレ2013HTMLCollection英国王のスピーチ卒業制作・研究発表会2011appendChild()NodeListUntitled!!!!!!!!美大トライデントカレッジぬいぐるみのラパンKtaistyle卒業・修了制作展愛知県立芸術大学キルト展円JOY!mapマイクロソフトCustomSmilies絵文字Webプログラミング初級講座芸大ablogcmsGATEDRAGONドラゴンゲート愛知淑徳大学ゴールデンウィークGoogleロゴライアン・ウッドワードマーサ・グレアム5月11日みつけもの恵那市岩村北岡弘至伊達千代DTPの勉強部屋MagnumJAPANWORLDCUPプロジェクションマッピングバルサマン3日本の四季中部国際空港SyntaxHighlighterv4.0.1株式会社アクアリングブラザー工業株式会社カメラワーク石井研二ES6ES2015GoogleAnalytics中部国際空港株式会社WCAN2017Spring中級編名駅経済新聞名チャリProxy名古屋サイト改善研究会CODEポスターデザイン・コンペティション小林信次Flexbox横浜デジタルアーツECMAScript名古屋市中村区FLAVER3.0FLV8341-3:2010笈瀬本通商店街キルターズフェスティバル2011GAINAXSUBARU放課後のプレアデスXJISLazy大西健太田中稚妃呂Loadお母さんの二度見展ウェブリテラシー協会Slimbox2forプラネタリウム料理タカガールサイトMuse画像をチェックボタンにする張山大祐水曜日のカンパネラプラネタリアンIndependenceDay:ResurgenceJQuery第50回日清食品グループジムナストコロンベースキャンプ名古屋FacebookページSVG結果長野IllustratorWeb制作合宿たこ焼きパーティRhizomatiks田代豊たにぐちまことプレゼンinspiredbyそこにいない。展PARTYPerfumeThree.js木下健太郎駅麺通りクイズFacebookみんなのICT涼麺就職東京佐藤ねじSHOWGAMEツインメッセ静岡静岡県醐りょうロゴマーク敢闘賞迎春2011年度いな世メールマガジンOhana神戸国際展示場鈴木神戸Instagramゲーム大賞アマチュア部門東京ゲームショウインスタグラム驛麺通りドコモ尾花大輔Bloom*BlockBloosumMonaca学生作品集TOKYO東京ゲームショウ2012第7回若年者ものづくり競技大会TeamイマジンカップStationFuturedocomo再進学学園祭情報系NHN株式会社スタメン愛知商業高校

メールフォーム

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

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