ボタンジェネレーター
コピペで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;}
各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
枠線を指定する方向を定義することもできます。
- border-top
- border-bottom
- border-right
- border-left
これらの指定を組み合わせることにより、以下のような指定をすることもできます。
記述例) 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
- 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について、さらに詳しく知りたい方はこちらの解説動画を参照してください
ツールに関連する解説動画の一覧
リンクボタン(四角いボタン)の作り方!HTMLとCSSで作ろう
サイト制作のコーディングに必須!flexbox(フレックスボックス)の基礎的な書き方や考え方を学びましょう!
text-shadowとbox-shadow解説!文字や要素自身に色々な影をつけるには?
border(ボーダー)の使い方、見出しなどへの活用方法と、border-radius(角丸)について
CSSでグラデーションを実装してみましょう!linear-gradientを使って線形グラデーションさせる方法を紹介
なんとなくで使っていませんか?カラーコード(#fffなど)を徹底解説!
擬似要素について解説!beforeとafterの使い方と、コーディングについて
マウスを乗せた時にアニメーション!擬似クラスhoverとtransitionの役割や使い方解説
ジェネレーターの一覧
ボタンジェネレーター
コピペでCSSだけで簡単におしゃれなボタンを作ることができる、高機能ボタン生成ツールです。
背景色・影・サイズ・枠線・角丸などを変更してイメージに近いデザインを気軽に作ってみてください!
擬似要素やマウスホバーにも対応しています!Box Shadow ジェネレーター
画像や要素などに影をつけることができる、box-shadowのツールです。
豊富なサンプルから選択し、カスタマイズすることができます。
内側の影(inset)や、複数の影の生成にも対応!Text Shadow ジェネレーター
文字に様々な影をつけることができる、text-shadowの自動生成ツールです。
豊富なサンプルから選択し、カスタマイズすることができます。
テキストのリアルタイム変更や、複数の影にも対応!CSS Filter ジェネレーター
画像や要素にエフェクトを簡単に実装できる、filterのツールです。
ぼかし・明るさ・コントラスト・グレースケール・色相回転・反転・彩度・セピアなどを複数指定することができます!CSS backdrop-filter ジェネレーター
背面の要素にエフェクトを簡単に実装できる、backdrop-filterのツールです。
ぼかし・明るさ・コントラスト・グレースケール・色相回転・反転・彩度・セピアなどを複数指定することができます!CSS グラデーション ジェネレーター
背景にグラデーションをかけるための、ジェネレーターです。基本的な(線形)グラデーションのlinear-gradient、radial-gradient(円形)、conic-gradient(扇形)などに対応し、直感的にグラデーションを生成することができます!