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.
新しく知ったこと
fieldset
とlegend
という2つのタグを知ったposition: absolute;
は重ねて表示させて、要素が無いように見せることもできる