N.Y.C. Tech Library

ホームページの制作テクニックや日常のハックを綴る

「 投稿者アーカイブ:Yamamoto Naoki 」 一覧

Gulp.pipeで特定のファイルを除外する

gulpで特定のファイルをpipeから除外するテクニック【環境晒し】

2019/05/22   -WEB制作

ご無沙汰してます! 最近はgulpとwebpackの勉強をしてnode.jsで開発環境を作ってました。 EJS、SCSS、JS(ES6)のモジュール化、文法チェック、コード自動修正、コード圧縮、画像圧 …

cssBattle

CSS Battleをやってみた!

2019/04/21   -WEB制作, レポート
 

CSS Battleとは Kushagra Gour氏と Kushagra Agarwal氏が作ったCSSコーディングの腕前を競うゲームです。 プレイヤーは指示された図形をできるだけ短いコードで表現し …

vueアイキャッチ

Vue初心者が和暦計算してみた【令和対応】

2019/04/01   -WEB制作
 ,

新元号が発表されましたね 新元号は「令和」だそうです。 大きな節目を前に気分新たな方も多いのでは? 私もこの節目をスタートダッシュにしたいと思っています。 さて、本題。 最近Vueの勉強をしていて、せ …

オープンセミナー広島2019に行ってきました

2019/02/23   -レポート

オープンセミナー広島2019に行ってきたので、アウトプットの練習もかねて個人的な備忘録です。今回のテーマは「学び方 hacks」ということで、学びに付いて学べるセッションが目白押しでした! オープンセ …

【CSS設計】今さら聞けないBEMの基本【初心者・入門】

2019/02/18   -WEB制作
 

今回は今さら聞けないBEMの基本ということで、CSS設計にまつわるエントリです。 「この要素にはなんてクラス名をつけたらいいんだ・・・」という悩みはWebコーダーが必ずぶつかる課題だと思います。 その …

【lazyload】lazysizesの使い方 – 拡張編

2018/12/17   -WEB制作
 ,

javascript 前回はlazysizes.jsを使った基本的な遅延読み込みをご紹介しました。 連載中にバージョンが4.1.4から4.1.5になってました、メンテされてるっていいですね。 今回はl …

【lazyload】lazysizes.jsの使い方 – 基本編

2018/12/03   -WEB制作
 ,

javascript 前回は画像の遅延読み込み(lazyload)の概要をご紹介しました。 今回は画像の遅延読み込みを実現するlazysizes.jsの基本的な使い方をご紹介します。 準備 npmでイ …

【lazyload】画像の遅延読み込みのメリット・デメリット

2018/11/26   -WEB制作
 , ,

画像の遅延読み込みとは 簡単にいうと、画面外にある画像の読み込みを抑制することです。 スクロールしてimg要素が画面内に入ったときにクライアント側でsrc属性を書き換えて読み込みを開始します。 画像の …

ストロークフォント風アニメーションを作ろう

2018/10/01   -WEB制作

前回はsvgラインアニメーションをご紹介しました。 今回はsvgアニメーションを使ったストロークフォント風アニメーションです。 See the Pen lineAnimation by vivus-i …

svgラインアニメーションを使おう

2018/09/17   -WEB制作

さて、皆さんsvg使ってますか? 少しとっつきにくいsvgですが、使えると表現の幅が広がります。 今回は、簡単に使えるsvgラインアニメーションをご紹介します。 svgの詳しい仕様についてはW3Cのド …