Front-endTools

Front-end Tools

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

before, afterの指定

その他の指定

ツールの使い方について

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

ご活用ください。

ジェネレーターの一覧

その他ツールの一覧

フロントエンド学習に行き詰まってる方、もっと深く知りたい方へ

  • フリーランスとして生きていきたい。
  • HTML / CSSの書き方が分からない・不安がある
  • きちんと会社のホームページやブログを作ってみたい！
  • 「WEB担当」になってしまったけど、全然分からなくて、不安…。
  • 好きな時間に好きな場所で仕事出来るようになりたい！
  • しっかり技術を身につけて、収入を上げたい。
  • 簡単に効率的にホームページを作れる方法やツールが知りたい！
  • 全くの初心者なので、プロからしっかりと学んでみたい
  • 外注すると高いので、自分で身に付けたい

こういった悩み・希望などがある方向けに、初心者から中・上級者まで「マンツーマンの講義」をおこなっております。
是非一度ご相談ください。

マンツーマンの講座の詳細を見てみる

各CSSプロパティの説明

box-shadow

box-shadowプロパティは要素に影を設定することができます。

各値（value）は、次のように指定することができます
box-shadow: 影を内側に付ける（inset）水平方向のずらし量垂直方向のずらし量影のぼかし量影の大きさ影の色
記述例） box-shadow: inset 2px 2px 3px 4px #000;

insetの指定が不要な場合は、記述も不要です。
また、水平方向のずらし量垂直方向のずらし量影のぼかし量影の大きさについてはそれぞれ初期値が０です。
影の色は初期値がcurrentColor（colorに設定されている値）となります。

影は複数指定することができます。
複数指定したい際は、カンマ「，」で区切って指定します。
記述例） box-shadow: inset 2px 2px 3px 4px rgba(0, 0, 0, .5), 0px 0px 3px #ff0;

before / after

beforeとafterは、要素の子要素として擬似要素を作成します。
beforeは要素の最初の子要素、afterは要素の最後の子要素として作成されます。
また、contentプロパティが必須です。
記述例）
.test::before {
content: "";
}

インライン要素として作成される為、widthなどのサイズ指定をする際はブロック要素などに変換する必要があります。

beforeとafterについて、さらに詳しく知りたい方はこちらの解説動画を参照してください。

position

positionプロパティは要素がどのように配置されるかを設定します。
top, right, bottom, leftの各プロパティが、配置された要素の位置を決めます。
初期値はstaticです。

positionプロパティは次の値を設定することができます。

  • relative
  • absolute
  • fixed
  • sticky

記述例） position: relative;

relativeは指定してもその要素自体の位置は変わりません。

absoluteは、祖先要素にrelativeが指定されていた場合、指定されている一番近い祖先要素を基準に配置します。

fixedは画面を基準に相対的に要素を配置します。
スクロールしても位置が変わりません。

stickyは、fixedと同じようにスクロールしても位置を固定しますが、親要素の範囲から出ることはできません。

positionについて、さらに詳しく知りたい方はこちらの解説動画を参照してください

ツール制作者に関するリンク