CSSを使ってWebページをキレイに見せる方法について調べてみた。
目標
名前、メールアドレスを登録するための仕組みを作りたいので、テキストボックスに入力し、ボタンでDB登録できるようなページを作りたい。
出来上がった画面
※まだまだ改善の余地があり
コード
実装
<!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>
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;*/
}
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();
}
参考
- CSSのコピペだけ！おしゃれな見出しのデザイン例まとめ68選
- CSSのmarginとは？paddingとは？余白の指定方法まとめ
- outline - CSS: Cascading Style Sheets - MDN Web Docs
- 【CSS】flex-directionで要素を縦並び・横並びにする方法を解説
- コピペですぐ使える！ビジネスライクなCSSボタンデザイン30選
- テキストボックスをおしゃれにするCSSスニペット16戦。フォームデザイン改善に。