山田やまだ花子はなこ

「何か一言とかあれば」

性別	○○
職業	○○
年齢	○○歳
誕生日	○月○日

容姿

長文スペース。詳細な設定などが記述できます。

性格

長文スペース。詳細な設定などが記述できます。
　海のおきへ、遠く遠く出ていきますと、水の色は、いちばん美しいヤグルマソウの花びらのようにまっさおになり、きれいにすきとおったガラスのように、すみきっています。けれども、そのあたりは、とてもとても深いので、どんなに長いいかり綱づなをおろしても、底まで届くようなことはありません。海の底から、水の面おもてまで届くためには、教会の塔とうを、いくつもいくつも、積みかさねなければならないでしょう。そういう深いところに、人魚たちは住んでいるのです。
「人魚の姫」ハンス・クリスチャン・アンデルセン／青空文庫

ソースコード

自動改行「しない」で作成。

色違い→ ペパーミント#00ac9a ／ストロベリー#e73562 ／アプリコット#f7b977 ／グレープ#56256e

HEAD

@font-face
{
font-family: しねきゃぷしょん;
src: url('https://cdn.leafscape.be/cinecaption/cinecaption227.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: #e73562; /* アクセントカラー */
}

body{
font-family: 'M PLUS Rounded 1c', sans-serif;
font-size:0.9em;
line-height: 1.5;
}

a{
text-decoration: none;
color: #999;
}

.bg {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background-color: #fffff;
opacity: 0.4;
z-index: -10;
background-image:  radial-gradient(#ffffff 2px, transparent 2px), radial-gradient(#ffffff 2px, var(--main-color) 2px);
background-size: 40px 40px;
background-position: 0 0,20px 20px;
}

.wrp{
background: rgba(255,255,255,0.8);
width:90%;
max-width:600px;
margin: 30px auto;
}

header{
font-family: しねきゃぷしょん;
text-align: center;
padding: 30px 10px;
margin: 30px auto 5px;
}

h1 {
font-family: しねきゃぷしょん;
font-size: 2em;
}

h2 {
font-family: しねきゃぷしょん;
font-size: 1.2em;
padding: 10px 5px;
margin: 15px 10px;
transform: rotate(-5deg);
}
h2 span{
background:linear-gradient(transparent 60%, #ccc 60%);
}

hr {
border-width: 10px 0 0 0;
border-style: dotted;
border-color: #ccc;
}

.icon{
width: 100px;
height: 100px;
margin: 0 auto;
border: double var(--main-color) 8px;
}

table{
width: 80%;
margin: 0 auto;
border-collapse: separate;
border-spacing: 0px 2px;
}

table th{
width: 40%;
background-color: var(--main-color);
color: #fff;
text-align: center;
padding: 10px 0;
border-radius: 20px 0 0 20px;
}

table td{
text-align: left;
width: 60%;
text-align: center;
background-color: #eee;
padding: 10px 0;
border-radius: 0 20px 20px 0;
}

.text{
background: rgba(255,255,255,0.6);
width: 80%;
margin: 0 auto;
padding: 5px 1em;
}

footer{
text-align: center ;
margin: 50px auto 20px;
}
</style>

BODY