Clik here to view.
HTMLで組んだテーブルをエクスポートできるjQueryプラグイン「TableExport.js」
こんにちは、ウェブラボクリエイターズメモです。 今回はHTMLで組んだテーブルをエクスポートできるjQueryプラグイン「TableExport.js」を紹介したいと思います。 xlsx、csv、txtなどの形式にエクスポートできる非常に優れモノです。 まずは以下から一式ダウンロードしましょう。 →GitHub...
View ArticleClik here to view.
スマートフォンのブラウザでもPDFを閲覧できる「PDF.js」
こんにちは、ウェブラボクリエイターズメモです。 皆さんはスマートフォン上でWebサイトからPDFファイルを閲覧するとき、操作が手間に感じたことはありませんか？ 当たり前のように使用しているPDFですが、PDFの閲覧には専用のビューアが必要なため、一部の環境では閲覧に手間取ってしまうことがあります。...
View ArticleClik here to view.
【脱jQuery】.load()で別ページから共通パーツを読み込むのをネイティブに書き換え
こんにちは。なかなか梅雨が明けずバイク乗り、自転車乗りの方はロードバイクに跨がれない季節を迎えていますが、今回はroadではなく、loadです。ウェブラボクリエイターズメモです。 過去の記事で「jQueryで外部にあるHTMLを読み込む」について書きましたが、...
View ArticleClik here to view.
テキストをポップアップで表示できるプラグイン「Featherlight.js」
こんにちは、ウェブラボクリエイターズメモです。 今回は、テキストもポップアップで表示できるlightboxを実装するプラグイン「Featherlight.js」を紹介します。 画像だけではなく、テキストやリンクなど、幅広いコンテンツをポップアップとして表示したい場合に活躍してくれるプラグインです。 デモページはこちら。 →DEMO...
View ArticleClik here to view.
【jQuery】数字入力をアップダウンボタンで複数制御
こんにちは、ウェブラボクリエイターズメモです。 ここ最近、数字入力をアップダウンボタンで複数制御する機会があったので備忘録として残しておきたいと思います。 具体的な例を挙げてみると、ECサイトなどで商品の選択画面で 商品の種類は複数選択可 商品を全種類あわせて5個まで選択可能 個数をアップダウンボタンで制御 といったものを想定しています。...
View ArticleClik here to view.
【slick】スライド枚数の異なるスライダー同士の連携
こんにちは、ウェブラボクリエイターズメモです。 以前のクリエイターズメモでスライダーを実装できるjQueryプラグイン「slick」をご紹介しました。 このプラグインは用意されているオプションを設定するだけで実装も可能ですが、もう一歩踏み込んだカスタマイズをすれば、表現の幅がさらに拡がるでしょう。 そこで今回は、スライド枚数が異なるスライダー同士を連携させるカスタマイズをご紹介します。...
View ArticleClik here to view.
ブラウザごとの最小フォントサイズ一覧
こんにちは、ウェブラボクリエイターズメモです。 皆さんはブラウザによって､指定できる最小のフォントサイズがあるのをご存知でしょうか？ お恥ずかしながら今までどのブラウザも10pxだと思っていたのですが､ OSやブラウザごとで様々なんですね｡ たまにお客さんから、｢このエリアもっと小さくしてくれ～｣とお願いされることもあるのですが フォントが制約になってできない！なんてこともあります。...
View ArticleClik here to view.
ボタンごとに印刷エリアを変える
こんにちは、ウェブラボクリエイターズメモです。 ウェブページを印刷する時に「この部分だけを印刷できたらいいのに」と思った事はありませんか？ @media printやprint.cssを用いれば簡単に印刷用のスタイルが設定できます。 しかしこれらはページ全体にかかるスタイルの為、”Aのボタンを押すと任意のAの範囲を、Bのボタンを押すと任意のBの範囲を印刷する”といったような個別指定はできません。...
View ArticleClik here to view.
【CSS】ダークモードに対応する
こんにちは、ウェブラボクリエイターズメモです。 2019年9月にiOS13、Andoroid10がリリースされ、ダークモードが実装されました。 誰もが期待していた機能だと思います。夜間だと目に優しいし、消費電力も抑えられますね。 そこで今回はWebサイトのダークモードに対応について簡単に解説します。 実はCSSで簡単に対応できるので多少知識のある方ならすぐにできると思います。 実装方法...
View ArticleClik here to view.
マウスカーソルについてくる「マウスストーカー」の作り方とサンプル色々
こんにちは、ウェブラボクリエイターズメモです。 ネットサーフィンをしていると稀に見かける、マウスカーソルからキラキラが降り注いだり、マウスカーソルに何かがついてきたりするやつ。いわゆる「マウスストーカー」。 サイトのデザインにアイデンティティを持たせるだけでなく、マウスカーソルの見失い防止や、押せるボタンの強調などにも役立ちます！...
View ArticleClik here to view.
【CSS】蛍光マーカー風の装飾と、グラデーションの仕組み
こんにちは、ウェブラボクリエイターズメモです。 「文章を目立たせる方法」といえば、どんな方法が思いつくでしょうか？紙媒体だと「マーカー」が浮かぶ人が多いのではないでしょうか。 今回はそんなマーカーをWebサイト上でも表現する方法をご紹介したいと思います。それに伴い「CSSでグラデーションを表示する仕組み」についても詳しくご紹介したいと思います。 マーカーをCSSで表示する方法...
View ArticleClik here to view.
WordPressで画像をアップロードする方法
WordPressでは、記事の本文中に画像などのメディアファイルを挿入できます。 WordPress5.0より、これまでのエディタが廃止され、「Gutenberg」という新しいエディタに変更されました。 管理画面の見た目が変わったことで、操作に戸惑うユーザも増えているかと思われます。 2020年3月現在、最新のWordPressをインストールすると、必ずこのエディタを使用することになります。...
View ArticleClik here to view.
遅延読み込みの方法を見直してみる
こんにちは、ウェブラボクリエイターズメモです。 過去に「jQueryを利用して画像の遅延読み込みを行う」という記事を書きましたが、今一度遅延読み込みの方法を見直してみたいと思います。 この方法では、スクロールするたびに位置を計算して画像の表示を判断しており、正直あまり良い処理とは言えないものでした。 ですが、今のトレンドはIntersection Observer API（交差監視...
View ArticleClik here to view.
slickのフェードがIEでちらつくバグの対処方法
こんにちは、ウェブラボクリエイターズメモです。 先日、表題の件について解消することができたのでメモします。 実際にIE(Internet Explorer11)でのバグを再現したのでまずはDEMOをどうぞ。(2020年5月時点) DEMO IEで見てみると、上のスライダーが切り替わる瞬間にちらついていませんか？...
View ArticleClik here to view.
【CSS】記述量と表示速度を意識したCSSの書き方
こんにちは、ウェブラボクリエイターズメモです。 CSSを記述する時、意識せずに書いてしまうとどんどん記述量が増えていきますよね。 記述が多く複雑になるほど、メンテナンス時の手間が増え、ページの読み込み速度も落ちかねません。 そこで、CSSを記述する時に初心者が意識すべき点をまとめました。 初心者の方は是非ご覧ください。 基本的なCSS記述量の減らし方...
View ArticleClik here to view.
CSSの「mix-blend-mode」を使ってみる
こんにちは、ウェブラボクリエイターズメモです。 今回は、CSSだけでPhotoshopなどで画像を加工したように見せることができるプロパティ「mix-blend-mode」を紹介したいと思います。 まず、このプロパティでどんなことができるか見てもらう為にDEMOを作成しましたのでそちらをご覧ください。 →DEMO...
View ArticleClik here to view.
【CSS】Flexboxのspace-betweenで3カラム以上でもfleat:leftと同じような左詰めのレイアウトにする方法
こんにちはウェブラボクリエイターズメモです。 この記事のアイキャッチの様なカラムレイアウトを組む際、従来ではfloatを用いたりdisplay:inline-blockを用いて横並びにすることが多かったと思います。...
View ArticleClik here to view.
ダイヤルで回して値を調整できるプラグイン「jQuery Knob」
こんにちは、ウェブラボクリエイターズメモです。 今回は、ダイヤルで回して値を調整できるプラグイン「jQuery Knob」を紹介したいと思います。 早速ですが、このプラグインで何ができるか見てもらうためにいくつかDEMOを用意しましたのでそちらをご確認ください。 →DEMO このような綺麗なダイヤルの入力欄が作れます！...
View ArticleClik here to view.
CSSの「:target」擬似クラスでアンカーリンクの位置を強調する
こんにちはウェブラボクリエイターズメモです。 文量の多いウェブページなどにおいて、目次から特定位置に飛ばす構成よく見ますよね。 ただ、ちょっと複雑なページだとイマイチどこに飛んだのかわかりにくいこともあります。 そんなお悩みを持つあなた！ アンカーリンクから飛ばした先を強調して見せることができるCSS擬似クラス「:target」について解説します。 :target擬似クラスとは 使用例...
View ArticleClik here to view.
ページの読み込みを高速化できるCSSプロパティ「content-visibility」
こんにちは、ウェブラボクリエイターズメモです。 今回は、ページの読み込みを高速化できるCSSプロパティ「content-visibility」を紹介したいと思います。 まず初めに、このプロパティは全てのブラウザに対応しているわけでは無いので、以下の参考サイトをご確認ください。 →Can I use ご覧の通り、現状ではFirefoxやiOS...
View Article
