MENU
    1. ホーム
    2. スキル
    3. CSSのみで「ボタンクリック時」に動作を行う方法とは？

    CSSのみで「ボタンクリック時」に動作を行う方法とは？

    スキル
    thumnail

    ボタンクリックを行った時に「何かの動作」を行うには「Javascript」などのプログラミング言語が必要になりますが、今回は「CSSのみ」を利用して「ボタンクリック」を行った時に動作を行う方法をお話していきたいと思います。

    目次

    チェックボックス

    「checkbox要素」を利用すると、「ボタンのような動作」を実現することができます。

    チェックボックスは、

    のように、通常は「チェック状態」と「未チェック状態」をサーバーに送信するなどの用途で利用していきます。

    今回は「ボタン」のように表示をしたいので、デフォルトの「チェックボックス」のスタイルを無効化します。

    スタイルを無効化する「CSSプロパティ」は、

    -webkit-appearance: none;
-moz-appearance: none;
appearance: none;

    のようになります。

    これをチェックボックスの要素に適用します。

    例えば、

    <input type="checkbox" class="button">

    のようにHTML要素を作成し、CSSに

    .button {
    width: 250px;
    height: 50px;
    background: #000;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

    のように指定します。

    表示をすると、

    のようになります。

    文字を表示したい場合は、

    .button {
    width: 250px;
    height: 50px;
    background: #000;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    position: relative;
    display: block;
}

.button::before {
    content: "ボタンに表示する文字";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
}

    のように「before疑似要素」を追加して表示します。

    このコードの表示は、

    のようになります。

    「チェックボックスの動作」の作り方

    CSSの「checked属性」の有無によって表示状態を変化させることができます。

    この性質を利用して「チェックボックス」を「ボタン」のように利用していきます。

    今回作る内容は下のようになります。

    「チェックボックス」で作成したボタンをクリックをすると、ボタンの下部にある「インテリア写真」の「グレースケール」と「カラー」の表示を切り替えることができます。

    このコードのHTMLは、下記のようになります。

    <body>
    <input type="checkbox" class="button">
    <img src="photo.jpg">
</body>

    そしてCSSは下記のようになります。

    .button {
    width: 300px;
    height: 50px;
    margin: 30px auto;
    background: #000;
    border-radius: 30px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    transition: 3s;
    position: relative;
    display: block;
}

.button:checked {
    background: linear-gradient(to right, #0bb492, #7ac426 50%, #4420e4);
 }

.button::before {
    content: "白黒へ切り替え";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
}

.button:checked::before {
    content: "カラーへ切り替え";
  }

.button+img {
    width: 100%;
    display: block;
    margin: 30px auto;
    transition: 3s;
 }

.button:checked+img {
    filter: grayscale(100%);
    transition: 3s;
}

    では、「複数のボタン」を用意してボタンによって動作を切り替えたい場合はどのようにすればいいのでしょうか？

    その場合は「ラジオボタン」を利用すると実現することができます。

    ラジオボタン

    ラジオボタンは、

    ボタン１ ボタン２ ボタン３

    のように複数の選択肢を表示できるボタンです。

    これも、先ほどのチェックボックスと同じように

    -webkit-appearance: none;
-moz-appearance: none;
appearance: none;

    を設定すると、既存のスタイルを無効化することができます。

    その後、「チェックボックス」と同様に「ボタン表示」になるようにCSSでスタイリングを行います。

    「ラジオボタンの動作」の作り方

    ラジオボタンをクリックすると図形の形が変化するコンテンツを作ってみました。

    下のボタンをクリックすると図形の形を変えることができます。

    ラジオボタンのHTMLコードを下記のように作成しました。

    <div class="radio-buttons">
    <input type="radio" name="buttons" checked>
    <input type="radio" name="buttons">
    <input type="radio" name="buttons">
    <div class="obj"></div>
</div>

    CSSは下記のように作成しています。

    input[type="radio"] {
    width: 33%;
    height: 50px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: linear-gradient(to right, #0bb492, #7ac426 50%, #4420e4);
    position: relative;
    display: block;
    margin: 10px auto;
}

input[type="radio"]::before {
    content: " ";
    color: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.radio-buttons input:nth-child(1)::before {
    content: "四角形";
}

.radio-buttons input:nth-child(2)::before {
    content: "ひし形";
}

 .radio-buttons input:nth-child(3)::before {
    content: "台形";
}

.radio-buttons input:checked {
    background: linear-gradient(to left, #0bb492, #1db925 50%, #8c7ada);
}

.radio-buttons input[type="radio"]:checked:nth-child(1)~.obj {
    //「四角形ボタン」がクリックされた時の表示
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
    background-color: rgb(70, 230, 70);
    transition: 3s;
}

.radio-buttons input[type="radio"]:checked:nth-child(2)~.obj {

    //「ひし形ボタン」がクリックされた時の表示
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
    background-color: rgb(45, 13, 187);
    transition: 3s;
}

.radio-buttons input[type="radio"]:checked:nth-child(3)~.obj {
    //「台形ボタン」がクリックされた時の表示
    clip-path: polygon(20% 0%, 80% 0%, 100% 100%, 0% 100%);
    background-color: rgb(223, 15, 77);
    transition: 3s;
}

.obj {
    width: 200px;
    height: 200px;
    background-color: #000;
    margin: 50px auto;
}

    このコードの

    .radio-buttons input[type="radio"]:checked:nth-child(1)~.obj {
    //「四角形ボタン」がクリックされた時の表示
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
    background-color: rgb(45, 13, 187);
    transition: 3s;
}

.radio-buttons input[type="radio"]:checked:nth-child(2)~.obj {
    //「ひし形ボタン」がクリックされた時の表示
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
    background-color: rgb(45, 13, 187);
    transition: 3s;
}

.radio-buttons input[type="radio"]:checked:nth-child(3)~.obj {
    //「台形ボタン」がクリックされた時の表示
    clip-path: polygon(20% 0%, 80% 0%, 100% 100%, 0% 100%);
    background-color: rgb(223, 15, 77);
    transition: 3s;
}

    でラジオボタンがクリックされた時の「図形の形」を変化させています。

    ラジオボタンの「checked属性」を利用して、「clip-pathプロパティ」で図形の形を指定して、「transitionプロパティ」でアニメーション時間を設定しています。

    図形部分は「objクラス」を追加した「div要素」ですが、この要素は「後続兄弟セレクタ」の「～」で指定しています。

    スキル
    CSS

    この記事を書いた人

    KANAKOのアバター KANAKO

    システム開発会社のWEBデザイン部で「デザイン＆サイト構築」を担当しています。

    この著者の記事一覧へ

    関連記事

    目次