[過去ﾛｸﾞ] HTML/CSS のどんな質問にも優しく答えるｽﾚ 52 (1002ﾚｽ)
上下前次1-新
このｽﾚｯﾄﾞは過去ﾛｸﾞ倉庫に格納されています｡
次ｽﾚ検索 歴削→次ｽﾚ 栞削→次ｽﾚ 過去ﾛｸﾞﾒﾆｭｰ
488: 2024/05/20(月)09:48 ID:??? AAS
その具体例を思い出せない爺さん
489: 2024/05/20(月)11:43 ID:??? AAS
box-sizing: border-box;はheightをpxで指定すると効くけど
height:auto;にしたら効きませんでした。
どうすればheight:autoでも効きますか？
490: 2024/05/20(月)11:51 ID:??? AAS
効いてるよ
491: 2024/05/20(月)16:04 ID:??? AAS
widthやheightってautoにするとborder-boxは無視されるんじゃなかったっけ？
492: 2024/05/20(月)17:50 ID:??? AAS
されないが
493: 2024/05/20(月)21:59 ID:??? AAS
試してみれば分かるがされる
494: 2024/05/20(月)23:35 ID:??? AAS
なにをもってborder-boxが無視されると言ってるの
border-boxの仕様のほうを勘違いしてんじゃないの
495: 2024/05/21(火)00:38 ID:??? AAS
確認したけど効いてるね
見た目は同じになるはずだけど、getComputedStyleを使ってheight/widthを取得するとちゃんとborderの分の差が出るよ
496: 2024/05/21(火)01:15 ID:??? AAS
開発ツールでは無視されてるように見えるだけってこと？
497: 2024/05/21(火)08:08 ID:??? AAS
見えない
498(1): 2024/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): 2024/05/21(火)08:59 ID:??? AAS
「height:autoだと子要素がボーダーの内側に収まるように計算される」のはbox-sizingの指定では変わらんので、画面上の見た目も開発者ツールの計算済みタブの図で表示される数値も変わらん
これが「効いていない」ように見えているだけではないかな……
500(1): 2024/05/21(火)11:21 ID:??? AAS
質問です
以下のコードにpic1を上下中央揃い、
テキスト１が改行してheightが広くなっても画像が上下中央揃いになるようにしたいです
どのようにすれば上手くできるでしょうか？
[HTML]
<div id="main">
<div id="acmenu">
<dl>
<img src="pic1">
<dt>テキスト１</dt>
省18
501: 2024/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): 2024/05/21(火)11:28 ID:??? AAS
>>500
><dl>
><img src="pic1">
><dt>テキスト１</dt>
dl直下にimgはダメ
503: 2024/05/21(火)11:43 ID:??? AAS
>>502
ありがとうございます、そうだったんですね！
どのような感じで書けばよいのでしょうか…？
504: 2024/05/21(火)13:26 ID:??? AAS
>>502
ありがとうございます、解決しました！
505: 2024/05/21(火)15:28 ID:??? AAS
>>498-499
横からだけど、なるほど分からん、と一瞬思ったが
height:autoだと、content-boxでもborder-boxと同じく「ボーダーの内側に収まる」という前提でheightが計算されているから
content-boxのコンテンツ領域の数値はborder-boxの数値と同じになるって考えたら理解できた（何言ってるのか分かりにくいとは思うが）
というか開発者ツールでマウスオーバーで表示されるフローティングボックスだけ見ちゃってて、計算済みタブの方でheightに差が出てるの見落としてたわ
解説ありがとう、勉強になりました
506(2): 2024/05/23(木)14:52 ID:pd9pga9F(1) AAS
（１）beforeはaaa:beforeのように:が１つの場合で書いてあったりaaa::beforeのように
:が２つで書いてあったりするところがあるけど違いはありますか？
（２）style="aaa:before"のようにstyleの中でbeforeは使えますか？
507: 2024/05/23(木)15:00 ID:??? AAS
>>506
1 違いはない :hoverなどの疑似クラスと区別するため推奨される記法
2 できない
上下前次1-新書関写板覧索設栞歴
あと 495 ﾚｽあります
ｽﾚ情報 赤ﾚｽ抽出 画像ﾚｽ抽出 歴の未読ｽﾚ AAｻﾑﾈｲﾙ
ぬこの手 ぬこTOP 0.012s