LOG IN

#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ならではのアニメーションを作ってみました。 部分的に位置を変え

#5 SVGアニメーションを作ってみよう

先日福岡で開催された「!important #05 -コーダー & フロントエンドに贈るハンズオン祭り」で、SVGのアニメーションのハンズオンをうけて、その復習や応用ができたらいいなと思って今月はSVGをテーマにしていました。そのときの感想はこちら「!important #05 に参加しました 」でご覧ください。それでは今回の内容を振り返ります。 まずはソースを見てみる SVGがどんなコード

#4 レスポンシブにおけるナビゲーションの最適な実装を考える

結論からいうと、最適と思える実装はまでたどり着けずでした。 どんなことをしたのか はじめに、ドロワーのようなナビゲーションをプラグインを使わずにjQueryで一から実装ををすることで、どういう仕組みで動いているのかを見てみました。ボタンをクリックすることで、開閉されるメニューの仕組みがよくわかりました。 ということで、すっかりjQueryの勉強会に(