html - 達成することは可能ですか
-を使用せずに効果のような
鬼ごっこ？

Question

個人的には、<fieldset>タグがボックスを描画し、<legend>その上部の境界を越えて配置する方法が気に入っています。このような。

私が達成しようとしていることのサンプル画像

ただし、この要素はフォームfieldsetを整理するために作成されたものであり、一般的なデザインに使用することは、一般的なデザインにテーブルを使用することよりも優れています。だから、私の質問は...別のタグを使用して同じ結果を達成するにはどうすればよいですか？境界線は（または他のタグが使用される）下で消去する必要があり、「複雑な」ボディの背景画像が存在する可能性があるため、要素の1つと一致するように凡例のを設定するだけの余裕はありません下。<legend>background-color

JavaScriptなしで動作させたいのですが、CSS3およびXMLベースの形式（SVGやXHTMLなど）で問題ありません。

score 44 · Accepted Answer

デモ jsBin リンク

.fieldset {
  border: 1px solid #ddd;
  margin-top: 1em;
  width: 500px;
}

.fieldset h1 {
  font-size: 12px;
  text-align: center;
}

.fieldset h1 span {
  display: inline;
  border: 1px solid #ddd;
  background: #fff;
  padding: 5px 10px;
  position: relative;
  top: -1.3em;
}

<div class="fieldset">
  <h1><span>Title</span></h1>
  <p>Content</p>
</div>

score 27 · Accepted Answer

いいえ、それは本当に不可能です。ブラウザメーカー自身でさえ、この問題に苦しんでいます。

もちろん、とにかくやってみることに抵抗はありませんでした。そして、私はそれに多くの時間を費やしたので、Anonymousはその間に私のものとかなり似た「解決策」を思いつきました (彼のtest1). しかし、固定幅の「凡例」は必要ありません。

ただし、このコードは明らかにちょっとしたハックであり、複雑なサイトでうまくいくかどうかはわかりません。また、グループ化にフィールドセットを使用することは、レイアウトにテーブルを使用することほど悪くはないという Anonymous の意見にも同意します。フィールドセットは要素をグループ化するために設計されましたが、HTML では、実際にはフォームコントロールをグループ化するためにのみ使用することになっています。

.fieldset {
  border: 2px groove threedface;
  border-top: none;
  padding: 0.5em;
  margin: 1em 2px;
}

.fieldset>h1 {
  font: 1em normal;
  margin: -1em -0.5em 0;
}

.fieldset>h1>span {
  float: left;
}

.fieldset>h1:before {
  border-top: 2px groove threedface;
  content: ' ';
  float: left;
  margin: 0.5em 2px 0 -1px;
  width: 0.75em;
}

.fieldset>h1:after {
  border-top: 2px groove threedface;
  content: ' ';
  display: block;
  height: 1.5em;
  left: 2px;
  margin: 0 1px 0 0;
  overflow: hidden;
  position: relative;
  top: 0.5em;
}

<fieldset>
  <legend>Legend</legend> Fieldset
</fieldset>

<div class="fieldset">
  <h1><span>Legend</span></h1> Fieldset
</div>

補足として、HTML5figureとfigcaption要素も確認することをお勧めします。これらは、あなたの例で使用するのに最適な要素のようです。

ただし、これらの要素がフィールドセット/凡例と同じようにレンダリングされるとは思わないため、これは問題のセマンティック部分のみです。言うまでもなく、現在のブラウザーはおそらくこれらの要素をまだサポートしていません。

score 6 · Accepted Answer

ただし、フォームを整理するために作成されたものであり、一般的なデザインに使用することは、一般的なデザインにテーブルを使用することに勝るものはありません

これは間違っています。レイアウトにテーブルを使用する際の主な問題は、ほとんどのレイアウトが表形式のデータにマップされないことです。2 つ目の問題は、表形式のデータにマップされないものはどれも表形式のデータではなく、そうでないものもあるということです。つまり、マークアップのセマンティクスはページのセマンティクスと一致しません。さらに、実用的には、テーブルのレイアウトメカニズムは通常、カスタムスタイル設定やテキストのみのブラウジングを困難または不可能にします。

ここで、fieldset には明らかにフォームフィールドをグループ化する意図があります。そして、その外観のために要素を選択することは、ほとんどの場合、それが悪い選択であることを示しています. ただし、この特定の例では、リストを含むフィールドセットと凡例にはほとんど欠点がないと主張します (実際、私が考えることができるのは、フィールドセットを単純にフォームのシグナルとして解釈し、ユーザーの列挙時間を無駄にするスケーパーだけです)。その内容は異なりますが、実際にこれを行うものは何も知りません)。これの主な理由は、フォーム要素が入力を含むという機能的および意味的な目的を果たしているのに対し、fieldset は初期の頃から特殊で再現不可能な視覚効果を持っていたためです。さらに、フィールドセットの視覚要素が何らかの形で機能している場合、

必要に応じて使用することをお勧めします。私はそうしませんが、セマンティックな考慮事項のためではありません。私は特殊効果に頼らず、一般的に機能よりも形式を避けたいと思っています。

とにかく、噛むべきものがあります：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head><title>test</title><style type="text/css">

.fake_fieldset {
	border: 2px groove ButtonFace;
	border-top-width: 0;
	margin-left: 2px;
	margin-right: 2px;
	padding: .35em .625em .75em;
	margin-top: 1em;
	position: relative;
}

.fake_legend {
	margin-top: -1em;
}

.fake_legend.test1::before {
	position: absolute;
	top: 0;
	left: -1px;
	border-top: 2px groove ButtonFace;
	content: " ";
	width: 0.5em;
}

.fake_legend.test1::after {
	position: absolute;
	top: 0;
	right: -1px;
	border-top: 2px groove ButtonFace;
	content: " ";
	width: 80%;
}


.fake_fieldset.test2 {
	padding: 0;
	padding-top: 1px; /* no collapsed margin */
}

.fake_fieldset.test2 .fake_fieldset.container {
	margin: 0;
	border: 0;
}

.fake_legend.test2 {
	display: table;
	width: 100%;
}

.fake_legend.test2 span {
	display: table-cell;
}

.fake_legend.test2 span:first-child {
	width: 0.5em;
}
.fake_legend.test2 span:first-child + span {
	width: 0; /* cells stretch */
}
.fake_legend.test2 span:first-child,
.fake_legend.test2 span:last-child {
	/* the rest of this code is left as an exercise for the reader */
}


</style></head><body>

<fieldset><legend>foo</legend>bar</fieldset>

<div class="fake_fieldset test1"><div class="fake_legend test1">foo</div>bar</div>

<div class="fake_fieldset test2"><div class="fake_legend test2"><span></span><span>foo</span><span></span></div><div class="fake_fieldset container">bar</div></div>

</body></html>

score 0 · Accepted Answer

あなたはすでに答えを知っていると思います。

独自の境界線を提供する (これは多くの不要な作業です) か、境界線を遮る要素を配置します (問題は、無地の背景色しか使用できないことですが、それで問題ない可能性があります)。

私の知る限り、このワークアウトをすべてのブラウザーで適切に行うためにできることは何もありません。私はあなたのスタイルが好きですが、それは正しいアプローチですが、満足のいく方法で解決できる問題ではないでしょう.

これらのトピックに関する私の一般的な意見は、A) 過度の労力、または B) 最初から完全に明白ではないマークアップソリューションを必要とするようなことを Web で試みてはならないということです。Web には制限があり、それらの制限を回避しようとするよりも、彼女に順守することをお勧めします。

<legend/> の何が問題なのですか?

score 0 · Accepted Answer

妥当な結果が得られました。

    <div>
      <div style='position:absolute;float:top;background-image: url("whiteSquare.jpg");height:20px;z-index:10;font-size:20px'>
            Header
        </div>
        
         <div style='position:absolute;float:top;border:1px dashed gray;width:300px;margin-top:12px;z-index:1'>
             <div style='margin-top:20px;'>
             <table>
              <tr>
                  <td>A</td>
                  <td>B</td>
                 </tr>
                 <tr>
                  <td>A</td>
                  <td>B</td>
                 </tr>
             </table>
             </div>
        </div>
    </div>

html - 達成することは可能ですか-を使用せずに効果のような鬼ごっこ？

9 に答える 9

Related

Reference

html - 達成することは可能ですか
-を使用せずに効果のような
鬼ごっこ？