実践１

ここまで書いてきたことを利用して、「なんかそれっぽいキャラ紹介」を作ってみます。

全体的な構図を決める

最初にぼんやりと全体的な構図を決めます。

大雑把に次のような配置を考えました。

アイコン
プロフィール（名前と年齢などのデータ）
キャラ紹介
全身画像

この場合、大雑把に上部と下部に分割され、さらに上部が２段組（黄色と緑）、下部も２段（水色と赤）になっています。

完成形

作成途中の説明が分かりやすくなると思ったので、最初に完成版を表示しておきます。




名前

リレミト＝ロクトフェイト

種族

人間

年齢

１９歳

性別

女性

メインクラス

クレリック／旅人の神

サブクラス

ダンジョン探検家

性格

明るく前向き

好きなもの

屋台料理（特に串焼き）

苦手なもの

お酒（すぐに潰れるという意味で）

彼女は、旅の安全を司るマイナーゴッド《小神》“イーヒタ・ビダッチ”の神官である。

ヒーリング《白魔法》などのヒーラーとしての能力だけでなく、神の恩恵によるディメンジョン・スワップ《位置入替》やアシスト・ムーブ《移動干渉》などでパーティを支援する事も得意である。

現在は特定のパーティーには所属していないが、カイム周辺でダンジョン探索パーティーに飛び入り参加したり、（信仰上の理由から）商人キャラバンの護衛パーティーに参加したりしていることが多い。

ゴブリンは、ちぎって、ねじって、全滅よ～！
《ゴブリン撃破時》

イーヒタ様！
彼の者に、今一度歩む力を与えたまえ！
アクト・アゲイン《再行動》

かけあーし！　全速前進！！
アシスト・ムーヴ《移動干渉／味方》

ねえねえ。次の遠征先はマッカに行きたいわ。
あそこの町の串焼きが美味しいのよ。
マディルコさんも行きたいって言っているわよ。
《遠征終了時》

私で良ければ、パーティーを組みませんか？
©SUCCESS 2011 ALL RIGHTS RESERVED.

背景を塗る

最初に全体の背景をオレンジにします。

        <div style="background-color: #FC3;">
        ダミーのテキスト
        </div>

ダミーのテキスト

何もないとまったく表示されないので、ダミーのテキストをつけています。

背景を塗る方法は、「背景色」で説明しています。

上部

まずは上部を作りましょう。

プロフィール

最初はキャラプロフィールを作ります。 名前とか種族とか出身国などを、パラメーター風に書くところですね。

元になるテキストはこれです。

名前：リレミト＝ロクトフェイト
種族：人間
年齢：１９歳
性別：女性
メインクラス：クレリック／旅人の神
サブクラス：ダンジョン探検家
性格：明るく前向き
好きなもの：屋台料理（特に串焼き）
苦手のもの：お酒（すぐ潰れるという意味で）

この場合、表のような配置をすると良さそうなので、グリッドレイアウトを使います。

グリッドレイアウトの「改行型グリッド」で４段になるようにします。

段の横幅や間隔の調整は後で行うことにして、とりあえずauto（改行ブロックは0）にしておきます。

        <div style="background-color: #FC3;">
          ダミーのテキスト
          <div style="display: grid; grid-template-columns: 0 auto 0 auto 0 auto 0 auto;">
            <div>名前</div>
            <div>リレミト＝ロクトフェイト</div>
            <div>種族</div>
            <div>人間</div>
          </div>
        </div>

ダミーのテキスト

名前

リレミト＝ロクトフェイト

種族

人間

１行目までできています。 これをコピーして文字を変えていけばよいのですが、その前に次の調整をしておきます。（コピーしてから調整するのは面倒なので。）

        <div style="background-color: #FC3;">
          ダミーのテキスト
          <div style="display: grid; grid-template-columns: 0 auto 0 auto 0 auto 0 auto;">
            <div style="background-color: #FFF; padding: 3px;">名前</div>
            <div style="background-color: #FFF; padding: 3px; text-align: right;">リレミト＝ロクトフェイト</div>
            <div style="background-color: #FFF; padding: 3px;">種族</div>
            <div style="background-color: #FFF; padding: 3px; text-align: right;">人間</div>
          </div>
        </div>

ダミーのテキスト

名前

リレミト＝ロクトフェイト

種族

人間

このままだと全部くっついて見えるので、grid-template-columnsの５個目を0以外の値にします。 ここは改行ブロックが入るところなので、0以外の値にすればその幅の余白になります。 （「改行型グリッドの間隔」で説明）

また、プロフィールの左側にはアイコン画像が入る予定です。 今のままでは自由記入欄の横幅いっぱいになっていて、最終形と少し違っています。 最終形のイメージに合わせるために、（そこにアイコン画像が入るイメージで）左側に150pxぐらいの「外側の余白」をつけておきます。 

        <div style="display: grid; grid-template-columns: 0 auto 0 auto 10px auto 0 auto; margin-left: 150px;">

ダミーのテキスト

名前

リレミト＝ロクトフェイト

種族

人間

１行分ができたので、それをコピーして他のプロフィールも入力します。

        <div style="background-color: #FC3;">
          ダミーのテキスト
          <div style="display: grid; grid-template-columns: 0 auto 0 auto 10px auto 0 auto; margin-left: 150px;">
            <div style="background-color: #FFF; padding: 3px;">名前</div>
            <div style="background-color: #FFF; padding: 3px; text-align: right;">リレミト＝ロクトフェイト</div>
            <div style="background-color: #FFF; padding: 3px;">種族</div>
            <div style="background-color: #FFF; padding: 3px; text-align: right;">人間</div>
            <div style="background-color: #FFF; padding: 3px;">年齢</div>
            <div style="background-color: #FFF; padding: 3px; text-align: right;">１９歳</div>
            <div style="background-color: #FFF; padding: 3px;">性別</div>
            <div style="background-color: #FFF; padding: 3px; text-align: right;">女性</div>
            <div style="background-color: #FFF; padding: 3px;">メインクラス</div>
            <div style="background-color: #FFF; padding: 3px; text-align: right;">クレリック／旅人の神</div>
            <div style="background-color: #FFF; padding: 3px;">サブクラス</div>
            <div style="background-color: #FFF; padding: 3px; text-align: right;">ダンジョン探検家</div>
            <div style="background-color: #FFF; padding: 3px;">性格</div>
            <div style="background-color: #FFF; padding: 3px; text-align: right;">明るく前向き</div>
            <div style="background-color: #FFF; padding: 3px;">好きなもの</div>
            <div style="background-color: #FFF; padding: 3px; text-align: right;">屋台料理（特に串焼き）</div>
            <div style="background-color: #FFF; padding: 3px;">苦手なもの</div>
            <div style="background-color: #FFF; padding: 3px; text-align: right;">お酒（すぐに潰れるという意味で）</div></div>
        </div>

ダミーのテキスト

名前

リレミト＝ロクトフェイト

種族

人間

年齢

１９歳

性別

女性

メインクラス

クレリック／旅人の神

サブクラス

ダンジョン探検家

性格

明るく前向き

好きなもの

屋台料理（特に串焼き）

苦手なもの

お酒（すぐに潰れるという意味で）

最後の行は、テキストが長すぎて、改行してしまいました。さらに、右側が空いています。 そこで、右側と結合して広くしつつ、改行されないようにします。 （「改行型グリッドと結合」で説明）

        <div style="grid-column-end: span 5; background-color: #FFF; padding: 3px; text-align: right;">お酒（すぐに潰れるという意味で）</div>

各行がくっついているので、gapを高さだけ設定することで、離します。

        <div style="display: grid; grid-template-columns: 0 auto 0 auto 10px auto 0 auto; gap: 10px 0; margin-left: 150px;">

アイコンと並べた後に微調整すかもしれませんが、プロフィール部分はひとまず出来ました。

「ダミーのテキスト」を削除すると、次のようになります。

        <div style="background-color: #FC3;"><div style="display: grid; grid-template-columns: 0 auto 0 auto 10px auto 0 auto; gap: 10px 0; margin-left: 150px;">
            <div style="background-color: #FFF; padding: 3px;">名前</div>
            <div style="background-color: #FFF; padding: 3px; text-align: right;">リレミト＝ロクトフェイト</div>
            <div style="background-color: #FFF; padding: 3px;">種族</div>
            <div style="background-color: #FFF; padding: 3px; text-align: right;">人間</div>
            <div style="background-color: #FFF; padding: 3px;">年齢</div>
            <div style="background-color: #FFF; padding: 3px; text-align: right;">１９歳</div>
            <div style="background-color: #FFF; padding: 3px;">性別</div>
            <div style="background-color: #FFF; padding: 3px; text-align: right;">女性</div>
            <div style="background-color: #FFF; padding: 3px;">メインクラス</div>
            <div style="background-color: #FFF; padding: 3px; text-align: right;">クレリック／旅人の神</div>
            <div style="background-color: #FFF; padding: 3px;">サブクラス</div>
            <div style="background-color: #FFF; padding: 3px; text-align: right;">ダンジョン探検家</div>
            <div style="background-color: #FFF; padding: 3px;">性格</div>
            <div style="background-color: #FFF; padding: 3px; text-align: right;">明るく前向き</div>
            <div style="background-color: #FFF; padding: 3px;">好きなもの</div>
            <div style="background-color: #FFF; padding: 3px; text-align: right;">屋台料理（特に串焼き）</div>
            <div style="background-color: #FFF; padding: 3px;">苦手なもの</div>
            <div style="grid-column-end: span 5; background-color: #FFF; padding: 3px; text-align: right;">お酒（すぐに潰れるという意味で）</div></div></div>

名前

リレミト＝ロクトフェイト

種族

人間

年齢

１９歳

性別

女性

メインクラス

クレリック／旅人の神

サブクラス

ダンジョン探検家

性格

明るく前向き

好きなもの

屋台料理（特に串焼き）

苦手なもの

お酒（すぐに潰れるという意味で）

アイコン作成

アイコンは128x128の画像を使えばよいのですが、今回のキャラクター（公式ギャラリー）のアイコンはちょっと小さく感じたので、自由記入欄用の画像を加工することにしました。

加工のための入力例と結果を次の通りです。

        <div style="overflow:hidden; width:128px; height: 128px;"><div style="margin: -84px -70px; transform: scale(0.8);"><画像mpKUFT1jY6ehBaLdeApRxg==></div></div>

入力例で何をしているのかの詳しい説明は、「画像の加工」の説明を参照してください。

上部の完成

アイコンとプロフィールが完成したので、まとめます。

これは左右に並べるだけなので、フレックスボックスレイアウトで「２段組み」を作ります。

プロフールを作成したときに、「仮」で１５０ピクセルの余白をつけていましたが、それは削除しています。

        <div style="background-color: #FC3;"><div style="display: flex;">
          <div style="overflow:hidden; width:128px; height: 128px;"><div style="margin: -84px -70px; transform: scale(0.8);"><画像mpKUFT1jY6ehBaLdeApRxg==></div></div>
          <div style="display: grid; grid-template-columns: 0 auto 0 auto 10px auto 0 auto; gap: 10px 0;">
          （長いのでここは省略）</div>
        </div></div>



名前

リレミト＝ロクトフェイト

種族

人間

年齢

１９歳

性別

女性

メインクラス

クレリック／旅人の神

サブクラス

ダンジョン探検家

性格

明るく前向き

好きなもの

屋台料理（特に串焼き）

苦手なもの

お酒（すぐに潰れるという意味で）

ここから少し調整を行います。

        <div style="background-color: #FC3;"><div style="display: flex; padding: 10px;">
            <div style="overflow:hidden; width:128px; height: 128px; background-color: #FFF;"><div style="margin: -84px -70px; transform: scale(0.8);"><画像mpKUFT1jY6ehBaLdeApRxg==></div></div>
            <div style="display: grid; grid-template-columns: 0 auto 0 auto 4px auto 0 auto; gap: 4px 0; width: 480px; margin-left: auto;">
            <div style="background-color: #FFF; padding: 3px;">名前</div>
            <div style="background-color: #FFF; padding: 3px; text-align: right;">リレミト＝ロクトフェイト</div>
            <div style="background-color: #FFF; padding: 3px;">種族</div>
            <div style="background-color: #FFF; padding: 3px; text-align: right;">人間</div>
            <div style="background-color: #FFF; padding: 3px;">年齢</div>
            <div style="background-color: #FFF; padding: 3px; text-align: right;">１９歳</div>
            <div style="background-color: #FFF; padding: 3px;">性別</div>
            <div style="background-color: #FFF; padding: 3px; text-align: right;">女性</div>
            <div style="background-color: #FFF; padding: 3px;">メインクラス</div>
            <div style="background-color: #FFF; padding: 3px; text-align: right;">クレリック／旅人の神</div>
            <div style="background-color: #FFF; padding: 3px;">サブクラス</div>
            <div style="background-color: #FFF; padding: 3px; text-align: right;">ダンジョン探検家</div>
            <div style="background-color: #FFF; padding: 3px;">性格</div>
            <div style="background-color: #FFF; padding: 3px; text-align: right;">明るく前向き</div>
            <div style="background-color: #FFF; padding: 3px;">好きなもの</div>
            <div style="background-color: #FFF; padding: 3px; text-align: right;">屋台料理（特に串焼き）</div>
            <div style="background-color: #FFF; padding: 3px;">苦手なもの</div>
            <div style="grid-column-end: span 5; background-color: #FFF; padding: 3px; text-align: right;">お酒（すぐに潰れるという意味で）</div></div>
        </div></div>



名前

リレミト＝ロクトフェイト

種族

人間

年齢

１９歳

性別

女性

メインクラス

クレリック／旅人の神

サブクラス

ダンジョン探検家

性格

明るく前向き

好きなもの

屋台料理（特に串焼き）

苦手なもの

お酒（すぐに潰れるという意味で）

これで上部が完成です。

下部

上部ができたので、下部を作りましょう。

全身画像

全身画像（公式ギャラリーの絵なので、実際は上半身ですが）は、２つの加工を行うことにしました。

まず「画像と文字を重ねる」加工をします。

        <div style="width: 280px; height: 440px;"><画像mpKUFT1jY6ehBaLdeApRxg==><div style="margin: -70px 30px 0px 30px; text-shadow: #FFF 0 2px 2px, #FFF 0 -2px 2px,#FFF 2px 0 2px, #FFF -2px 0 2px; font-size:150%;">私で良ければ、パーティーを組みませんか？</div></div>
私で良ければ、パーティーを組みませんか？

次に変化する背景ですが、これは「虹色とグラデ―ション」を使っています。

虹色を使うと文字も虹色になってしまうので、文字を黒にする指定も追加しています。

        <div style="width: 280px; height: 440px; animation: 60s infinite rainbow; background: linear-gradient(135deg,currentColor,#F3F6);"><画像mpKUFT1jY6ehBaLdeApRxg==><div style="margin: -70px 30px 0px 30px; text-shadow: #FFF 0 2px 2px, #FFF 0 -2px 2px,#FFF 2px 0 2px, #FFF -2px 0 2px; font-size:150%; color: #000;">私で良ければ、パーティーを組みませんか？</div></div>
私で良ければ、パーティーを組みませんか？

これで、下部の画像部分は完了です。

キャラ紹介

次は下部左側のキャラ紹介をする部分を作ります。

基本的には紹介文を「枠」で囲むだけなので簡単です。

内側に0.5emの余白（padding）も設定しています。

        <div style="margin-right: 300px; padding: .5em; border: #930 7px double;">彼女は、旅の安全を司るマイナーゴッド《小神》“イーヒタ・ビダッチ”の神官である。
        
        ヒーリング《白魔法》などのヒーラーとしての能力だけでなく、神の恩恵によるディメンジョン・スワップ《位置入替》やアシスト・ムーブ《移動干渉》などでパーティを支援する事も得意である。
        
        現在は特定のパーティーには所属していないが、カイム周辺でダンジョン探索パーティーに飛び入り参加したり、（信仰上の理由から）商人キャラバンの護衛パーティーに参加したりしていることが多い。</div>
彼女は、旅の安全を司るマイナーゴッド《小神》“イーヒタ・ビダッチ”の神官である。

ヒーリング《白魔法》などのヒーラーとしての能力だけでなく、神の恩恵によるディメンジョン・スワップ《位置入替》やアシスト・ムーブ《移動干渉》などでパーティを支援する事も得意である。

現在は特定のパーティーには所属していないが、カイム周辺でダンジョン探索パーティーに飛び入り参加したり、（信仰上の理由から）商人キャラバンの護衛パーティーに参加したりしていることが多い。

上の例では、右側に画像が来るはずなので、右の外側に３００ピクセルの余白をつけています。

下部をまとめる

画像とキャラ紹介をまとめます。 これは２段組みなので、フレックスボックスレイアウトでまとめます。 （画像のかわりにしていて３００ピクセルの余白は削除しています。）

また、上部の時と同じよう背景色も塗っておきます。

        <div style="background-color: #FC3;"> <div style="display: flex; padding: 10px;">
        <div style="padding: .5em; border: #930 7px double;">彼女は、旅の安全を司るマイナーゴッド《小神》“イーヒタ・ビダッチ”の神官である。
        
        ヒーリング《白魔法》などのヒーラーとしての能力だけでなく、神の恩恵によるディメンジョン・スワップ《位置入替》やアシスト・ムーブ《移動干渉》などでパーティを支援する事も得意である。
        
        現在は特定のパーティーには所属していないが、カイム周辺でダンジョン探索パーティーに飛び入り参加したり、（信仰上の理由から）商人キャラバンの護衛パーティーに参加したりしていることが多い。</div>
        <div style="width: 280px; height: 440px; animation: 60s infinite rainbow; background: linear-gradient(135deg,currentColor,#F3F6);"><画像mpKUFT1jY6ehBaLdeApRxg==><div style="margin: -70px 30px 0px 30px; text-shadow: #FFF 0 2px 2px, #FFF 0 -2px 2px,#FFF 2px 0 2px, #FFF -2px 0 2px; font-size:150%; color: #000;">私で良ければ、パーティーを組みませんか？</div></div>
        </div></div>

彼女は、旅の安全を司るマイナーゴッド《小神》“イーヒタ・ビダッチ”の神官である。

ヒーリング《白魔法》などのヒーラーとしての能力だけでなく、神の恩恵によるディメンジョン・スワップ《位置入替》やアシスト・ムーブ《移動干渉》などでパーティを支援する事も得意である。

現在は特定のパーティーには所属していないが、カイム周辺でダンジョン探索パーティーに飛び入り参加したり、（信仰上の理由から）商人キャラバンの護衛パーティーに参加したりしていることが多い。

私で良ければ、パーティーを組みませんか？

このままでも悪くはないのですが、キャラ紹介の下の空きが多いことが気になります。「もう少し何か書けないかな？」と。

そこで、穴埋めのためにセリフ設定をピックアップして追加することにします。

他にも気になる点があったので、調整します。調整点は次の通りです。

【上側の余白を０にする理由】

下部が完成したら、上部とまとめる（結合する）ことになります。そのとき、上部と下部の両方にpaddingによる余白が入っていると、結合してる部分の余白が二重になり、他と比べると太くみえてしまいます。それをさけるために、ここで余白を０にします。

        <div style="background-color: #FC3;"> <div style="display: flex; padding: 0 10px 10px;">
        <div style="margin-right: 10px;"> <div style="padding: .5em; border: #930 7px double;">彼女は、旅の安全を司るマイナーゴッド《小神》“イーヒタ・ビダッチ”の神官である。
        
        ヒーリング《白魔法》などのヒーラーとしての能力だけでなく、神の恩恵によるディメンジョン・スワップ《位置入替》やアシスト・ムーブ《移動干渉》などでパーティを支援する事も得意である。
        
        現在は特定のパーティーには所属していないが、カイム周辺でダンジョン探索パーティーに飛び入り参加したり、（信仰上の理由から）商人キャラバンの護衛パーティーに参加したりしていることが多い。</div></div>
        <div style="width: 280px; height: 440px; animation: 60s infinite rainbow; background: linear-gradient(135deg,currentColor,#F3F6);"><画像mpKUFT1jY6ehBaLdeApRxg==><div style="margin: -70px 30px 0px 30px; text-shadow: #FFF 0 2px 2px, #FFF 0 -2px 2px,#FFF 2px 0 2px, #FFF -2px 0 2px; font-size:150%; color: #000;">私で良ければ、パーティーを組みませんか？</div></div>
        </div></div>

彼女は、旅の安全を司るマイナーゴッド《小神》“イーヒタ・ビダッチ”の神官である。

ヒーリング《白魔法》などのヒーラーとしての能力だけでなく、神の恩恵によるディメンジョン・スワップ《位置入替》やアシスト・ムーブ《移動干渉》などでパーティを支援する事も得意である。

現在は特定のパーティーには所属していないが、カイム周辺でダンジョン探索パーティーに飛び入り参加したり、（信仰上の理由から）商人キャラバンの護衛パーティーに参加したりしていることが多い。

私で良ければ、パーティーを組みませんか？

セリフ

キャラ紹介の下にいくつかセリフを追加します。

        <div style="background-color: #FC3;"> <div style="display: flex; padding: 0 10px 10px;">
        <div style="margin-right: 10px;"> <div style="padding: .5em; border: #930 7px double;">彼女は、旅の安全を司るマイナーゴッド《小神》“イーヒタ・ビダッチ”の神官である。
        
        ヒーリング《白魔法》などのヒーラーとしての能力だけでなく、神の恩恵によるディメンジョン・スワップ《位置入替》やアシスト・ムーブ《移動干渉》などでパーティを支援する事も得意である。
        
        現在は特定のパーティーには所属していないが、カイム周辺でダンジョン探索パーティーに飛び入り参加したり、（信仰上の理由から）商人キャラバンの護衛パーティーに参加したりしていることが多い。</div>
        <div style="background-color: #FFF; padding: .25em; border-radius: .5em;">ゴブリンは、ちぎって、ねじって、全滅よ～！
            《ゴブリン撃破時》</div>
        <div style="background-color: #FFF; padding: .25em; border-radius: .5em;">イーヒタ様！
            彼の者に、今一度歩む力を与えたまえ！
            アクト・アゲイン《再行動》</div>
        <div style="background-color: #FFF; padding: .25em; border-radius: .5em;">かけあーし！　全速前進！！
            アシスト・ムーヴ《移動干渉／味方》</div>
        <div style="background-color: #FFF; padding: .25em; border-radius: .5em;">ねえねえ。次の遠征先はマッカに行きたいわ。
            あそこの町の串焼きが美味しいのよ。
            マディルコさんも行きたいって言っているわよ。
            《遠征終了時》</div></div>
        <div style="width: 280px; height: 440px; animation: 60s infinite rainbow; background: linear-gradient(135deg,currentColor,#F3F6);"><画像mpKUFT1jY6ehBaLdeApRxg==><div style="margin: -70px 30px 0px 30px; text-shadow: #FFF 0 2px 2px, #FFF 0 -2px 2px,#FFF 2px 0 2px, #FFF -2px 0 2px; font-size:150%; color: #000;">私で良ければ、パーティーを組みませんか？</div></div>
        </div></div>

彼女は、旅の安全を司るマイナーゴッド《小神》“イーヒタ・ビダッチ”の神官である。

ヒーリング《白魔法》などのヒーラーとしての能力だけでなく、神の恩恵によるディメンジョン・スワップ《位置入替》やアシスト・ムーブ《移動干渉》などでパーティを支援する事も得意である。

現在は特定のパーティーには所属していないが、カイム周辺でダンジョン探索パーティーに飛び入り参加したり、（信仰上の理由から）商人キャラバンの護衛パーティーに参加したりしていることが多い。

ゴブリンは、ちぎって、ねじって、全滅よ～！
《ゴブリン撃破時》

イーヒタ様！
彼の者に、今一度歩む力を与えたまえ！
アクト・アゲイン《再行動》

かけあーし！　全速前進！！
アシスト・ムーヴ《移動干渉／味方》

ねえねえ。次の遠征先はマッカに行きたいわ。
あそこの町の串焼きが美味しいのよ。
マディルコさんも行きたいって言っているわよ。
《遠征終了時》

私で良ければ、パーティーを組みませんか？

「背景を白」・「丸角」にして、セリフっぽく見えるようにしました。

これで完成でもよさそうなのですが、ちょっと行間が開きすぎている気がするので、調整します。

        <div style="background-color: #FC3;"> <div style="display: flex; padding: 0 10px 10px;">
        <div style="margin-right: 10px;"> <div style="padding: .5em; border: #930 7px double;">彼女は、旅の安全を司るマイナーゴッド《小神》“イーヒタ・ビダッチ”の神官である。
        
        ヒーリング《白魔法》などのヒーラーとしての能力だけでなく、神の恩恵によるディメンジョン・スワップ《位置入替》やアシスト・ムーブ《移動干渉》などでパーティを支援する事も得意である。
        
        現在は特定のパーティーには所属していないが、カイム周辺でダンジョン探索パーティーに飛び入り参加したり、（信仰上の理由から）商人キャラバンの護衛パーティーに参加したりしていることが多い。</div>
        <div style="background-color: #FFF; padding: .25em; border-radius: .5em; margin: -1em 1em 0;">ゴブリンは、ちぎって、ねじって、全滅よ～！
            《ゴブリン撃破時》</div>
        <div style="background-color: #FFF; padding: .25em; border-radius: .5em; margin: -1em 1em 0;">イーヒタ様！
            彼の者に、今一度歩む力を与えたまえ！
            アクト・アゲイン《再行動》</div>
        <div style="background-color: #FFF; padding: .25em; border-radius: .5em; margin: -1em 1em 0;">かけあーし！　全速前進！！
            アシスト・ムーヴ《移動干渉／味方》</div>
        <div style="background-color: #FFF; padding: .25em; border-radius: .5em; margin: -1em 1em 0;">ねえねえ。次の遠征先はマッカに行きたいわ。
            あそこの町の串焼きが美味しいのよ。
            マディルコさんも行きたいって言っているわよ。
            《遠征終了時》</div></div>
        <div style="width: 280px; height: 440px; animation: 60s infinite rainbow; background: linear-gradient(135deg,currentColor,#F3F6);"><画像mpKUFT1jY6ehBaLdeApRxg==><div style="margin: -70px 30px 0px 30px; text-shadow: #FFF 0 2px 2px, #FFF 0 -2px 2px,#FFF 2px 0 2px, #FFF -2px 0 2px; font-size:150%; color: #000;">私で良ければ、パーティーを組みませんか？</div></div>
        </div></div>

彼女は、旅の安全を司るマイナーゴッド《小神》“イーヒタ・ビダッチ”の神官である。

ヒーリング《白魔法》などのヒーラーとしての能力だけでなく、神の恩恵によるディメンジョン・スワップ《位置入替》やアシスト・ムーブ《移動干渉》などでパーティを支援する事も得意である。

現在は特定のパーティーには所属していないが、カイム周辺でダンジョン探索パーティーに飛び入り参加したり、（信仰上の理由から）商人キャラバンの護衛パーティーに参加したりしていることが多い。

ゴブリンは、ちぎって、ねじって、全滅よ～！
《ゴブリン撃破時》

イーヒタ様！
彼の者に、今一度歩む力を与えたまえ！
アクト・アゲイン《再行動》

かけあーし！　全速前進！！
アシスト・ムーヴ《移動干渉／味方》

ねえねえ。次の遠征先はマッカに行きたいわ。
あそこの町の串焼きが美味しいのよ。
マディルコさんも行きたいって言っているわよ。
《遠征終了時》

私で良ければ、パーティーを組みませんか？

marginを使ってセリフの上側に-1emの余白（＝「ネガティブマージン」）をつけました。

同時に左右に1emの余白を設定しています。 これも別に設定しなくてもよいかもしれませんが、キャラ紹介の枠幅と少し違う方が、よさそうだなぁ～と感じたので、つけました。

これで、バランスがよくなったように感じたので、下部は一応完成です。

全体をまとめる

作ったものを合体します。

        <div style="background-color: #FC3;"><div style="display: flex; padding: 10px;">
            <div style="overflow:hidden; width:128px; height: 128px; background-color: #FFF;"><div style="margin: -84px -70px; transform: scale(0.8);"><画像mpKUFT1jY6ehBaLdeApRxg==></div></div>
            <div style="display: grid; grid-template-columns: 0 auto 0 auto 4px auto 0 auto; gap: 4px 0; width: 480px; margin-left: auto;">
            <div style="background-color: #FFF; padding: 3px;">名前</div>
            <div style="background-color: #FFF; padding: 3px; text-align: right;">リレミト＝ロクトフェイト</div>
            <div style="background-color: #FFF; padding: 3px;">種族</div>
            <div style="background-color: #FFF; padding: 3px; text-align: right;">人間</div>
            <div style="background-color: #FFF; padding: 3px;">年齢</div>
            <div style="background-color: #FFF; padding: 3px; text-align: right;">１９歳</div>
            <div style="background-color: #FFF; padding: 3px;">性別</div>
            <div style="background-color: #FFF; padding: 3px; text-align: right;">女性</div>
            <div style="background-color: #FFF; padding: 3px;">メインクラス</div>
            <div style="background-color: #FFF; padding: 3px; text-align: right;">クレリック／旅人の神</div>
            <div style="background-color: #FFF; padding: 3px;">サブクラス</div>
            <div style="background-color: #FFF; padding: 3px; text-align: right;">ダンジョン探検家</div>
            <div style="background-color: #FFF; padding: 3px;">性格</div>
            <div style="background-color: #FFF; padding: 3px; text-align: right;">明るく前向き</div>
            <div style="background-color: #FFF; padding: 3px;">好きなもの</div>
            <div style="background-color: #FFF; padding: 3px; text-align: right;">屋台料理（特に串焼き）</div>
            <div style="background-color: #FFF; padding: 3px;">苦手なもの</div>
            <div style="grid-column-end: span 5; background-color: #FFF; padding: 3px; text-align: right;">お酒（すぐに潰れるという意味で）</div></div>
        </div> <div style="display: flex; padding: 0 10px 10px;">
        <div style="margin-right: 10px;"> <div style="padding: .5em; border: #930 7px double;">彼女は、旅の安全を司るマイナーゴッド《小神》“イーヒタ・ビダッチ”の神官である。
        
        ヒーリング《白魔法》などのヒーラーとしての能力だけでなく、神の恩恵によるディメンジョン・スワップ《位置入替》やアシスト・ムーブ《移動干渉》などでパーティを支援する事も得意である。
        
        現在は特定のパーティーには所属していないが、カイム周辺でダンジョン探索パーティーに飛び入り参加したり、（信仰上の理由から）商人キャラバンの護衛パーティーに参加したりしていることが多い。</div>
        <div style="background-color: #FFF; padding: .25em; border-radius: .5em; margin: -1em 1em 0;">ゴブリンは、ちぎって、ねじって、全滅よ～！
            《ゴブリン撃破時》</div>
        <div style="background-color: #FFF; padding: .25em; border-radius: .5em; margin: -1em 1em 0;">イーヒタ様！
            彼の者に、今一度歩む力を与えたまえ！
            アクト・アゲイン《再行動》</div>
        <div style="background-color: #FFF; padding: .25em; border-radius: .5em; margin: -1em 1em 0;">かけあーし！　全速前進！！
            アシスト・ムーヴ《移動干渉／味方》</div>
        <div style="background-color: #FFF; padding: .25em; border-radius: .5em; margin: -1em 1em 0;">ねえねえ。次の遠征先はマッカに行きたいわ。
            あそこの町の串焼きが美味しいのよ。
            マディルコさんも行きたいって言っているわよ。
            《遠征終了時》</div></div>
        <div style="width: 280px; height: 440px; animation: 60s infinite rainbow; background: linear-gradient(135deg,currentColor,#F3F6);"><画像mpKUFT1jY6ehBaLdeApRxg==><div style="margin: -70px 30px 0px 30px; text-shadow: #FFF 0 2px 2px, #FFF 0 -2px 2px,#FFF 2px 0 2px, #FFF -2px 0 2px; font-size:150%; color: #000;">私で良ければ、パーティーを組みませんか？</div></div>
        </div></div>

完成系の表示はページの最初にあるので、それを見てください。

また、使っている画像を公式ギャラリーから探してストックすれば、上の例をそのまま入力できるはずです。

（ただし、画像を２つ使っているので、「自由記入欄拡張」を購入していないと正しく表示されません。）

ちょっと蛇足

グリッドレイアウトの利点の１つは、調整が容易なことです。

完成とは言ったものの、プロフィール部分を少しアレンジしてみましょう。

ひとまず、最後の項目（苦手なもの）の結合を解除してみます。




名前

リレミト＝ロクトフェイト

種族

人間

年齢

１９歳

性別

女性

メインクラス

クレリック／旅人の神

サブクラス

ダンジョン探検家

性格

明るく前向き

好きなもの

屋台料理（特に串焼き）

苦手なもの

お酒（すぐに潰れるという意味で）

順番を変えて、「名前」や「メインクラス」のようにテキストが多いものは左側に、「種族」や「年齢」のようなテキストが短いものは右側に来るようにしてみます。

入力例は省略しますが、完成版では、
「名前→種族→年齢→性別→メインクラス→サブクラス→性格→好きなもの→苦手なもの」
という順番になっています。

これを、
「名前→種族→メインクラス→年齢→サブクラス→性別→好きなもの→性格→苦手なもの」
という順番に変えています。




名前

リレミト＝ロクトフェイト

種族

人間

メインクラス

クレリック／旅人の神

年齢

１９歳

サブクラス

ダンジョン探検家

性別

女性

好きなもの

屋台料理（特に串焼き）

性格

明るく前向き

苦手なもの

お酒（すぐに潰れるという意味で）

結合を使わなくてもきれいに収まりました。こちらでもよかったかもしれません。