山田やまだ花子はなこ

「何か一言とかあれば」

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

for example

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

ソースコード

自動改行「しない」で作成。
シンプルイズベストな感じを目指した。

色違い→ ミモザ#fff462 ／トマト#ff6347 ／プラム#dda0dd ／ライム#00ff00

HEAD

*,::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}
hr { height: 0; margin: 0; padding: 0; border: 0;}

:root{
--main-color: #dda0dd; /* アクセントカラー */
}

body{
font-family: 'Quicksand','Sawarabi Gothic', sans-serif;
font-size:0.85em;
line-height:1.5;
margin: 0;
padding: 0;
}

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

.wrp{
background: #fff;
width: 90%;
max-width: 600px;
margin: 0 auto;
padding: 10px;
}

header{
font-family: 'Yomogi';
font-size:1.2em;
text-align: center ;
margin: 50px auto 50px;
}

header .icon{
width:100px;
height:100px;
margin-right:6px;
vertical-align: middle;
box-shadow: 5px 5px 0 var(--main-color);
}
header .name{
display: inline-block;
vertical-align: middle;
}
header h1{
margin:0;
font-weight:bold;
}
header p{
margin:0;
line-height: 1.5;
}

hr {
height: 8px;
border: none;
border-top: dashed 2px #000;
margin:30px auto;
}

h1{
font-size:1.5em;
color: #000;
text-shadow: 2px 2px 0px #fff, 4px 4px 0px var(--main-color);
font-weight:400;}

h2 {
font-size: 1.1em;
font-weight:400;
background: var(--main-color); 
color: #000;
box-shadow: 0px 0px 0px 5px var(--main-color);
border: dashed 2px #fff;
margin: 20px 0;
padding: 0.2em 0.5em;
width: 120px;
transform: rotate(-10deg);
	-moz-transform: rotate(-10deg);
	-webkit-transform: rotate(-10deg);
}

h3{
font-family: 'Yomogi';
font-size:1.2em;
text-shadow: 0px 0px 3px #666;
}

ruby rt {
text-shadow: 0 0 0;
}

ul{
list-style: none;
display: flex;
justify-content: center;
flex-wrap: wrap;
text-align: center;
}
li {
width: 120px;
padding-bottom: 1em;
margin: 5px 20px;
}
li > div {
padding: .2em 1em;
margin-bottom: .5em;
background: #fff;
box-shadow: 3px 3px 1px var(--main-color);
}

section{
margin: 0 15px 2em; 
}

.text{
padding-right: 1.5em;
padding-left: 1.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;
}

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

BODY