[過去ﾛｸﾞ] HTML/CSS のどんな質問にも優しく答えるｽﾚ 52 (1002ﾚｽ)
上下前次1-新
このｽﾚｯﾄﾞは過去ﾛｸﾞ倉庫に格納されています｡
次ｽﾚ検索 歴削→次ｽﾚ 栞削→次ｽﾚ 過去ﾛｸﾞﾒﾆｭｰ
178: 2023/09/20(水)16:12 ID:??? AAS
ちょっと何言ってるか分かんない
179: 2023/09/20(水)16:18 ID:??? AAS
Safari 17.0がリリース、プロファイル機能のほか、多数のAPIや要素のサポートが追加される - GIGAZINE
外部ﾘﾝｸ:gigazine.net
180: 2023/09/20(水)16:27 ID:??? AAS
TwitterでiOS17のSafariでフォントの太さがーって騒いでるね
181: 2023/09/20(水)19:25 ID:??? AAS
次のようなcssがあります。
#hoge_1:checked ~ #target_1 {
省略
}
このhoge_nとtarget_nはコンテンツのボリュームに応じて動的に増減し、nの部分は連番になっています。
それらの要素全てに上記のようなcssを適用したいのですが、どのように書くのがよいでしょうか？
182: 2023/09/20(水)19:34 ID:??? AAS
外部ﾘﾝｸ:developer.mozilla.org
数字限定とかでなくてもいいなら、属性セレクタ使えばいいんじゃないかな
[id^="hoge_"] でid属性がhoge_で始まるもの全てになる
183: 2023/09/21(木)13:49 ID:??? AAS
コンテナクエリって使い道がイマイチわからん
184: 2023/09/21(木)13:54 ID:??? AAS
「こういうのあったらなあ」と思う瞬間は何度もあったのにいざ出来たら使い道に迷うものたち
@container
@layer
:scope
185(1): 2023/09/22(金)14:15 ID:GQ+SUbJe(1) AAS
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">
省13
186(1): 2023/09/22(金)16:22 ID:??? AAS
そういう場合は
Carousel (カルーセル) · Bootstrap v5.0
外部ﾘﾝｸ:getbootstrap.jp
ここにあるサンプルのHTMLコードと比較する
ってことで多分、最上位のコンテナに
data-bs-ride="carousel"
ってのが足りないので、コレ追加すれば上手くいくんじゃない？
ついでに
Carousel (カルーセル) · Bootstrap v5.0
外部ﾘﾝｸ:getbootstrap.jp
省2
187(1): 185 2023/09/23(土)02:27 ID:f5iOHgtl(1) AAS
>186
レスありがとうございます。
この属性は元々はサンプルに従って同様に設定していたのですが、設定していると
「prev」または「next」ボタンを一度押下すると自動的に画像が切り替わり続ける状態になる
という挙動を見せ、自動では動いてほしくなかったため除外した経緯があります。
おそらく>185に書いた問題とは関係ないのではないかと思っています。
188: 2023/09/23(土)06:28 ID:??? AAS
>>187
実機じゃなくシミュレータで確認しててdata-bs-interval="false"に設定してあるから
シミュレータでは自動再生しないんだけど、実機では自動再生するの？
それじゃ同じタグにdata-bs-ride="carousel"に加えてdata-bs-slide="false"を追加するとどうなる？
189: 2023/09/24(日)19:12 ID:xZzXY+Iq(1) AAS
質問です
<meta name="viewport" content="initial-scale=1, minimum-scale=0, user-scalable=yes">
を指定すると、横幅の広いページの場合（ページの横幅が画面サイズより大きい倍）には縮小表示できますが、
縦長のページの場合（ページの横幅が小さく、縦幅が画面サイズより大きい場合）、縮小表示できないようです。
どうすれば縦長のページで縮小表示できるようになりますか？
（縦長のコンテンツを縮小して一目で確認できるようにしたいです）
Android の Chrome、iPadOS の Safari で確認しました
（ページの横幅が画面サイズより小さい場合、minimum-scale=0 が無視されて scale=1 までしか縮小できないような。
ウェブページは一般的に縦長で縦にスクロールして読むものなので、横幅さえ画面に収まる（ように縮小できた）ならそれ以上は縮小できないように仕様で決まっているか、各ブラウザが制限を設けているのでしょうか？
省4
190: 2023/09/24(日)19:22 ID:??? AAS
できません
191: 2023/09/25(月)14:53 ID:??? AAS
IE11が亡くなった今だからこそ
使ってる／使いたいおすすめCSSを教えて！
transform使わずにscale、translate、rotateが地味に便利
192(1): [age] 2023/09/25(月)16:41 ID:??? AAS
文字リンクにtitle属性(補足情報の表示)を書いていますが、タブレットで見たときに表示されなくて困っています。
かわりにページにテキストエリアを置いて、リンクをクリックした時に補足情報を表示したいです。
調べてもなかなか情報が出てこないのでどなたか教えてください。
表示したい補足情報は20文字前後です。
193(1): 2023/09/25(月)18:12 ID:??? AAS
>>192
ツールチップを表示させたいってこと？
HTMLでポップアップ(ツールチップ)させる方法(スマホ対応) | オレDEV.com
外部ﾘﾝｸ:dev.ore-shika.com
194: [age] 2023/09/25(月)19:22 ID:??? AAS
>>193
スマホ表示ならできそうですね、ツールチップで調べてみます。
ありがとうございます。
195: 2023/09/26(火)20:04 ID:??? AAS
ツールチップは一見簡単だが自動的な位置適正にこだわるとけっこう面倒だからこれ使っちゃってるわ
外部ﾘﾝｸ:jqueryui.com
HTML+CSSでこれよりいいの見たことない
JS組み込む必要あるのが難点
196: 2023/10/01(日)12:43 ID:??? AAS
外部ﾘﾝｸ:wikiwiki.jp
197: 2023/10/07(土)02:43 ID:umF+3V+1(1) AAS
質問なんですが、画像をズームさせる機能をつけて
Firefoxだと画面内に収まるように表示されるのにchromeだとウインドウからはみ出すの、何が原因ですか？？
上下前次1-新書関写板覧索設栞歴
あと 805 ﾚｽあります
ｽﾚ情報 赤ﾚｽ抽出 画像ﾚｽ抽出 歴の未読ｽﾚ AAｻﾑﾈｲﾙ
ぬこの手 ぬこTOP 0.012s