インパクト抜群！１文字目だけを大きく装飾するCSSパターン４選
- 公開日：
自分がマニュアル作成や、LPやSPなどでよく使っていたデザインが、１文字目だけ大きくするデザインです。 今回は、この１文字目だけ大きくするデザインをいくつかCSSで作ってみました。 見出しなどでよく使われる１文字目だけ大 […]
「CSS・Javascript」の記事一覧
WEBサイトの文章がコピーされたときに出典元を追加する方法
- 公開日：
自分のWEBサイトの文章が、他の場所にコピーされたときに、 「出典：〇〇（リンク）」といった形で自動的に記載されると便利だと思いませんか？ そこで今回は、WEBサイトの文章がコピーされたときに、出典元の情報（URLとタイ […]
配送状況やステップなどを視覚化するプログレスバーを作ってみた
- 公開日：
Amazonやヤマト運輸などで配送状況や、現在の状況などを表わすのに下記のようなプログレスバーがよく利用されています。 今回は、下記のような進捗状況を確認できるプログレスバーをCSSで作ってみました。 注文済み 発送済み […]
商品分析などに使うマトリクス（ポジショニングマップ）のCSS
- 公開日：
市場におけるポジション（立ち位置）を示すのに、マトリクス表を利用すると便利です。 例えば、下記のような表です。 高機能 シンプル 価格安い 価格高い ★賢威 ★SWELL ★THOR このような２軸で可視化するマトリクス […]
クリック率を上げる！CSSでバウンドしながら動く矢印の実装方法
- 公開日：
最近はあまり見ませんが、CTA（Call To Action）のボタンの上に動きのある矢印のアニメーションが使われていることがあります。 例えば、下記のような矢印アニメーションです。 今回は、このような矢印の画像をバウン […]
画像が揺れると印象が変わる？視線を集めるCSSアニメーション
- 公開日：
ホームページやランディングページ（LP）、セールスページ（SP）などで、画像に動きを付けることで、ユーザの目を引くことができます。 例えば、最近、目にすることがあったのが、下記のようなアニメーションです。 今回は、写真や […]
コピペで使える！CSSだけで画像をスムーズに回転させる方法
- 更新日：
- 公開日：
ホームページやランディングページ（LP）、セールスページ（SP）などで、画像に動きを付けることで、ユーザの目を引くことができます。 例えば、最近、目にすることがあったのが、下記のようなアニメーションです。 2025年遂に […]
PDFファイルをプレビュー表示させずにダウンロードさせる方法
- 更新日：
- 公開日：
ボタンなどに、aタグを記載して、PDFのURLリンクにするとPDFのプレビューが表示されます。 動作確認できます プレビューが表示されるにゃ ただ、プレビューを表示させたくない時もあると思います。 その為、今回はボタンを […]
ブログカード（リンクカード）のようなデザインを作るCSS
- 公開日：
ワードプレス（WordPress）には、ブログカード（リンクカード）の機能が付いていることがほとんですが、カスタマイズすることは、ほとんどできません。 その為、ブログカード（リンクカード）のようなデザインのリンクを作成し […]
URLやクーポンコードなどをコピーできるボタンの作成方法
- 公開日：
自身のサイトのURLやクーポンコード、アフィリエイトリンクなど、サイト訪問者にコピーしてもらいたいことがあるのではないでしょうか？ 例えば、下記のようなボタンです。 URLをコピー コピーしました。 上記のボタンを押すと […]