LANG SELRCT

コードを書く場所についてはこちら

2017年11月5日日曜日

bloggerでfieldsetのlegendが空になった時の対策

Google Apps scriptではありませんが
このブログを書いている時にハマったfieldsetのlegendについて書きます

Bloggerのバグなのか仕様なのかわかりませんが自己解決した方法です

(ちなみに2017/11/05現在確認した事象なのでこの記事を見るタイミングによっては発生しないかもしれません)

何が起きたか:

Bloggerのエディタで「HTML」→「作成」→「HTML」の遷移をするとlegendの中身が空になってしまう

どう解決したか:

legendの中に他のタグを入れずにlegendに対してcssでスタイルを設定する



以下解決するまでに試したことです

fieldsetとは


html
<form>
  <fieldset>
    <legend>タイトル</legend>
    テキスト1<br />
    テキスト2
  </fieldset>
</form>

このようなHTMLを書くと下のような表示を実現できます


ハマった事象というのは、fieldset内の<legend>タイトル</legend>のタイトルにh1要素をつけて文字のスタイルを変えようとし


html
<form>
  <fieldset>
    <legend><h1>タイトル</h1></legend>
    テキスト1<br /> テキスト2
  </fieldset>
</form>

↑このように書いてから、Bloggerのエディタ画面の「HTML」から「作成」へ移動して再び「HTML」へ戻ると


html
<form>
<fieldset>
<legend>
      </legend><br />
<h1>
タイトル</h1>
テキスト1<br />
テキスト2
  </fieldset>
</form>

↑このように<legend>の中身が空になり、h1にしたタイトルが外に出てしまいました

HTMLエディタで再び<legend>の中に入れても「HTML」→「作成」→「HTML」へ戻ると、再び<legend>の中身が空になってしまい編集する度に発生するのでfieldsetを使うのを諦めようとしました

が、あとちょっとだけ試してから諦めようと思い今度はh1タグをlegendタグの外に書いてみました

html
<form>
  <fieldset>
    <h1><legend>タイトル</legend></h1>
    テキスト1<br /> テキスト2
  </fieldset>
</form>

だめでした…
再び<legend>の中身が空になってしまいます

次に試したのが、そもそもlegendタグの中にh1タグを書かなかったらどうなるかということで、タイトルの文字はlegendタグに対してスタイルを設定するようにしてみました


html
<form>
  <fieldset>
    <legend>タイトル</legend>
    テキスト1<br />
    テキスト2
  </fieldset>
</form>

css
legend{
color: dodgerblue;
font-size: 24px;
font-weight: bold;
}
これが思った通りにうまくいきました
原因は不明のままですが、legendタグの中に別のタグを書かないことで、今回の事象は解決できました