Front-endTools

Front-end Tools

ボタンジェネレーター

コピペでCSSだけで簡単におしゃれなボタンを作ることができる、高機能ボタン生成ツールです。
背景色・影・サイズ・枠線・角丸などを変更してイメージに近いデザインを気軽に作ってみてください！
擬似要素やマウスホバーにも対応しています！

ボタン
.original-button {
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  text-decoration: none;
  color: #ffffff;
  font-size: 18px;
  border-radius: 5px;
  width: 200px;
  height: 40px;
}

スタイルエディター

px
px
HEX
HEX

before・after（擬似要素）, hover（オンマウス）の指定

その他の指定

ジェネレーターの一覧

その他ツールの一覧

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

  • フリーランスとして生きていきたい。
  • 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;

border

borderプロパティは要素に枠線を設定することができます。

各値（value）は、次のように指定することができます。
border: 枠線の幅枠線の種類枠線の色
記述例） border: 1px solid #333
ちなみに、値の順序は関係ありません。
borderの初期値はnoneです。

それぞれの値を個別に指定することもでき、

  • border-width
  • border-style
  • border-color
のプロパティがあります。
記述例） border-width: 10px;

border-styleにはsolid（実線）以外にも以下のような値を指定することができます。

  • double
  • groove
  • ridge
  • inset
  • outset
  • dashed
  • dotted
ただし、dottedやdashedなどはブラウザによって描画のされ方が違うことがありますので、ご注意ください。

枠線を指定する方向を定義することもできます。

  • border-top
  • border-bottom
  • border-right
  • border-left
記述例） border-left: 10px solid #333;

これらの指定を組み合わせることにより、以下のような指定をすることもできます。
記述例） border-top-color: red;
記述例） border-left-width: 20px

border-radius

border-radiusプロパティは要素の角を丸くすることができます。

値（value）は、次のように指定することができます。
記述例） border-radius: 5px;
初期値は0です

４箇所（左上、右上、右下、左下）それぞれを次のプロパティで指定することもできます。

  • border-top-left-radius
  • border-top-right-radius
  • border-bottom-right-radius
  • border-bottom-left-radius
記述例） border-top-left-radius: 10px;

before / after

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

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

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

hover

hoverは、ユーザーがカーソル（マウスポインタ―）で要素の上をホバー（通過）させた際の挙動を指定することができます。
記述例）
.test:hover {
color: red;
}

アニメーションと組み合わせることが多く、transitionプロパティをアニメーション前の要素に指定することで、hover時とhoverを解除した際にアニメーションを発生させることができます。
記述例）
.test {
transition: .3s;
}
.test:hover {
color: red;
}

スマートフォンなどのデバイスでは、タップした瞬間にhoverが発火する形になり、バグが発生しているようにも見えるので、注意が必要です。

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

text-shadow

text-shadowプロパティは文字（テキスト）に影を設定することができます。

各値（value）は、次のように指定することができます。
text-shadow: 水平方向のずらし量垂直方向のずらし量影のぼかし量影の色
記述例） text-shadow: 2px 2px 3px rgba(0, 0, 0, .5)

水平方向のずらし量垂直方向のずらし量影のぼかし量についてはそれぞれ初期値が０です。
影の色は指定されなければ、ユーザーエージェントが選択した色が使われます。その為、クロスブラウザ対応を考慮した場合、明示的に定義する必要があります。

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

transform

transformプロパティは要素を変形させることができます。
transformには次の４つの値が存在し、指定することができます。

  • translate（移動）
  • rotate（回転）
  • scale（伸縮）
  • skew（傾斜）
組み合わせて指定する場合は、スペースで区切ります。
記述例） transform: scale(1.1) skew(10deg);
初期値はnoneです。

skew以外の値は、X, Y, Z軸方向（3D）の指定が可能です。skewはX, Y軸方向のみです。
例えばtranslateのX軸のみ指定する場合は、以下のように指定することができます。
記述例） transform: translateX(10px);

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

position

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

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

  • relative
  • absolute
  • fixed
  • sticky

記述例） position: relative;

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

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

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

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

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

gradient

CSSでは大きく３つのグラデーション方法があり、グラデーションを表現することができます。具体的には以下の３つがあります

  • linear-gradient（線形グラデーション）
  • radial-gradient（円形グラデーション）
  • conic-gradient（扇形グラデーション）

複数色を指定することにより、それぞれの色を経由してグラデーションします。
background-colorプロパティに指定すると勘違いされやすいですが、background-imageプロパティに指定します。
記述例） background-image: linear-gradient(red, blue);

linear-gradientは、直線上にグラデーションを表現します。主に、0% ~ 100%の間で複数の色の経由点を指定することができ、グラデーションの角度も指定することができます。

radial-gradientは、円形にグラデーションを表現します。主に、0% ~ 100%の間で複数の色の経由点を指定することができます。
また、形状を楕円（ellipse。初期値）・円形（circle）から選択することができます。グラデーションの開始初期位置は、要素の上下左右真ん中（X: 50%, Y: 50%）ですが、変更することが可能です。

conic-gradientは、扇形にグラデーションを表現します。主に、0 ~ 360deg（degree。角度）の間で複数の色の経由点を指定することができ、グラデーションの開始角度を指定することもできます。グラデーションの中心位置は、要素の上下左右真ん中（X: 50%, Y: 50%）ですが、変更することが可能です。

これらのグラデーション指定は、カンマ「，」で区切りで複数指定することができます。最初に指定したグラデーションが重なり順（レイヤー）が上になります。rgbaなどで透明度をあげないと下に重なるグラデーションが見えなくなるので、注意が必要です。
記述例） background: linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%), linear-gradient(127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%), linear-gradient(336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
MDN Web Docsより抜粋。