Hue. - 04 - Niitty

Souce code

HEAD

/*--------------- 初期値 ---------------*/
*{ margin: 0; padding: 0; box-sizing: border-box;}
body{
color: #333;
font-size: 12px;
font-family: 'Kalam', "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Meiryo UI", "メイリオ", Meiryo, sans-serif;
line-height: 2em;
letter-spacing: 2.4px;
background-color: #f5f5f2;
word-break:break-all;
-webkit-tap-highlight-color:rgba(0,0,0,0);
}
img{ max-width: 100%;}
a{
text-decoration: none;
color: #f79d84;
}
a:hover{
color: #2a63a5;
}
/*--------------- レイアウト ---------------*/
footer{
text-align: center;
margin: 1em 0;
}
.container,section{
width: 700px;
max-width: 90%;
margin: 60px auto 0;
}
.container a:hover{
color: #efefe7;
}
/* 画像部分 */
.face{
position: relative;
width: 260px;
height: 260px;
border: 4px solid #fff;
border-radius: 50%;
margin: auto;
}
.face img{
position: absolute; top: 0; bottom: 0; left: 0; right: 0;
display: block;
max-width: 240px;
border: 5px double #fff;
border-radius: 50%;
margin: auto;
}
/* プロフィール部分 */
.file{
background-color: #fff;
border-radius: 5px;
margin: 1em 0;
padding: 3px;
}
.box{
color: #f5f5f2;
background-color: #2a63a5;
border-radius: 5px;
padding: 0.5em;
}
.short{
display: table;
margin: 0.5em 0;
}
.short div{ display: table-cell;}
.short .que{
width: 120px;
color: #2a63a5;
text-align: center;
}
.long{
margin: 1em 0;
}
.long .que{
color: #2a63a5;
background-color: #f4f4f0;
border-radius: 5px;
padding: 0 1em;
}
.long .ans{
margin: 5px 0 0;
padding: 0 1.1em;
}
/* 2カラム */
@media screen and (min-width:640px) {
.container{
position: relative;
display: flex;
}
.face{
}
.profile{
width: 400px;
}
}
/*--------------- 見出し、文字 ---------------*/
h1{
color: #ada8b6;
font-family:  'Kalam', "ロゴたいぷゴシック-コンデンスド", sans-serif;
text-align: center;
margin: 30px 0 0;
}
h1 span{
display: inline-block;
border-bottom: 5px double #fff;
padding: 0 2em;
}
.sub{
width: 700px;
max-width: 90%;
color: #ada8b6;
text-align: center;
margin: auto;
}

h2{
color: #f79d84;
font-family:  'Kalam', "ロゴたいぷゴシック-コンデンスド", sans-serif;
text-align: center;
margin: 0.5em 0;
}
</style>

BODY

<h1><span>ビアンカのウワサ</span></h1>
<div class="sub">The Characters</div>

<div class="container">
<div class="face"><img src="画像のアドレス"></div>
<div class="profile">
<h2>ビアンカ = ブレーメ</h2>
<div class="box">"愚鈍な族長"の異名を持つ。オプション装備は黒革ベルト。</div>
<div class="file">
<div class="short"><div class="que">職業</div><div class="ans">ごろつき、チンピラ</div></div>
<div class="short"><div class="que">年齢</div><div class="ans">23</div></div>
<div class="short"><div class="que">性格</div><div class="ans">おっとり、正直者、狡賢い</div></div>
<div class="short"><div class="que">癖</div><div class="ans">ワインにはこだわる<br>口癖が「ばっちゃんが言っていた」<br>直射日光はあびない</div></div>
<div class="long"><div class="que">長文の項目などはこちらをお使いください</div><div class="ans">サンプルテキストサンプルテキスト</div></div>
<div class="long"><div class="que">項目の内容はこちらを参考にして書きました</div><div class="ans"><a href="#">NPCエンカウント支援ツール</a></div></div>
</div>
</div>
</div>

<div class="container">
<div class="face"><img src="画像のアドレス"></div>
<div class="profile">
<h2>ディアナ = イグレシアス</h2>
<div class="box">サンプル用にもう1人分作ってみました。オプション装備はロザリオ。</div>
<div class="file">
<div class="short"><div class="que">Job</div><div class="ans">法務執行官</div></div>
<div class="short"><div class="que">Age</div><div class="ans">28</div></div>
<div class="short"><div class="que">Character</div><div class="ans">控え目、破天荒</div></div>
<div class="short"><div class="que">Habit</div><div class="ans">カタカナが書けない<br>空想にひたる<br>暇があれば髪を編み直す</div></div>
</div>
</div>
</div>

ビアンカのウワサ

ビアンカ = ブレーメ

Venus = Wedgewood

About this template

Souce code