脱jQueryするための代替プラグインまとめ
数年前から唱えられているjQuery不要論。jQueryはプラグインも豊富にある便利なライブラリですが、動作が重いのも事実です。とはいえ、「プラグインも使用しているし、新規案件はまだしも既存案件での切り替えは難しい…」と…
数年前から唱えられているjQuery不要論。jQueryはプラグインも豊富にある便利なライブラリですが、動作が重いのも事実です。とはいえ、「プラグインも使用しているし、新規案件はまだしも既存案件での切り替えは難しい…」と…
簡単にソート機能を実装することができるjQueryプラグイン「Shuffle.js」。今回は、このプラグインを使用した時に「ソートされた状態」にURLを付与する方法をご紹介します。 デモはこちら。 html [crayo…
CSSで簡単に作成できるアニメーション。数行のコードですぐに実装できるけど、ちょっとしたプロパティや記述方法を忘れてしまいがち…。そこで今回は、私がよく使うアニメーション関連のコードをまとめました。 各種animatio…
cssのbackgroundプロパティで使用できる「cover」という値は、画像の縦横比を保ったまま背景領域を全て覆うように自動で拡大縮小する便利なプロパティです。 ただ、この値を使うには画像を背景に指定する必要があり、…
「大量のデータをリスト化したページを作成しなければならない」…そんな時、便利なのがCSVです。今回は、jQueryで複数のCSVファイルをパラメータごとに読み込む方法を紹介します。 ※CSVをjQueryで読み込む方法に…
「○○さんはAタイプです。あなたも診断してみよう!」FacebookやTwitterでこんな投稿を目にしたことがありませんか?今回は、SNSでよく見かける診断テストをjQueryでかんたんに作る方法を紹介します。 デモは…
検索やお問い合わせなどのフォームで使用されるinput要素やselect要素。条件が多岐に渡るほど、フロントエンドでの制御が必要になります。今回は、それらの要素を制御するjQueryをまとめました。 状態を取得する チェ…
2001年には既にW3Cから勧告されていたものの、ブラウザ側の対応が進んでいなかったため実案件では使いどころが難しかったSVGですが、IEのサポートポリシー変更などもあり、去年〜今年にかけて活用しはじめた方も多いのではな…
「html/cssでのコーディングはできるけど、WordPressのカスタマイズはできない」というデザイナーやコーダーはまだまだ多いのではないでしょうか。 それからデザインではWordPressを導入する案件が多いですが…
ECサイトなら商品カテゴリ、求人サイトなら職種など、膨大な検索項目をまとめる方法のひとつとして、タブで切り替えるUIが挙げられます。今回は、そんなUIの作り方をご紹介します。 デモはこちら。例として、汎用性の高い都道府県…
数値の範囲を指定するレンジスライダーが簡単に実装できるjQueryプラグイン「noUiSlider」。レスポンシブにも対応しています。 ある案件でデザインを再現するにあたりカスタマイズする必要があったので、今回はそのカス…
いまやWEB制作に欠かせないモーダルウィンドウですが、既存のプラグインを利用すると「やりたい表現があるけど、どこをどうカスタマイズすればいいかわからない…」という状況に陥ってしまった経験がある方も多いのではないでしょうか…
サイト制作はスマホ対応が当たり前になっている昨今、レスポンシブサイトを作ることも増えていると思います。 そんなレスポンシブサイトを制作する際に重宝するのがGoogle Chromeの検証機能。これまでは検証機能を立ち上げ…
レスポンシブサイトをコーディングする際、「画像を背景に当てたdivの高さをどう指定すればいいかわからない…」「youtubeの埋め込み動画を横幅100%にしたいけど、縦が小さくなってしまう…」と困ったときに便利な、jQu…
「要素を画面の上下中央に配置したいのに、上手くいかない…」、そんな状況に陥ったことがある人も多いのではないでしょうか? 今回ご紹介するのは、“要素の高さが決まっていない”、“IE8にも対応させたい”という場合に使えるjQ…
先日、「要素を25%の確率で出現させる」必要があったのですが、「複数の要素から決まった個数をランダムにピックアップする」方法しか見つからず、「複数ある要素それぞれをランダムに出現させる」方法は見つからなかったのでメモして…
レスポンシブの一つの落とし穴として、「画像の問題」があります。 今回はその「画像の問題」とその解決方法をご紹介致します。 画像の問題とは? 「画像の問題」といきなり言い出した分けですが、さて画像の問題というと、ここは実際…
以前のWebは「PCで見る」というのが第一でありそれ以外の選択肢はありませんでしたが、 最近ではスマートフォンやタブレットの登場により、ユーザーの環境も様変わりし、PC以外の端末でWebをみるという人も増加傾向にあります…
HTML5やCSS3の普及やiPhoneやiPadといったPC以外の閲覧端末の登場でWEBの制作も大きく変わってきたと感じます。 WEBに携わる人間としは、「そろそろWEBフォントを使ってみたいな~」というところではない…
地図などを表示するページを作る際に、GoogleMapを読み込むといった事はよくやると思います。 サイトの雰囲気と違っていても、「仕方がない・・・」と妥協した、といった経験も少なからずあるはず。 実はGoogleMapは…
PAGE TOP