7/22(Mon)

今日の生放送

ほりぐちせいと

堀口 誠人

株式会社LIG フロントエンドエンジニア

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

担当の授業一覧 全10授業

【CSS設計】BEMを使った破綻しにくいHTML, CSSの書き方 -後編-

第2回 【CSS設計】BEMを使った破綻しにくいHTML, CSSの書き方 -後編-(60分)

2015年9月9日放送

CSS設計方法論の1つである「BEM」について、徹底的に解説します (今回は全2回ある内の2回目の授業です) ■こんな方におすすめです ・BEMは少し知ってるけど、詳しくはない ・BEMを実務で使いたいけど、上手くいかない ・BEM知ってるけど、実務で使うメリットあるの? ・一緒に仕事してる人がBEMを使ってるので、覚えとかないとヤバい ■今回はこんな内容をやります 前編では基礎的な内容を解説しました。 今回の後編では、それを実務で使うことを見越した、実践的な内容を解説します。 ・前回の授業のおさらい ・複雑なBlockを構築する方法 ・自分のプロジェクトに合わせてBEMを改良する方法 ・ディレクトリ構成の設計方法 など ■この授業を受けるにあたって必要な知識 ・HTML,5 CSS3の基礎(必須) ・OOCSSなどのCSS設計についてのざっくりした知識(推奨) ■前回からの宿題 + ひな形のデータ「homework」(http://bit.ly/1hr20P9)内のファイルに沿って以下3つをBEMでマークアップし、zipにしてメールで送ってください 1. ナビゲーション 2. カード 3. ボタン + できるとこまででOKです + 送り先:kadai@schoo.jp + 件名:【課題提出】BEMを使った破綻しにくいHTML, CSSの書き方 + 本文:とくになし(質問とかあれば書いて頂いても構いません) + 締切:9/4 23:59まで

【CSS設計】BEMを使った破綻しにくいHTML, CSSの書き方 -前編-

第1回 【CSS設計】BEMを使った破綻しにくいHTML, CSSの書き方 -前編-(60分)

2015年8月21日放送

CSS設計方法論の1つである「BEM」について、徹底的に解説します! (今回は全2回ある内の1回目の授業です) ◆「BEMとかCSS設計なんて知ってるよ!」という方もぜひ BEMは数あるアプローチの中でも、何かと誤解が多かったり使いどころが難しい方法論です。 ・SMACSSなど、他のルールと併用しようとしてカオスなことになってませんか…? ・命名ルール(Block__Element_modifier(key_value))を正確に理解していますか…? ・実際の開発でBEMを使うメリット、デメリットについて把握していますか…? 今回の授業ではこうした疑問を解消してまいります! ◆「BEM?なにそれ美味しいの?」という方もぜひ BEMの知識を身につけておくことで「長期にわたって破綻しないHTML,CSS」を書くことができます! このスキルを使ってコーディングすることで… ・CSSを一箇所ちょっと修正したつもりが、意図しない部分にまで影響してしまった ・クラス名が思いつかなかったり、開発者間で付け方が違ったりしてカオスになる ・無駄な記述をしてしまい、CSSがどんどん膨れ上がってくる などのトラブルを回避することが期待できます! また、BEMをはじめとする設計を考慮したコーディングスキルは、現場で大変必要とされているスキルです。 今や設計ができないと、大規模で複雑なWebサイトやアプリケーションはコーディングできません! ◆この授業を受けるにあたって必要な知識 ・HTML,5 CSS3の基礎(必須) ・OOCSSなどのCSS設計についてのざっくりした知識(推奨) ◆後編までの宿題 + ひな形のデータ「homework」(http://bit.ly/1hr20P9)内のファイルに沿って以下3つをBEMでマークアップし、zipにしてメールで送ってください 1. ナビゲーション 2. カード 3. ボタン + できるとこまででOKです + 送り先:kadai@schoo.jp + 件名:【課題提出】BEMを使った破綻しにくいHTML, CSSの書き方 + 本文:とくになし(質問とかあれば書いて頂いても構いません) + 締切:9/4 23:59まで

今日から使えるHTML5/CSS3/JSのシンプルテクニック15選

第3回 今日から使えるHTML5/CSS3/JSのシンプルテクニック15選(90分)

2015年2月21日放送

この授業は、下記スキルの方が対象です。 XHTML,CSS2:必須 HTML5,CSS3,Sass,jQuery:推奨(いずれも基礎レベル) ■HTML・CSS3・JavaScriptをまとめてスキルアップ スピーディーで完璧なコーディングをするために覚えておきたい以下15個の"ワザ"が身につきます。 ① 今どきの要素を上下中央寄せにするワザ その1 ② 今どきの要素を上下中央寄せにするワザ その2 ③ 今どきの要素を上下中央寄せにするワザ その3 ④ text-indent:-9999pxの上位互換的なワザ ⑤ PCサイトをタブレットやスマホで閲覧した時にちょい綺麗に見せるワザ ⑥ デバイズごとに快適な閲覧をしてもらうために設定すべきviewportのワザ ⑦ Windowsでweb-fontをちょっとマシに見せるワザ ⑧ CSSプロパティ”filter”で画像を加工するワザ ⑨ transformを使って楽するワザ ⑩ 矢印、ハンバーガーなどのアイコンをcssだけで表現するワザ ⑪ transitionやkeyframesを使ってCSSだけでアニメーションさせるワザ ⑫ アイコンとテキストが1pxズレてる…!とかいうときに5秒で揃えるワザ ⑬ ユーザーエージェントを利用してブラウザ&OSハックするワザ ⑭ select要素をデザインするワザ ⑮ input[type=“file”]要素をデザインするワザ  

HTML5基礎 -適切かつSEOにも強い書き方を学ぶ-

第2回 HTML5基礎 -適切かつSEOにも強い書き方を学ぶ-(80分)

2015年2月11日放送

今年W3Cから正式に勧告されたHTML5について、 「適切な文法で、かつSEOにも強い書き方」を解説します! 授業では、以下のような内容を盛り込む予定です。 ・SEOに特に重要なtitle,h1~6,meteタグの適切な使い方 ・section、articleタグのちゃんとした使い方 ・figure,asideタグなどのHTML5から登場した主要なタグの解説 ・dl,dt,ddタグなどのHTML5から仕様が変わったタグの解説 ■授業中の参考ページ一覧 「Microsoft、Googleを抑えてLIGが1位になりました!!」 http://liginc.co.jp/news/notice/report/70126 「HTML5KARUTA - 「HTML5カルタ」で覚えるHTML5の108つのタグ」 http://roadstohtml5.com/html5karuta/ 「HTML5 ドキュメントのセクションとアウトライン (MDN)」 https://developer.mozilla.org/ja/docs/Web/HTML/Sections_and_Outlines_of_an_HTML5_document 「HTML 5 Outliner」 https://gsnedders.html5.org/outliner/ https://chrome.google.com/webstore/detail/html5-outliner/afoibpobokebhgfnknfndkgemglggomo?hl=ja 「Google’s 200 Ranking Factors: The Complete List」 http://backlinko.com/google-ranking-factors 「Googleのアルゴリズムにおける検索順位に影響を与える200+個の要因のまとめ」 http://coliss.com/articles/build-websites/operation/work/google-ranking-factors-by-backlinko.html 「W3C Markup Validation Service」 http://validator.w3.org/ 「HTML5 Validator (WHATWG)」 https://html5.validator.nu/ 「Web Fundamentals」:ウェブサイト作成のベスト プラクティスを集めた用例集。 https://developers.google.com/web/fundamentals/ 「Web Starter Kit 」: Web Fundamentals の用例を応用して、ウェブサイトを一から作るためのフレームワーク。 https://developers.google.com/web/starter-kit/