TIL

Today I Learned. 知ったこと、学んだことを書いていく

fieldsetとlegend - HTML

HTML5で登場したタグ
fieldsetはフォーム部品をまとめるために使う
legendはそのまとまりのタイトル

<form action="">
    <fieldset disabled>
        <legend>注文依頼</legend>
        <div>
            商品名:<input type="text" name="" id="">
        </div>
        <div>
            数量:<input type="text" name="" id="">
        </div>
    </fieldset>
</form>

See the Pen fieldsetとlegend by tamago (@tamago324) on CodePen.

legendは一つ目しかfieldset内の一つ目のしか有効にならない

一つのfieldsetにlegendを複数書いても、最初の一つしか有効にならない

<fieldset>
    <legend>注文依頼</legend>
    <!-- 下のものは無効になる -->
    <legend>注文依頼</legend>
    <div>
        商品名:<input type="text" name="" id="">
    </div>
    <div>
        数量:<input type="text" name="" id="">
    </div>
</fieldset>

See the Pen legendを2つ書く by tamago (@tamago324) on CodePen.

fieldsetとlegendのデフォルトCSS

fieldsetとlegendそれぞれにデフォルトCSSがある
fieldsetの枠線とlegendのテキスト。この子達を消したい!!!!ってことでやってみた

legendのテキストを非表示にする

Twitterのログインページを参考にしてみた(2018/04/06時点)

.visuallyhidden {
    /* 横幅をなくせば見えなくなるかな */
    width: 0px;
    /* 見えなくなった部分は非表示 */
    overflow: hidden;
    /* 左右に2pxずつあるため */
    padding: 0px;
    /* 他の要素と重ねて表示する */
    position: absolute;
}

positionをabsoluteにすることで、他の要素と重ねることができる!

またabsoluteは絶対的な位置指定です。そのため他の要素があろうと表示位置は変わらず重なって表示されるのですね

CSSのpositionを総まとめ!absoluteやfixedの使い方は?

See the Pen legendを非表示にする by tamago (@tamago324) on CodePen.

fieldsetの枠線を消す

legendに比べるとすごい単純だった...
デフォルトCSSを上書きするだけ

fieldset {
    border: none;
    margin: 0;
    padding: 0;
}

See the Pen eMPQXq by tamago (@tamago324) on CodePen.

fieldsetとlegendを使っていないような見た目にする

上記2つのCSSを組み合わせる

See the Pen fieldsetとlegendを使っていないような表示 by tamago (@tamago324) on CodePen.

新しく知ったこと

  • fieldsetlegendという2つのタグを知った
  • position: absolute;は重ねて表示させて、要素が無いように見せることもできる

参考文献