画像なしで実装できる!手紙・ノート風の罫線デザインのCSS 公開日:2025年9月4日 CSS・Javascript LP(ランディングページ)やSP(セールスページ)では、お客様の声や制作者からのメッセージを“手紙風”にデザインしたものを目にする機会があります。 追伸 猫は言葉を話せません。だからこそ「一口ごとの表情」や「残さず食べて […] 続きを読む
floatレイアウト対応!サイドバーの画像などを固定(追従)させる方法 公開日:2025年8月9日 CSS・Javascript Webサイトをスクロールした際に、サイドバーの一部が途中から追従(追尾)して固定表示される動きは、2カラムレイアウトのサイトでよく使われます。 そして、多くのワードプレステーマ(SWELLやTHOR)などでは、この「追尾 […] 続きを読む
画像にスポットライト(照明)が当たっているように見えるCSS 公開日:2025年7月29日 CSS・Javascript LP(ランディングページ)やSP(セールスページ)などで、特定の要素に注目を集めたいときには、下記のようなスポットライト風の演出が効果的かもしれません。 今回、試行錯誤しながら、画像とCSSでアニメーション効果を作成した […] 続きを読む
DSEGフォントで7セグ風デザインをWebサイトに実装する手順 公開日:2025年7月20日 CSS・Javascript LEDやデジタル時計などに使われている「デジタル数字(正式名称は?)」のフォントを、ワードプレス(WordPress)で使用してみました。 0123456789 使用したのは「DSEG(でぃーせぐ)」というフォントで、商 […] 続きを読む
期間限定で右下にポップアップを表示する方法【HTML+CSS+JavaScript】 公開日:2025年7月16日 CSS・Javascript Amazonや楽天のセール期間の告知、メルマガの登録案内など、訪問者に優先的に伝えたい情報がある場合があると思います。 そういった時に便利なのが、以下の様な右下に表示されているポップアップ(ワイプ広告)です。 このような […] 続きを読む
導入企業のロゴなどをスライド表示!画像を無限ループさせるCSS 公開日:2025年6月28日 CSS・Javascript 企業サイトやランディングページ(LP)などで、導入企業のロゴや社名が横にスライドして表示されているのを見かけたことはありませんか? たとえば、こんな感じです 。 今回は、そのような「会社名やロゴ画像をスライドで表示する仕 […] 続きを読む
“お客様の声”や“導入事例”をスライダーで魅せる!Slick Sliderの使い方 更新日:2025年6月27日 公開日:2025年6月24日 CSS・Javascript 企業のホームページやLP(ランディングページ)などで、「お客様の声(導入事例)」を掲載しているのをよく見ます。 ただ、声の数や導入事例が多い場合は、1つずつ並べていくとページが縦に長くなってしまいます。 そういった時は、 […] 続きを読む
ワードプレスでも使用可能!縦線のないテーブル(表)のCSS 公開日:2025年6月16日 CSS・Javascript このサイトは、ワードプレステーマの賢威(けんい)を使って作成しています。 一応、賢威にはいくつかのテーブルデザインがあるのですが、その中に自分が欲しいデザインがなかったので、下記のテーブルを自作しました。 縦線のない表( […] 続きを読む
補足説明をする際に最適!HTML・CSS・JSでツールチップを作ってみた 公開日:2025年5月28日 CSS・Javascript Webサイトやブログで、「この用語って何?」とユーザーが疑問に思いそうな専門用語や略語を記載しなければいけないこともあると思います。 かといって、その都度注釈や脚注を入れてしまうと、文章の流れが損なわれてしまい読みにくく […] 続きを読む
WEBサイトで縦書き!俳句や短歌などで使える縦書きにするCSSデザイン 更新日:2025年5月8日 公開日:2025年5月5日 CSS・Javascript Webサイトでは通常、左から右に横書きで文章を表示しますが、短歌や和歌など、日本語ならではの表現を活かしたい場合には、下記のように縦書きで表示したくなることがあるかもしれません。 世の人は 我を何とも 言わば言え 我が成 […] 続きを読む