HTML/CSS のどんな質問にも優しく答えるスレ 33

**Name_Not_Found** · 2018/07/11(水) 12:20:52.58

ここは初心者からベテランまで、全ての人を対象に優しく答えるスレです

類似質問、重複質問、丸投げ大いに結構。HTML / CSS 関係の事なら何でもOK
分からない人は何回聞いても結構。質問するときはIDを出すためにメール欄を
age にすることをおすすめします。

回答してくれる方は優しい人のみ！　質問者に対して暴言を吐く人はこのスレを見るな！！
終わった話を蒸し返すやつはこのスレにくるな！！！
自分で調べろという回答も禁止！！回答するかさもなくば何も書き込むな！！

質問側も節度あるレスで！質問前にスレ内を検索しましょう

■次スレについて
基本的にレスナンバー>>980を取った人（立てられない場合は次の宣言者）が立てて下さい
重複を避けるため、独断でスレ立てはせず必ず意思表示をしてから立てて下さい（>>980を取った場合も）
立てられない事が予め分かっている場合は、>>980付近の書き込みは自重しましょう

■前スレ
HTML/CSS のどんな質問にも優しく答えるスレ 32
http://mevius.5ch.net/test/read.cgi/hp/1521035557/

■関連スレ
Webサイト制作初心者用質問スレ part249
http://mevius.5ch.net/test/read.cgi/hp/1529144063/

■HTML
HTML Living Standard 日本語訳
https://momdo.github.io/html/index.html

■CSS
Selectors Level 4 日本語訳
https://triple-underscore.github.io/selectors4-ja.html

**Name_Not_Found** · 2018/10/07(日) 09:50:05.93

ワッチョイつけることを検討したほうが
良いかもという気がしてきた

**Name_Not_Found** · 2018/10/07(日) 10:38:58.22

>>940
何故囲うのがダメなのか聞いて良い？
PタグとBRタグで構成できない特別な理由があるの？

**Name_Not_Found** · 2018/10/07(日) 10:47:25.39

>>940->>942
どうしたいのかがよくわからない。
どうしたくないかを図示するのではなく
どうしたいかを図示してほしい
■はなんなの？「えお」の部分？

こうしたいの？？
―――――――――――――――――――――――
｜あいう□□□□□□□□□□□□□□□□□□□｜
―――――――――――――――――――――――
―――――――――――――――――――――――
｜えお□□□□□□□□□□□□□□□□□□□｜
―――――――――――――――――――――――

それともこうしたいの？
―――――――――――――――――――――――
｜あいうえお□□□□□□□□□□□□□□□□□｜
―――――――――――――――――――――――

**Name_Not_Found** · 2018/10/07(日) 11:26:20.35

親に何もつけずに
あいう<span></span>
とかいて span のとこをめいっぱい広げたいってことだろ

ただこんなマナー悪いやつに答えるなよ
いくらそういうスレだからって不愉快すぎる

**Name_Not_Found** (ﾜｯﾁｮｲ 113.144.28.80) · 2018/10/07(日) 12:16:16.91

使えるっけ?

**Name_Not_Found** · 2018/10/07(日) 12:19:26.14

似たような質問で縦方向に残りの領域を占有したいんですが
（自分は親にflexをつけられないとかいう制限はありません）
親に１度でもflexがあると height:100% ってきかないんですか？

<div style="display:flex; flex-direction:column;">
<div>ヘッダ</div>
<div style="flex-grow:1">
<div style="height:100%">
<div style="height:100%"></div>
</div>
</div>
</div>

みたいにかいても flex-grow:1 の div までは高さがあるんですが
その子孫要素は height:100% 指定しても高さが０になってしまいます

１度でも親に flex を使ってしまうと
子孫要素全部 flex + justify-content:stretch とか flex-grow とかで広げるしかないんですか？

**Name_Not_Found** · 2018/10/07(日) 16:02:13.53

flexbox楽だけどほとんど使うことなくね？
ヘッダーのタブメニューくらいだし

**Name_Not_Found** · 2018/10/07(日) 16:18:33.39

いやほとんど使ってる

**Name_Not_Found** · 2018/10/07(日) 16:34:35.20

>>957
flex-grow:1 の divにもdisplay: flexを指定すれば？

**Name_Not_Found** · 2018/10/07(日) 17:01:34.31

grid嫌いだしfloatもっと嫌いだしflexばっか使ってる

**Name_Not_Found** · 2018/10/07(日) 17:19:38.34

>>959
サイドバーとかも？
何故かpx指定したいんだよな

**Name_Not_Found** · 2018/10/07(日) 17:37:33.24

>>958
横にものを並べる時
ほぼ全てに使ってると行っても過言ではないくらい使う

古いIEもターゲットなのでfloatでやってください
とか言われたら少し涙ぐむくらい使ってる

**Name_Not_Found** · 2018/10/07(日) 17:38:03.70

あ、あと
物を真ん中に寄せる時も

**Name_Not_Found** · 2018/10/07(日) 18:09:56.49

>>958
真ん中寄せが楽だからなんにでも使ってる

**Name_Not_Found** · 2018/10/07(日) 19:51:39.79

>>960
やっぱりそうして子孫全部に flex つけるしかないんですね
ありがとうございます

**Name_Not_Found** · 2018/10/07(日) 21:57:49.06

末端行は左寄せにする事の方が多いんだが
そうなるとfloatのがｽﾏｰﾄだよな？

123
4
ってする事多くない？

**Name_Not_Found** · 2018/10/07(日) 22:13:09.68

それもflexでできる

**Name_Not_Found** · 2018/10/07(日) 22:23:52.27

どうやるの？
flexって好きな位置でのwrapと
複数行にわたる縦幅の一致ができないよね
それさえできれば万能なのに

**Name_Not_Found** · 2018/10/07(日) 22:37:45.70

>>969
縦幅の一致ってクロス軸に対する一致？
align-itemsじゃダメなの？

**Name_Not_Found** · 2018/10/07(日) 22:47:23.71

>>969
好きな位置でもできるし複数行のもできるけど
要はGridみたいなのってことだろ？

**Name_Not_Found** · 2018/10/07(日) 22:51:34.96

>>970
いや複数行間で一致

１行目が高さ100pxの要素で
2行目に200pxの要素があったら
自動的に１行目も200pxの要素にしたいみたいな感じ

外側を400pxのfixedにして等分配ってのはできるけど
auto-height で子要素最大の高さにあわせるみたいないわゆるグリッドは無理でしょ

**Name_Not_Found** · 2018/10/07(日) 22:57:41.72

>>971
更新してなかった
具体的にどうするんです？

＜div class="container" style="width:1000px"＞
＜div＞＜img src="http://placehold.jp/200x100.png";＞＜/div＞
＜div＞＜img src="http://placehold.jp/200x200.png";＞＜/div＞
＜div＞＜img src="http://placehold.jp/200x100.png";＞＜/div＞
＜div＞＜img src="http://placehold.jp/200x100.png";＞＜/div＞
＜div＞＜img src="http://placehold.jp/200x100.png";＞＜/div＞
＜div＞＜img src="http://placehold.jp/200x100.png";＞＜/div＞
＜div＞＜img src="http://placehold.jp/200x100.png";＞＜/div＞
＜div＞＜img src="http://placehold.jp/200x100.png";＞＜/div＞
＜div＞＜img src="http://placehold.jp/200x100.png";＞＜/div＞
＜/div＞
これを (width height 指定一切なしで) flex 関連のスタイルだけで
3 x 3 の等サイズの四角形に配置できます？

**Name_Not_Found** · 2018/10/07(日) 23:02:20.02

使い分けろよ…

**Name_Not_Found** · 2018/10/07(日) 23:38:32.90

flex厨できるできるって結局口だけかよ

**Name_Not_Found** · 2018/10/08(月) 00:35:54.26

CSSにおいて、HTMLの要素内に記入された文字列を受け取る事って可能ですか？

**Name_Not_Found** · 2018/10/08(月) 00:49:00.80

不可能です

**Name_Not_Found** · 2018/10/08(月) 00:50:15.31

親が要素Xであるような子要素Yのセレクタは
X Y
ですが、
子要素がYであるような親要素Xのセレクタはなんですか？

**Name_Not_Found** · 2018/10/08(月) 01:07:51.48

>>978
子は親を選べません

**Name_Not_Found** · 2018/10/08(月) 01:08:28.07

>>979
ネタは要らないから

**Name_Not_Found** · 2018/10/08(月) 01:26:07.48

wwwの読みかたは？

一般人「だぶりゅーだぶりゅーだぶりゅー」

げぇじ「わらわらわら」

他界系「わーるどわいどうぇぶ」

転載「すりーだぶりゅー」

**Name_Not_Found** · 2018/10/08(月) 02:01:44.42

>>978
CSSで先読みが必要なセレクターはまだ実装されていないから無理。
それにあたるものとして:has()が提案されてるけど実装したブラウザはないのでjsでやるしかない

**Name_Not_Found** · 2018/10/08(月) 02:06:40.82

>>972
あぁ、そりゃ無理だね…
floatでできるの？
全然思いつかん

**Name_Not_Found** · 2018/10/08(月) 02:25:22.77

自分も動的サイトが主流だから
要素の数・高さが不定になるケースが多いわ
何が来ても大丈夫なようなcssを予め組まないといけないから
結局flexだけでは難しいというイメージだな
>>968の具体的回答は知りたい（動的前提で）

**Name_Not_Found** · 2018/10/08(月) 02:25:48.82

いやできないと思う
できたら万能なのになーってだけ
しかもわりと使いたいケース多いし

**Name_Not_Found** · 2018/10/08(月) 02:28:52.77

複数行の高さ揃えはいまのCSSだとどうやっても無理じゃね
任意位置改行は float か inline-block なら<br>はさむだけだけど flex は無理じゃね

**Name_Not_Found** · 2018/10/08(月) 02:57:01.02

HTMLの前にCSSを先に学んでもいいですか？

**Name_Not_Found** · 2018/10/08(月) 03:13:40.36

>>986
試してないけどmargin-right伸ばすか空のアイテム置くかで出来ない？

**Name_Not_Found** · 2018/10/08(月) 03:22:02.15

>>984
968が何に対してかわからないけど、stretchで等分幅を維持しつつ、最後の余りは左寄せにしたいなら、親要素のafterにflex-glowを多めにとって余り部分を埋める方法があるけど、この場合上の行と余りアイテムの幅は等しくならないやね。

**Name_Not_Found** · 2018/10/08(月) 03:29:37.56

さいきん４Kモニタとかそれ以上のモニタもわりと安価でではじめたし
いつまでも1000pxとか固定幅とってるわけにもいかないんだよね

auto-size と wrap 使ってかないと１元ソースで 400px～4000px まで対応できんわ

**Name_Not_Found** · 2018/10/08(月) 05:28:20.54

968だけど、GridがIE11が未対応多いから俺はflexでやってるんだけど、要素不定の高さでも、固定高さでもどっちでもやってるから何ができないのかわからん
あとwidthとheightとmin-widthとflex使う
flex-glowは使わん

**Name_Not_Found** · 2018/10/08(月) 05:32:42.80

│□□□□□│

こうなってるやつが

│□□□□│
│□　　　　 │

こうしたいの？

**Name_Not_Found** · 2018/10/08(月) 05:36:05.77

できるなら >>973 に答えてあげればいいんじゃないの

**Name_Not_Found** · 2018/10/08(月) 06:04:37.13

>>993
widthもheightも一切指定なしって言われてるから無理

**Name_Not_Found** · 2018/10/08(月) 06:10:11.34

>要素不定の高さでも
height指定したら不定じゃないじゃん

要は子要素の１番大きいサイズにあわせた等サイズブロックを
wrapでならべたいけどflexだけじゃできないってことだろ

**Name_Not_Found** · 2018/10/08(月) 08:24:13.15

一番高い要素にだよね？
flexでもできるんだが

**Name_Not_Found** · 2018/10/08(月) 11:25:28.14

めんどくせーから>>973ができるか　だけでいいよ
これができれば途中の改行と複数行の高さの一致を「flexの機能で」できたってことになるかと

**Name_Not_Found** · 2018/10/08(月) 11:44:26.55

こういうことか？これのどっちかがしたいってこと？
https://i.imgur.com/PPCDo1j.jpg
https://imgur.com/KdjyVJf.jpg

**Name_Not_Found** · 2018/10/08(月) 11:45:06.16

どちらもflexでやっとるけど

**Name_Not_Found** · 2018/10/08(月) 11:47:02.68

流れも全部読めよアスペかよ
>>972 読んでそれになるんだったら日本語勉強したほうがいい

**1001** · Over 1000

このスレッドは１０００を超えました。
新しいスレッドを立ててください。
life time: 88日 23時間 26分 10秒

**1002** · Over 1000

5ちゃんねるの運営はプレミアム会員の皆さまに支えられています。
運営にご協力お願いいたします。

───────────────────
《プレミアム会員の主な特典》
★ 5ちゃんねる専用ブラウザからの広告除去
★ 5ちゃんねるの過去ログを取得
★ 書き込み規制の緩和
───────────────────

会員登録には個人情報は一切必要ありません。
月300円から匿名でご購入いただけます。

▼ プレミアム会員登録はこちら ▼
https://premium.5ch.net/

▼ 浪人ログインはこちら ▼
https://login.5ch.net/login.php