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

posted:2021年3月13日 HTML

SVG textPathを使ってテキストを波状にする方法

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の書き方をご紹介します。なにか特別な技術や表現ということではなく続きを読む

posted:2020年7月5日 E-Commerce

数あるECカートサービス(ASP)を比較してどれが良いのかを探すにも、機能やサービスが多すぎて何を比較したらいいのか判らない人も多いと思います。沢山ある要素の中で「まず絶対に比較すべき要素」を紹介していきます。これら続きを読む

posted:2020年6月26日 E-Commerce

ネットショップの作り方を解説していきます。この記事では「ネットショップ」と呼びますが、「ECサイト」「販売サイト」なども同じ意味になります。ネットショップには様々な種類があり、それぞれ作り方やサービス内容が違ってきま続きを読む