CSS シャドウジェネレーター
シャドウパラメータをビジュアルで調整、多重レイヤーに対応、すぐに使える CSS をワンクリックでコピー。
- Box Shadow または Text Shadow タブを選択します。
- 水平オフセット、垂直オフセット、ぼかし半径、色、透明度を調整します。
- 「レイヤーを追加」をクリックして複数のシャドウを重ねられます。
- プレビューが満足できたら「CSS をコピー」でスタイルシートに貼り付けます。
box-shadow と text-shadow の違いは？
box-shadow は要素のボックス全体に、text-shadow はテキスト自体に適用されます。前者は inset と spread をサポートしますが、後者はサポートしません。
複数のシャドウレイヤーを重ねられますか？
はい。CSS ではカンマ区切りで複数の shadow 値を指定でき、前に書いたものが上に表示されます。このツールでは複数レイヤーを追加してリアルタイムで確認できます。
inset とは何ですか？
inset を指定すると、シャドウが要素の外側ではなく内側に表示されます。ボタンの押し込み効果などによく使われます。text-shadow では使用できません。
spread の負の値は何のために使いますか？
負の spread 値はシャドウを縮小させます。大きな offset と組み合わせると、片側だけの自然な影を表現できます。
画像フォーマットの選び方：JPG・PNG・WebP・GIF の違いと使い分け完全ガイド
なぜ PNG はJPGより何倍も大きくなるのか？WebP はいつ使うべきか？GIF はもう古いのか？圧縮の仕組みから解説し、状況別に最適なフォーマットを選ぶ判断軸を整理します。
SNS投稿の画像編集フロー：サイズ設計・ビジュアル統一・書き出し設定
SNS用クリエイティブの品質は、アイデアだけでなく制作フローで決まります。サイズ、構図、ブランド統一、書き出し設定まで、再現性のある画像編集手順を解説します。
PDF の結合・分割・圧縮ガイド：日常の文書整理を完全攻略
大きな PDF から必要なページだけ取り出したい、複数のレポートを1つにまとめたい、ファイルが大きすぎてアップロードできない――よくある PDF の悩みを、インストール不要で解決する方法を解説します。
2つのテキストの差分を比較するには？Diffアルゴリズムの仕組みとテキスト比較ツール完全ガイド
テキスト比較（diff）は2つの文書の差異を見つける技術で、バージョン管理・コードレビュー・文書校正に広く活用されます。diffのアルゴリズム原理、出力フォーマット、実際の活用場面を解説します。
Markdown完全ガイド：基本文法から実践活用まで
Markdownは、ライター・開発者・コンテンツクリエイターに最も使われている軽量マークアップ言語です。基本文法から高度なテクニック、各プラットフォームでの活用方法まで完全解説します。
データ可視化入門：正しいグラフの選び方
棒グラフ、折れ線グラフ、円グラフ、散布図――こんなにグラフの種類があると、どれを使えばいいか迷いますよね。本記事ではデータの種類と伝えたい内容に基づいたグラフ選択の判断フレームワークを解説します。