はじめに

こんにちは！
キャスレーコンサルティングLS（リーディングサービス）部の木戸です。
 
今回は、HTMLとCSSの様々なプロパティを用いて、
ホームページで実際に使用できるボタンを作成し、ご紹介しようと思います。
 
私は、現在の業務でCSSに触れる機会が多くあり、
プロパティ次第で様々なデザインが可能になることの面白さから、興味を持ちました。
 
そこで、技術ブログをきっかけに更に理解を深めたいと思い、今回このテーマを選びました。

それでは、さっそくご紹介していこうと思います！

 

※ 今回紹介するプロパティ
    • border-radius
    • box-shadow
    • transformとhover
    • animationと@keyframes

プロパティの使用例

border-radius

border-radiusは要素の四隅に対して、角の丸みを指定するCSSのプロパティです。
 
背景の角や写真・画像の角を丸める事で、ポップで可愛いデザインを実現出来ます。
角の丸みは、楕円の半径を長さもしくは、パーセンテージで指定します。
 

指定できる値の単位
長さ px 楕円半径の長さを指定する
em
pt
パーセンテージ ％ 楕円半径のパーセンテージを指定する

 
それでは早速、使用例をご紹介します。
 

  • border-radius: 10px;


    • 【HTML】

    <input type="button" id="button1-1" class="button" value="button">

    【CSS】

    #button1-1 {
background-color: #F5BCA9;
border-radius: 10px;
}

     
    上記のように指定する場合は、適用される範囲は四隅全部です。
    四隅の半径を均等に指定したい場合に、使用します。
     

  • border-radius: 10px 20px;


    • 【HTML】

    <input type="button" id="button1-2" class="button" value="button">

    【CSS】

    #button1-2 {
background-color: #F7D358;
border-radius: 10px 20px;
}

     
    値を2つ指定すると、「左上・右下」と「右上・左下」に適用されます。
    つまり、上記の場合は左上・右下が10px、右上・左下が20pxとなります。
     

  • border-radius: 10px 20px 30px;


    • 【HTML】

    <input type="button" id="button1-3" class="button" value="button">

    【CSS】

    #button1-3 {
background-color: #E1F5A9;
border-radius: 10px 20px 30px;
}

     
    値を3つ指定すると、「左上」と「右上と左下」「右下」に適用されます。
    つまり、左上が10px、右上と左下が20px、右下が30pxとなります。
     

  • border-radius: 10px 20px 30px 40px;


    • 【HTML】

    <input type="button" id="button1-4" class="button" value="button">

    【CSS】

    #button1-4 {
background-color: #A9E2F3;
border-radius: 10px 20px 30px 40px;
}

     
    値を4つ指定することで、四隅に異なる半径を指定する事も可能です。
    適用される順番は、左上→右上→右下→左下です。
     

     
    つまり、上記の場合は左上が10px、右上が20px、右下30px、左下40pxとなります。
     
    また、長さ・パーセンテージを “/”（スラッシュ）で区切ることで、
    水平方向と垂直方向の半径を、それぞれ指定する事も可能です。
     

  • border-radius: 10px / 20px;


    • 【HTML】

    <input type="button" id="button1-5" class="button" value="button">

    【CSS】

    #button1-5 {
background-color: #BCA9F5;
border-radius: 10px / 20px;
}

     
    上記の場合は、水平方向の四隅の半径が10px、垂直方向の四隅の半径が20pxとなります。
     

  • border-raduis: 10px 20px / 30px 40px;


    • 【HTML】

    <input type="button" id="button1-6" class="button" value="button">

    【CSS】

    #button1-6 {
background-color: #E2A9F3;
border-radius: 10px 20px / 30px 40px;
}

     
    上記の場合は、水平方向の左上、右下が10px、右上・左下が20pxとなり、
    垂直方向の左上・右下が30px、右上・左下が40pxとなります。
     

  • border-radius: 10px 20px 30px / 40px 50px 60px;


    • 【HTML】

    <input type="button" id="button1-7" class="button" value="button">

    【CSS】

    #button1-7 {
background-color: #F5A9E1;
border-radius: 10px 20px 30px / 40px 50px 60px;
}

     
    上記の場合は、水平方向の左上が10px、右上・左下が20px、右下が30pxとなり、
    垂直方向の左上が40px、右上・左下が50px、右下が60pxとなります。
     

  • border-radius: 10px 20px 30px 40px / 50px 60px 70px 80px;


    • 【HTML】

    <input type="button" id="button1-8" class="button" value="button">

    【CSS】

    #button1-8 {
background-color: #FE2E64;
border-radius: 10px 20px 30px 40px / 50px 60px 70px 80px;
}

     
    上記の場合は、水平方向・垂直方向にそれぞれ異なる半径が指定されます。
    つまり、水平方向の左上が10px、右上が20px、右下が30px、左下が40px、
    垂直方向の左上が50px、右上が60px、右下が70px、左下が80pxとなります。
     
    この指定方法を用いると、このような歪んだ形のボタンも作る事が出来ます！

    【HTML】

    <input type="button" id="button1-9" class="button" value="button">

    【CSS】

    #button1-9 {
background-color: #FDF6A4;
border-radius: 30% 50% 60% 30% / 60% 50% 40% 40%;
}

     
    ちょっとおしゃれな印象になりますね。
     
    また、以下のプロパティで、四隅を個別に指定する事も可能です。
     

  • border-top-left-radius：左上の角の丸み
  • border-top-right-radius：右上の角の丸み
  • border-bottom-right-radius：右下の角の丸み
  • border-bottom-left-radius：左下の角の丸み

    •  
    是非、長さやパーセンテージを変更して、形の変化を試してみてください！
     

    box-shadow

    box-shadowは、文字通りボックス要素に影をつける事が出来る、CSSのプロパティです。
     
    横方向・縦方向は勿論、ぼかしや広がり具合、影の色や向きを指定する事が出来ます。
    なお、ぼかしや広がり、影の色、向きの指定は任意です。
     
    box-shadowプロパティを用いて、影のあるボタンを作成してみます。
     

  • box-shadow: 3px 5px;


    • 【HTML】

    <input type="button" id="button2-1" class="button" value="button">

    【CSS】

    #button2-1 {
background-color: #F5BCA9;
box-shadow: 3px 5px;
}

     
    影の向きは、右方向と下方向が基本の向きです。
    この場合、右方向に3px、下方向に5pxの影が出来ます。
     
    左方向、上方向に影を付けたい場合は下記のように、”-”（マイナス）を指定します。
     

  • box-shadow: -3px -5px;


    • 【HTML】

    <input type="button" id="button2-2" class="button" value="button">

    【CSS】

    #button2-2 {
background-color: #F7D358;
box-shadow: -3px -5px;
}

     

  • box-shadow: 5px 5px 10px;


    • 【HTML】

    <input type="button" id="button2-3" class="button" value="button">

    【CSS】

    #button2-3 {
background-color: #E1F5A9;
box-shadow: 5px 5px 10px;
}

     
    3つめの値は、ぼかしです。
    指定した方向にぼかしがかかるため、
    +（プラス）の値なら右方向・下方向に、”-”（マイナス）の値なら左方向・上方向にぼかしがかかります。
    注意：ぼかしの値に”-”（マイナス）を指定する事は出来ません。
     
    また、box-shadow: 0px 0px 5px;のように
    影の方向を指定しないと、全方向に対してぼかしがかかります。
     

    【HTML】

    <input type="button" id="button2-4" class="button" value="button">

    【CSS】

    #button2-4 {
background-color: #A9E2F3;
box-shadow: 0px 0px 10px;
}

     

  • box-shadow: 3px 3px 0px 5px;


    • 【HTML】

    <input type="button" id="button2-5" class="button" value="button">

    【CSS】

    #button2-5 {
background-color: #BCA9F5;
box-shadow: 3px 3px 0px 5px;
}

     
    4つめの値は、広がりです。指定した向きに、影が広がります。
    上記の場合は、右方向・下方向に3px+5px=8pxの影が付きます。
    また、ぼかしと異なり、広がりは”-”（マイナス）の値を指定する事が可能です。
     

  • box-shadow: 5px 5px 0px -2px;


    • 【HTML】

    <input type="button" id="button2-6" class="button" value="button">

    【CSS】

    #button2-6 {
background-color: #E2A9F3;
box-shadow: 5px 5px 0px -2px;
}

     
    上記のように指定すると、右方向・下方向に5px-2px=3pxの影が付きます。
     
    また、ぼかし同様、box-shadow: 0px 0px 0px 5px;のように
    影の方向を指定しない場合、全方向に対して影が広がります。
     

    【HTML】

    <input type="button" id="button2-7" class="button" value="button">

    【CSS】

    #button2-7 {
background-color: #F5A9E1;
box-shadow: 0px 0px 0px 5px;
}

     

  • box-shadow: 5px 5px 0px 0px #FACC2E;


    • 【HTML】

    <input type="button" id="button2-8" class="button" value="button">

    【CSS】

    #button2-8 {
background-color: #FE2E64;
box-shadow: 5px 5px 0px 0px #FACC2E;
}

     
    5つめの値は、影の色です。影の色のデフォルト値は、黒（#fff）です。
     
    また、rgbaを使用する事で、影の色の透明度を指定する事も可能です。
     

  • box-shadow: 5px 5px 0px 0px rgba(0, 0, 0, 0.5);


    • 【HTML】

    <input type="button" id="button2-9" class="button" value="button">

    【CSS】

    #button2-9 {
background-color: #FDF6A4;
box-shadow: 5px 5px 0px 0px rgba(0, 0, 0, 0.1);
}

     

  • box-shadow: 0px 0px 5px 3px #01DF74 inset;


    • 【HTML】

    <input type="button" id="button2-10" class="button" value="button">

    【CSS】

    #button2-10 {
background-color: #ECF6CE;
box-shadow: 0px 0px 5px 3px #01DF74 inset;
}

     
    影はデフォルトで外向きですが、insetと記述することで内側に指定する事も可能です。
     
    以下のように指定すると、内・外両側に影を指定する事も出来ます。
    box-shadow:0px 0px 5px 3px rgba(0, 0, 0, 0.2) ,0px 0px 5px 3px rgba(0, 0, 0, 0.2) inset;
     

    【HTML】

    <input type="button" id="button2-11" class="button" value="button">

    【CSS】

    #button2-11 {
background-color: #E0E0F8;
box-shadow:0px 0px 5px 3px rgba(0, 0, 0, 0.2) ,0px 0px 5px 3px rgba(0, 0, 0, 0.2) inset;
}

     
    box-shadowプロパティは、「画像にも影を付ける事は出来るのか？」と疑問に思った方はいませんか？
     
    勿論、付ける事は可能です。しかし、以下のようになってしまいます。
     

  • box-shadow: 5px 5px 0px 0px #FAE9B2;


    • 【HTML】

    <input type="image" id="button2-12" class="button" src="solar.png">

    【CSS】

    #button2-12 {
box-shadow: 5px 5px 0px 0px #FAE9B2;
}

     
    たしかに画像に影は付いていますが、図形自体には付いていませんね。
     
    画像に影を付けたい！
    そんな時にはぜひ、filter: drop-shadow()を使ってみてください。
     
    使い方は、box-shadowプロパティと同様です。
     

  • filter: drop-shadow(10px 10px 10px #FA5858);


    • 【HTML】

    <input type="image" id="button2-13" class="button"src="solar.png">

    【CSS】

    #button2-13 {
filter: drop-shadow(10px 10px 10px #FA5858);
}

     
    filter: drop-shadow()を効果的に用いる事で、画像で作成したボタンに影をつける事も可能です。

    transform と hover

    transformとは

    transformプロパティは、CSS3で新しく追加されたもので、要素を変形させることが可能です。
    値に以下のtransform関数を指定する事で、移動・拡大縮小・回転・傾斜といった変形が適応されます。
     

    transformの関数
    none 指定しない
    translate() 要素のXY座標の移動
    translateX() 要素のX座標の移動
    translateY() 要素のY座標の移動
    scale() 要素のXY軸方向の拡大・縮小
    scaleX() 要素をX軸方向に拡大・縮小
    scaleY() 要素をY軸方向に拡大・縮小
    rotate() 要素の回転
    skew() 要素の形をX軸、Y軸方向に傾斜
    skewX() 要素の形をX軸方向に傾斜
    skewY() 要素の形をY軸方向に傾斜

     

    hoverとは

    カーソルが乗った時のスタイルを、指定できます。
    つまり、ボタンが単に表示されている時と、ボタンの上にカーソルが乗った時で
    状態を変化させることが可能という事です。
     
    先ほどご紹介した、transformプロパティを
    hoverに指定する事で、カーソルが乗ったときにボタンの状態を変化させることが出来ます。
     
    それでは、transformプロパティとhoverを使用したボタンをご紹介します。
    サンプルボタンにカーソルを重ねて、ボタンの変化を確認してください！
     

  • transform: translate(5px, 10px);


    • 【HTML】

    <input type="button" id="button3-1" class="button" value="button">

    【CSS】

    #button3-1 {
background-color: #F5BCA9;
}

#button3-1:hover {
transform: translate(5px, 10px);
}

     
    上記のように指定すると、右に5px・下に10px移動します。
    つまり、右下に移動したように見えます。
     

  • transform: translateX(10px);


    • 【HTML】

    <input type="button" id="button3-2" class="button" value="button">

    【CSS】

    #button3-2 {
background-color: #F7D358;
}

#button3-2:hover {
transform: translateX(10px);
}

     
    上記のように指定すると、右方向に10px分移動します。
     

  • transform: translateY(10px);


    • 【HTML】

    <input type="button" id="button3-3" class="button" value="button">

    【CSS】

    #button3-3 {
background-color: #E1F5A9;
}

#button3-3:hover {
transform: translateY(10px);
}

     
    上記のように指定すると、下方向に10px分移動します。
     

  • transform: scale(1.5, 2);


    • 【HTML】

    <input type="button" id="button3-4" class="button" value="button">

    【CSS】

    #button3-4 {
background-color: #A9E2F3;
}

#button3-4:hover {
transform: scale(1.5, 2);
}

     
    scale()は、拡大・縮小です。
    上記のように指定すると、X軸方向に1.5倍拡大・Y軸方向に2倍拡大します。
     
    scale(0.5,0.5)のように指定すると、縮小します。
     

  • transform: scaleX(1.5);


    • 【HTML】

    <input type="button" id="button3-5" class="button" value="button">

    【CSS】

    #button3-5 {
background-color: #BCA9F5;
}

#button3-5:hover {
transform: scaleX(1.5);
}

     
    scaleX()は、X軸方向の拡大・縮小です。
    上記のように指定すると、X軸方向に1.5倍拡大します。
     
    scale()同様、1以下で指定すると縮小します。
     

  • transform: scaleY(0.5);


    • 【HTML】

    <input type="button" id="button3-6" class="button" value="button">

    【CSS】

    #button3-6 {
background-color: #E2A9F3;
}

#button3-6:hover {
transform: scaleY(0.5);
}

     
    scaleY()は、Y軸方向の拡大・縮小です。
    上記のように指定すると、Y軸方向に0.5縮小します。
     
    scale()・scaleX()同様、1.5等で指定すると拡大します。
     

  • transform: rotate(10deg);


    • 【HTML】

    <input type="button" id="button3-7" class="button" value="button">

    【CSS】

    #button3-7 {
background-color: #F5A9E1;
}

#button3-7:hover {
transform: rotate(10deg);
}

     
    rotate()は、回転です。
    上記のように指定すると、要素が時計周りに10度回転します。
     

  • transform: skew(10deg,30deg);


    • 【HTML】

    <input type="button" id="button3-8" class="button" value="button">

    【CSS】

    #button3-8 {
background-color: #FE2E64;
}

#button3-8:hover {
transform: skew(10deg,30deg);
}

     
    skew()はX軸、Y軸方向への傾斜です。
    上記のように指定すると、X軸方向に10度、Y軸方向に30度傾斜します。
     

  • transform: skewX(30deg);


    • 【HTML】

    <input type="button" id="button3-9" class="button" value="button">

    【CSS】

    #button3-9 {
background-color: #FDF6A4;
}

#button3-9:hover {
transform: skewX(30deg);
}

     
    skewX()は、X軸方向への傾斜です。
    上記のように指定すると、X軸方向へ30度傾斜します。
     

  • transform: skewY(30deg);


    • 【HTML】

    <input type="button" id="button3-10" class="button" value="button">

    【CSS】

    #button3-10 {
background-color: #ECF6CE;
}

#button3-10:hover {
transform: skewY(30deg);
}

     
    skewY()は、Y軸方向への傾斜です。
    上記のように指定すると、Y軸方向へ30度傾斜します。
     

    animationと@keyframes

    animationと@keyframesを使用することで、ボタンに動きや変化を細かく設定することができます。

     

    アニメーションとは

    CSSアニメーションを実現する方法として
    transitionとanimation＋@keyframesがあり、
    それぞれの違いは、以下のようになります。

    Transition
    ⇒ 一定時間でプロパティを変化させる機能であり、
    単純な動きのアニメーションを実装する際に、利用される。

    animation＋@keyframes
    ⇒ 細かい動きのアニメーションを実装する際に利用され、@keyframesを定義する。

    今回は、より細かなCSSを実現できるanimation＋@keyframesについて
    プロパティの説明も踏まえながら、実際にボタンを動かしてご紹介します。

     

    • @keyframesとは

    アニメーションの開始時(0%)から終了時(100%)までのプロパティを、細かく指定できるようになります。

    @keyframes animation名 {
0% {
プロパティ:値;
}
50% {
プロパティ:値;
}
100% {
プロパティ:値;
}
}

    このように%(パーセント)で、行いたい動作のタイミングを指定してあげることで
    より細かな動きの設定が、可能になります。

     

    • animationとは

    animationには6つのプロパティがあり、
    これらを組み合わせて指定することで様々な動きが可能になります。

     

    • animation-name

    @keyframesを適用する際、 アニメーション名を指定します。

     

    • animation-duration

    アニメーション一回分の時間の長さを、指定します。
    例えば、一回3秒のアニメーションを作成したいなら3sと指定します。

     

    • animation-timing-function

    アニメーションの進む速度を変更することで、動きを滑らかにする指定ができます。

    animation-timing-functionには、イージングという機能があり、アニメーションの進む速度を指定します。

    下記のイージングの種類を指定することで、アニメーションの動きを滑らかにすることができます。

    ・ease(開始と終了を滑らかにする)
    ・linear(一定)
    ・ease-in(ゆっくり始まる)
    ・ease-out(ゆっくり終わる)
    ・ease-in-out(ゆっくり始まってゆっくり終わる)
    ・cublic-bezier(減速、加速を独自に調整できる)

     

    • animation-delay

    アニメーションがいつ実行するかを、指定できます。
    時間を指定することで、その時間分アニメーションの再生を遅らせることができます。
    初期値は0で、”-”(マイナス)の場合はその時間を遡った状態から開始されます。

     

    • animation-iteration-count

    アニメーションの繰り返し回数を指定します。
    値に数値を入れるとその回数再生され、infiniteという値を使用すると、無限に再生が繰り返されます。

     

    • animation-direction

    下記の値を指定することで、アニメーションの再生方向を指定します。

    ・nomal：順方向で再生されます。
    ・reverse：逆方向に再生されます。
    ・alternate：奇数回では順方向、偶数回では逆方向で再生されます。
    ・alternate-reverse：奇数回では逆方向、偶数回では順方向で再生されます。

    以上のプロパティを使用し、実際にボタンを作成してみましょう！
    サンプルボタンにカーソルを重ねると、アニメーションが動作します。

     

    • 震えるボタン
    ConsultingCasley

     
     
     

    【CSS】

    .hurue:hover{
    animation: hurueru .1s  infinite;
}

@keyframes hurueru {
    0% {transform: translate(0px, 0px) rotateZ(0deg)}
    25% {transform: translate(2px, 2px) rotateZ(1deg)}
    50% {transform: translate(0px, 2px) rotateZ(0deg)}
    75% {transform: translate(2px, 0px) rotateZ(-1deg)}
    100% {transform: translate(0px, 0px) rotateZ(0deg)}
}

    translate = 要素の表示位置を変える(X軸、Y軸)
    rotate = 要素を回転させる(角度)。degをマイナスで指定すると、逆方向に回転する。

    transformプロパティを使用し、
    translateとrotateでY軸とX軸を指定して移動させつつ、角度を変えることでボタンを動かします。

    これを1sで動かしてみると… 震えるボタンのできあがりです！

    次は、translateの軸を変えてみます。

     

    • バウンドするボタン
    ConsultingCasley

     
     
     

    【CSS】

    .bound:hover{
  animation: bound .3s ease infinite alternate;
}

@keyframes bound{
  0% {transform: translateY(0px);}
  100% {transform: translateY(-10px);}
}

    animationプロパティの部分で紹介した、easeとalternateを使用します。

    ここでは、translateYでY軸方向に動かします。
    0%のときはそのままの位置、100%のときには”-”(マイナス)なのでY軸とは逆の方向に、
    上に10px移動させてalternateを指定することで、バウンドしているようにみせることができます！

     

    • 回転するボタン

    casley

     
     
     

    【CSS】

    .spin:hover{
  
  animation: spin .3s ease-in-out;
}

@keyframes spin {
  100% { transform: rotateY(360deg); }
}

    ここでは、rotateYを使用し、回転の角度を指定します。
    degを360に設定することで、一回転させています。

     

    他にも、

    casley

     
     
     
     

    【CSS】

    .button .ring {
        border-radius: 30% 50% 60% 30% / 60% 50% 40% 60%;
    background-color: #EFEFFB;
    position: absolute;
    z-index:-1;
    height: 30px;
    width: 80px;
    top: 15px;  
    left: 20px; 
}
.button:hover .ring {
    animation: wave 1.5s ease-out infinite;   
    
    }
@keyframes wave {
    0%   { transform: scale(0.5, 0.5); } 
    50%  { opacity: 1; } 
    100% { transform: scale(3, 3); opacity: 0.0; }
}

    z-indexで要素を重ねてscaleで拡大、縮小とopacityで透明度を
    設定することで、hoverをすると波動が出るようなボタンも作成できます。

    最後に

    今回ご紹介するにあたって、色々調べてみると改めてCSSの面白さを知ることができました。

    今回はHTMLとCSSだけで作成しましたが、
    JavaScriptなども使用したら、より楽しい動きなどが出来そうです。

    プロパティを変えることで他にも面白い動きや形を作成することができるので
    ぜひ皆さんもお試しください！

    最後までご覧いただきありがとうございました。

    木戸 恵美
    CSVIT事業部 LS(リーディングサービス)部 木戸 恵美
    新卒入社1年目のエンジニア。ご覧いただきありがとうございました！今回の記事で少しでもお役に立てたら幸いです。