履歴書的な

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

色違い→ ライトスティールブルー#b0c4de / バーリーウッド#deb887 / ファイアブリック#b22222 / オリーブドラブ#6b8e23

HEAD
<style type="text/css"> @import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP&family=Zen+Kurenaido&display=swap'); *,::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: #deb887; /* アクセントカラー */ } body{ font-size: 0.9em; font-family: 'Zen Kurenaido', sans-serif; color: #626063; line-height: 1.5; background-color: var(--main-color); background-image: linear-gradient(white 2px, transparent 2px), linear-gradient(90deg, white 2px, transparent 2px), linear-gradient(rgba(255,255,255,.3) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.3) 1px, transparent 1px); background-size: 100px 100px, 100px 100px, 20px 20px, 20px 20px; background-position:-2px -2px, -2px -2px, -1px -1px, -1px -1px; } a{ text-decoration: none; color: #999; border-bottom: double 3px var(--main-color); } .wrp{ position: relative; background: #fcfcfc; width:90%; max-width:600px; margin: 30px auto; padding: 30px 15px 5px; } h1 { font-family: 'Noto Serif JP', serif; font-size: 1.5em; color: #000; } h2 { font-family: 'Noto Serif JP', serif; font-size: 1.2em; color: #000; } hr { border-style: solid #ccc 1px; } header{ text-align: center; display: flex; justify-content: flex-start; align-items: flex-start; height: 120px; } .top{ margin: 10px auto auto 10px; } .name{ font-size: 1.5em; text-align: left; padding: 0 1em 0 0.5em; border-bottom: solid 1px #000; } .name::before{ content: "名前："; color: #000; font-family: 'Noto Serif JP', serif; font-size: 0.8em; } .word{ font-size: 0.95em; } .icon{ width: 100px; height: 100px; margin: auto 10px 10px auto; background: #fcfcfc; object-fit: contain; box-shadow: 0px 0px 0px 1px rgba(0,0,0,0.6); } div{ margin: 20px 0; } ul { display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: flex-start; } li { margin: 10px; border-bottom: 1px solid #000; } .que{ font-family: 'Noto Serif JP', serif; color: #000; padding: 0 0.5em; } .que::after{ content: "："; } .ans{ padding-right: 1em; } .text{ width: 90%; margin: 0 auto; padding: 5px 1em; } footer{ font-family: 'Ms Madi', 'Zen Kurenaido'; font-size: 1.2em; text-align: center ; margin: 50px auto 20px; } </style>

BODY
<div class="wrp"> <h1>履歴書</h1><header> <div class="top"><p class="name">山田 花子</p><br> <p class="word">何か一言などあれば</p></div> <img src="#アイコン画像URL#" class="icon"></header> <div class="main"> <ul> <li><span class="que">性別</span><span class="ans">女性</span></li> <li><span class="que">職業</span><span class="ans">○○○</span></li> <li><span class="que">年齢</span><span class="ans">○○歳</span></li> <li><span class="que">誕生日</span><span class="ans">1月1日</span></li> <li><span class="que">身長</span><span class="ans">○○cm</span></li> </ul> <h2>詳細</h2> <div class="text">長文スペース。詳細な設定などが記述できます。<br> 　海のおきへ、遠く遠く出ていきますと、水の色は、いちばん美しいヤグルマソウの花びらのようにまっさおになり、きれいにすきとおったガラスのように、すみきっています。けれども、そのあたりは、とてもとても深いので、どんなに長いいかり綱づなをおろしても、底まで届くようなことはありません。海の底から、水の面おもてまで届くためには、教会の塔とうを、いくつもいくつも、積みかさねなければならないでしょう。そういう深いところに、人魚たちは住んでいるのです。<br> 「人魚の姫」ハンス・クリスチャン・アンデルセン／青空文庫</div> <br> </div> <footer> <a href="">Back</a> </footer> </div>