補足説明をする際に最適！HTML・CSS・JSでツールチップを作ってみた
- 更新日：
- 公開日：
Webサイトやブログで、「この用語って何？」とユーザーが疑問に思いそうな専門用語や略語を記載しなければいけないこともあると思います。 かといって、その都度注釈や脚注を入れてしまうと、文章の流れが損なわれてしまい読みにくく […]
「CSS・Javascript」の記事一覧
WEBサイトで縦書き！俳句や短歌などで使える縦書きにするCSSデザイン
- 更新日：
- 公開日：
Webサイトでは通常、左から右に横書きで文章を表示しますが、短歌や和歌など、日本語ならではの表現を活かしたい場合には、下記のように縦書きで表示したくなることがあるかもしれません。 世の人は 我を何とも 言わば言え 我が成 […]
注意喚起にも便利！テキストを点滅させるCSSアニメーション
- 更新日：
- 公開日：
最近はあまり見かけませんが、CTA（Call To Action）のボタンの上に「点滅する文字テキスト」が使われていることがあります。 詳しくはこちらにゃ！ 今回は、このような点滅する文字テキストを、CSSアニメーション […]
楽天アフィリエイトの商品リンクを中央寄せにする方法
- 更新日：
- 公開日：
通常、楽天アフィリエイトのリンクタイプが「画像とテキスト」を貼り付けると、下記のように左寄せになると思います。 大谷選手移籍記念応援グッズ デコピン トートバッグ 非公式 でこぴん ドジャース dodgers 大谷翔平 […]
計算式の約分や相殺を視覚化！CSSで作る“斜めの打ち消し線”の作り方
- 更新日：
- 公開日：
学習塾や教育系のブログなど、算数や数学の式を記述する際に“打ち消し線”を記述したいことがあるのではないでしょうか？ 例えば、下記のような計算式を記述する場合です。 (半径 × 2 × 円周率) × 半径 ÷ 2 今回は、 […]
インパクト抜群！１文字目だけを大きく装飾するCSSパターン４選
- 更新日：
- 公開日：
自分がマニュアル作成や、LPやSPなどでよく使っていたデザインが、１文字目だけ大きくするデザインです。 今回は、この１文字目だけ大きくするデザインをいくつかCSSで作ってみました。 見出しなどでよく使われる１文字目だけ大 […]
WEBサイトの文章がコピーされたときに出典元を追加する方法
- 更新日：
- 公開日：
自分のWEBサイトの文章が、他の場所にコピーされたときに、 「出典：〇〇（リンク）」といった形で自動的に記載されると便利だと思いませんか？ そこで今回は、WEBサイトの文章がコピーされたときに、出典元の情報（URLとタイ […]
配送状況やステップなどを視覚化するプログレスバーを作ってみた
- 更新日：
- 公開日：
Amazonやヤマト運輸などで配送状況や、現在の状況などを表わすのに下記のようなプログレスバーがよく利用されています。 今回は、下記のような進捗状況を確認できるプログレスバーをCSSで作ってみました。 注文済み 発送済み […]
商品分析などに使うマトリクス（ポジショニングマップ）のCSS
- 更新日：
- 公開日：
市場におけるポジション（立ち位置）を示すのに、マトリクス表を利用すると便利です。 例えば、下記のような表です。 高機能 シンプル 価格安い 価格高い ★賢威 ★SWELL ★THOR このような２軸で可視化するマトリクス […]
クリック率を上げる！CSSでバウンドしながら動く矢印の実装方法
- 更新日：
- 公開日：
最近はあまり見ませんが、CTA（Call To Action）のボタンの上に動きのある矢印のアニメーションが使われていることがあります。 例えば、下記のような矢印アニメーションです。 今回は、このような矢印の画像をバウン […]