Front-endTools

ボックスシャドウ(box-shadow) ジェネレーター

画像や要素などに影をつけることができる、box-shadowのツールです。
豊富なサンプルから選択し、カスタマイズすることができます。
内側の影(inset)や、複数の影の生成にも対応。beforeやafterなどの擬似要素にも対応しています。
ニューモフィズムのサンプルも用意しています。

サンプル一覧(見本)。作りたいもののイメージに一番近いものを選択して下さい。選択後に編集することが可能です。

※サンプル一覧の例を選択した際、編集中のデータがある場合上書きされますので、ご注意ください。
  • BOX-SHADOW
  • BOX-SHADOW
  • BOX-SHADOW
  • BOX-SHADOW
  • BOX-SHADOW
  • BOX-SHADOW
  • BOX-SHADOW
  • BOX-SHADOW
  • BOX-SHADOW
  • BOX-SHADOW
  • BOX-SHADOW
  • BOX-SHADOW
  • BOX-SHADOW
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や古いバージョンのブラウザに対応しない場合がありますので、ご注意ください

スタイルエディター

px
px
px
px
R
G
B
A

Set before, after

その他の設定

ツールの使い方について

・ツールの使い方が今いち分からない
・色々な活用の方法を知りたい
・各項目の詳細を知りたい
という方の為に、内容や特徴の紹介と使い方を説明した動画を用意しました。

ご活用ください。

ジェネレーターの一覧

その他ツールの一覧

各CSSプロパティの説明

box-shadow
box-shadowプロパティは要素に影を設定することができます。
各値(value)は、次のように指定することができます
box-shadow: 影を内側に付ける(inset)水平方向のずらし量垂直方向のずらし量影のぼかし量影の大きさ影の色
  • 水平方向のずらし量垂直方向のずらし量の値はマイナスの値を指定すると、それぞれ垂直方向の上と、水平方向の左に配置されます。
  • 影の大きさはプラスの値を指定すると大きくなっていきますが、マイナスの値を指定すると小さくなっていきます。

記述例) box-shadow: inset 2px 2px 3px 4px #000;
insetの指定が不要な場合は、記述も不要です。
  • 値を2つだけ指定した場合は、水平方向のずらし量垂直方向のずらし量として設定されます。
  • 値を3つだけ指定した場合は、さらに3つ目の値が影のぼかし量として設定されます。
  • また値を4つだけ指定した場合は、さらに4つ目の値が影の大きさとして設定されます。
水平方向のずらし量垂直方向のずらし量影のぼかし量影の大きさについてはそれぞれ初期値が0です。
影の色は初期値がcurrentColor(colorに設定されている値)となります。
border-radius が指定された場合は、影もその丸みを反映します。
影は複数指定することができます。
複数指定したい際は、カンマ「,」で区切って指定します。最初に指定された影が最も手前に来ます。
記述例) box-shadow: inset 2px 2px 3px 4px rgba(0, 0, 0, .5), 0px 0px 3px #ff0;
テキストに影をつける場合は、text-shadowを使用します。
before / after
beforeとafterは、要素の子要素として擬似要素を作成します。
beforeは要素の最初の子要素、afterは要素の最後の子要素として作成されます。
また、contentプロパティが必須です。
beforeを記述する場合、その前に「:」(コロン)を記述しますが、これは1つでも2つでも動作します。
しかし、疑似クラスと区別する為、2つで記述されることが多いです。
記述例)
.test::before {
content: "";
}
contentプロパティには、文字列の他・引用符・カウンタ・画像などを挿入することも可能です。
インライン要素として生成される為、widthなどのサイズ指定をする際はブロック要素などに変換する必要があります。
スクリーンリーダーからは疑似要素にアクセスできなくなる可能性がある為、ユーザーにとって必要な情報については、疑似要素を使うべきかどうかを検討する必要があります。
beforeとafterについて、さらに詳しく知りたい方はこちらの解説動画を参照してください。
position
positionプロパティは要素がどのように配置されるかを設定します。
static(初期値)以外の値が指定されている場合に top, right, bottom, leftの各プロパティが、配置された要素の位置を決めます。
また、static以外の値が指定されているように関しては、z-index(重なり順)を指定することができます。z-indexの初期値はautoです。数値を指定することができ、数値が大きいほど要素は上のレイヤー(手前のレイヤー)として表示されます。
positionプロパティは次の値を設定することができます。
  • relative:指定してもその要素自体の位置は変わりませんが、static(初期値)と違い、topなどの指定がされていた場合にその影響を受けます。
  • absolute:祖先要素にstatic以外の指定がされていた場合、指定されている一番近い祖先要素を基準に配置します。
  • fixed:画面を基準に相対的に要素を配置します。
    スクロールしても位置が変わりません。
  • sticky:fixedと同じようにスクロールしても位置を固定しますが、親要素の範囲から出ることはできません。
記述例) position: relative;
positionについて、さらに詳しく知りたい方はこちらの解説動画を参照してください。