htmlとcssの雛形

自分用のメモです．

## 最初のページ
### home.html
```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
```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
```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 
```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
```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
```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
```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
```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;
}
```