Front-endTools

ボタンジェネレーター

直感的におしゃれなボタンを作ることができる、高機能自動ボタン生成ツールです。
背景色・背景グラデーション・ボタンの影(box-shadow)・文字の影(text-shadow)・サイズ(横幅、縦幅Ω)・枠線(border)・角丸(border-radius)・transition(アニメーション)などに対応しています。
擬似要素(before, after)やマウスホバー(hover)、マウスホバー後の擬似要素にも対応しているので、様々なデザインのボタンを生成することが可能です
サンプルも20種類以上を用意しています!

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

※サンプル一覧の例を選択した際、編集中のデータがある場合上書きされますので、ご注意ください。
  • ボタン
    hoverアニメーション有り
  • ボタン
    hoverアニメーション有り
  • ボタン
    hoverアニメーション有り
  • ボタン
    hoverアニメーション有り
  • ボタン
    hoverアニメーション有り
  • ボタン
    hoverアニメーション有り
  • ボタン
  • ボタン
  • ボタン
    hoverアニメーション有り
  • ボタン
  • ボタン
  • ボタン
    hoverアニメーション有り
  • ボタン
    hoverアニメーション有り
  • ボタン
    hoverアニメーション有り
  • ボタン
    hoverアニメーション有り
  • ボタン
    hoverアニメーション有り
  • ボタン
    hoverアニメーション有り
  • ボタン
    hoverアニメーション有り
  • ボタン
    hoverアニメーション有り
  • ボタン
    hoverアニメーション有り
  • ボタン
    hoverアニメーション有り
  • ボタン
    hoverアニメーション有り
ボタン
hoverアニメーション有効
.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;
  font-weight: bold;
  transition: 0.3s;
}

.original-button::before, .original-button::after {
  content: "";
  display: block;
}

.original-button::before {
  content: "";
  display: block;
}

.original-button::after {
  content: "";
  display: block;
}

.original-button:hover {
  opacity: .7;
}

.original-button:hover::before, .original-button:hover::after {
}

.original-button:hover::before {
}

.original-button:hover::after {
}

ツールを使用するにあたっての注意

  • 基本的にCSSはリセットされている前提で、コードを出力していますのであらかじめご了承ください。
  • ブラウザやサイト・お使いのCSSフレームワークによってはプレビューと異なる結果で表示されることがあります。表示結果が異なってしまう場合は、ブラウザの検証ツール(デベロッパーツール)などをお使いいただき、CSSプロパティが競合してしまっていないかなどを確認してください。
  • 当ツールはモダンブラウザを考慮した設計になっており、Internet Explorerや古いバージョンのブラウザに対応しない場合がありますので、ご注意ください

スタイルエディター

px
px
HEX
単位:%
  • グラデーション部分をクリックすることで、色の経由点(color-stop)を追加することができます。
  • 各色の部分(色の経由点)をドラッグ&ドロップで左右に位置を変更することができます。
R
G
B
A
色の透過率を一括指定
%
  1. rgba(247, 166, 12, 1)
  2. rgba(255, 34, 87, 1)
  3. rgba(154, 39, 238, 1)
  4. rgba(35, 102, 247, 1)
deg
  • 0 / 360°
  • 90°
  • 180°
  • 270°
HEX
px
px

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

s

その他の指定

ツールの使い方について

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

ご活用ください。

ジェネレーターの一覧

その他ツールの一覧

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

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

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

各CSSプロパティの説明

box-shadow

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

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

insetの指定が不要な場合は、記述も不要です。
また、水平方向のずらし量垂直方向のずらし量影のぼかし量影の大きさについてはそれぞれ初期値が0です。
影の色は初期値が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です

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

  • 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)

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

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

transform

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

  • 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では大きく3つのグラデーション方法があり、グラデーションを表現することができます。具体的には以下の3つがあります

  • 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より抜粋。