WEBサイト制作の勉強

WEBサイト制作の勉強の為の解説ブログです。

フェリカテクニカルアカデミー

10月19日作業データ

contactページ

<form action="" method="post" id="g-form">
<dl>
<dt>お名前</dt>
<dd><input type="text" name="" required placeholder="お名前を入力して下さい" autocomplete="name"></dd>
<dt>メールアドレス</dt>
<dd><input type="email" name="" required placeholder="メールアドレスを入力して下さい" autocomplete="email"></dd>
<dt>お問い合わせ内容</dt>
<dd><textarea name="" required placeholder="お問い合わせ内容を入力してください"></textarea></dd>
</dl>
<div class="btn-wrapper">
<input type="submit" value="送信">
<input type="reset" value="リセット">
</div>
</form>


svgアニメーション

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>文字のアニメーショ</title>
<style>
html,body{
margin: 0;
padding: 0;
}
body{
background-color: crimson;
}
.box{
width: 600px;
margin: 100px auto 0;
}
#txt path{
stroke:#FFF;
fill:crimson;/* 塗りの色 */
stroke-dasharray: 270px;
stroke-dashoffset: 270px;
animation: txt-anime 3s 0.5s linear forwards;
}
@keyframes txt-anime{
0%{stroke-dashoffset: 270px;}
80%{stroke-dashoffset: 0;fill:crimson;}
100%{stroke-dashoffset: 0;fill:#FFF;}
}
</style>
</head>
<body>
<div class="box">
<svg version="1.1" id="txt" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 404 122" style="enable-background:new 0 0 404 122;" xml:space="preserve">
<path id="XMLID_153_" d="M41.4,68V50.5c4,0,6-1.5,6-4.6c0-2.8-1.5-4.2-4.6-4.2c-3.1,0-4.6,1.9-4.6,5.8V91H18.3V49.5
	c0-4.3,0.4-7.8,1.3-10.6c0.9-2.8,2.3-5.3,4.4-7.7c2.3-2.6,5.3-4.7,8.8-6.3c3.5-1.5,7.1-2.3,10.9-2.3c6.8,0,12.5,2.3,17.1,6.8
	c4.6,4.6,6.9,10.2,6.9,16.9c0,6.5-2.1,11.8-6.2,15.9C57.7,66.1,52,68,44.4,68L41.4,68z"/>
<path id="XMLID_155_" d="M97.6,41.3c6.9,0,12.8,2.5,17.7,7.4c4.9,5,7.4,10.9,7.4,17.8c0,7-2.5,13-7.5,18c-5,4.9-11,7.4-18.1,7.4
	c-7.1,0-13.1-2.5-18.1-7.4c-5-5-7.5-10.9-7.5-17.9c0-7.1,2.5-13.1,7.5-18C84.1,43.7,90.3,41.3,97.6,41.3z M97.1,59.3
	c-2,0-3.6,0.7-5,2.1s-2.1,3.1-2.1,5.2c0,2,0.7,3.7,2.1,5.2c1.4,1.4,3,2.1,5,2.1c2,0,3.6-0.7,5-2.1c1.4-1.4,2.1-3.2,2.1-5.2
	c0-2.1-0.7-3.8-2.1-5.2S99.1,59.3,97.1,59.3z"/>
<path id="XMLID_158_" d="M157.1,41.8v19.5c-1.3-0.7-2.4-1.1-3.5-1.1c-3.3,0-5,2.5-5,7.6V91h-18.3V64.4c0-7,1.9-12.6,5.8-16.8
	c3.8-4.2,9-6.3,15.4-6.3C153,41.3,154.8,41.5,157.1,41.8z"/>
<path id="XMLID_160_" d="M178.7,24.3V43h8.2v19.3h-8.2c0,3.9,0.6,6.5,1.8,8s3.5,2.2,6.7,2.2v19.2c-0.9,0-1.6,0-2.1,0
	c-4.1,0-8-1-11.7-2.9c-3.7-1.9-6.6-4.5-8.8-7.8c-2.8-4.2-4.2-9.8-4.2-16.7v-40H178.7z"/>
<path id="XMLID_162_" d="M222.3,53.1v19.1h-8.2V91h-18.3V49.6c0-4.7,0.8-8.6,2.4-11.9c2-4.2,5.1-7.6,9.2-10.3c4.1-2.7,8.4-4,12.9-4
	l2,0v19.1c-0.4,0-0.7,0-0.9,0c-2.3,0-4.1,0.8-5.3,2.3c-1.3,1.5-1.9,3.7-1.9,6.5v1.7H222.3z"/>
<path id="XMLID_164_" d="M253.4,41.3c6.9,0,12.8,2.5,17.7,7.4c4.9,5,7.4,10.9,7.4,17.8c0,7-2.5,13-7.5,18c-5,4.9-11,7.4-18.1,7.4
	c-7.1,0-13.1-2.5-18.1-7.4c-5-5-7.5-10.9-7.5-17.9c0-7.1,2.5-13.1,7.5-18C239.9,43.7,246.1,41.3,253.4,41.3z M252.9,59.3
	c-2,0-3.6,0.7-5,2.1s-2.1,3.1-2.1,5.2c0,2,0.7,3.7,2.1,5.2c1.4,1.4,3,2.1,5,2.1c2,0,3.6-0.7,5-2.1c1.4-1.4,2.1-3.2,2.1-5.2
	c0-2.1-0.7-3.8-2.1-5.2S254.9,59.3,252.9,59.3z"/>
<path id="XMLID_167_" d="M304.5,24.3V91h-18.3V24.3H304.5z"/>
<path id="XMLID_169_" d="M333.4,42.3V91h-18.3V42.3H333.4z M324.3,20.6c2.5,0,4.6,0.9,6.4,2.6c1.8,1.7,2.7,3.8,2.7,6.2
	c0,2.5-0.9,4.6-2.6,6.3c-1.7,1.6-3.9,2.4-6.6,2.4c-2.7,0-4.9-0.8-6.6-2.4c-1.7-1.6-2.6-3.7-2.6-6.3c0-2.4,0.9-4.4,2.7-6.2
	C319.7,21.5,321.9,20.6,324.3,20.6z"/>
<path id="XMLID_172_" d="M367.2,41.3c6.9,0,12.8,2.5,17.7,7.4c4.9,5,7.4,10.9,7.4,17.8c0,7-2.5,13-7.5,18c-5,4.9-11,7.4-18.1,7.4
	c-7.1,0-13.1-2.5-18.1-7.4c-5-5-7.5-10.9-7.5-17.9c0-7.1,2.5-13.1,7.5-18C353.7,43.7,359.9,41.3,367.2,41.3z M366.8,59.3
	c-2,0-3.6,0.7-5,2.1s-2.1,3.1-2.1,5.2c0,2,0.7,3.7,2.1,5.2c1.4,1.4,3,2.1,5,2.1c2,0,3.6-0.7,5-2.1c1.4-1.4,2.1-3.2,2.1-5.2
	c0-2.1-0.7-3.8-2.1-5.2S368.7,59.3,366.8,59.3z"/>
</svg>

</div>
</body>
</html>