4/19(Fri)
2012年に株式会社LIGに入社。マークアップエンジニア、アシスタントデザイナーを経て今に至る。 「まだ俺本気出してないから」が口癖だったが、 -2014年 第一回HTML5カルタ大会 優勝 -2014年 第一回ZenHack 優勝 など、2014年辺りからようやく本気を出し始める。
CSSを「綺麗に書く」手法とは？ CSSは簡単に書く事ができる言語として認識されていますが、その簡単さゆえに、書く事はできても実は「綺麗に書く」ことが難しい言語でもあります。 綺麗に書く事ができないと、複数人のチームでCSSを記述することや、長期に渡ってWebページを運用することが難しくなってきます。 そこで今回は、ここ数年注目されている「CSSを設計する手法」を丁寧に解説していきたいと思います。 授業ではCSS設計とは何か、といった初歩から始め、CSS設計で有名な「SMACSS」「OOCSS」「BEM」の内容や、スタイルガイド、Sassを取り入れた手法、またそれらを実務導入する際の実践的な話までを解説します。 ※この授業は、HTMLの基礎・CSSの基礎を学んだ方を前提に進行します。 ※授業中に使うサンプルデータ（参考） https://github.com/seito2014/css_architecture_sample
Web製作会社LIGにおける、実際の仕事の様子、制作のフローなどについて解説します！ 題材として、昨年10月に実際にローンチしたプロダクト「LIGブログ」を用います。 また、本授業にはプロジェクトに実際に関わったWebディレクター、Webデザイナー、Webエンジニア（フロントエンド、バックエンド）、プロジェクトマネージャーらが参加します。 それぞれの視点から、業務で用いたコミュニケーション手法、ツール、考え方などをご紹介します。 加えて、LIGブログ制作中に実際に起きたトラブルとその回避方法、現場あるあるなど、LIGという会社の裏側もお見せする予定です！ご期待ください。 制作会社においてチームとして動く際、どんな風にプロジェクトを進めていくべきかわからなかったクリエイターやWeb担当者の方にとって、「プロジェクトの進め方、自分の役割や振る舞い方、効率のいい進め方」のヒントが得られる授業です。
今やスタンダードになりつつあるレスポンシブサイトについて、 その概要から実際にレスポンシブサイトを構築する際に注意したいポイントまでを解説します。 また、実際にWebサイトをレスポンシブ対応する際のメリット・デメリット、レスポンシブ化するのに有効なサイト、不向きなサイト、最低限押さえておきたいソースコードなどをご紹介します。 授業では以下の様な内容についても語ります。 ・PC,SPと2つサイトを作るのと、レスポンシブサイト1つ作るのじゃ大変さは変わるのか？ ・Googleが推奨してるけど、それはなぜ？ ・なぜレスポンシブサイトが必要なのか？
CSSをより高度に書けるメタ言語「Sass」について、基本的な事項を解説します！ 1.なぜSassが必要なのか 2.Sassを使うために必要な環境構築 3.Sassの基本操作 【1.なぜSassが必要なのか】 今なぜSassが必要なのか、CSSと比べてどのような有用性があるのか、を具体的な例を交えながら解説します。 【2.Sassを使うために必要な環境構築】 Sassを使うために必要な環境構築を解説します。 環境構築にはいくつか方法がありますが、今回は最も簡単な方法、アプリ「Prepros」を使った方法を解説します。 【3.Sassの基本操作】 実際にSassの基本操作をハンズオンで行いたいと思います。 ネスト、変数、簡単な演算辺りを扱う予定です。
Sassを使いこなして、 より効率的にCSSを書くためのテクニックをご紹介します！ 【授業で扱う予定の技】 1. 変数・応用 変数の機能説明と、実務で使う際は何を変数化し、どう記述しておくのが最適なのかについて 2. @extend 重複するスタイルを共通化する@extendの機能説明と、有効な使い道について 3. @mixin,@include CSSで関数をつくり、柔軟な記述を可能にする@mixin,@includeの機能説明と、有効な使い道について 4. @content メディアクエリの記述などを簡略化できる@contentの機能説明と、有効な使い道について 【その他時間があれば扱うかもしれない内容】 ・@each ・@for
「BEM」という設計を考慮したコーディングスキルを学びます。CSSを一箇所ちょっと修正したつもりが、意図しない部分にまで影響してしまった、クラス名が思いつかなかったり、開発者間で付け方が違ったりしてカオスになる、無駄な記述をしてしまい、CSSがどんどん膨れ上がってくるなどのトラブルを回避することに繋がる設計方法です。 ◆この授業を受けるにあたって必要な知識 ・HTML,5 CSS3の基礎（必須） ・OOCSSなどのCSS設計についてのざっくりした知識（推奨）
Google ChromeのDevToolsについて基礎を解説します。 DevToolsが扱えるようになれば、エンジニアはブラウザ上で効率的な開発が行えるようになるほか、エンジニア以外でもサイトのクオリティチェックを行う上で効率化を計ることが出来ます。 例えば… ・ブラウザ上でHTML, CSS, JSを操作できる ・ロード時間にどれくらいかかっているかがわかる ・Webサイトの改善ポイントがわかる などなど！ 本授業では以下の項目を扱う予定です。 ・Devtoolsとは ・Elements ・Console ・Network ・Resources ・Sources ・Timeline ・Pagespeed
