ハンズオン内容

HTMLコーディングに欠かせないボックス要素の横並び。これまではfloatプロパティを使うのが主流でしたが、今CSS3の新機能「Flexbxox」が注目を浴びています。Flexboxを使うと、横並びはもちろん、整列、分布、縦並びといった豊富なレイアウトがfloatよりも手軽にできます。 本ハンズオンでは、

• どうやってFlexboxを使うのか？
• 案件でよく使うあのレイアウトはFlexboxでどうやって実現すればいいのか？

を一緒に勉強していきます。 事前に下記記事を読んでいただくと、より理解が深まります。

webデザイナー初心者でも始められるFlexbox入門 - ICS MEDIA

対象

基本的なHTML・CSSのコーディングができるwebデザイナー・コーダー

必要なもの

• ノートPC（MacBookまたはWindows） この講座は説明だけでなく、実際にコーディングを通してより理解を深める講座です。
• HTMLコーディングが可能なエディター エディターの種類は問いませんが、基本的な設定は済ませておいてください。
• Chromeブラウザ
• (可能であれば) Node.js ハンズオン後半の応用編として、Node.jsを使った効率的なコーディング方法を紹介します。可能であればNode.jsをインストールしてください。これまでインストールしたことがなければ、公式のインストーラーを使うと手軽です。https://nodejs.org/en/

日時

2016/10/15 (土) 13:00~18:00

場所

Stocker.jp / Space 東京都渋谷区桜丘町11-11 ライオンズマンション桜丘 403号室

Googleマップだと迷う方が多いため、JR渋谷駅「南改札」を出て「西口」、つまりバスターミナル側（ヒカリエとは反対側）に出て、下記ページをスマートフォンなどでご覧になりながらお越しください。

当日は30分前から開場しております。駅から約徒歩7分ですので、早めにお越しください。

会場までの道のり道のりはこちら Stocker.jp / Space

チュータープロフィール

鹿野壮

株式会社ICS所属のインタラクションデザイナー。九州大学音響設計学科でメディアアートを学ぶ。

Chrome Experimentsに選出されたHTML5製デザインツール「Particle Develop」やGoogle Play 2014年ベストゲームに選ばれたモバイルアプリ「パズ億～爽快パズルゲーム」を始め、モバイルアプリ開発やwebページ制作を専門とする。傍ら、セミナー登壇や技術記事執筆にて情報を発信中。

• Twitter
• ICS MEDIA
• Qiita

草野あけみ

世界史の高校教師から岐阜県立国際情報科学芸術アカデミー（IAMAS）を経てリクルート系列の制作会社でweb業界へ転身し、その後フリーランスとして独立。

以後10年以上HTML＆CSSコーディングの受託制作を中心に活動。2008年からはサポタント株式会社主催のセミナー講師を勤め、その経験を元に2013年翔泳社から『HTML&CSS標準デザイン講座【HTML5&CSS3対応版】』を出版。（2013年翔泳社コンピュータ書籍部門売上1位を獲得。）2015年に内容をHTML5&CSS3ベースに全面的に書きなおした改訂版を出版、好評発売中。

• Facebook
• Twitter