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

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を使ったアニメーションがいいですね。 私も早速使…続きを読む

  • このページを共有する

簡単な操作で画像を上書きできるプラグイン「Enable Media Replace」

tecmemo181126

こんにちは、ウェブラボクリエイターズメモです。   WordPress構築の仕事が増えてきて、どのような画面設計にすれば更新がしやすくなるのか考えるのが最近の楽しみとなっております。   さて皆さんはWordPress(以下WP)で、アップされている画像の内容を上書きしようと思ったとき、どうしていますか? WPにおいては、ローカル環境でフ…続きを読む

  • このページを共有する

「続きを読む」ボタンで要素の開閉を簡単に組込めるプラグインReadmore.js

readmore

こんにちは、ウェブラボ クリエーターズメモです。   近年、スマホの普及率もあがり、Webサイトを閲覧するときもスマホメインとなってきています。スマホでブログやまとめサイト等の記事を見ている時、文字ががずらっと並んでいてはあまり読む気にもならないですよね?ですが、短い導入でその記事が気になるのであれば、続きを読みたいと思いますよね!   …続きを読む

  • このページを共有する

手軽にアニメーションを実装できるanime.js

1809_co

こんにちは、ウェブラボ技術メモです。 最近、おしゃれなローディング画面が多くなりましたね。 そこで今回は、アニメーションが手軽に実装できる「anime.js」を紹介します。 まずデモページはこちら ■概要 様々なアニメーションが収録されたプラグインです。 種類はこちらをご覧ください。 また、animejsを使った作品がCODEPENで見ることができます。 見…続きを読む

  • このページを共有する