HTML/CSS のどんな質問にも優しく答えるｽﾚ 52

**Name_Not_Found** · 2023/08/23(水) 18:52:13.52

ここは初心者からベテランまで、全ての人を対象に優しく答えるスレです
類似質問、重複質問、丸投げ大いに結構。HTML / CSS 関係の事なら何でもOK
分からない人は何回聞いても結構。
質問するときはIDを出すためにメール欄を age にすることをおすすめします。
回答してくれる方は優しい人のみ！　質問者に対して暴言を吐く人はこのスレを見るな！！
終わった話を蒸し返すやつはこのスレにくるな！！！
自分で調べろという回答も禁止！！回答するかさもなくば何も書き込むな！！
質問側も節度あるレスで！質問前にスレ内を検索しましょう

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

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

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

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

前スレ
HTML/CSS のどんな質問にも優しく答えるｽﾚ 51
https://mevius.5ch.net/test/read.cgi/hp/1667020591/

**Name_Not_Found** · 2023/08/25(金) 01:02:29.10

あと見出しタイプ2という呼称からの推察になるが
h2のバージョン違いなら
>>17の言うようにh2の中身を変えるかな

通常
<h2 class="head2">
<span class="head2__label">見出し</span>
</h2>

星付き
<h2 class="head2--star">
<span class="head2__label">見出し</span>
</h2>

こんなん

**Name_Not_Found** · 2023/08/25(金) 07:56:42.91

みんなCSSで背景作ればいいんです言うけど
レスポンシブ対応はどうすればいいの？

**Name_Not_Found** · 2023/08/25(金) 11:00:02.85

どこに困るのかが分からん…

**Name_Not_Found** · 2023/08/25(金) 12:20:49.64

background-sizeでcoverとかcontainとか色々あるだろ

**Name_Not_Found** · 2023/08/25(金) 17:48:20.87

chromeの検証ツールで↓のページを見た時、表示端末にスマホを指定するとスワイプ操作で横スクロールできるけど、iPad系を指定するとスワイプできないできないんですがおま環ですか？
https://jsfiddle.net/om7uLzwy/show

実機で見た時にはスマホと同じようにスワイプで横スクロールできるはずですよね？
タブレット持ってないので試せず。。

**Name_Not_Found** · 2023/08/25(金) 18:14:39.31

>>22-23
じゃあ見出しの文頭に画像を表示するにはどうしたらいい？
Bootstrap5使ってる静的HTMLサイト

**Name_Not_Found** · 2023/08/25(金) 19:01:42.19

>>24
スワイプでスクロールできたよ
iPadは実機でないと動作わからないことも多いので、検証用に一枚導入してもらうのが確実ね
制作環境がMacならXcodeのSimulatorが使えるんだけど、Windowsだよね？

**Name_Not_Found** · 2023/08/25(金) 19:05:41.68

>>26
じゃあおま環ですね。。
多分表示サイズを75%に落としてるのが原因のようです。

**Name_Not_Found** · 2023/08/25(金) 23:29:22.81

>>25
https://jsfiddle.net/r1wkj0e6/

**Name_Not_Found** · 2023/08/25(金) 23:56:16.43

集団摘発案件、逮捕案件

表向きはIT企業だが本職は特殊詐欺グループ
SALES GO株式会社（セールスゴー）
セールスゴーは特殊詐欺グループです！！

元鹿島サポーターの押川定和も詐欺グループの一員です。

表向きのセールスゴー
↓↓↓↓↓↓
https://salesgo.co.jp/company

〒140-0002
東京都品川区東品川四丁目13-14
グラスキューブ品川

鹿島アントラーズ　鹿島アントラーズ
押川定和押川定和押川定和押川定和押川定和
セールスゴー　セールスゴー　セールスゴー
鹿島アントラーズ　鹿島アントラーズ
押川定和押川定和押川定和押川定和押川定和
セールスゴー　セールスゴー　セールスゴー
鹿島アントラーズ　鹿島アントラーズ
押川定和押川定和押川定和押川定和押川定和
セールスゴー　セールスゴー　セールスゴー
鹿島アントラーズ　鹿島アントラーズ
押川定和押川定和押川定和押川定和押川定和
セールスゴー　セールスゴー　セールスゴー

http://www.jpdo.com/cc02/18/img/34090.jpg

**Name_Not_Found** · 2023/08/26(土) 09:38:21.51

>>28
ありがとう、ビューポートを使えば実装できるんだね

**Name_Not_Found** · 2023/08/26(土) 21:56:22.48

=T=i=k=T=o=k（←迷惑でしたらこちらをNGしてください。）

友人にも紹介して、追加で￥3500をGETできる。
https://i.imgur.com/4BmBiOm.jpg

**Name_Not_Found** · 2023/08/26(土) 23:38:42.95

>>31
ありがとう、実際にやってみるよ

**Name_Not_Found** · 2023/08/27(日) 01:28:51.90

>>31
迷惑って自覚があるならNG避けようとすんなゴミカス

**Name_Not_Found** · 2023/08/27(日) 03:53:52.61

HTMLかどうか分からないんですが、PC版Chromeでホームページを見ると「アプリをインストールしますか？」という謎の通知が出てきます。
出ないようにしたいのですがどうしたらいいでしょうか。

**Name_Not_Found** · 2023/08/27(日) 11:20:46.15

>>19
borderや背景でそれぞれの星を回転ってできるの？
試しにborderで書いたやつを見せてくれんかの？

**Name_Not_Found** · 2023/08/27(日) 11:29:25.16

>>19
セマンテックな観点からデザインに関する部分はCSSのみでやるべきだって昔誰かが言ってた気がしたんだよｗ
実際、疑似用を多数使いたいって要望は多いと思ったんだがねえ

>>20
せやね

**Name_Not_Found** · 2023/08/27(日) 12:21:28.55

>>34
そのホームページとやらの素性が分からないので、その情報だけじゃ何も分からない

**Name_Not_Found** · 2023/08/27(日) 13:07:05.37

>>35
背景もBorderも回転GIFをはりつければいいんじゃね？
後出し仕様があるなら知らんけど

**Name_Not_Found** · 2023/08/27(日) 13:21:01.44

cssだけで回転させたいとか言い出しそうだけど
svgでやればイケる？

**Name_Not_Found** · 2023/08/27(日) 13:28:15.09

>>38 >>39
最初の質問時に
>>12 疑似要素を4つ使いたい場合
>>15 ※星部分が回転

て書いた通り、疑似要素でcssだけで回転させるイメージなんだがやはりborderや背景では無理って事？
gifアニやsvg使うってのはなんか余計に面倒にならない？

**Name_Not_Found** · 2023/08/27(日) 13:29:29.82

gifアニやsvg使うくらいならjsでやるわ

**Name_Not_Found** · 2023/08/27(日) 13:40:05.87

そもそもお題の様なデザインはダサいから採用しないってのはあるが

**Name_Not_Found** · 2023/08/27(日) 14:30:59.88

>>36
要望は多い！使えるなら5個でも6個でも使えたらsection一個で再現できるのになってデザインはもちろんあるぜ！
「デザイナーがコーディングできて、かつすべての要素を疑似要素2つまでで完結できるようデザインする」とかじゃない限りどう足掻いてもdivやspanは必要になるね
というかセマンティックなタグだけでどんなデザインも再現できるなら極論divとspanというタグは存在する意味がないんよ

**Name_Not_Found** · 2023/08/27(日) 14:35:34.56

>>42
これは構造を見てわかるようにした例えだよ

つか既存のwebやcssの見出しデザインてもう出尽くし感と既視感しかないと思うんだが。
むしろそこに疑問を感じているのだ

**Name_Not_Found** · 2023/08/27(日) 14:35:55.82

>>40
borderや背景それ自体は動かないからgifとか使うしかないよ
最小のタグでやりたいというお題に答えるならそうなるというだけ
普通は>>20みたいにするから親と子で疑似要素が4つ存在できる
さらに疑似要素が必要になる場合包括するタグを増やせばいい
入れ子と違って空要素は非推奨だが、実際の現場では背景画像が入れてあるだけの空divなんてざらにある
なんならalt空のimg放り込むなんてことも余裕である

**Name_Not_Found** · 2023/08/27(日) 14:36:43.81

>>43
うん

**Name_Not_Found** · 2023/08/27(日) 14:41:15.43

>>45
うん。なんか背景にはtransform使えるようだから、
背景は複数指定できるように昨今、なんかできそうな気もするんよな
既にやってる人いるならそれ貰ったほうがいいなって思い、、
borderでは回転制御の方法は思いつかないから出来るなら見てみたいって思った感じ

47 · 2023/08/27(日) 14:43:52.38

すまん、背景にtransformは勘違いかもしれん

**Name_Not_Found** · 2023/08/27(日) 16:02:08.77

つか、お前らがセマンティクス教徒になってる理由は何なん？
手書き履歴書以上に意味がないと思うが
(手書き履歴書は「意味のない慣習にも30分ほどはつき合う気はある」という踏み絵にはなるが、
論理マークアップ/セマンティクスには本当に何の実質的意味も価値もない)

>>43
> というかセマンティックなタグだけでどんなデザインも再現できるなら極論divとspanというタグは存在する意味がないんよ
現在は逆で、divだけでどんなデザインも再現出来てしまうのでセマンティクスの存在意義がない(そしてこれは極論ではなく単なる事実)
だからみんなおつきあい程度に守ってるだけで、divが必要なら躊躇無くdiv使う(デザインをセマンティクスより優先させる)

**Name_Not_Found** · 2023/08/27(日) 19:40:10.34

論理マークアップ不要なら
どんなデザインもdivだけで再現出来てしまうのは昔からやろ

**Name_Not_Found** · 2023/08/27(日) 19:46:36.84

一昔前はSEOの為のタグ構造（例えばHタグの出現順番など）と
anotherLINTだかW3Cだかの厳格型のHTMLチェッカーで100点目指さないといけないみたいな風潮があったからな
anotherLINTだかがめちゃめちゃ厳しくて、100点取る為には一切無駄な記述をしてはならないって洗脳されてしまったんよ

**Name_Not_Found** · 2023/08/27(日) 21:44:32.36

>>50
歴史は詳しくないがHTML5からじゃね？
HTML4だと各タグに汎用性/一般性が無かった気が

>>51
> anotherLINT (1997)
つまり26年前のゴミに未だに振り回されてると？
基本、最新版以外はゴミなWeb界で、無駄に伝統を重んじる連中がいたことにびっくりだわ

にしても今更要らんし、何らかの理由で枠が必要なら一番手っ取り早いのはdivだし、
装飾の為だけにHTML構造を変えるのが嫌なら全部div付けて使わずに誤魔化すのが一般的なわけで、
そうすればいいし、また、そうするしかないとも思うが
(現在のCSSには枠を付加する機能がないから、
あらゆるデザインをCSSの差し替えだけで対応出来るようにするには、
あらゆる場所にdivを配置し必要な場合には枠として機能するように仕込んでおく必要があって、
これがプログラムでHTML生成された場合にdivが無駄に入れ子になる原因だが、
15もこれってだけの話)

**Name_Not_Found** · 2023/08/27(日) 22:05:48.39

anotherLintって聞いて26年前とか言い出す謎リテラシーの時点で読む価値無いのはわかった
その理屈だとhtmlも30年前の言語になるだろ

**Name_Not_Found** · 2023/08/28(月) 01:21:28.18

>>53
ね。俺も最初のそれで、はァ？？
ああ、後発が自分の立ち位置を正当化したいのねって思った

**Name_Not_Found** · 2023/08/28(月) 01:23:06.57

ちな一応教えてお手上げるとanotherLINTが機能しなくなって廃れたのはHTML5草案あたりだから2012年ころかな。

**Name_Not_Found** · 2023/08/28(月) 01:31:38.13

モールのASPやメルマガなんかだとソースの文字数制限なんかも厳しくて、
余計なソース、将来使うかもしれないから予め書いておくなんて考えが一切許されん環境もあったな。
まあ今は自由な環境の方が多いから、予測できる範囲で入れ子はしておくし、使ってない汎用関数も書きっぱなしだわ

**Name_Not_Found** · 2023/08/28(月) 06:32:47.09

>>53-54
なるほど先発が自分の立ち位置を正当化する為に26年前の開発手法を今でも踏襲しているのか
定義通りの老害だな

>>55
逆に考えてみろ
必要ないから廃れた、HTML5に対応する価値がなかったからやらなかった
(まあ継承してHTML5に対応してるサイトも提供されてるが)

>>56
> 使ってない汎用関数も書きっぱなし
いや使ってないと分かってるのなら落とせよ
多分ビルド時に自動で落とせるし、それ以前にIDEが文句言うと思うが

> 予測できる範囲で入れ子はしておくし
これが比較的許されるのは、ユーザーがCSS当てたときに枠がないと詰むからだよ
お前が今使ってなくても、ユーザーが使う可能性もあるという事

**Name_Not_Found** · 2023/08/28(月) 06:40:14.68

タグに意味をもたせたいから使う
出会ったこともないけどもし全部がdivのコードみたら乾いた笑いが出るな
お前それ管理どうすんの？って
そしてそのままリファクタissue化される

**Name_Not_Found** · 2023/08/28(月) 07:19:30.09

>>58
抽象思考出来無い馬鹿乙

全部がdivなら、ほぼ全部にクラスが付いてるはず
実際自動生成されたHTMLはほぼこの形態だろ
タグ名とクラスは役割が被ってて、クラスの方が一般的に使えるんだよ
だから(div+クラス)の形態で生成される

ただ全部がdivなら、省略して(タグ名は省略+クラス)でも同じで、
ならクラスの部分をタグ名にして(タグ名部分にクラス+クラス無し)となってるのが、
お前らが拘ってる論理マークアップ()、セマンティクス()なんだよ
意味的には同じで、書式が違うだけ

**Name_Not_Found** · 2023/08/28(月) 07:23:28.87

>>59
HTML Living Standard
https://html.spec.whatwg.org/multipage/

Sass Document
https://sass-lang.com/documentation/
Sass Guideline
https://sass-guidelin.es/

Javascript Reference
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference

言ってること小3で草
わざわざ公式が用意してくれてんのに老害がー！ってワールドスタンダード全無視じゃん

何か語る前に何のためにドキュメントが存在してるか、まず初歩の初歩から見直したほうがいいわ

嫌ならお前がルール決める側にまで上がってお前が定義変えろ
それが無理なら公開オナニーやめるかブランチ切ってオナっとけ

**Name_Not_Found** · 2023/08/28(月) 08:04:00.45

>>60
そのドキュメント類のどこに「論理マークアップしろ」と書いてあるんだ？
(せめてW3C謹製のドキュメントを持ってくるべき)

現在の状況において合理的価値が無い事に拘り続けてるから「定義通りの老害」だと言ってる

**Name_Not_Found** · 2023/08/28(月) 08:10:42.44

>>61
苦しそうで草

**Name_Not_Found** · 2023/08/28(月) 08:20:14.54

>>61
横からで悪いけど、今はWHATWGに移管されてるよ
よく調べた？

**Name_Not_Found** · 2023/08/28(月) 08:28:25.99

>>63
知ってるよ
完敗したW3CはWHATWG(ブラウザ勢)の規格を追認するだけの機関に成り下がった
だからその中には「論理マークアップしろ」なんて一言も書いてないはず

だからお前らは何を根拠に「論理マークアップしろ」と考えるのか？と聞いてるのだ
「昔からそうだから」なら、現状認識を改めることのない「定義通りの老害」だろ

**Name_Not_Found** · 2023/08/28(月) 08:32:44.81

>>64
60に言ってね同一人物認定されたくないから横からって書いたの理解して

一つ言うなら今の標準も知らなかったあなたが現状について何かを言っても誰も納得しないと思う。
けど現状をなんとかしたいってのはよく分かったよ頑張ってね

**Name_Not_Found** · 2023/08/28(月) 09:25:21.32

>>65
コミュ障か？
W3C謹製の『現行の』「論理マークアップしろ」と書いた文書なんて無いはずと分かってての発言だぞ
『昔の』なら多分あるんだろうけど
まあこんな小学生レベルの揚げ足取りはどうでもよくて、問題は、

現在は公式には誰も「論理マークアップしろ」なんて言ってないのに
お前らが認識改めずに昔のままで「論理マークアップしろ」と考えるのは「定義通りの老害」だろ

**Name_Not_Found** · 2023/08/28(月) 09:33:46.70

>>66
興奮しすぎ少し落ち着きなよ。
じゃあそれでいいから好きにdivdivすればいいと思うよ誰も止めないから

けどその先の展望があって且つ提示し続けないと、
それこそあなたが上で言われてるようなオナニー屋さんとして評価されるから気をつけてね

**Name_Not_Found** · 2023/08/28(月) 09:48:48.84

>>67
展望もクソも、div使わないとデザイン出来ないからdiv使う、これが普通の人だろ
お前ら老害は、「完璧な論理マークアップでは再現出来ないデザインがあると知ってるが、
それでも論理マークアップを止めない！！！」だろ
完全に論理マークアップオナニー屋じゃん

まあこれまで通りdivもspanも禁止でどうぞ
誰も止めないし、君達が今後とも公開オナニーし続けるのも自由だし
実際、現実はdivdivしてるだろ、俺だけの話ではなく

**Name_Not_Found** · 2023/08/28(月) 09:54:28.24

>>68
オナニー返しww
ごめん笑っちゃったそれ効いてたんだね
まあとにかく頑張ってね

**Name_Not_Found** · 2023/08/28(月) 11:59:45.34

>>64
横からすまんが君はSEO対策してないの？？
何のために論理マークアップって、巡回ロボに構造を伝えるためだろ
Googleの仕様読んだことないのかえ？

**Name_Not_Found** · 2023/08/28(月) 12:02:54.80

>>57
>ユーザーがCSS当てたときに枠がないと詰むからだよ
そんな説は聞いたことない。それ主観だろ。

ユーザーCSSの為にHTML配慮なんてしてるｻｲﾄなんてねーよｗ
そもそも構造決まってんならXpathで特定できるし。

**Name_Not_Found** · 2023/08/28(月) 12:03:48.11

老害老害いうけどあなた何歳なの？

**Name_Not_Found** · 2023/08/28(月) 12:11:22.13

このdivdiv君って以前も同じ内容で暴れて、なぜ必要なのかを具体的な大手サイトを複数提示して教えてあげて
その時納得したはずなのに、また考えが元に戻ってる・・

それと俺に勘違いして噛みついてきた事に謝れって言ったらそこから静かになって逃げたよね？

**Name_Not_Found** · 2023/08/28(月) 14:09:13.04

divdiverはコテつけてくれ

**Name_Not_Found** · 2023/08/28(月) 14:41:32.40

>>70
それもお前らの奇妙な願望で、都市伝説だろ
以下にはお前らがやってる「装飾div/spanを使わない」なんて書いてない
https://developers.google.com/search/docs/fundamentals/seo-starter-guide?hl=ja&visit_id=638287958271530595-2635680571&rd=1

というかね、そもそも検索エンジンは各サイトの「優良コンテンツ」をレーティングするわけで、
それが仮に「優良マークアップ順で中身無視」なら検索エンジン間の競争に負けるだろ
だからそっち方向には圧力はかからない

**Name_Not_Found** · 2023/08/28(月) 14:44:45.28

「div spanは必要に応じて使うべきだが意味のある部分はセマンティックなタグで作ろう」
「それはお前らの願望！div spanは使うななんて書いてない！」
これもう障害だろ

**Name_Not_Found** · 2023/08/28(月) 15:01:10.42

>>76
「セマンティックなタグを駆使すれば検索順位が上がります」とも書いてないぞ
つかお前らのその都市伝説的願望、どこから来てるんだ？
(なおHTML講座みたいなサイトではそう吹聴されてるのは知ってる)

**Name_Not_Found** · 2023/08/28(月) 15:19:38.33

>>75

>>64
>だからお前らは何を根拠に「論理マークアップしろ」と考えるのか？と聞いてるのだ

論理マークップが何故必要かについて　SEOの為だと言っているんだけど。

あんた、俺が指摘するまでここまで一切SEOの事一切触れてなかったけど>>70で言われてハッとしたんだろ？

**Name_Not_Found** · 2023/08/28(月) 15:20:07.14

>>77
俺はそんな主張してないから知らんがな

**Name_Not_Found** · 2023/08/28(月) 15:20:50.62

>>77
何もわかってない。

>HTML講座みたいなサイトではそう吹聴されてるのは知ってる
どこそれ？しらんな。具体的にソース出して。

**Name_Not_Found** · 2023/08/28(月) 15:27:46.67

>>78
> 論理マークップが何故必要かについて　SEOの為だと言っている
論理マークアップがSEOに有利という話の出所はどこなんだ？
(検索エンジン各社がそう言ってるのならいいが、そうではないだろ)

**Name_Not_Found** · 2023/08/28(月) 15:43:03.19

>>81
有利ではなくやらないと不利になるんだよ。　アルゴの仕様はそりゃ公開してないだろ。
これは何年も何十サイトと実際に自分の管理サイトと検索順位を監視して検証してきてわかっている事だから。
例えばH1タグをdivにしてみたり、titleタグを空にしてみたり試してみろ。

てかあんた、そんな事きいてくる時点でお察しだぞ

**Name_Not_Found** · 2023/08/28(月) 15:50:41.12

>>64
>だからお前らは何を根拠に「論理マークアップしろ」と考えるのか？と聞いてるのだ

てか論理マークアップしてない有名サイトなんてどこにあんの？
具体的なURLを今教えて

**Name_Not_Found** · 2023/08/28(月) 15:52:19.50

↑検索エンジンのページ以外でな

**Name_Not_Found** · 2023/08/28(月) 15:57:53.01

何の生産性もないからdivdiverの講演会とそれへの反論はよそでやってほしい

**Name_Not_Found** · 2023/08/28(月) 15:57:59.87

>>82
つまり経験知か
なるほど出所としては妥当だろうし、ずっと更新されないのも納得ではある

> 例えばH1タグをdivにしてみたり、titleタグを空にしてみたり試してみろ。
なお、前者は分かるが、後者はあり得ない
(titleはタブに表示されるので検索切ってても必要)

**Name_Not_Found** · 2023/08/28(月) 15:58:35.36

>>86
コテつけろ

**Name_Not_Found** · 2023/08/28(月) 16:02:30.63

>>86
なんか自分の方が新しい事知ってますよってていで行きたいんだろうけど
残念ながら俺らも実務で最前線でやってんだから常にアップデート求められる環境なんよ。
あんたは、恐らくSEO対策をした事がないよね。
YESかNoで答えて

**Name_Not_Found** · 2023/08/28(月) 16:36:17.04

SOHOやフリーで本当に細々と食ってる奴の134人目
https://mevius.5ch.net/test/read.cgi/hp/1687357689/

**Name_Not_Found** · 2023/08/28(月) 20:19:33.70

質問と返しですぐに見抜かれるのに
なんで自分の知らないことを知ってるように装うんだろ
>>61で色んな人に見限られただろうに
損な性格してるわ

**Name_Not_Found** · 2023/08/31(木) 19:38:35.37

divdiv君、また追い詰められて沈黙、逃走
前回と同じじゃん

**Name_Not_Found** · 2023/08/31(木) 20:21:01.23

召喚すな

**Name_Not_Found** · 2023/09/01(金) 07:38:32.84

なにそのdivdiv君って何？
xhtml星から生まれたの？

**Name_Not_Found** · 2023/09/02(土) 00:22:15.14

ブランチきってオナっとけって結構殺傷能力高いよな…一方的過ぎて見ててちょっと可哀想だった
一応初心者スレだし

**Name_Not_Found** · 2023/09/02(土) 01:21:26.04

質問スレであって初心者スレではない
真面目に質問してる初心者にはあんなふうにならんだろう
上級者ぶってイキってる無知ウンコだから懲らしめられる

**Name_Not_Found** · 2023/09/03(日) 16:28:20.78

質問です

div "display: flex" の中のアイテム(div)の高さを親の div 内に収めたいです。
親 div の中に子 div だけ置くとできるのですが、
子 div の中に h2 と div を置くと、h2 の高さのぶんだけ親 div からはみ出してしまいます。

display: flex で、子 div の中に見出しと overflow-y: scroll な div を置きたいとき、
どうすればはみ出さなくなるでしょうか？
見出しと、スクロールバー有りのコンテンツを置いて flex で並べたいです。

https://i.imgur.com/sXA8Rcs.png
https://jsfiddle.net/0dghepau/13/

**Name_Not_Found** · 2023/09/03(日) 16:39:34.32

>>96
子もflexにすると親の高さを継承する

**Name_Not_Found** · 2023/09/03(日) 16:42:57.69

>>96
flex は関係なかったので、最小の例を作りました。
子 div の中に h2 と div を置いて、子 div の高さを親 div と同じにしたいです。

https://jsfiddle.net/7kq2mvbd/10/

**Name_Not_Found** · 2023/09/03(日) 16:45:27.91

>>97
ありがとうございます
できました

https://jsfiddle.net/7kq2mvbd/12/

**Name_Not_Found** · 2023/09/05(火) 18:05:42.35

比較的最近リリースされたCSSで使えるのってなんかある？

Scroll-driven Animations
@scope

この辺も便利なんだろうけどペースが早いわ

**Name_Not_Found** · 2023/09/06(水) 10:07:05.38

最近リリースといっても他のブラウザで対応してないのもあるから
今すぐ無理に使わなくてもよい

**Name_Not_Found** · 2023/09/06(水) 11:11:36.87

リリースは全然最近じゃないけど自分が使い始めたのが最近なのは
scroll-gap
と
overflow: clip;
かな

**Name_Not_Found** · 2023/09/06(水) 11:41:43.45

>>102
さんくす！
scroll-gap　
→ググってもでてこんな

代わりにscroll-paddingってのを知れたから良かった。これでページ内リンクの問題も楽になりそうな

overflow: clip;
→使いどころがわからん、気が向いたら教えてクレメンス

**Name_Not_Found** · 2023/09/06(水) 12:00:44.35

scroll-padding 調べてみた
めっちゃ便利だねー
margin-top と padding-top で疑似的に調整してやってたわ
ありがとう

**Name_Not_Found** · 2023/09/06(水) 12:31:57.86

>>103
すまんscroll-paddingだったわｗ

overflow:clip;は親に設定しても子をposition:sticky;にできる（親がhiddenだと子はstickyの基準点を見失う）
厳密にはいろいろ違うんだけどhiddenの上位互換みたいな感じ

**Name_Not_Found** · 2023/09/06(水) 12:53:16.71

CSSのみでアンカーリンクのスクロールが滑らかにできるのに
いまだに昔書いたJQueryを使いまわしてる

**Name_Not_Found** · 2023/09/06(水) 13:33:15.44

cssのスクロールビヘイビアは速度がいじれるようになるまでは
スムーススクロールはjsだなあ
そもそもスムーススクロール要らん派だけど要望は多い

**Name_Not_Found** · 2023/09/06(水) 13:35:09.53

なるほど、scroll-beheivorでの欠点をscroll-paddingで補えばCSSだけで完結できるわけか

**Name_Not_Found** · 2023/09/06(水) 13:35:38.72

ああ、たしかにイージングは欲しいね

**Name_Not_Found** · 2023/09/07(木) 01:49:29.45

>>100
自分も全然最近じゃないけど、display: contents かなー
直下の要素じゃなくてもgridに振り分けられるのがえらい便利だった

**Name_Not_Found** · 2023/09/07(木) 10:48:14.19

CSSでのスムーススクロール使ったサイトが増えてきたからか独自にJavaScript使ってスムーススクロール実装したサイト見ると違和感覚えるときあるな
懐かしい感じというかなんというか
CSSに任せられることはCSSでやってしまう方がシンプルでいい気がする

**Name_Not_Found** · 2023/09/07(木) 11:32:09.08

>>111
speedが遅い😭

**Name_Not_Found** · 2023/09/07(木) 12:41:04.67

>>112
遅いってページ内移動の速度のこと？
cssだと速度はブラウザ依存だと思うが特に遅いとは思わないけどな
これ以上速くしてもページ内移動だと分かりにくくなるかなと
それなら最初からスムーススクロール使わないって選択するかな

**Name_Not_Found** · 2023/09/07(木) 13:32:24.71

>>113
見た目上というかeasingというべきかな
距離が短いときも長いときも同じ時間で割られるので
短い時に異常にゆっくりになる

**Name_Not_Found** · 2023/09/09(土) 14:57:01.91

flexでもgridでもgapが使えるの最高すぎる

**Name_Not_Found** · 2023/09/09(土) 16:31:00.55

gap最高だよね！超便利　なぜなかったか不思議なくらい

**Name_Not_Found** · 2023/09/09(土) 18:45:24.00

なにこの良スレ

**Name_Not_Found** · 2023/09/09(土) 19:11:42.35

<ul>
<li>◎◎◎</li>
<li>◎◎</li>
<li>◎◎◎◎◎</li>
<li>◎◎</li>
<li>◎◎◎◎</li>
<li>◎◎◎◎</li>
<ul>

こんなHTMLで下記のように最大の文字数(この場合は全角５文字)を基準として各子要素を同じ幅で割り振りたいのですがどうすればいいですかね
flexでもgridでもかまわないのですが
<li> にwidthをあてて別に差し支えはないのですが、同様な記述が10数カ所あるもんでもう少しスッキリできないかと…

・◎◎◎　　・◎◎　　　・◎◎◎◎◎
・◎◎　　　・◎◎◎◎　・◎◎◎◎

**Name_Not_Found** · 2023/09/09(土) 19:35:25.38

grid-template-column: repeat(3, 1fr);