「30行程度の簡単なCSS作成」へのGullwing2さんの提案一覧

Gullwing2さんの提案

  • 15
  • クライアントのお気に入り 0
    提案日時 2019年02月04日 17:40

    メンバーからのコメント

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

    <head>
    <meta charset="UTF-8">
    <title>editor</title>
    <link rel="stylesheet" type="text/css" href="./init.css">
    <script src="http://unpkg.com/vue@2.5.17"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

    <style>
    html, body, h1, h2, h3, h4, h5 {
    padding:0;
    margin: 0;
    }

    html{
    background-color: #f9f9f9;
    }

    body{
    font-family: "Open Sans","Helvetica Neue",Helvetica,Arial,"Yu Gothic",YuGothic,"ヒラギノ角ゴ ProN W3","Hiragino Kaku Gothic ProN","メイリオ",Meiryo,sans-serif;
    }

    h2{
    margin: 15px 0 0 ;
    letter-spacing: 2px;
    font-size: 30px;
    position: relative;
    border-bottom: 1px solid #ccc;
    }

    h2:after {
    position: absolute;
    bottom: -1px;
    left: 0;
    z-index: 2;
    content: '';
    width: 20%;
    height: 1px;
    background-color: #003f73;
    }

    h5{
    margin-bottom: 15px;
    }

    input {
    border: solid 1px #ccc;
    /*height: 80px;
    width: 240px;*/
    font-family: Arial, sans-serif;
    font-size: 1.0em;
    text-transform: lowercase;
    /*font-weight: bold;*/
    color: #333;
    cursor: pointer;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    border-radius: 5px;
    }

    .square_btn{
    display: inline-block;
    padding: 0.1em 1.5em;
    text-decoration: none;
    border: solid 1px #222222;
    background: #cccccc;
    border-radius: 5px;
    transition: .4s;
    font-size: 20px;
    }

    .square_btn:hover {
    background: #eeeeee;
    color: #FFF;
    }

    .wrapper{
    background-color: #f9f9f9;
    }

    .container{
    width: 1220px;
    margin: 0 auto;
    }

    .box{
    background-color: #f0f0f0;
    padding: 22px;
    }

    .txt{
    font-family: Arial, sans-serif;
    font-size: 1.6em;
    text-transform: lowercase;
    font-weight: bold;
    }

    .txt span{
    position: relative;
    left: 3px;
    top: -4px;
    font-size: 16px;
    }

    </style>

    </head>

    <body>
    <div class="wrapper">
    <div class="container">
    <div class="box">
    <div class="txt">
    <h2>初期設定</h2><br/>
    <h5>ライセンスキーを入力してください</h5>
    <form action="/initialize" method="POST">
    <input maxlength='4' size='4' name="block1"><span>-</span>
    <input maxlength='4' size='4' name="block2"><span>-</span>
    <input maxlength='4' size='4' name="block3"><span>-</span>
    <input maxlength='4' size='4' name="block4"><span>-</span>
    <input maxlength='4' size='4' name="block5"><span>-</span>
    <input maxlength='4' size='4' name="block6">
    <br/>
    <br/>
    <input type="submit" value="送信する" class="square_btn">
    <input type="button" value="リセット" class="square_btn">
    </form>
    </div>
    </div>
    </div>
    </div>


    </body>

    </html>


    こちらのソースで表現が可能です。

30行程度の簡単なCSS作成」への全ての提案