WEB – DESIGN REMARKS [デザインリマークス]

posted:2021年7月27日 JavaScript

JSのIntersection Observerを使ったスクロールアニメーションの作り方

WEB制作で「スクロールして要素が画面内に現れたらアニメーションする」という機能はとても頻繁に使います。今回はスクロールアニメーションの作り方で、JavaScriptの「Intersection Observer AP続きを読む

posted:2021年5月6日 E-Commerce

ECショップを作ろうとしたらベイス(BASE) とストアーズ(STORES) の2つが候補に挙がるでしょう。しかし、両方とも同じぐらい手軽で使い易いので、違いが判らずどちらを選ぶべきか迷う方も多いと思います。今回続きを読む

posted:2021年3月13日 HTML

htmlのSVGを使えば、テキストを波状や円形にできます。 SVGですがベクターデータではなくテキストデータなのでフォントを使ったりCSSで装飾することも可能です。 SVG textPathを使った実際のサンプルまずは続きを読む

posted:2021年3月7日 CSS

CSSだけでテキスト文字にグラデーションカラーを付ける方法をご紹介します。コピペで使えるコードもありますので、ぜひ参考にしてください。グラデーション文字のサンプルここに実際のサンプルを用意しました。１、普通にグラ続きを読む

posted:2021年3月5日 WEB

Google Fonts(グーグルフォント)にマテリアルアイコンが登場しました。 Google Fonts Iconsのサイトはこちらこれを使えば、HTMLの中で文字を打つようにアイコンを出すことができます。この記事続きを読む

posted:2021年2月12日 CSS

CSSで、「項目は左側、内容は右側、その2つを点線でつなぐ」といったメニュー表や目次によくあるデザインの作り方をご紹介します。この表現は“項目と内容”で構成されたレイアウトなので、次のような場面続きを読む

posted:2021年1月31日 CSS

CSSのtext-shadowを使い文字にシャドウを付け、背景との差を出したいときなどにシャドウが薄すぎて困ったことはありませんか？もしtext-shadowのシャドウが薄い場合には“複数の同じ影を重ね掛け”することで続きを読む

posted:2020年11月26日 E-Commerce

簡単で今日にも販売開始できるECサービスや決済システムを探しているなら、STORES(ストアーズ) が最適です。 ECショップを出して販売を開始したい場合色々なサービスが候補にあがると思います。しかし、中には導入や審査な続きを読む

posted:2020年9月28日 JavaScript

1つのボタンを押すと複数のサイトが開く方法のご紹介です。この動作は通常のサイトで使うことはありませんし、そもそもブラウザのポップアップブロックなどのセキュリティーで制限されています。しかし、個人的な検証用やチーム内で続きを読む

posted:2020年8月8日 JavaScript

「任意のYoutubeチャンネルの最新動画を取得し、WEBサイトに表示させる」方法をご紹介します。この方法を使えば、Youtubeに新しい動画が投稿されると自動的にWEBサイトにも最新動画が表示されます。表示する動画の続きを読む

posted:2020年8月5日 JavaScript

canvas(カンバス)での表現で動きやアニメーションに残像を付ける方法を紹介します。方法は簡単で、「背景に透明度を持たせる」ことです。実際の例と理屈を解説していきます。 canvasアニメーションで残像を付けた実例続きを読む

posted:2020年7月7日 CSS

CSSのanimationプロパティは便利だし表現力豊かなのですが、どうしてもコードが長くなりがちですよね。効率的でスマートなCSS animationの書き方をご紹介します。なにか特別な技術や表現ということではなく続きを読む