HTML、CSS、JavaScriptで作るボタンシミュレーター。

投稿日：2021年1月2日

前回のCSS 禁則処理シミュレーターに引き続き、あったら便利そうなボタン作成シミュレーターを、HTML、CSS、JavaScriptで作ってみました。

ボタン

▲こんな感じのボタン。

.myBtn{
    background-color:#f00;
    padding:0.25em;
    text-align:center;
    border-radius:10px;
    box-shadow:2px 2px 3px #ccc;
    color:#fff;
    width:5em;
    cursor:pointer;
}

▲毎回、CSS書くの面倒ですよね。

コピペでいいじゃん！と思うかも知れませんが、勉強のため作ってみました。

『テキスト』と書かれている箇所のテキストは任意入力できます。
widthは、入力した文字数+1になり、単位はemになります。
例：4文字だったら5em。
それぞれのプロパティを変更すると見た目と、右（レスポンシブ時は下）のCSSがダイレクトに変更します。
paddingとborder-radiusは単位の切り替えが可能です。
box-shadowの単位はpxのみにしてあります。
バリデートは厳密にしてないので、数値の箇所に数値以外のものも入力できてしまいます。
コピーボタンをクリックするとプロパティと値がコピーされます。

今回もせっかくなので、iframe内のHTML、CSS、JavaScriptを掲載しておきます。

HTML

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/style.css">
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"
        integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>

</head>

<body>
    <section id="contentsWrap">
        <div id="inputWrap">
            <div id="createBtn"></div>
            <form action="">
                <p><input type="text" name="text" value="テキスト" id="txtVal"></p>
        
                <div id="bgc01Wrap">
                    <p>
                        color:
                        <input type="color" value="#ffffff" id="bgc01">
                    </p>
                    <p id="bgc01Txt"></p>
                </div>
        
                <p>padding：<input type="text" name="padding" id="paddingVal" value="5">
                    <select name="paddingSelect" id="paddingSelect">
                        <option value="px">px</option>
                        <option value="em">em</option>
                        <option value="pt">pt</option>
                        <option value="%">%</option>
                    </select>
        
        
                    <p>border-radius：<input type="text" name="borderRadius" id="borderRadiusVal" value="5">
                        <select name="borderRadiusSelect" id="borderRadiusSelect">
                            <option value="px">px</option>
                            <option value="em">em</option>
                            <option value="pt">pt</option>
                            <option value="%">%</option>
                        </select>
                    </p>
        
                    <p>box-shadow：<br>
                        <p>X：<input type="text" name="boxShadowX" id="boxShadowXVal" value="2"> px</p>
                        <p>Y：<input type="text" name="boxShadowY" id="boxShadowYVal" value="2"> px</p>
                        <p>ぼかし：<input type="text" name="boxShadowBlur" id="boxShadowBlurVal" value="2"> px</p>
                        <div id="bgc01Wrap">
                            <p>
                                ぼかしカラー：
                                <input type="color" value="#898989" id="bgc02">
                            </p>
                            <p id="bgc02Txt"></p>
                        </div>
                    </p>
                    <div id="bgc03Wrap">
                        <p>
                            背景色：
                            <input type="color" value="#ff0000" id="bgc03">
                        </p>
                        <p id="bgc03Txt"></p>
                    </div>
        
            </form>
        </div>
        <div id="elmStyleWrap">
            <div class="elmStyle">
                <p>element.style {</p>
                    <p class="colorProp">color<span class="colorPropVal"></span></p>
                    <p class="paddingProp">padding<span class="paddingPropVal"></span></p>
                    <p class="boderRadiusProp">border-radius<span class="boderRadiusPropVal"></span></p>
                    <p class="boxShadowProp">box-shadow<span class="boxShadowPropVal"></span></p>
                    <p class="bgcProp">background-color<span class="bgcPropVal"></span></p>
                    <p class="cursorProp">cursor<span class="cursorPropVal">: pointer ;</span></p>
                    <p>}</p>
            </div>
            <div id="btnWrap"><p class="button copyBtn">コピー</p></div>
        </div>
    </section>
    <script src="js/index.js">

    </script>
</body>

</html>

CSS

body {
    box-sizing: border-box;
}

form p {
    margin: .25em;
}

#contentsWrap {
    display: flex;
    flex-wrap: wrap;
}

#bgc01Wrap,
#bgc02Wrap,
#bgc03Wrap {
    display: flex;
}

#paddingVal,
#borderRadiusVal,
#boxShadowXVal,
#boxShadowYVal,
#boxShadowBlurVal {
    width: 3em;
    text-align: right;
}

#txtVal {
    color: #ffffff;
    cursor: pointer;
    text-align: center;
    border: initial;
}

#btnWrap {
    display: flex;
    justify-content: flex-end;
}

.button {
    background-color: #ccc;
    width: 7em;
    text-align: center;
    padding: 0.125em;
    border-radius: 7px;
    box-shadow: 2px 2px 2px #aaa;
    font-size: 0.75em;
    cursor: pointer;
    transition: .3s;
}

.button:hover {
    background-color: #ddd;
    transition: .3s;
}

.elmStyle {
    background-color: rgb(36, 36, 36);
    font-size: .9em;
    color: #fff;
    width: 320px;
    padding: .5em 1em;
}

.elmStyle p {
    margin: 0;
}

.elmStyle p.colorProp,
.elmStyle p.paddingProp,
.elmStyle p.boderRadiusProp,
.elmStyle p.boxShadowProp,
.elmStyle p.bgcProp,
.elmStyle p.cursorProp {
    color: rgb(54, 212, 199);
    margin-left: 1.5em;
}

.elmStyle p.lbProp,
.elmStyle p.wbProp,
.elmStyle p.owProp {
    display: none;
}

.elmStyle span {
    color: #fff;
}

#elmStyleWrap {
    margin: 1em 0 0 1em;
}

@media screen and (max-width:1104px) {
    #elmStyleWrap {
        margin: 0;
    }
}

.copyBtn {
    margin: .5em 0;
}

JavaScript

jQuery(document).ready(function ($) {
    //////////////////////////////////
    // ▼▼▼ 初期設定
    let txtValLen = $('#txtVal').val().length, //テキスト数
        paddingVal = $('#paddingVal').val(), //padding
        borderRadiusVal = $('#borderRadiusVal').val(), //border-radius
        boxShadowXVal = $('#boxShadowXVal').val(), //box-shadow X
        boxShadowYVal = $('#boxShadowYVal').val(), //box-shadow Y
        boxShadowBlurVal = $('#boxShadowBlurVal').val(), //box-shadow ぼかし
        bgc01Val = $('#bgc01').val(), //color
        bgc02Val = $('#bgc02').val(), //box-shadow カラー
        bgc03Val = $('#bgc03').val(); //background-color

    $('#bgc01Txt').text(bgc01Val); //color値を表示
    $('#bgc02Txt').text(bgc02Val); //box-shadowのぼかしカラー値を表示
    $('#bgc03Txt').text(bgc03Val); //background-color値を表示

    $('#paddingSelect').change(function () {
        paddingSelectVal = $(this).val();
    })
    $('#txtVal').css({
        color: bgc01Val,
        width: txtValLen + 1 + "em",
        padding: paddingVal + $('#paddingSelect').val(), //padding
        borderRadius: borderRadiusVal + $('#borderRadiusSelect').val(), //border-radius
        boxShadow: boxShadowXVal + "px " + boxShadowYVal + "px " + boxShadowBlurVal + "px " + bgc02Val, //box-shadow
        backgroundColor: bgc03Val,
    });


    //////////////////////////////////
    // ▼▼▼ プロパティ表示枠
    $('.colorPropVal').html(' :  ' + bgc01Val + ' ;');
    $('.paddingPropVal').html(' :  ' + paddingVal + $('#paddingSelect').val() + ' ;');
    $('.boderRadiusPropVal').html(' :  ' + borderRadiusVal + $('#borderRadiusSelect').val() + ' ;');
    $('.boxShadowPropVal').html(' :  ' + boxShadowXVal + "px " + boxShadowYVal + "px " + boxShadowBlurVal + "px " + bgc02Val + ' ;');
    $('.bgcPropVal').html(' :  ' + bgc03Val + ' ;');


    //////////////////////////////////
    // ▼▼▼ 値が変更された場合の処理
    // テキスト数
    $('#txtVal').change(function () {
        const txtValLen = $(this).val().length;
        $('#txtVal').css('width', (txtValLen + 1) + "em");
    });

    // color
    $('#bgc01').change(function () {
        // ▼テキストカラー
        $('#txtVal').css('color', $(this).val());
        // ▼テキストカラー表示
        $('#bgc01Txt').text($(this).val());
        // ▼プロパティ表示枠内
        $('.colorPropVal').html(' :  ' + $(this).val() + ' ;');
    });

    // padding
    $('#paddingVal').change(function () {
        // ▼padding
        $('#txtVal').css('padding', $(this).val() + $('#paddingSelect').val());
        // ▼プロパティ表示枠内
        $('.paddingPropVal').html(' :  ' + $(this).val() + $('#paddingSelect').val() + ' ;');
    });
    $('#paddingSelect').change(function () {
        // ▼単位変更
        $('#txtVal').css('padding', $('#paddingVal').val() + $(this).val());
        // ▼プロパティ表示枠内
        $('.paddingPropVal').html(' :  ' + $('#paddingVal').val() + $(this).val() + ' ;');
    });

    // border-radius
    $('#borderRadiusVal').change(function () {
        // ▼border-radius
        $('#txtVal').css('borderRadius', $(this).val() + $('#borderRadiusSelect').val());
        // ▼プロパティ表示枠内
        $('.boderRadiusPropVal').html(' :  ' + $(this).val() + $('#borderRadiusSelect').val() + ' ;');
    });
    $('#borderRadiusSelect').change(function () {
        // ▼単位変更
        $('#txtVal').css('borderRadius', $('#borderRadiusVal').val() + $(this).val());
        // ▼プロパティ表示枠内
        $('.boderRadiusPropVal').html(' :  ' + $('#borderRadiusVal').val() + $(this).val() + ' ;');
    });

    //box-shadow
    boxShadowConfig('#boxShadowXVal');
    boxShadowConfig('#boxShadowYVal');
    boxShadowConfig('#boxShadowBlurVal');
    boxShadowConfig('#bgc02');

    function boxShadowConfig(target) {
        $(target).change(function () {
            let boxShadowXVal = $('#boxShadowXVal').val(), //X値
                boxShadowYVal = $('#boxShadowYVal').val(), //Y値
                boxShadowBlurVal = $('#boxShadowBlurVal').val(), //blur値
                bgc02Val = $('#bgc02').val();
            // ▼box-shadow
            $('#txtVal').css('boxShadow', boxShadowXVal + "px " + boxShadowYVal + "px " + boxShadowBlurVal + "px " + bgc02Val);
            // ▼プロパティ表示枠内
            $('.boxShadowPropVal').html(' :  ' + boxShadowXVal + "px " + boxShadowYVal + "px " + boxShadowBlurVal + "px " + bgc02Val+ ' ;');
            // ▼ぼかしカラー表示
            $('#bgc02Txt').text(bgc02Val);
        });
    }

    // background-color
    $('#bgc03').change(function () {
        // ▼background-color
        $('#txtVal').css('backgroundColor', $(this).val());
        // ▼background-color表示
        $('#bgc03Txt').text($(this).val());
        // ▼プロパティ表示枠内
        $('.bgcPropVal').html(' :  ' + $(this).val() + ' ;');
    });


    //////////////////////////////////
    // ▼▼▼ コピー押下でプロパティをクリップボードに送る
    $('.copyBtn').click(function () {
        const txtVal = $('.elmStyle p:visible').text();
        const repTxt = txtVal.replace(/ (;)/g, '$1'); //セミコロンの前の半角スペースを削除
        // ▼クリップボードに送る
        const txtArea = $('');
        txtArea.text(repTxt);
        $(this).append(txtArea);
        txtArea.select();
        document.execCommand('copy');
        txtArea.remove();
    });
});

まとめ

最初はIris Color Picker を使おうと思いましたが、クリックイベントでうまく色が拾えずあきらめました。
HTML5のinput type="color"を使用しました。
正月休みに書きましたが、やる気モードにならず簡単なプログラムですが3日も費やしてしまいました。
今年もWeb界隈のことや、Adobe関連のことなど取り上げてゆきたいと思います。

なお、掲載しているソースコードはご自由にお使いいただいても構いませんが、何かあっても責任は追いかねるのでご了承ください。

最後まで読んでくださりありがとうございました。
本年もどうぞ、宜しくお願いします。