ボックスシャドウ（box-shadow） ジェネレーター
サンプル一覧（見本）。作りたいもののイメージに一番近いものを選択して下さい。 選択後に編集することが可能です。
※サンプル一覧の例を選択した際、編集中のデータがある場合上書きされますので、ご注意ください。 サンプル一覧を閉じる .original-box-shadow < display: flex; align-items: center; justify-content: center; color: #333333; background-color: #dddddd; font-size: 30px; width: 300px; height: 100px; border-radius: 3px; box-shadow: 6px 6px 6px 0px rgba(0, 0, 0, 0.45);ツールを使用するにあたっての注意
- 基本的にCSSはリセットされている前提で、コードを出力していますのであらかじめご了承ください。
- ブラウザやサイト・お使いのCSSフレームワークによってはプレビューと異なる結果で表示されることがあります。表示結果が異なってしまう場合は、ブラウザの検証ツール（デベロッパーツール）などをお使いいただき、CSSプロパティが競合してしまっていないかなどを確認してください。
- 当ツールはモダンブラウザを考慮した設計になっており、Internet Explorerや古いバージョンのブラウザに対応しない場合がありますので、ご注意ください
ツールの使い方について
・ツールの使い方が今いち分からない ・色々な活用の方法を知りたい ・各項目の詳細を知りたい という方の為に、内容や特徴の紹介と使い方を説明した動画を用意しました。
ジェネレーターの一覧
CSS グラデーション ジェネレーター ボタンジェネレーター ボックスシャドウ（box-shadow） ジェネレーター テキストシャドウ（text-shadow） ジェネレーター 枠線・境界線（border） ジェネレーター CSS Filter ジェネレーター 三角形 ジェネレーター CSS Backdrop-filter ジェネレーター CSS Transform（変形） 2D / 3D ジェネレーター CSS Transition（アニメーション） ジェネレーター CSS animation ジェネレーターその他ツールの一覧
文字数カウンターツールに関連する解説動画の一覧
- text-shadowとbox-shadow解説！文字や要素自身に色々な影をつけるには？
- なんとなくで使っていませんか？カラーコード（#fffなど）を徹底解説！
- サイト制作のコーディングに必須！flexbox（フレックスボックス）の基礎的な書き方や考え方を学びましょう！
- 擬似要素について解説！beforeとafterの使い方と、コーディングについて
各CSSプロパティの説明
box-shadowプロパティは要素に影を設定することができます。- 水平方向のずらし量 垂直方向のずらし量 の値はマイナスの値を指定すると、それぞれ垂直方向の上と、水平方向の左に配置されます。
- 影の大きさ はプラスの値を指定すると大きくなっていきますが、マイナスの値を指定すると小さくなっていきます。
- 値を2つだけ指定した場合は、 水平方向のずらし量 垂直方向のずらし量 として設定されます。
- 値を3つだけ指定した場合は、さらに3つ目の値が 影のぼかし量 として設定されます。
- また値を4つだけ指定した場合は、さらに4つ目の値が 影の大きさ として設定されます。
影は複数指定することができます。複数指定したい際は、カンマ「，」で区切って指定します。最初に指定された影が最も手前に来ます。記述例） box-shadow: inset 2px 2px 3px 4px rgba(0, 0, 0, .5), 0px 0px 3px #ff0;
テキストに影をつける場合は、text-shadowを使用します。 before / after スクリーンリーダーからは疑似要素にアクセスできなくなる可能性がある為、ユーザーにとって必要な情報については、疑似要素を使うべきかどうかを検討する必要があります。 beforeとafterについて、さらに詳しく知りたい方はこちらの解説動画を参照してください。positionプロパティは要素がどのように配置されるかを設定します。static（初期値）以外の値が指定されている場合に top, right, bottom, leftの各プロパティが、配置された要素の位置を決めます。また、static以外の値が指定されているように関しては、z-index（重なり順）を指定することができます。z-indexの初期値はautoです。数値を指定することができ、数値が大きいほど要素は上のレイヤー（手前のレイヤー）として表示されます。
- relative：指定してもその要素自体の位置は変わりませんが、static（初期値）と違い、topなどの指定がされていた場合にその影響を受けます。
- absolute：祖先要素にstatic以外の指定がされていた場合、指定されている一番近い祖先要素を基準に配置します。
- fixed：画面を基準に相対的に要素を配置します。スクロールしても位置が変わりません。
- sticky：fixedと同じようにスクロールしても位置を固定しますが、親要素の範囲から出ることはできません。