LoginSignup
0
0

More than 3 years have passed since last update.

@orehdare(kunifu)

htmlとcssの雛形

Last updated at Posted at 2020-02-05

自分用のメモです．

最初のページ

home.html

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="home.css">
  </head>

  <body>
    <h2 id="home_title">機能一覧</h2>
    <form>
        <button class="btn-flat-logo">機能１</button>
    </form>
    <form>
        <button class="btn-flat-logo">機能２</button>
    </form>

  </body>
</html>

home.css

h2#home_title {
    color: #505050;/*文字色*/
    padding: 0.5em;/*文字周りの余白*/
    display: inline-block;/*おまじない*/
    line-height: 1.3;/*行高*/
    background: #dbebf8;/*背景色*/
    vertical-align: middle;
    border-radius: 25px 0px 0px 25px;/*左側の角を丸く*/
}

h2#home_title:before {
    content: '●';
    color: white;
    margin-right: 8px;
}

.btn-flat-logo {
    position: relative;
    display: inline-block;
    font-weight: bold;
    font-size: 1.0em;
    padding: 10px 30px;
    margin: 10px 30px;
    text-decoration: none;
    color: #FFF;
    background: #00bcd4;
    transition: .2s;
    border-radius: 25px 25px 25px 25px;
}

.btn-flat-logo:hover {
    background: #1ec7bb;
}

機能１の入力フォーム

func1.html

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="func1.css">
  </head>

  <body>
    <h2 id="func1_title">機能１</h2>
    <div class="box26">
      <span class="box-title">機能説明</span>
      <p>
        機能１では製品とその製品情報を指定することで，データベース中から指定した情報を検索しデータを整形して出力する．
      </p>
    </div>

    <table>
        <p class="form-items">製品名</p>
      <tr>
        <td><input class="textarea" type="text"></td>
      </tr>
    </table>

    <div>
      <a class="form-items">詳細設定</a>
      <button class="btn-change">＋</button>
    </div>
    <table>
      <tr>
        <td><input class="textarea" type="tel"></td>
        <td><button class="btn-change">ー</button></td>
      </tr>
      <tr>
        <td><input class="textarea" type="tel"></td>
        <td><button class="btn-change">ー</button></td>
      </tr>
      <tr>
        <td><input class="textarea" type="tel"></td>
        <td><button class="btn-change">ー</button></td>
      </tr>
    </table>

    <button id="button-search" class="simple_square_btn6">
      検索
    </button>
    <div>

    </div>
    <button id="button-back" class="btn-open">
      戻る
    </button>

  </body>
</html>

func1.css

body {
    font-family: "Avenir Next";
}

h2#func1_title:first-letter {
    font-size: 1.5em;
    color: #7172ac;
}

.box26 {
    position: relative;
    margin: 2em 0;
    padding: 1em 1em;
    width: 20%;
    border: solid 3px #95ccff;
    border-radius: 8px;
}
.box26 .box-title {
    position: absolute;
    display: inline-block;
    top: -13px;
    left: 10px;
    padding: 0 9px;
    line-height: 1;
    font-size: 18px;
    background: #FFF;
    color: #95ccff;
    font-weight: bold;
}
.box26 p {
    font-size: 12px;
    margin: 0; 
    padding: 0;
}

.textarea {
    /* width: 50%; 親要素いっぱい広げる */
    padding: 10px 15px; /*ボックスを大きくする*/
    font-size: 16px;
    border-radius: 3px; /*ボックス角の丸み*/
    border: 2px solid #ddd; /*枠線*/
    box-sizing: border-box; /*横幅の解釈をpadding, borderまでとする*/
}

table {
    border-collapse: separate;
    border-spacing: 10px;
}

.form-items {
    color: #2b546a;
    font-weight: bold;
    margin: 0;  
}

.form-items:before {
    content: '●';
    color: #2b546a;
    margin-right: 8px;
}


.btn-change {
    display: inline-block;
    position: relative;
    box-sizing: border-box;
    text-decoration: none;
    width: 30px;
    height: 30px;
    padding: 5px;
    border-radius: 50%;
    text-align: center;
    font-weight: bold;
    box-shadow: inset 0 2px 0px rgba(255, 255, 255, 0.25), inset 0 -2px 0px rgba(0, 0, 0, 0.18);
    transition: .2s;
}

.btn-change:hover {
    box-shadow: none;
}

.btn-change:active {
    -webkit-transform: translateY(1px);
    transform: translateY(1px);
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.35);
    border-bottom: none;
}

.center-obj {
    text-align: center;
}

.simple_square_btn6 {
    left: 30px;
    display: block;
    position: relative;
    width: 160px;
    padding: 0.8em;
    text-align: center;
    text-decoration: none;
    color: white;
    background: #0bc8b6;
    border-radius: 30px;
    -webkit-backface-visibility: hidden; 
    -moz-backface-visibility: hidden;
    backface-visibility: hidden;
    font-weight: bold;
    font-size: 12px;
}
.simple_square_btn6:hover {
    cursor: pointer;
    text-decoration: none;
    -webkit-animation: simple_square_btn6 0.5s both;
    -moz-animation: simple_square_btn6 0.5s both;
    animation: simple_square_btn6 0.5s both;
}
@-webkit-keyframes simple_square_btn6 {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  100% {
    -webkit-transform: scale(1.1);
            transform: scale(1.1);
  }
}
@-moz-keyframes simple_square_btn6 {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  100% {
    -webkit-transform: scale(1.1);
            transform: scale(1.1);
  }
}
@keyframes simple_square_btn6 {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  100% {
    -webkit-transform: scale(1.1);
            transform: scale(1.1);
  }
}

.btn-open {
    display: inline-block;
    top: 50px;
    /* left: 200px; */
    left: 0;
    width: 50px;
    height: 35px;
    text-align: center;
    background-color: #9ec34b;
    font-size: 10px;
    border-radius: 10px;
    color: #FFF;
    text-decoration: none;
    font-weight: bold;
    border: 2px solid #9ec34b;
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.btn-open:after{
    width: 100%;
    height: 0;
    content:"";
    position: absolute;
    top: 50%;
    left: 50%;
    background : #FFF;
    opacity: 0;
    transform: translateX(-50%) translateY(-50%) rotate(45deg);
    transition: .2s;
    z-index: -1;
}

.btn-open:hover{
    color: #9ec34b;
}

.btn-open:hover:after{
    height: 240%;
    opacity: 1;
}

.btn-open:active:after{
    height: 340%;
    opacity: 1;
}

機能１の結果

result1.html

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="result1.css">
  </head>

  <body>

    <table>
        <p id="product-title">製品名</p>
        <p id="product-name">プリンター</p>
    </table>

    <table>
        <p id="spec-title">スペック一覧</p>
        <tr>
            <td class="form-items">電力</td>
            <td>&nbsp;&nbsp;&nbsp;&nbsp;2.0</td>
        </tr>
        <tr>
            <td class="form-items">最大消費電力</td>
            <td>&nbsp;&nbsp;&nbsp;&nbsp;2.0</td>
        </tr>
        <tr>
            <td class="form-items">大きさ</td>
            <td>&nbsp;&nbsp;&nbsp;&nbsp;2.0</td>
        </tr>
    </table>

    <button id="button-back" class="btn-open">
      戻る
    </button> 

  </body>
</html>

result1.css

body {
    font-family: "Avenir Next";
}

p#product-title {
    max-width: 70px;
    font-size: 20px;
    font-weight: bold;
    /*線の種類（点線）2px 線色*/
    border-bottom: dashed 2px #6594e0;
}

p#product-name {
    margin: 100;
    font-size: 20px;
    color: #2b546a;
}

p#spec-title {
    max-width: 140px;
    font-size: 20px;
    font-weight: bold;
    /*線の種類（点線）2px 線色*/
    border-bottom: dashed 2px #6594e0;
}

.form-items {
    color: #2b546a;
    font-weight: bold;
    margin: 0;  
}

.form-items:before {
    content: '●';
    color: #2b546a;
    margin-right: 8px;
}

.btn-open {
    display: inline-block;
    top: 50px;
    left: 0;
    width: 50px;
    height: 35px;
    text-align: center;
    background-color: #9ec34b;
    font-size: 10px;
    border-radius: 10px;
    color: #FFF;
    text-decoration: none;
    font-weight: bold;
    border: 2px solid #9ec34b;
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.btn-open:after{
    width: 100%;
    height: 0;
    content:"";
    position: absolute;
    top: 50%;
    left: 50%;
    background : #FFF;
    opacity: 0;
    transform: translateX(-50%) translateY(-50%) rotate(45deg);
    transition: .2s;
    z-index: -1;
}

.btn-open:hover{
    color: #9ec34b;
}

.btn-open:hover:after{
    height: 240%;
    opacity: 1;
}

.btn-open:active:after{
    height: 340%;
    opacity: 1;
}

準備中ページ

mainte.html

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="mainte.css">
    <link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome-animation/0.0.10/font-awesome-animation.css" type="text/css" media="all" />
  </head>

  <body>
    <h1 class="ready">
        <i class="fas fa-redo-alt fa-spin"></i>
        準備中...
        <i class="fas fa-truck-pickup faa-passing animated"></i>
    </h1>
  </body>
</html>

mainte.css

body {
    font-family: "Avenir Next";
}

.ready {
    text-align:center;
    font-size: 70px;
    color: darkslategray;
}

.fa-redo-alt {
    font-size: 50px;
    font-family: "Font Awesome 5 Free";
    color: #5ab9ff; /*アイコン色*/
    right: 10px;
}

.fa-truck-pickup {
    font-family: "Font Awesome 5 Free";
    color: black;
}
0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
0
0