カテゴリー別アーカイブ: Webプログラミング

テキストをポップアップで表示できるプラグイン「Featherlight.js」

ポップアップ

こんにちは、ウェブラボクリエイターズメモです。 今回は、テキストもポップアップで表示できるlightboxを実装するプラグイン「Featherlight.js」を紹介します。 画像だけではなく、テキストやリンクなど、幅広いコンテンツをポップアップとして表示したい場合に活躍してくれるプラグインです。   デモページはこちら。 →DEMO  …続きを読む

  • このページを共有する

【脱jQuery】.load()で別ページから共通パーツを読み込むのをネイティブに書き換え

d7d460796bf7d41a40f47c8cf29b708e_s

こんにちは。なかなか梅雨が明けずバイク乗り、自転車乗りの方はロードバイクに跨がれない季節を迎えていますが、今回はroadではなく、loadです。ウェブラボクリエイターズメモです。   過去の記事で「jQueryで外部にあるHTMLを読み込む」について書きましたが、 今回はそれをもっと簡単に記述できるjQueryの「.load()」メソッドと、ネイテ…続きを読む

  • このページを共有する

スマートフォンのブラウザでもPDFを閲覧できる「PDF.js」

スマートフォンのブラウザでもPDFを閲覧できる「PDF.js」

こんにちは、ウェブラボクリエイターズメモです。   皆さんはスマートフォン上でWebサイトからPDFファイルを閲覧するとき、操作が手間に感じたことはありませんか?     当たり前のように使用しているPDFですが、PDFの閲覧には専用のビューアが必要なため、一部の環境では閲覧に手間取ってしまうことがあります。   特に…続きを読む

  • このページを共有する

HTMLで組んだテーブルをエクスポートできるjQueryプラグイン「TableExport.js」

tecmemo1905

こんにちは、ウェブラボクリエイターズメモです。   今回はHTMLで組んだテーブルをエクスポートできるjQueryプラグイン「TableExport.js」を紹介したいと思います。 xlsx、csv、txtなどの形式にエクスポートできる非常に優れモノです。   まずは以下から一式ダウンロードしましょう。   →GitHub &n…続きを読む

  • このページを共有する

ドラッグ&ドロップでファイルをアップロードできるプラグイン「Dropify.js」

tecmemo190420

  こんにちは、ウェブラボクリエイターズメモです。 今回は、フォーム内にファイルのアップロードボタンを実装する際に、ドラッグ&ドロップでファイルをアップロードできるようになるプラグイン「Dropify.js」を紹介します。   デモページはこちら。 デフォルトのアップロードボタンでは、参照ボタンをクリックしてファイルを選ぶ必要があ…続きを読む

  • このページを共有する

「売れる」Webサイトの色彩設計

e6773cd0fee5bafc1a6ce28a05353fb0_s

見やすいWebサイト、居心地の良いWebサイト、使い勝手の良いWebサイト……Webサイトの印象を決める要素は、掲載されている情報そのものやコピーワーク、コンテンツの配置など様々ですが、色彩もそのうちの一つです。色彩の微妙な違いだけでも、Webサイトの印象は大きく異なってきます。 皆さんは、Webサイトに使う色をどのように決めていらっしゃるでしょうか? &n…続きを読む

  • このページを共有する

流行りの流体シェイプを作ろう

11111

こんにちは、ウェブラボ技術メモです。 今回は今年流行している、「流体シェイプ」についてご紹介します。   ■流体シェイプの使われているWebサイト 2019年に流行するWebデザインの手法に流体シェイプがあるのはご存知ですか? 以下のWebサイトでは流体シェイプが使われているWebサイトをまとめているのでぜひ参考にして見てください。 参考Webサイ…続きを読む

  • このページを共有する

iOS一部バージョンのSafariで高さを取得するときに気を付けたいこと

iOS一部バージョンのSafariで高さを取得するときに気を付けたいこと

こんにちは、ウェブラボクリエイターズメモです。 今回は、iOSの古いバージョンで表示検証をする際に気を付けておきたいことを備忘録として残します。   スマホでグローバルナビゲーションをハンバーガーメニューとして表示させることはよく使われる手法かと思います。 その際にメニュー内のコンテンツが多いと、スマホ画面の高さを超えてしまうことがあります。 &n…続きを読む

  • このページを共有する

誰でも簡単に使えるスクロールに連動するエフェクト「AOS」

tecmemo1804

こんにちは、ウェブラボクリエイターズメモです。 今回は、HTML、CSS、jacascriptに関する知識がほとんど無くても簡単にスクロールに連動したエフェクトを実装できてしまう「AOS」を紹介したいと思います。 「AOS」はjQueryが不要なjavascriptのプラグインで非常に軽量であり、多機能です。 導入もとても簡単なので、「エフェクトをいちいち作…続きを読む

  • このページを共有する

可愛い!思わず使いたくなるSVGアニメーション

blog

こんにちは、ウェブラボ技術メモです。 今回は、最近可愛いなぁ〜と思ったSVGアニメーションの紹介をしたいと思います。   参考サイトはこちらです。 このWebサイトはフリーランスのデザイナーさんが運営しているcodropsというWebサイトの作品の一つです。 イラストも素敵ですが、主張しすぎないSVGを使ったアニメーションがいいですね。 私も早速使…続きを読む

  • このページを共有する