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/23(水) 21:00:21.97

>>前998
新スレ立てた瞬間に知り合いが遊びに来てレスするの忘れてスレ埋まってしまいました。
また相談に乗ってもらったらありがたいです

**Name_Not_Found** · 2023/08/24(木) 09:43:59.41

質問失礼します。
レスポンシブデザインでサイトを作成しており、PCから見た時に①の画像のようになるようにCSSを書きました。
これがスマホから見ると②の画像のようになってしまいます。
PC表示部分のCSSは③の画像、スマホ表示部分のCSSは④のような状態なのですが、どこを改善すればよいでしょうか。
https://i.imgur.com/e42hJSO.png
https://i.imgur.com/mBDlOmA.png
https://i.imgur.com/6RavAGV.png
https://i.imgur.com/DuEybLY.png

**Name_Not_Found** · 2023/08/24(木) 09:50:05.24

>>3
②が正しくないのでしたら、まずどうなるのが正しいのかを書きましょう

**Name_Not_Found** · 2023/08/24(木) 11:06:37.25

>>3
画像のinline-block上の階層でflex使いなよ
横に並べるにしても縦に並べるにしても制御が楽になるよ

**Name_Not_Found** · 2023/08/24(木) 11:07:39.32

>>5
あ、編集したら抜けた
画像のinline-block「やめて」上の階層で

**Name_Not_Found** · 2023/08/24(木) 11:08:50.05

>>4
失礼しました
テキストがスマホの端で折り返し、ピンクの点線枠内に収まるようにしたいです

**Name_Not_Found** · 2023/08/24(木) 11:09:17.77

>>3
#mainあたりにmax-width入れてみては？

**Name_Not_Found** · 2023/08/24(木) 11:09:20.06

>>5
レスありがとうございます
flex調べてみます

**Name_Not_Found** · 2023/08/24(木) 11:10:32.44

>>8
③のCSSの#main内でよろしいですかね
やってみます

**Name_Not_Found** · 2023/08/24(木) 11:33:56.55

>>8さんのやり方でできました！
しかし制御が楽になるとのことなので、この機会にflexのことも勉強しようと思います
また何かありましたらこのスレで質問させてください
アドバイスありがとうございました

**Name_Not_Found** · 2023/08/24(木) 17:47:45.35

疑似要素を4つ使いたい場合、タグを増やすしかない？
でもそれって明らかに論理マークアップ上で無駄なHTMLだよね

**Name_Not_Found** · 2023/08/24(木) 19:11:34.49

それをいうなら疑似要素が4つ必要になるのはデザインに対してマークアップがおかしいです

**Name_Not_Found** · 2023/08/24(木) 20:20:35.98

正論ですな

**Name_Not_Found** · 2023/08/24(木) 22:20:40.10

>>13　例えば

見出しタイプ1
====================================

↑これが通常の見出しで一箇所だけ↓こうなる場合

☆　　　　　　　　　★ 　　　※星部分が回転
　　見出しタイプ2
★　　　　　　　　　☆

divで親タグを増やしていくって方法以外無いでしょう？
デザインの為だけに無駄なＨＴＭＬが増えるんでしょ？

<h2>見出しタイプ1<h2>
<div class="star"><h2>見出しタイプ2</div>

これのどこがマークアップがおかしいの？

**Name_Not_Found** · 2023/08/24(木) 22:21:53.66

↑閉じタグ抜けてるがきにせんといて

**Name_Not_Found** · 2023/08/24(木) 22:35:11.89

h2の飾りって意味合いだと
<h2><span></span>見出し<span></span></h2>
って形にしたくなる

**Name_Not_Found** · 2023/08/25(金) 00:24:37.98

親にdiv追加じゃなくh2にborder-imageとか

**Name_Not_Found** · 2023/08/25(金) 00:48:03.16

>>15
その例だとborderや背景でできるだろとしか言いようがないけど
重要なことを教えると
空divなどと違って装飾のための入れ子は構造的に何もおかしくない
>マークアップ上で無駄なHTMLだよね
に答えるなら「無駄じゃない」で終わり

**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);

**Name_Not_Found** · 2023/09/09(土) 20:20:45.75

>>119
書きそびれたけど、最大文字数によっては子要素が２つになったり５つになったりするんですよねえ

**Name_Not_Found** · 2023/09/09(土) 20:24:25.64

auto-fillかauto-fit好きな方

**Name_Not_Found** · 2023/09/09(土) 20:31:29.72

grid便利そうなんだけど覚えきれない
ジェネレーターで使ってやるぐらいだわ
偉いなお前らは

**Name_Not_Found** · 2023/09/09(土) 21:50:56.10

auto-fit大好き

**Name_Not_Found** · 2023/09/10(日) 00:28:44.28

flexboxしか使わんけどgrid必要な場面がまったくない

**Name_Not_Found** · 2023/09/10(日) 03:20:37.16

auto-fillやauto-fitはflex-wrapでは代替がきかないな
grid-areaもorderにはできないことができる
display:contentも組み合わせれば大体のデザインはワンソースでできる

**Name_Not_Found** · 2023/09/10(日) 05:50:08.75

>>124
PC時は
左に画像、右に見出しとリード
SP時は
上から
見出し、画像、リード
これのためだけにgrid使ってる

**Name_Not_Found** · 2023/09/12(火) 13:16:44.22

チェックボックスを用いてフィルタリングが出来るフォームを作ろうとしています。

□全部　□円形　□四角形　□青色　□緑色

とチェックボックスが並んでおり、その下には

丸くて青色・四角くて青色・丸くて緑色・四角くて緑色

・・・のオブジェクトが並んでいて、チェックボックスにチェックを入れる事で該当のオブジェクト以外がhiddenになるようなイメージです。
実装自体は出来そうなのですが、挙動をどうするかで悩んでおりアドバイスを頂きたいです。
例えば「円形」「四角形」
の両方にチェックを入れた時、挙動としては
（１）円形かつ四角形のオブジェクトを可視化
（２）円形のオブジェクトと四角形のオブジェクト、および円形かつ四角形のオブジェクトを可視化
のいずれが適切というか、ユーザから見て自然でしょうか。
（上の例では円形と四角形しか無いですが、実際には両方をあわせ持つオブジェクトもあるものと想定して頂きたいです）

**Name_Not_Found** · 2023/09/12(火) 14:47:08.43

自分は2

**Name_Not_Found** · 2023/09/12(火) 14:52:45.66

個人的には2だが逆の人いるんだよな
orかandかのラジオボタンも作っちゃえば

**Name_Not_Found** · 2023/09/12(火) 17:22:16.78

>>127
俺も 2

**Name_Not_Found** · 2023/09/12(火) 19:02:35.63

自分は1
hiddenにしていくなら1が自然だと思う
絞り込み検索って書いておいてくれるとなお嬉しい感じ

2の挙動は初期状態が表示件数ゼロで項目を足していく時に使うのが自然に感じる

**Name_Not_Found** · 2023/09/14(木) 13:06:02.38

tableの作り方で質問です。
こんなテーブルを作ろうと思っています。

a: colspan=2
b: colspan=2
c: colspan=4
d: 指定不要
e: colspan=2
f: 指定不要

とすればよいと思うのですが、
テーブル全体の幅やeとfの中身のテキスト量にかかわらず
eとfの幅が均等な状態を維持したいです。
その場合、どのように設定すればよいでしょうか。

必要な情報かわからないですが以下補足です。
aとdのwidthは固定、
bはテーブル全体の幅からaの幅を引いた幅
cは未固定（テーブル全体の幅）
eとfはテーブル全体の幅からdの幅を引いた幅を2分した大きさとなるようにしたいです。

**Name_Not_Found** · 2023/09/14(木) 13:48:54.86

dが固定ならefはcalc使えばよさそうだけど
tableだとダメとかあるんかな

**Name_Not_Found** · 2023/09/14(木) 14:04:55.94

>>132
<col>を用意してそれにwidthを指定したらよいのでは

**132** · 2023/09/14(木) 15:05:02.01

colタグの存在を初めて知りました。
calcを用いた指定と合わせて試してみたのですが、やり方や考え方が間違っているんでしょうか…

https://codepen.io/Nickey-the-looper/pen/MWZoPJv

**Name_Not_Found** · 2023/09/14(木) 16:40:54.34

grid使うとか他にもっと良い方法があるのかもしれないけど、とりあえずtable使うということで
・tableの最上段にダミーでtr1行追加
・更にbと同一幅のセルを左から4番目に追加
・最上段だけvisibility: collapse;で不可視化（hiddenだとレイアウトからも除去されるので）
ってのはどうでしょう？
https://jsfiddle.net/dumov8ng/

**Name_Not_Found** · 2023/09/15(金) 01:14:20.28

Bootstrap で出来ないの？

**Name_Not_Found** · 2023/09/15(金) 04:02:19.83

列数を増やしてしまえ

**Name_Not_Found** · 2023/09/15(金) 04:07:26.56

あとは行にtable追加するとか
昔はよくやってたけど今はもっと便利な方法があるのかな

**Name_Not_Found** · 2023/09/15(金) 04:58:56.21

みんな>>132の説明でどんなテーブルかわかるん？
俺全然わかんねえや…

**Name_Not_Found** · 2023/09/15(金) 08:31:34.98

一番下のお絵かきの画像

**132** · 2023/09/15(金) 16:21:00.96

>>136さんと138さんの方法で出来ました！
大変助かりました、ありがとうのざいます。
gridはよくわからなかったので勉強してみます。

>>137
まさにbootstrap使ってるんですが、gridレイアウトを使ったらどうかということでしたかね？

**Name_Not_Found** · 2023/09/15(金) 16:24:10.05

なぜgridはflexに負けたのですか？

**Name_Not_Found** · 2023/09/15(金) 17:02:01.69

>>141
あー、分かる人にはなんか表示されてるのか
納得

**Name_Not_Found** · 2023/09/15(金) 17:06:03.89

>>143
別に勝ち負けないじゃん？
flexの出始めと一緒で、使えるようになった人から使っていく流れっしょ

**Name_Not_Found** · 2023/09/15(金) 17:33:04.16

というか今でもflex使うけど
単に横一列縦一列に並べるなら絶対flexのが早いし

**Name_Not_Found** · 2023/09/15(金) 18:45:00.12

>>142
>>135のcodepen見て>>136作ったけど、>>132の画像ちゃんと見てなかったから一応修正
https://jsfiddle.net/xjo2qLcy/

結局のところtable-layout: fixedの場合は

table-layout - CSS: カスケーディングスタイルシート | MDN
https://developer.mozilla.org/ja/docs/Web/CSS/table-layout#%E5%80%A4

> 表と列の幅は table 要素と col 要素の幅によって、または最初の行のセルの幅によって設定されます。後続する行のセルは列の幅に影響しません。

ってことなので、先頭行がcolspanで結合してる場合には後続のセル幅のコントロールが少し面倒
colタグ使ってもセルが結合してると難しいね

あとはダミー追加したくなかったら、あまり推奨はされてないけどtableの中にtableをネストしてもイケる
https://jsfiddle.net/q48phobx/

**Name_Not_Found** · 2023/09/15(金) 21:31:12.70

<div id="hoge">
　<ul>
　　<li>文１</li>
　　<li>文２</li>
　　<li>文３</li>
　</ul>
</div>

#hoge > ul li {
・・・
}

でW3C CSS検証かけると

#hoge > ul li 文法解析エラーが発生しました [empty string]

とエラーになってしまいます。
何がいけないのでしょうか？
CSS（表示）としては正常に働いています。

**Name_Not_Found** · 2023/09/15(金) 22:26:35.76

今となってはflexとgridなしは考えられないな
昔はflexなしでTableレイアウトをcssで再現してたけど無理があったよね

**Name_Not_Found** · 2023/09/15(金) 23:09:19.85

>>148
#hoge > ul li {
background : #f00;
}
はエラー無しで通るから、どこかでミスタイプしてたりしない？

**Name_Not_Found** · 2023/09/16(土) 01:37:35.45

gridがflexよりも優秀な時ってどういう時があるの？

**Name_Not_Found** · 2023/09/16(土) 02:13:25.20

少し上読めば？

**Name_Not_Found** · 2023/09/16(土) 02:28:55.38

>>152
たぶん同じ質問繰り返して荒らしてるだけだと思う

**Name_Not_Found** · 2023/09/16(土) 21:04:55.77

>>150
ダメですか？

#hoge > ul li {
color: #03f;
text-decoration: none;
margin-bottom: 5px;
border-radius: 5px;
padding: 2px 10px;
background: #ddd;
outline: none;
display: inline-block;
}

#hoge > ul li:hover {
color: #06c;
background: #fff;
border-radius: 5px;
}

ちなみにHTMLはエラーなしです。

**Name_Not_Found** · 2023/09/16(土) 21:29:04.44

>>154
コピペしたけど↓は通ったよ
https://jigsaw.w3.org/css-validator/validator

**Name_Not_Found** · 2023/09/16(土) 22:10:26.63

>>154
もしかしてcss-validator.org使った？
正解はこっち https://jigsaw.w3.org/css-validator/

**Name_Not_Found** · 2023/09/16(土) 22:57:43.87

https://css-validator.org/validator.ja.html
で直接入力（元ソースコピペ）、オプションをCSS3にしてます。
ここでなくてもいいのですがどこかのブログか何かで紹介されててブックマークしたのを昔からそのまま使ってるだけです。
154をそのまま貼ると同様エラーになります。

>>156
そこと何が違うのでしょうか？

**Name_Not_Found** · 2023/09/16(土) 23:58:24.80

古くて機能してない
そこじゃなくていいなら使うな

**Name_Not_Found** · 2023/09/17(日) 00:02:03.02

>>157
border-radiusでempty stringを吐くバグがあるらしいね
https://www.w3.org/Bugs/Public/show_bug.cgi?id=11975

border-radiusをなくしたらエラーでなかったよ

**159** · 2023/09/17(日) 00:04:07.33

原因ってことで回答したけれども
まっとうなほうを使うようにするのがお薦め

**Name_Not_Found** · 2023/09/17(日) 00:10:22.20

バリデーターやツールはW3Cの本家サイトから辿った方が無難だね

Validators and tools | Developers | W3C
https://www.w3.org/developers/tools/

**Name_Not_Found** · 2023/09/17(日) 14:11:21.66

コンテンツのヘッダ部分にposition: sticky を適用して、スクロールしてヘッダ部分が固定されてるとき、その背後に隠れてる部分(文字とか)をぼかして表示させたいのですが、どうしても効きません
やってるのは、
ヘッダ部分にposition:sticky、塗りつぶしで適当な透明度の背景、
backdrop-filter: blur(5px)
です。
背後に文字などが来たときに、その文字をぼかしたいです。
イメージとしてはWeb twitterのヘッダ部分にみたいな感じです。

スマホだとちゃんと見れないかもですが、検証用の簡易的なコードです。
https://jsfiddle.net/tb62nuxh/

実際には、固定されてるかどうかをJSで処理し、必要に応じてスタイルを適用します。

**Name_Not_Found** · 2023/09/17(日) 14:26:05.21

.header {
position: sticky;
top: 0px;
-webkit-backdrop-filter: blur(3px);//Safari
backdrop-filter: blur(3px);
}

**Name_Not_Found** · 2023/09/17(日) 14:38:50.16

最新のSafariでもまだベンダプリフィクス要るのよね…

**Name_Not_Found** · 2023/09/17(日) 15:23:24.95

chromeだと動くからsafariで検証してたってことか

**Name_Not_Found** · 2023/09/17(日) 18:46:28.15

あれ、すみません
>>162のリンクだと途中の内容だったみたいで、保存済みのほうが↓です
https://jsfiddle.net/tb62nuxh/2/

>>163の内容だと -webkit～のが足りなかったぐらいだったぐらいでそれも追加したのですが、やはり、ぼかし表現にはなりませんでした。
PC版Chrome(116)で確認してます。
何か他に必要でしょうか？

**Name_Not_Found** · 2023/09/17(日) 19:22:33.11

>>166
opacity入れると効かないので外して、代わりにbackground-colorを#000aぐらいに指定

**Name_Not_Found** · 2023/09/17(日) 19:37:42.81

opacityだめなんだね
rgbaで指定するのがよいのかな

**Name_Not_Found** · 2023/09/17(日) 19:58:27.43

>>167
あぁ、ありがとうございます！
opacityダメなのは盲点でした…
ドキュメントでは「少なからず透明にして」とあったのでopacity付けてしまいました。

**Name_Not_Found** · 2023/09/18(月) 01:41:29.02

ちょっとスレ違いなのかもしれないんですが…
横スクロールのゲームの攻略記事を作るにあたって、横に長いステージをキャプチャしたものを掲示したいです。
その方法として、今のところ横スクロール可能なiframe的な要素の中に横長の画像を配置する想定ですが
この方法が本当にベストなのかがわからず、他に良い方法があったら教えていただきたいです。

具体的にどの程度の長さになるかはまだ作成していないためわからないです。

**Name_Not_Found** · 2023/09/18(月) 02:12:45.85

>>168,169
rgbaの方が透明度を把握しやすいかもね
自分はお手軽に短縮hexでやっちゃうことが多いけど

>>170
連続していることを優先するなら想定どおりの形、閲覧性を優先するなら適当なエリアで分割して縦に並べるかな
マウスで横スクロールは両手使わないとだし…

**148** · 2023/09/18(月) 10:31:00.56

>>156,159
具体的にありがとう。
他にも手前と背景が同じ色などどうでもいいエラー出されてたのですが全て一気にエラーなしになりました。

>>161
まさかあんな紛らわしいページが存在してるとは想像もしませんでした。今後そうします。
ありがとう。

**Name_Not_Found** · 2023/09/19(火) 21:47:17.97

>>132
tableを入れ子にすりゃかんたん
d,e,fを一つのテーブルにしたらいいよ。

**Name_Not_Found** · 2023/09/19(火) 21:52:50.73

>>173
>>147
> あとはダミー追加したくなかったら、あまり推奨はされてないけどtableの中にtableをネストしてもイケる
> https://jsfiddle.net/q48phobx/

**Name_Not_Found** · 2023/09/20(水) 03:42:06.35

defのあとにまたabcdefが続くような構造だと
入れ子にしたらむちゃくちゃになる

**Name_Not_Found** · 2023/09/20(水) 14:48:36.98

お題に無い話を勝手に足されても困る

**Name_Not_Found** · 2023/09/20(水) 14:57:13.99

パっと見だとそもそもa d c部分はテーブルですらない

**Name_Not_Found** · 2023/09/20(水) 16:12:09.27

ちょっと何言ってるか分かんない

**Name_Not_Found** · 2023/09/20(水) 16:18:11.65

Safari 17.0がリリース、プロファイル機能のほか、多数のAPIや要素のサポートが追加される - GIGAZINE
ttps://gigazine.net/news/20230920-webkit-safari-17-0/

**Name_Not_Found** · 2023/09/20(水) 16:27:25.24

TwitterでiOS17のSafariでフォントの太さがーって騒いでるね

**Name_Not_Found** · 2023/09/20(水) 19:25:50.13

次のようなcssがあります。

#hoge_1:checked ~ #target_1 {
省略
}

このhoge_nとtarget_nはコンテンツのボリュームに応じて動的に増減し、nの部分は連番になっています。
それらの要素全てに上記のようなcssを適用したいのですが、どのように書くのがよいでしょうか？

**Name_Not_Found** · 2023/09/20(水) 19:34:36.77

https://developer.mozilla.org/ja/docs/Web/CSS/Attribute_selectors
数字限定とかでなくてもいいなら、属性セレクタ使えばいいんじゃないかな

[id^="hoge_"] でid属性がhoge_で始まるもの全てになる

**Name_Not_Found** · 2023/09/21(木) 13:49:59.57

コンテナクエリって使い道がイマイチわからん

**Name_Not_Found** · 2023/09/21(木) 13:54:10.80

「こういうのあったらなあ」と思う瞬間は何度もあったのにいざ出来たら使い道に迷うものたち

@container
@layer
:scope

**Name_Not_Found** · 2023/09/22(金) 14:15:55.45

bootstrap5を使ってカルーセルを実現しようとしているのですが、モバイルデバイスで表示した場合に以下のような動きをしており、原因がわからないでいます。
・フリックで画像を切替えられない
・ただし、一度「prev」「next」のボタンを使った後はフリックも有効になる

該当部分のhtmlは以下のようになっています。
bootstrapのカルーセルに関するページを同じデバイスで閲覧すると、問題なく最初からフリックによる操作が出来ているのでなにかおかしいところがあるのだと思うのですが…
原因がわかる方はおられますでしょうか。よろしくお願い致します。

<div class="carousel carousel-dark slide" id="carousel-container" data-bs-interval="false">
<div class="carousel-inner">
<div class="carousel-item active">
<img class="test d-block w-100" src="static/images/test_01.png">
</div>
<div class="carousel-item">
<img class="test d-block w-100" src="static/images/test_02.png">
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carousel-container" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carousel-container" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span><span class="visually-hidden">Next</span>
</button>
</div>

**Name_Not_Found** · 2023/09/22(金) 16:22:43.24

そういう場合は
Carousel (カルーセル) · Bootstrap v5.0
https://getbootstrap.jp/docs/5.0/components/carousel/
ここにあるサンプルのHTMLコードと比較する
ってことで多分、最上位のコンテナに
data-bs-ride="carousel"
ってのが足りないので、コレ追加すれば上手くいくんじゃない？

ついでに
Carousel (カルーセル) · Bootstrap v5.0
https://getbootstrap.jp/docs/5.0/components/carousel/#via-data-attributes

> data-bs-ride="carousel"属性は、ページの読み込み時にカルーセルをアニメーションとしてマークするために使用されます。 data-bs-ride="carousel" を使用してカルーセルを初期化しない場合は、自分で初期化する必要があります。

とのことなので、ボタン押さないとフリック出来ないというのは、この属性が無くて初期化されてなかったとか？

**185** · 2023/09/23(土) 02:27:06.04

>186
レスありがとうございます。
この属性は元々はサンプルに従って同様に設定していたのですが、設定していると
「prev」または「next」ボタンを一度押下すると自動的に画像が切り替わり続ける状態になる
という挙動を見せ、自動では動いてほしくなかったため除外した経緯があります。
おそらく>185に書いた問題とは関係ないのではないかと思っています。

**Name_Not_Found** · 2023/09/23(土) 06:28:56.05

>>187
実機じゃなくシミュレータで確認しててdata-bs-interval="false"に設定してあるから
シミュレータでは自動再生しないんだけど、実機では自動再生するの？
それじゃ同じタグにdata-bs-ride="carousel"に加えてdata-bs-slide="false"を追加するとどうなる？

**Name_Not_Found** · 2023/09/24(日) 19:12:05.18

質問です

<meta name="viewport" content="initial-scale=1, minimum-scale=0, user-scalable=yes">

を指定すると、横幅の広いページの場合（ページの横幅が画面サイズより大きい倍）には縮小表示できますが、
縦長のページの場合（ページの横幅が小さく、縦幅が画面サイズより大きい場合）、縮小表示できないようです。
どうすれば縦長のページで縮小表示できるようになりますか？
（縦長のコンテンツを縮小して一目で確認できるようにしたいです）

Android の Chrome、iPadOS の Safari で確認しました

（ページの横幅が画面サイズより小さい場合、minimum-scale=0 が無視されて scale=1 までしか縮小できないような。
ウェブページは一般的に縦長で縦にスクロールして読むものなので、横幅さえ画面に収まる（ように縮小できた）ならそれ以上は縮小できないように仕様で決まっているか、各ブラウザが制限を設けているのでしょうか？

力技として、
<meta name="viewport" content="width=10000">
とすると縮小できるようになりますが、横幅が無駄にめちゃくちゃ広いページになってしまいます）

https://jsfiddle.net/14xepgrb/2/

**Name_Not_Found** · 2023/09/24(日) 19:22:28.27

できません

**Name_Not_Found** · 2023/09/25(月) 14:53:29.68

IE11が亡くなった今だからこそ
使ってる／使いたいおすすめCSSを教えて！
transform使わずにscale、translate、rotateが地味に便利

**Name_Not_Found** · 2023/09/25(月) 16:41:05.06

文字リンクにtitle属性(補足情報の表示)を書いていますが、タブレットで見たときに表示されなくて困っています。
かわりにページにテキストエリアを置いて、リンクをクリックした時に補足情報を表示したいです。

調べてもなかなか情報が出てこないのでどなたか教えてください。
表示したい補足情報は20文字前後です。

**Name_Not_Found** · 2023/09/25(月) 18:12:55.34

>>192
ツールチップを表示させたいってこと？

HTMLでポップアップ(ツールチップ)させる方法(スマホ対応) | オレDEV.com
ttps://dev.ore-shika.com/post/css-tooltip/

**Name_Not_Found** · 2023/09/25(月) 19:22:12.53

>>193
スマホ表示ならできそうですね、ツールチップで調べてみます。
ありがとうございます。

**Name_Not_Found** · 2023/09/26(火) 20:04:00.18

ツールチップは一見簡単だが自動的な位置適正にこだわるとけっこう面倒だからこれ使っちゃってるわ
https://jqueryui.com/tooltip/

HTML+CSSでこれよりいいの見たことない
JS組み込む必要あるのが難点

**Name_Not_Found** · 2023/10/01(日) 12:43:45.64

https://wikiwiki.jp/postmodern/

**Name_Not_Found** · 2023/10/07(土) 02:43:14.60

質問なんですが、画像をズームさせる機能をつけて
Firefoxだと画面内に収まるように表示されるのにchromeだとウインドウからはみ出すの、何が原因ですか？？

**Name_Not_Found** · 2023/10/08(日) 01:52:00.06

自動で収集されてるんだとは思うんですが、海外の怪しい通販サイトのソースに自分のサイトの文章が無意味に引用されてるっぽいんですけど、これって防ぐ手立てないんですか？

**Name_Not_Found** · 2023/10/08(日) 01:58:42.63

公開されてる以上防ぐのは不可能
ドメインからサーバーが特定できれば大元に通報するなりできるけど
大体はサーバー会社も外国の訳わからん所だからな

**198** · 2023/10/08(日) 03:21:43.16

ですよね。なんかセキュリティ面で致命的なミスなり欠陥なりあるのかなあとも悩みましたが、まあそういうものだと思って諦めます