CSSを使ってデザインをキレイに見せる。-part1-

CSSを使ってWebページをキレイに見せる方法について調べてみた。

## 目標
名前、メールアドレスを登録するための仕組みを作りたいので、テキストボックスに入力し、ボタンでDB登録できるようなページを作りたい。

## 出来上がった画面
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3850581/badfc596-72ef-1dd4-969d-229f2fff5888.png)
※まだまだ改善の余地があり

## コード
<details>
<summary>実装</summary>

```html
<!DOCTYPE html>
<html lang="ja">
 <head>
    <meta charset="UTF-8">
    <script src="js/http.js" async></script>
    <link rel="stylesheet" href="css/sample.css" type="text/css">
    <title>HTML入門-JavaScriptの基本</title>
 </head>
 <body>
    <div class=container>
    <h1>文書の主見出し</h1>
        <div class="flexbox">
            <a href="" class="btn_04" onclick="ShowAlert()">ここをクリック</a>
            <a href="" class="btn_04" onclick="fetchUserInfo('page.html');">Get user info</a>
            <a href="page.html">サンプルページ</a>
        </div>
        <div class="nice-wrap">
            <input class="nice-textbox" type="text"/>
            <label class="nice-label" for="Username">Email</label>
        </div>
    </div>
 </body>
</html>
```

```css
h1 {
    /*線の種類（二重線）太さ 色*/
    border-bottom: double 5px #FFC778;
  }

.container {
    font-family: arial;
    font-size: 24px;
    margin-left: 250px;
    margin-right: 250px;
    outline: solid 2px gray;
  }

.flexbox {
    display: flex;
    flex-direction: column;
    /*text-align: center;*/
}

a.btn_04 {
	display: block;
	text-align: center;
	vertical-align: middle;
	text-decoration: none;
	width: 180px;
    /*margin: auto;*/
    margin-top: 1px;
    margin-bottom: 1px;
	padding: 1rem 4rem;
	font-weight: bold;
	border: 2px solid #27acd9;
	background: #27acd9;
	color: #fff;
	border-radius: 100vh;
	transition: 0.5s;
}
a.btn_04:hover {
	color: #27acd9;
	background: #fff;
}

/* テキストボックス */
.nice-wrap{
    position: relative;
    width: 500px;
    height: 100px;
    /*margin: 0 auto;*/
}
  
.nice-label{
    position: absolute;
    top: 15px;
    left: 10px;
    font-size: 16px;
    color: #a0a0a0;
    transition: all 0.25s ease;
    
    &.focus{
      top: -25px;
      left: 5px;
      font-size: 14px;
      color: #fff;
    }
}

.nice-textbox{
    position: relative;
    display: block;
    width: 500px;
    /*margin-top: 50px;*/
    margin-left: 5px;
    padding: 15px;
    border: solid;
    border-radius: 5px;
    font-size: 16px;
    color: #a0a0a0;
    /*outline: solid;*/
}
```

```js
function ShowAlert() {
    alert("Hello world!!");
}

function fetchUserInfo(userId) {
    const xhr = new XMLHttpRequest();
    xhr.open("GET", "https://127.0.0.1:8080/page.html");
    xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    const body = ""
    xhr.onload = () => {
        if (xhr.readyState == 4 && xhr.status == 201) {
            console.log(JSON.parse(xhr.responseText));
        } else {
            console.log(`Error: ${xhr.status}`);
        }
    };
    xhr.send();
}
```

</details>

## 参考
* CSSのコピペだけ！おしゃれな見出しのデザイン例まとめ68選

https://saruwakakun.com/html-css/reference/h-design

* CSSのmarginとは？paddingとは？余白の指定方法まとめ

https://saruwakakun.com/html-css/basic/margin-padding

* outline - CSS: Cascading Style Sheets - MDN Web Docs

https://developer.mozilla.org/en-US/docs/Web/CSS/outline

* 【CSS】flex-directionで要素を縦並び・横並びにする方法を解説

https://zero-plus.io/media/flex-direction-how-to-use/

* コピペですぐ使える！ビジネスライクなCSSボタンデザイン30選

https://excellent.ne.jp/homepage/6562/

* テキストボックスをおしゃれにするCSSスニペット16戦。フォームデザイン改善に。

https://kodocode.net/design-css-textbox/