レイアウトの話をそろそろ始めましょう。
レイアウトといっても「構図」「配置」「色の使い方」というデザイン的な話ではありません。 （それらが決まった後に）「どうやって画像やテキストを配置するのか」という部分の話です。
HTMLにはブロック要素とインライン要素という概念があります。
２つを超シンプルに説明すると、次のようになります。
インライン要素は、普通のテキストのことです。 HTML要素のない普通のテキスト自由記入欄に記載すれば、左→右に表示されます。 HTML要素で特別な指定をしない限り、縦書き表示されることはありません。
文字１つ１つはインライン要素であり、それが左→右に並べられているのです。
左→右になるのは、HTMLの基本設定がそうなっているからです。 CSSで縦書きにすることもできますが、その方法は紹介しません。
興味ある場合は、検索してみてください。
ブロックについては、「ブロックとは？」でも説明しているので、そちらも参照して下さい。
ブロックはインライン要素や別のブロック要素が「ひとかたまり」となったものです。
次の入力例は、３つのブロックを入力していることになります。
<div>１つ目のブロックの中</div><div>２つ目のブロックの中</div><div>３つ目のブロックの中はちょっと長くしてみましょう。</div>
そしてブロックは「上から下」に並べられる要素なので、縦方向に並びます。 その結果、上の例は次のように表示されます。
「文字の装飾時の改行を止める」で、"display: inline;"を使えば改行しなくなるという説明をしました。
この設定は、ブロックのレイアウトを「インラインと同じにしなさい」という指定であり、 そのため横方向に並ぶようになって、改行しなくなります。
次のように入力してみてください。
ブロックの前<div>ブロック</div>ブロックの後
上の例は次のように表示されます。
ブロックを３つ入力した時と同じように３行に表示されました。 つまり、ブロックが３つあります。
ブロックがあることによって、「インラインの連続」が分断されます。 その結果、前後の通常テキストはそれぞれが１つのかたまり＝ブロックになるので、ブロックが３つです。
次のように入力すると、１つ前の例と同じように表示されます。
ブロックの前
ブロック
ブロックの後
しかしこれは「ブロックが３つ」ではなく、１つしかありません。
自由記入欄では、改行もインライン要素です。 （並び方が普通ではない）特殊な文字の１つと思ってください。
上の例は、たくさんのインライン要素があつまって１つのブロックを作っていることになります。
下の例は、一見するとブロックが２つのように思うかもしれませんが、違います。
<div>ブロック１</div>
<div>ブロック２</div>
上の例は次のように表示されます。
改行も１つのインラインなので、上の例は３つのブロックになっています。
改行を■という記号に置き換えてみればわかりやすいかもしれません。
<div>ブロック１</div>■<div>ブロック２</div>
ブロックが３つあって、２つ目は「■＝「改行」が１つだけあるブロック」なのです。
英雄クロニクルの自由記入欄特有の問題として「改行によるレイアウト崩れ」があります。
すでに説明したように次のように入力すると「改行だけ」のブロックができます。
<div>ブロック１</div>
<div>ブロック２</div>
このため、改行に注意していないと、次のようなことが度々発生します。
これを、「改行によるレイアウト崩れ」と呼ぶことにします。
改行によるレイアウト崩れが発生するため、ネット検索で見つけたレイアウト例をそのまま入力しても、きれいに表示されないことが多いです。
逆にいえば、レイアウトが変になるときは改行を疑うと良いです。
この現象は英雄クロニクルの自由記入欄特有の現象です。
一般的なHTMLでは改行は「無いもの」として扱うのですが、英雄クロニクルの自由記入欄では「文字の１つ」として扱われるので、こういったことが発生します
レイアウトの基本は段組みです。
ブロックは基本的に縦に並びますが、それを横に並べると段組みになります。
段組みなしの例（長くなるので、入力例は省略します。）
段組みありの例
複雑なレイアウトに見えても、
という感じで、複数の段組みがたくさん集まっているだけです。
もう少し複雑になったレイアウトの例
これは３段組みになっていて、中央にアイコン、左がプロフィール、右が自己紹介になっています。
左のプロフィ―ルの部分はさらに２段組みになっています。
上の例では、段組みが分かりやすくなるように、薄い灰色の点線をつけています。
段組みを行うには、ブロックが横方向（左→右）にレイアウト（配置）するように制御する必要があります。
そうするためのHTMLの書き方は１通りではなく、いくつかの種類（レイアウト方式）があります。
自由記入欄で使う事のできるレイアウト方式には次のようなものがあります。
フロートレイアウトの簡単な入力例を下に記載します。
<div style="background-color: #DDD; padding: .25em;"> <div style="float: right; margin: 0 1em;">リレミト＝ロクトフェイト</div><div style="float: left; margin: 0 1em;">名前</div><div style="clear: both;"></div></div>
入力例では「リレミト＝ロクトフェイト」が「名前」の前に書いてあるのに、表示では「名前」の前になっていて少し変に見えるかもしれません。 実はフロートレイアウトを強調をするために、わざとそのような入力例にしています。
"float: left;"と"float: right;"を使って、左右にパーツを振り分けていく感じでレイアウトするのが、フロートレイアウトの特徴です。
これは個人的な感想になるのですが、フロートレイアウトはとても難解なレイアウトです。
慣れないと意図した位置に配置できず、ハマりやすいです。
説明するのも難しいので、フロートレイアウトの紹介はここまでにします。
「CSS float」などで検索すればたくさんの解説ページが見つかるので、詳しく知りたい方はそちらを参照してください。
簡単に説明するなら「ブロックの並ぶ方向を（通常の）縦方向から横方向に変更する」のがフレックボックスレイアウトです。
簡単な入力例を下に記載します。
<div style="display: flex;">
<div style="width: 33%;">この例では３段組みを作っています。</div>
<div style="width: 34%;">左と右の横幅は３３％、中央は３４％を指定しています。
これで全ての段の横幅がほぼ同じになります。</div>
<div style="width: 33%;">右の段です。</div>
</div>
左 中央 右の３列（３段組み）になっていて、それぞれの横幅がほぼ同じになっているでしょう？
このレイアウトについては「フレックスボックスレイアウト」で、もう少し掘り下げて説明しています。
グリッドレイアウトはその名前の通り、画面をマス目（グリッド）に区切ってレイアウトします。
簡単な例を下に書いてみます。
<div style="display: grid; grid-template-columns: 33% 33%;"><div>ブロック１</div><div>２</div><div>３</div><div>４</div></div>
１つ目のブロックが左上、２つ目が右上、３つ目が左下、４つ目が右下に、２×２の表のように表示されています。
フレックスボックスレイアウトの最後に書いた３段組みをグリッドレイアウトで書くと次のようになります。
<div style="display:grid; grid-template-columns: 33% 34% 33%;"><div>この例では３段組みを作っています。</div><div>左と右の横幅は３３％、中央は３４％を指定しています。
これで全ての段の横幅がほぼ同じになります。</div><div>右の段です。</div></div>
このレイアウトについては「グリッドレイアウト」で、もう少し掘り下げて説明しています。