HTML/CSS のどんな質問にも優しく答えるｽﾚ 52 (858ﾚｽ)
上下前次1-新
497: 05/21(火)08:08 ID:??? AAS
見えない
498(1): 05/21(火)08:39 ID:??? AAS
「box-sizing: border-boxが効いていない」と思うのであれば、なにか認識が食い違っているのではなかろうか
box-sizingとheight: autoに対する自分の認識はこう
box-sizing: border-box;
height: auto;
border: 10px solid red;
こうスタイルを指定した要素は「子要素がボーダーの内側に収まる」ようになるので
計算済みのheightは「子要素によって計算される高さ+20px(上下のボーダー)」
になる
box-sizing: content-boxにすると「子要素がボーダーの内側に収まる」のは変わらないけど「ボーダーが高さの計算に入らなくなる」のでその分小さくなる
499(1): 05/21(火)08:59 ID:??? AAS
「height:autoだと子要素がボーダーの内側に収まるように計算される」のはbox-sizingの指定では変わらんので、画面上の見た目も開発者ツールの計算済みタブの図で表示される数値も変わらん
これが「効いていない」ように見えているだけではないかな……
500(1): 05/21(火)11:21 ID:??? AAS
質問です
以下のコードにpic1を上下中央揃い、
テキスト１が改行してheightが広くなっても画像が上下中央揃いになるようにしたいです
どのようにすれば上手くできるでしょうか？
[HTML]
<div id="main">
<div id="acmenu">
<dl>
<img src="pic1">
<dt>テキスト１</dt>
省18
501: 05/21(火)11:22 ID:??? AAS
[CSS]
#main {
width: 500px;
margin: 80px auto;
position: relative;
#acmenu {
dl {
border-top: 1px solid gray;
counter-increment: question;
margin: 0;
省22
502(2): 05/21(火)11:28 ID:??? AAS
>>500
><dl>
><img src="pic1">
><dt>テキスト１</dt>
dl直下にimgはダメ
503: 05/21(火)11:43 ID:??? AAS
>>502
ありがとうございます、そうだったんですね！
どのような感じで書けばよいのでしょうか…？
504: 05/21(火)13:26 ID:??? AAS
>>502
ありがとうございます、解決しました！
505: 05/21(火)15:28 ID:??? AAS
>>498-499
横からだけど、なるほど分からん、と一瞬思ったが
height:autoだと、content-boxでもborder-boxと同じく「ボーダーの内側に収まる」という前提でheightが計算されているから
content-boxのコンテンツ領域の数値はborder-boxの数値と同じになるって考えたら理解できた（何言ってるのか分かりにくいとは思うが）
というか開発者ツールでマウスオーバーで表示されるフローティングボックスだけ見ちゃってて、計算済みタブの方でheightに差が出てるの見落としてたわ
解説ありがとう、勉強になりました
506(2): 05/23(木)14:52 ID:pd9pga9F(1) AAS
（１）beforeはaaa:beforeのように:が１つの場合で書いてあったりaaa::beforeのように
:が２つで書いてあったりするところがあるけど違いはありますか？
（２）style="aaa:before"のようにstyleの中でbeforeは使えますか？
507: 05/23(木)15:00 ID:??? AAS
>>506
1 違いはない :hoverなどの疑似クラスと区別するため推奨される記法
2 できない
508: 05/23(木)15:02 ID:??? AAS
>>506
コロンひとつでも問題なく動いちゃうけど
擬似要素は二つ書くことになってます
htmlのstyleでは擬似要素を書くことができません
509: 05/23(木)15:17 ID:??? AAS
擬似要素のコロン1つはCSS2.1までの互換のために残ってるだけなので使わない方がいい
510: 05/28(火)01:22 ID:??? AAS
WindowsPC版のChromeの拡張機能のstylusで、youtube画面の不用な機能の非表示などをカスタマイズしています。
ミニプレイヤーを無効にしたく、以下の定義の追加でミニプレイヤーのボタンは非表示にできたのですが、
#movie_player .ytp-right-controls button.ytp-miniplayer-button {
display: none !important;
}
タッチパネルが付いてるPCだと、動画再生エリアをタッチしながら下へスワイプすると、
ミニプレイヤーに切り替わってしまう事が判りました。
この動作を無効化したいのですが、方法がありましたら教えてください。
所々、style="touch-action: 〜"のような属性がページ内にあるのでこの辺りが怪しいと思ってるのですが、
どうしたらいいかまでに至ってません。
511: 05/29(水)06:53 ID:??? AAS
ここはWeb制作板です
512(1): 05/29(水)13:43 ID:??? AAS
回答しないつもりなら黙っとればええのに
ChatGPT4o曰くCSSの適用だけでは不十分でTampermonkeyでjavascriptも使えだとさ
513: 05/29(水)13:47 ID:??? AAS
>>512
板違い消えろ
514(1): 05/29(水)13:51 ID:??? AAS
板違いなのかな？どこで質問したらいいですかね
CSSとかに詳しそうだったのこの板ぐらいしか見当たらんのだけど
515(2): 05/29(水)13:52 ID:??? AAS
<div><a></a><div><div></div></div></div>
となってる塊全体を指定するにはどうしたらいい?
516(1): 05/29(水)13:55 ID:??? AAS
割とこの話って外人のサイトでも大した情報出てなくて困ってるんだよね
>>1読んでこのスレなら大丈夫そうかなーと思ったらまさか自治厨に煽られるとは
ちょっとでも仕方ねー調べてやっか的な心は芽生えなかったかね？
上下前次1-新書関写板覧索設栞歴
あと 342 ﾚｽあります
ｽﾚ情報 赤ﾚｽ抽出 画像ﾚｽ抽出 歴の未読ｽﾚ AAｻﾑﾈｲﾙ
ぬこの手 ぬこTOP 0.010s