TECH BOX

Technology developer's blog

#sample codeの一覧

GridsomeでTypeScriptを使う

GridsomeでもTypeScript + リンター環境を構築する方法を紹介

吸着スクロールの実装

ドラムロールをウェブブラウザでも実現したい!そんな時に使える吸着スクロールの実装方法を紹介します。

独自スクロールの実装

いつかどこかで役に立つはず。独自スクロールの作り方も!

ファジィ理論 〜台形型〜

ファジィ理論の3回目。台形型は画像遅延や領域内に入ったかどうかの判定をしたりするのにとても相性が良いです。

ファジィ理論 〜三角形型〜

ファジィ理論の2回目。三角形型をの頂点を使うことで特定の位置に一番近い要素を取得することもできます。サンプルでは集中力をパーセントで表示しています。

ファジィ理論の概要と傾斜型

ゲームAIや洗濯機、冷蔵庫などで使われるファジィ理論。ウェブ制作とは縁がないと思いがちですが、仕様次第では有効に活用することができます

「EditorConfig」を利用してチーム内でのコーディングルールを統一しよう

複数人でコーディングルールを共有して効率をアップさせる方法

byteをKBやMBなど適切な単位に変換する

地味に忘れがちなbyteからKBなどへの変換方法

今すぐ使えるES6以降での配列やオブジェクトの書き方

今日から仕事で使えるちょっとした小技を紹介します

ページャリストの作り方

カレントページが常に左端の場合と、中央の場合のページャリストの計算方法を紹介

JSONの代わりにYAMLを使う

JSONだと長くなればなるほど可読性が落ちてくるので、YAMLを使ってデータを読みやすくしよう。

babelで書いたファイルをシェルやnpm scriptsで実行する

shellでJavaScriptファイルを実行させる時もbabelで書いて実行させることもできるんです。

npm scriptsを使ってグローバルのモジュール依存から脱却しよう

npm scriptsを使うと、グローバルにgulpなどをインストールする必要がなくなり、グローバル環境のCLIバージョンを気にしなくても良くなります

[Android限定]Chromeアドレスバーの色を変更する

Google Chromeのアドレスバー色を変更して独自の世界観を演出する(Android 5.0以降)

iframeやvideoをCSSだけでレスポンシブに対応する

アスペクト比が分かっていれば計算することでCSSのみでレスポンシブに対応させることだって可能です。

アスペクト比の求め方

画像サイズからアスペクト比を計算する

画像を特定のサイズにフィットさせる

JavaScriptで画像を特定の要素幅に対して比率そのままでフィットさせる

属性セレクタや疑似要素を使って無駄なタグやクラスの付与などを減らす

CSSの属性セレクタを使い、HTMLに無駄なクラスの付与を減らす方法

Gitリポジトリのバージョン別zipを作る

GitHubのようなリポジトリのバージョン別ダウンロードがサービスに存在しない場合、Webサーバを使って独自に作成をする方法

GoogleスプレッドシートとGoogle Apps Scriptを使って制作の効率化

スプレッドシートとGASを使えば捗ることもあります。

CSS3のみで時間差を使いアニメーションを作成する

複雑なアニメーションを考える時、動く物体単体だけではなく、要素を隠して時間差で作成するという考え方もあります。