フロントエンド

フロントエンド

スクロール連動でGIFのようなコマ送りアニメーション【GSAP ScrollTrigger】

スクロールするとキャラクターが動きます。こちらの方が見やすいかも。 See the Pen GSAP scrollTrigger animation chimmy by ayuko (@masyu) on CodeP...
フロントエンド

【CSS】aspect-ratioとgapでレスポンシブ対応のグリッドレイアウト

新しめなCSSプロパティのaspect-ratioとgapを使って、幅を変えても常に正方形を維持し、アイテムとガターの比率も維持するグリッドレイアウトを作りました。 See the Pen ガターが均一なカードレイア...
フロントエンド

【Vue.js】ページネーションしたらクエリパラメータをつけて同ページに再アクセス可能にする

ページ遷移を伴わない、jsで作成した一覧で、ページ送りしたときクエリパラメータ?page=nをつけたほうが良いというお話です。ブックマークなどから再アクセス可能で便利ですし、リロードやブラウザバックで1ページ目にリセットされてしまうような...
フロントエンド

【Luminous.js】軽量、jQuery非依存の画像拡大javaScriptプラグイン

サムネイルをクリックすると画像が拡大表示されるjsプラグイン【Luminous.js】の紹介です。画像ポップアップといえば、以下3つが有名なのではないでしょうか。 Lightbox2Fancybox - Fancy jQuery l...
フロントエンド

Create React Appで作成したアプリをgithubで公開する【npm gh-pages】

React.jsを学習してそのアウトプットとして簡単なWEBアプリを作ってサクッと公開したい。まずReactチュートリアルをやってみました。create-react-appというコマンドを利用してとても簡単にローカル環境ができて感動しまし...
フロントエンド

【CSS】ガターが均一なカードレイアウト(レスポンシブ対応)実装例

こちらの記事は古いです。もっと良い方法を以下で紹介しています。 display: flexを利用してレスポンシブ対応のカードレイアウトを作りました。アイテムの横幅、縦幅、アイテム間の余白(ガター)がいずれも相対指定の...
フロントエンド

jQuery UIのAutocompleteで入力補完(サジェスト)を実装

入力値にマッチした項目が表示され、入力候補を選択するとテキストフィールドに反映される入力補完(サジェスト)を実装する方法をご紹介します。jsライブラリであるjQuery UIのAutocompleteを利用します。 See t...
フロントエンド

【javaScript】for…in、for…of、forEachの違いと用途

ループの方法が多すぎるし、それぞれちょっとずつ違いがあって全然覚えられないためまとめておきます。 for...in ・列挙可能であればなんでもループできる・順不同であることに注意・オブジェクトのループ専用として利用した方が良い...
フロントエンド

javaScriptのオブジェクト指向(ES6)

ES6のオブジェクト指向の基礎的なところをまとめました。 クラスの定義、インスタンスの生成 Norimonoクラスを定義します。Norimonoクラスは定員を表すcapacityプロパティを持っています。 class N...
フロントエンド

javaScriptのオブジェクト指向(ES6より前の旧構文)

javaScriptのクラスの構文はES6から大きく変わって便利になりました。ES6の構文だけ覚えたいところですが、旧構文から覚えることでjavaScriptならではのプロトタイプベースのオブジェクト指向の理解が深まります。本記事ではES...
フロントエンド

parsley.jsで独自バリデーションを作る

フォームのフロントの入力チェックに欠かせないのがparsley.jsです。ビルドインのバリデーションだけだと基本的なものしかないので、独自バリデーションの作り方を記載しています。 バージョン parsley.js 2.3.13...
フロントエンド

jQueryでinputのvalue属性セレクタが効かない

久しぶりの投稿です。今回はJavaScriptのミニネタ。 明細のある入力フォームを作っていて、明細部分の商品名が重複していたらエラーとなるように、jsでバリデーションをつけたかったのです。目指すのは以下の画像のような感じ。 ...
フロントエンド

javaScriptでiOS風の電卓を作りました

javaScriptの勉強中です。何か作りながらのほうが楽しいので、電卓を作ってみました。 iOSやmacに標準装備されている電卓風にしてみました。 ただ、この電卓、いくつか動かない機能が……(^^;) +/-や小数点はちょっと面倒...
フロントエンド

【CSS】謎の余白の正体はmarginでもpaddingでもないアレでした

WEB制作会社に入社して6か月のド新人HTMLコーダーです。最近はCSSや開発者ツールにも少しは慣れてきて、問題があっても自分で解決できるようになってきました。しかし、最近「謎の余白」でハマった事件があり、ご紹介したいと思います。 ...
タイトルとURLをコピーしました