このブログを書いている時にハマった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タグの中に別のタグを書かないことで、今回の事象は解決できました
