2

いつもお世話になります。
css埋め込みのみによる回りこみ制御を考えています。

横幅780px以上の場合、

<div style="float: left; width: 50%;">a</div>
<div style="float: left; width: 50%;">b</div>

とし、横幅がこれを下回る場合、

<div style="float: left; width: 100%;">a</div>
<div style="float: left; width: 100%;">b</div>

以上のようなことをmax-width,min-width等の埋め込みのみで制御したいのですが、
何かいい方法はありませんでしょうか?

こちらではこんな感じで作ってみましたがイマイチです。

<div style="float: left; width: 390px; max-width: 100%; height: 200px; background: black;" ></div>
<div style="float: right; width: 390px; max-width: 100%; height: 200px; background: yellow;"></div>
<div style="float: left; width: 390px; max-width: 100%; height: 200px; background: red;" ></div>
<div style="float: right; width: 390px; max-width: 100%; height: 200px; background: gray;"></div>

基本的に実現したいことは、親要素の横幅780px以上の場合、子要素を2列で表示し、
親要素の横幅780px未満になる場合は子要素を1列で表示したいです。

埋め込みだけでもできそうな感じはするのですが、
皆さんのお知恵をお借りしたいと思います。

よろしくお願いします。

4
  • 1
    埋め込みというのは <style> タグも使えないのでしょうか?(タイトルにはstyle属性のみと書いてしまいましたが)
    – unarist
    2016年9月1日 16:14
  • 個々の“要素”のタグに style属性としてスタイル情報を埋め込むだけで実現したいです。<style>タグは使えません。よろしくお願い致します。
    – sado
    2016年9月2日 2:16
  • 親要素のstyle属性は変更出来るのでしょうか。
    – mjy
    2016年9月2日 5:12
  • 親要素への変更はできません。ただし自分自信が親になり以下に子を複数作れます。ですので親子の相互関係を作ることは可能です。よろしくお願い致します。やはり無理っぽいでしょうか・・・。
    – sado
    2016年9月2日 6:25

1 件の回答 1

1

display: flexの要素を作り、段組みしたい要素をその子要素にするというのはどうでしょうか。
両方の子要素にflex: 1 1 390pxと指定すると、390px(とりあえず 780/2 で適当に決めました)をベースとして必要に応じて同じ比率で伸縮するようになります。
親要素にflex-wrap: wrapとしているので、ベースの390pxが保てない幅になったら自動で折り返され縦組になります(Flexbox)。

/* 本題と関係ないスタイルはこちらに集めています */
div{
	border-style: solid;
	border-width: 1px;
	background-color: lightblue;
}
#parent{
	width: 100%;
}
<div id="parent"><!-- 変更出来ない親要素 -->
                                                                  
	<div style="width: 100%; display: flex; flex-wrap: wrap">
		<div style="flex: 1 1 390px">
			A
		</div>
		<div style="flex: 1 1 390px">
			B
		</div>
	</div>
                                                                  
</div>


本題とずれますが:
「親子の相互関係を作ることは可能」な状況でしたら、そこにstyleタグを挿入してしまう事も出来そうですがいかがでしょうか。
昔のHTMLはstyleタグはhead内に書かないといけないという仕様でした(現実の実装では無視しても動いたようですが)。
現在のHTML5ではscoped属性を付ければ仕様に違反せず挿入出来ます。

1
  • 脱帽、まさしくこれです。Flexboxとは恐れ入りました。styleタグが使えないのはあるポータルの投稿箇所にタグが使えて単純にstyleタグが禁止されているだけです。タグが使えても1行の縦組ではつまらんと思ったのがことの発端ですが、しかし、このFlexboxはかなり使えそうですね。リキッドレイアウトのコーディングが非常に楽になりそうです。ありがとうございました。
    – sado
    2016年9月2日 15:31

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。