@frswataru (本石渉)posted at 2021-01-22

HTML_CSS ボタンを中央に調整したい

Q&A

Closed

HTML CSS JavaScript

解決したいこと

ボタンを中央に調整したいにしたいです
解決方法を教えてください

出来るのであればボタンが無骨なデザインなのでカッコよくしてみたいです

はい私はド素人です

該当するソースコード

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" >
    <title>ECSS3.0</title>
    <link rel="stylesheet" href="css/stylesheet.css">
    <link href="css/slick.css" rel="stylesheet" type="text/css">
    <link href="css/slick-theme.css" rel="stylesheet" type="text/css">
<style>
    #container2 {
    overflow: hidden;
    }
    canvas {
    float: left;
    }
    #result-text {
    float: left;
    margin-left: 10px;
    }
</style>
</head>

<body>
    <script src="script.js"></script>
    <div class="header">
        <div class="header-logo"font-weight:bold;>E<span style="font-size:0.3em;font-weight:normal;">lectronic</span>
                                 C<span style="font-size:0.3em;font-weight:normal;">heck</span>
                                 S<span style="font-size:0.3em;font-weight:normal;">heet</span>
                                 S<span style="font-size:0.3em;font-weight:normal;">ystem</span>

        </div>

            <div id="container">
                <div class="circle icon">
                    <span class="bar top"></span>
                    <span class="bar middle"></span>
                    <span class="bar bottom"></span>
                </div>
            </div>

            <div id="containerLogo">
                    <a href="index.html"><img src="images/TCD_B.jpg"></a>   
            </div>




        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
        <script>
            $("#container").click(function () {
                $(".icon").toggleClass("close");
            })
        </script>
    </div>

<!-- <div class="main"> -->
    <nav id="nav">
        <ul>
            <!-- <li><a href="#" onclick="window.close(); return false;">Close</a></li> -->
            <li><a href="index.html">Menu</a></li>
        </ul>

    </nav>

    <div id='container2'>
        <canvas width='500' height='400'></canvas>
        <div id='result-text'></div>
        </div>

        <script src='https://cdnjs.cloudflare.com/ajax/libs/tesseract.js/2.1.4/tesseract.min.js'></script>
            <script>
            // canvas(video)&text(result-text)宣言
            const canvas = document.querySelector('canvas');
            const context = canvas.getContext('2d');

            const image = document.createElement('video');

            const resultText = document.getElementById('result-text');
            let textBlocks = [];

            // videoのサイズ変更
            image.videoWidth = canvas.width;
            image.videoHeight = canvas.height;

            navigator.mediaDevices.getUserMedia({
            video: {
            facingMode: { ideal: 'environment' },
            }
            })
            .then(stream => {
            image.srcObject = stream;
            image.play();

            videoDisplay();

            setTimeout(analysis);
            });


            // 赤枠の発火条件_Textデータの個数が0以上
            const videoDisplay = () => {
            context.drawImage(image, 0, 0, canvas.width, canvas.height);
            context.strokeStyle = "rgb(255, 0, 0) ";
            context.lineWidth = 3;
            // Path描画（閉じたオブジェクト）_ED
            context.beginPath(100, 175);
            context.lineTo(300, 175);
            context.lineTo(300, 250);
            context.lineTo(100, 250);
            context.lineTo(100, 175);
            context.closePath();
            context.stroke();　
            // Path描画（閉じたオブジェクト）_DS
            context.beginPath(305, 175);
            context.lineTo(390, 175);
            context.lineTo(390, 225);
            context.lineTo(305, 225);
            context.lineTo(305, 175);
            context.closePath();
            context.stroke();　





            // 青枠の発火条件_Textデータの個数が1以上
            context.strokeStyle = "rgb(0, 0, 255) ";
            textBlocks.forEach((block) => {
            context.beginPath(block.bbox.x0, block.bbox.y0);
            context.lineTo(block.bbox.x1, block.bbox.y0);
            context.lineTo(block.bbox.x1, block.bbox.y1);
            context.lineTo(block.bbox.x0, block.bbox.y1);
            context.lineTo(block.bbox.x0, block.bbox.y0);
            context.closePath();
            context.stroke();
            });

            // textBlocks
            console.log(textBlocks) 

            requestAnimationFrame(videoDisplay);
            };

            // 発火条件
            // async, awaitは非同期処理が終わるまで先に進まずに待つ
            const analysis = () => {
                (async () => {
                    // 文字を解析するための前準備
                    const worker = Tesseract.createWorker();
                    await worker.load();
                    await worker.loadLanguage('eng');
                    await worker.initialize('eng');
                    // recognizeで画像から文字を検出する
                    // { data: { text, blocks } }は分割代入でググって
                    const { data: { text, blocks } } = await worker.recognize(canvas.toDataURL(), {
                    // videoDisplayで文字を認識した範囲を表示したいからグローバルな変数に代入
                        rectangle: {
                        left: 100, top: 175, width: 200, height: 75
                        },

                    });

                    // textBlocks = blocks;
                    // Tesseract.createWorkerで作ったworkerを終了させる
                    await worker.terminate();

                    // recognizeで検出した文字を改行コードで区切ってをHTML上に表示させる
                    // resultText.innerHTML = text.replace(/\r?\n/g, '<br>');
                    // 1.0秒後にanalysisメソッドを実行する
                    setTimeout(analysis, 1000);
                    input1.value = text
                })();
            };
            </script>


    <!-- <div class="main"> 

        <div class="contents">

            <div class="contents-item">
                <a href="ocr.html"><img src="images/Camera.png"></a>
                <p>Camera</p>
            </div>
            <div class="contents-item">
                <img src="images/Create.png">
                <p>Create</p>   
            </div>

        </div>      
    </div> -->

<!-- </div> -->

<div class="SDkEP">
    <div id="inputWrapper">
        <div class="inputTextBox"　>
            <input id="input1" type="search" autocomplete="off"  aria-live="polite" placeholder="ED を入力">
        </div>      
        <div class="inputTextBox">          
            <input id="input2" type="search" autocomplete="off" aria-live="polite" placeholder="DS を入力">          
        </div>          
    </div>
</div>
<!-- チェックシート作成ボタン -->
<button id="btn">Create</button>
<script>
var btn = document.getElementById('btn');
btn.addEventListener('click', function() {
    // "/n"は改行
    var result =　window.confirm('ED:' + input1.value + '\n上記の内容でチェックシートを作成しますか？');
    if( result ) {
        alert('OKがクリックされました');
    }
    else {
        alert('キャンセルがクリックされました');
    }


})
</script>

</html>

CSS

body {
    font-family: "Avenir Next";
    color: #202124;
}

/* header */
.header{
    background-color:#26d0c9;
    color:#fff;
    padding: 20px 40px;
    position: relative;
}

.header-logo{
    /* float:left; */
    font-size:46px;
    /* padding:20px 40px; */
    text-align: center;
    font-weight:bold;

}

.copy-container span{
    color:#ff4a4a;
}

#container {
    background: tomato;
    display: inline-block;
    border-radius: 500px;
    margin: 10px;
    position: absolute;
    top: 10px;
    right: 0;
    padding: 18px;
    cursor: pointer;

}

#containerLogo {
    display: inline-block;
    border-radius: 500px;
    margin: 10px;
    position: fixed;
    top: 0;
    left: 0;
    cursor: pointer;

}

.circle {
    position: relative;
    width: 24px;
    height: 24px;
}

.bar {
    position: absolute;
    height: 3px;
    width: 100%;
    background: white;
    border-radius: 4px;
    transition: ease 0.3s;
}

.top {
    top: 18%;
}

.middle {
    top: 48%;
}

.bottom {
    top: 78%;
}

.close .top {
  transform: rotate(45deg);
  top: 48%;
}

.close .middle{
  opacity: 0;
}

.close .bottom {
  transform: rotate(-45deg);
  top: 48%;
}

/* nav */
nav {
    opacity: 0;
    visibility: hidden;
    transition: 0.3s;
    height: 0;
    /* float:left; */
}

nav.active{
    opacity: 1;
    visibility: visible;
    float:right;
}

ul {
    display: flex;
    justify-content: center;
}


li{
 list-style:none;
 padding: 8px;
 }
 /* main */

.main{
    padding:25px 40px;
}

/* contents */

.contents{
    display: flex;
    justify-content: center;
}

#container2{
    display: flex;
    justify-content: center;
}

.contents-item{
    /* width: 125px; */
    height: auto;
    float:left;
    margin: 50px 50px 0px 50px;
    text-align: center;
}

.contents-item img{
    width:100%;
  }

  .contents-item p{
    font-size:46px;
    margin: 0px;

}

/* SDkEP */

.SDkEP {
    display: flex;
    align-items: center;
    flex-direction: column;
  }

.contents-item:nth-of-type(2) {
    margin-left: 50px;
  }



.contents-item:nth-of-type(2) {
    margin-left: 50px;
  }



/* .contents-item_Camera{
    /* width: 125px; */
    /* height: auto;
    float:left;
    margin: 50px 50px 50px 288px;
    text-align: center;
} */

/* .contents-item_Create{
    width: 125px;
    height: auto;
    float:left;
    margin: 50px 50px;
    text-align: center;
}  */






.contents-item_Camera p{
    font-size:46px;
    margin: 0px;

}

.contents-item_Create p{
    font-size:46px;
    margin: 0px;

}

.inputTextBox {
    border: 1px solid #000;
    border-radius: 50px;
    padding: 8px 40px;
    width: 300px;
  }

  .inputTextBox:nth-of-type(2) {
    margin-top: 16px;
  }


input {
    background-color: var(--search-box-bg, white);
    border: none;
    border-radius: calc(0.5 * var(--ntp-realbox-height));
    color: var(--search-box-text);
    font-size: 16px;
    height: 100%;
    /* outline: none; */
    padding-inline-end: 40px;
    padding-inline-start: 52px;
    position: relative;
    width: 100%;
}

Are you sure you want to delete the question?

HTML_CSS ボタンを中央に調整したい

解決したいこと

該当するソースコード

1Answer

Comments

Your answer might help someone💌