名字 名前

配布ページ

↓HEAD編集にコピペしてね↓
<style type="text/css"> @import url('https://fonts.googleapis.com/css2?family=Quicksand&family=Sawarabi+Gothic&display=swap'); @font-face { font-family:"ロゴたいぷゴシック-コンデンスド" ; src: url('https://cdn.leafscape.be/LogoTypeGothicCondense/07LogoTypeGothic-Condense_web.woff2') format("woff2"); } *,::after,::before{box-sizing:border-box} *{margin: 0; padding: 0;} ol,ul{list-style:none} img{max-width:100%} table{border-collapse:collapse} textarea{white-space:revert} :root{ --main-color: #a2c2e6; /* アクセントカラー。ここだけ変更でOK */ } body{ font-family: 'Quicksand','Sawarabi Gothic', sans-serif; font-size:0.85em; line-height:1.5; margin: 0; padding: 0; background: radial-gradient(circle, transparent 20%, var(--main-color) 20%, var(--main-color) 80%, transparent 80%, transparent), radial-gradient(circle, transparent 20%, var(--main-color) 20%, var(--main-color) 80%, transparent 80%, transparent) 50px 50px, linear-gradient(rgba(255, 255, 255, 0.5)8px, transparent 8px) 0 -4px, linear-gradient(90deg, rgba(255, 255, 255, 0.5) 8px, transparent 8px) -4px 0; background-color: var(--main-color); background-size:100px 100px, 100px 100px, 50px 50px, 50px 50px; background-repeat: repeat; } a{ text-decoration:none; color: #999; } .wrp{ background: #fff; width: 90%; max-width: 600px; margin: -100px auto 10px; padding: 50px 10px 10px; } header{ background: #fff; font-size:1.2em; text-align: center ; margin: 50px auto 0; width: 200px; height: 200px; border-radius: 50%; } .top{ margin-top: 50px;} hr { height: 8px; border: none; border-top: dashed 2px #000; margin:30px auto; } h1{ font-family:"ロゴたいぷゴシック-コンデンスド" ; font-size:1.5em; color: #000; text-shadow: 1px 1px 0px #fff, -1px 1px 0px #fff, 1px -1px 0px #fff, -1px -1px 0px #fff, 4px 4px 0px var(--main-color); } header a { background: var(--main-color); color: #000; box-shadow: 0px 0px 0px 3px var(--main-color); border: dashed 1px #fff; margin: 10px; padding: 0.2em 0.5em; width: 100px; } h3{ font-family:"ロゴたいぷゴシック-コンデンスド" ; font-size:1.2em; border-bottom: dotted 3px var(--main-color); font-weight: 400; } .waku{ width:90%; box-shadow: 5px 5px 0 var(--main-color); margin: 20px auto 30px; } .text{ margin: 0 15px 20px; padding-right: 0.5em; padding-left: 0.5em; line-height: 2em; background-color: #fff; background-image: linear-gradient(90deg, rgba(237, 119, 128, 0) 0%, rgba(237, 119, 128, 0) 50%, #fff 0%, #fff 100%), linear-gradient(180deg, rgba(100, 100, 100, 0) 0%, rgba(100, 100, 100, 0) 97.5%, #646464 100%); background-size: 8px 100%,100% 2em; } .right{ text-align: right; font-size: 0.7em; } footer{ text-align: center ; margin: 50px auto 20px; } </style>

↓ページ編集にコピペしてね↓
<header> <div class="top"> <h1>名字 名前</h1> <img src="＃アイコン画像URL＃" class="icon"> </div> </header> <div class="wrp"> <div class="waku"> <h3>Q.最初にお名前と読み仮名を教えて下さい</h3> <div class="text">A.吾妻 晴臣、あづま はるおみ です。</div> </div> <div class="waku"> <h3>Q.質問</h3> <div class="text">A.回答</div> </div> <footer> <a href="戻り先URL">Back</a> </footer> </div>

ここから下は確認用