脱jQueryするための代替プラグインまとめ
数年前から唱えられているjQuery不要論。jQueryはプラグインも豊富にある便利なライブラリですが、動作が重いのも事実です。とはいえ、「プラグインも使用しているし、新規案件はまだしも既存案件での切り替えは難しい…」と…
AUTHOR
「永渕百合子」の記事一覧
「Shuffle.js」でソートした状態にURLを付与するjQuery
簡単にソート機能を実装することができるjQueryプラグイン「Shuffle.js」。今回は、このプラグインを使用した時に「ソートされた状態」にURLを付与する方法をご紹介します。 デモはこちら。 html [crayo…
CSS+jQueryでアニメーションを作成する際によく使用するTips集
CSSで簡単に作成できるアニメーション。数行のコードですぐに実装できるけど、ちょっとしたプロパティや記述方法を忘れてしまいがち…。そこで今回は、私がよく使うアニメーション関連のコードをまとめました。 各種animatio…
「background-size:cover」をjQueryで実現する方法
cssのbackgroundプロパティで使用できる「cover」という値は、画像の縦横比を保ったまま背景領域を全て覆うように自動で拡大縮小する便利なプロパティです。 ただ、この値を使うには画像を背景に指定する必要があり、…
jQueryでパラメータごとにCSVを読み込む方法
「大量のデータをリスト化したページを作成しなければならない」…そんな時、便利なのがCSVです。今回は、jQueryで複数のCSVファイルをパラメータごとに読み込む方法を紹介します。 ※CSVをjQueryで読み込む方法に…
jQueryでかんたん作成！診断テストの作り方
「○○さんはAタイプです。あなたも診断してみよう！」FacebookやTwitterでこんな投稿を目にしたことがありませんか？今回は、SNSでよく見かける診断テストをjQueryでかんたんに作る方法を紹介します。 デモは…
input要素やselect要素を制御するjQueryまとめ
検索やお問い合わせなどのフォームで使用されるinput要素やselect要素。条件が多岐に渡るほど、フロントエンドでの制御が必要になります。今回は、それらの要素を制御するjQueryをまとめました。 状態を取得する チェ…
SVGを実案件で使ってみて便利だったこと
2001年には既にW3Cから勧告されていたものの、ブラウザ側の対応が進んでいなかったため実案件では使いどころが難しかったSVGですが、IEのサポートポリシー変更などもあり、去年〜今年にかけて活用しはじめた方も多いのではな…
初めてWordPressのカスタマイズを経験して感じたこと
「html／cssでのコーディングはできるけど、WordPressのカスタマイズはできない」というデザイナーやコーダーはまだまだ多いのではないでしょうか。 それからデザインではWordPressを導入する案件が多いですが…
大分類・小分類の検索項目をタブで切り替えるUIの作り方
ECサイトなら商品カテゴリ、求人サイトなら職種など、膨大な検索項目をまとめる方法のひとつとして、タブで切り替えるUIが挙げられます。今回は、そんなUIの作り方をご紹介します。 デモはこちら。例として、汎用性の高い都道府県…
jQueryプラグイン「noUiSlider」をカスタマイズしよう！
数値の範囲を指定するレンジスライダーが簡単に実装できるjQueryプラグイン「noUiSlider」。レスポンシブにも対応しています。 ある案件でデザインを再現するにあたりカスタマイズする必要があったので、今回はそのカス…
カスタマイズしやすい！自分で作るjQueryモーダルウィンドウ
いまやWEB制作に欠かせないモーダルウィンドウですが、既存のプラグインを利用すると「やりたい表現があるけど、どこをどうカスタマイズすればいいかわからない…」という状況に陥ってしまった経験がある方も多いのではないでしょうか…
Google Chromeの検証機能でウィンドウサイズを確認する方法
サイト制作はスマホ対応が当たり前になっている昨今、レスポンシブサイトを作ることも増えていると思います。 そんなレスポンシブサイトを制作する際に重宝するのがGoogle Chromeの検証機能。これまでは検証機能を立ち上げ…
jQueryで比率計算をする方法
レスポンシブサイトをコーディングする際、「画像を背景に当てたdivの高さをどう指定すればいいかわからない…」「youtubeの埋め込み動画を横幅100%にしたいけど、縦が小さくなってしまう…」と困ったときに便利な、jQu…
jQueryで要素を上下中央に配置する方法（IE8対応）
「要素を画面の上下中央に配置したいのに、上手くいかない…」、そんな状況に陥ったことがある人も多いのではないでしょうか？ 今回ご紹介するのは、“要素の高さが決まっていない”、“IE8にも対応させたい”という場合に使えるjQ…
要素の出現確率を個々に設定するjQuery
先日、「要素を25%の確率で出現させる」必要があったのですが、「複数の要素から決まった個数をランダムにピックアップする」方法しか見つからず、「複数ある要素それぞれをランダムに出現させる」方法は見つからなかったのでメモして…
GOOD DESIGN EXHIBITION 2015
10/30（金）〜11/4（水）まで東京ミッドタウンで開催されている、GOOD DESIGN EXHIBITION 2015に行ってきました！ GOOD DESIGN EXHIBITIONとは、公益財団法人日本デザイン振…
2015年度社員旅行 レポートその3
いよいよ2015年度社員旅行レポートも最終回！今回は、仙台のドーナツカフェ「Cafe nijineco」さんをご紹介します。 仙台のドーナツカフェ「Cafe nijineco」 仙台市の企業支援センターのサポートを受けな…
2015年度社員旅行 レポートその2
8月12日〜8月14日の3日間、それからデザインは夏季休業でしたが、私は17日にコンサートに行く予定があったので「ライブ休暇」を使ってもう1日お休みを延長させていただきました。 この「ライブ休暇」は、音楽活動や文化的活動…
2015年度社員旅行 レポートその1
2015年6月25日〜27日の3日間、社員旅行で宮城県仙台市に行ってきました！ 仙台は弊社スタッフの佐山が在宅ワークをしていることもあり、それからデザインにとって何かと縁のある地です。 今年の社員旅行では、「とうほくあき…
- 1
- 2