はじめに

英雄クロニクルの自由記入欄を編集する時、上の方にある注意書きに、

たしかにHTMLをほんのちょっぴり使うことができます。でも、かなり制限があります。

• 使う事ができるHTMLタグはpまたはdivの２つだけである。その他のタグは使用できない。
  そのためtableを使ってレイアウトすることができない。
• style属性は使用できる。というかstyle属性しか役に立たない。
• 通常のHTMLと違って自由に改行できない。改行があるとレイアウトがおかしくなる。

事実上、divタグを使ってstyle属性にCSSを記載することぐらいしかできません！

こういったことを踏まえて、このページでは以下の点に着目したstyle属性の書き方をいろいろと書いてみたいと思います。

• CSSに不慣れな人でも、自由記入欄を作成するための初歩的なCSSの説明。
• CSSの細かい仕様とかいろいろなパラメーターなどは、「ネットで検索してね。」で終わらせる。
• 「英雄クロニクルの自由記入欄」の記載することに特化した書き方や注意事項（普通のHTML/CSSを説明する際となどでは出てこない情報）は少し細かく記載する。

文章の読み方

左メニューの目次リンクをクリックすることで、右側が変わります。 以降の説明は左メニューの一番上の項目から読んでいくことを前提に構成しています。

枠について

文章中に出てくる枠で囲んだところは特別な意味があります。

次のような、背景がうすい黄色の枠は、英雄クロニクルの自由記入欄の入力例です。 自由記入欄の編集画面にそのまま入力できるテキストであることを表します。

        <div style="color: red;">これは入力例です。</div>
    

次のような、白～灰色で少し太い枠の部分は、自由記入欄に直前の例を入力したときの表示結果であることを表しています。

その他の枠は、強調する目的で使っているだけです。