LOG IN

#10 Gulpを導入してSassを使ってみよう

この記事は、2018年3月14日に開催した「#10 Gulpを導入してSassを使ってみよう」のレポートです。タイトルどおりGulpを導入してSassを使ってみました。 Gulpの導入 まずは、過去記事(Gulp - kurokolog - g.o.a.t)を見ながら、Gulpや関連する概要をおさらい。 Gulpの導入は、こちらのサイトを参考にさせていただきました。 絶対つまずかないGulp入門(2018年版) - インストールとSassを使う

#9 Bootstrap4を使ってみよう

先月1月18日に正式版がリリースされたBootstrap4。2月17日に開催されたAED Vol.2「webクリエイターのための情報交換所」でも、ミニセッションのうち前川昌幸さん(株式会社イー・ネットワークス)には「Bootstrap4のSass」、阿部正幸さん(KDDIウェブコミュニケーションズ)には「Bootstrap4 クイックレシピ」を説明していただきました。 聞いていると「簡単にできそう!」と思っ

#8 CSS Grid Layoutを使ってみよう

2018年一発目は、昨年話題となったCSS Grid Layoutを試してみました。基本的な内容は参考サイトとかぶるので、実践した内容と一部抜粋して振り返っていきます。 参考サイト CSS Grid Layout入門。対応ブラウザが出揃った新しいレイアウト仕様 - ICS MEDIACSSグリッドレイアウトで、サイズが違う複数のボックスをタイル状に配置する _ Webクリエイターボックス 参考サイトを見なが

#7 JavaScript再入門

今年最後の勉強会では、JavaScriptを勉強してみました。再入門と言えるほど掘り下げれてはないのですが、内容を簡単に振り返ります。 ECMAScript2015での新機能を確認 参考サイト ES2015(ES6) 入門 - Qiita ES6の新機能_ 「let」「const」宣言を調べてみた - Qiita JavaScript入門 - 基本構文の解説とクラス_関数リファレンス ECMAScript2015(EC2015)での新機能を確認してみました。ブラウザが

#6 SVGアニメーションをもっと使ってみよう

前回に引き続き、今回もSVGでアニメーションをもっと使ってみようということで、内容を振り返ってみたいと思います。 CSSを使ったアニメーションをさらに深める 前回はCSSanimationやkeyframesを使ってアニメーションはしましたが、SVGのアニメーションというよりは、CSSでただ動かしただけでしたので、SVGならではのアニメーションを作ってみました。 部分的に位置を変え