dポイントプレゼントキャンペーン実施中！

マジレス希望

空のspanタブについて

解決済

  • 質問者：kuritinn
  • 質問日時：
  • 回答数：2件

HTML5
<div>
<span class="right" style="background-image:url(img.jpeg)"></span>
<section>
<h2>テスト</h2>
<p>テストです</p>
</section>
</div>

CSS
div {
width: 80%;
margin-right: auto;
margin-left: auto;
background-color: #9F0;
overflow: hidden;
}
span {
float: left;
display: block;
width: 50%;
background-size: cover;
height: auto;
}
section {
float: left;
　　 display: block;
width: 50%;
background-color: #0C3;
}

この場合空のspanタグの高さをsectionの高さと自動で合わせたいのですができません。出来る事はまず可能なのですか？
spanにheight: auto;やheight: 100%;にしても合わすことができません。
もし自動で合わせることができるなら教えてくださいませませ

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (2件)

No.2ベストアンサー

こんにちは。


2つ考えてみました。

■■その１■■
高さを揃えるのにjQueryを使ってみました。
本体は別途読み込んでください。

【HTML】
jQueryをわかりやすくするためクラスをつけましたが、そのあたりは適宜対応してください。

<div>
<span class="box1" style="background-image:url('test.jpg');"></span>
<section class="box2">
<h2>テスト</h2>
<p>テストです</p>
</section>
</div>

【CSS】変更なし

【jQuery】
<script>
$(function(){
var boxHeight2 = $(".box2").height();
$(".box1").height(boxHeight2);
});
</script>

説明：.box1に.box2の高さを適用する
-----

これでできるはずです。
widthを％指定しているので.box2の高さは変動するものと思うので、CSSをいろいろと使うよりはjQueryが小回りも効くし簡単だと思います。
ほかに、右と左で高さの高い方に揃えると言った場合などもif条件分岐で可能です。
＞出来る事はまず可能なのですか？
とのことでしたので、jQueryであれば余裕で柔軟に対応は可能です。

------------------------------

■■その２■■
もし、HTMLを変えて良いなら、妙なspanで画像エリアを作らなくても、span部分削除とCSSだけでもできると思います。
ただし、この場合、ウィンドウサイズ幅が小さくなった時に、画像のアスペクト比によっては画像の下部が空いてしまう場合はあるので、画像の用意で対応か、CSSでmin-widthを設定するなどで対応が必要です。


【HTML】
span部分を削除し、divの左側50％に背景を指定する方法です。
jQueryよりは若干融通が効かなくなりますが、ソースがシンプルになるので良いと思います。

<div class="box3" style="background-image:url('test.jpg');">
<section>
<h2>テスト</h2>
<p>テストです</p>
</section>
</div>

【CSS】
.box3{
width: 80%;
min-width: 300px;/*適宜*/
box-sizing: border-box;
padding-left: 50%;
background-repeat: no-repeat;
background-size: 50% auto;
}
これ以外のCSSは背景色指定以外は削除で、同じ表示ができると思います。


頑張ってください。
    • good
    • 0
    • 件
通報する

No.1

  • 回答者： ORUKA1951
  • 回答日時：

基本から、確実に学びなおしましょう。


<body>あるいは<article>にしても

<body>
　<div>
　　<span class="right" style="background-image:url(img.jpeg)"></span>
　　<section>
　　　<h2>テスト</h2>
　　　<p>テストです</p>
　　</section　
　</div>
の誤りを指摘すると
1) HTML5では<div>は安易に使いません。
　これは、15年前1999年勧告のHTML4.01の時代に
　『DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )』
　となっていたのですが、これが意図したとおりに理解されず、【プレゼンテーションのために乱用されていた】
・文書構造を補完するためではなくデザインだけのために使われた。例えば内容のないdivやspanとか

その反省から、HTml5では、文書構造を明確するために【新たな要素( http://www.html5.jp/trans/w3c_differences.html#n … )】が加えられました。
★そして、divは
Authors are strongly encouraged to view the div element as an element of last resort, for when no other element is suitable. Use of more appropriate elements instead of the div element leads to better accessibility for readers and easier maintainability for authors.( http://www.w3.org/TR/2014/REC-html5-20141028/gro … )
「著者は、他により適切な要素がないときの最後の最後の要素としてdiv要素を使用することが強く奨励されます。div要素の代わりにより適切な要素を使用することは、読者のた​​めには「より良いアクセシビリティ」を、作者には「よりよい保守性」につながります。」
　spanも同様です。

★ここは、HTML5が作られた最大の目的の一つであるのですからね。
HTML5“とか”アプリ開発入門（1）：Webの3つの問題を解決する「HTML5」とは何なのか (2/2) - ＠IT( http://www.atmarkit.co.jp/ait/articles/1008/30/n … )

<div> もし書くのでしたら<article>でしょう。
　articleは、<header><section><footer>を持つと期待される、--実際はなくてもよいが---完結した記事の集合を表します。
<body>
　<article>
　　<header></header>
　　<section>
　　　<artice>
　　　　<header></header>
　　　　<section>
　　　　　ブログの引用など、それ自体で完結した記事
　　　　</section>
　　　</article>
　　</section>
　　<footer></footer>
　</article>
</body>

<span class="right" style="background-image:url(img.jpeg)"></span>
　class名は文書構造を示していません。また内容がありません。

スタイルシートの問題点
CSS
div {
width: 80%;
margin-right: auto;
margin-left: auto;
background-color: #9F0;
overflow: hidden;
/* heightはデフォルトはautoなので意味がない。 安易に記述すると視覚弱者がフォントを拡大して読もうとしたときはみ出したものが見えない */
}
span {
float: left;
/* floatは文書中の画像の周囲に記事を回り込ませるためのもの、配置に使うことは避ける。フォントやデータ量の増減で崩れる原因になる。 */
display: block;/* 行内要素であるspanをblockに変えることはしないように */
width: 50%;
background-size: cover;
height: auto;
/* 当然ですが内容がないので高さが決まらない。画像は置換要素で内容は持ちえません。
　内部に画像がある<span><img></span>の場合は置換される。画像は置換インライン要素です。
　また、height:100%とした場合、祖先にstatic以外の要素がない場合は基準がない。 */
}
section {
float: left;/* 本文にfloatは使ってはなりません。この記事内にfloatさせたい画像が登場したときに挫折する。 */
　　 display: block;/* sectionは指定しなくてもblockです。 */
width: 50%;
background-color: #0C3;
}

具体的な例
<body>
　<article>
　　<header>
　　　<h1>見出し</h1>
　　　<nav>グローバルナビ</nav>
　　</header>
　　<section>
　　　<h2>本文</h2>
　　　<p>段落</p>
　　　<nav>本文--section--の目次</nav>
　　</section>
　　<footer>
　　　<h3>文書情報</h3>
　　</footer>
　</article>
</body>

body>article{position:relative;}
body>article>header>nav{position:absolute;top:0;left:0;width:50%;height:100%;background-image:url();background-size:cover;}
body>article>header,
body>article>section,
body>article>footer{margin-left:50%;}
body>article>section{min-height:400px;}

とか・・・
    • good
    • 0
    • 件
通報する

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報