HTML/CSS のどんな質問にも優しく答えるスレ 52
- 1 :Name_Not_Found:2023/08/23(水) 18:52:13.52 ID:???.net
- ここは初心者からベテランまで、全ての人を対象に優しく答えるスレです
類似質問、重複質問、丸投げ大いに結構。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/
- 491 :Name_Not_Found:2024/05/20(月) 16:04:56.44 ID:???.net
- widthやheightってautoにするとborder-boxは無視されるんじゃなかったっけ?
- 492 :Name_Not_Found:2024/05/20(月) 17:50:15.31 ID:???.net
- されないが
- 493 :Name_Not_Found:2024/05/20(月) 21:59:13.05 ID:???.net
- 試してみれば分かるがされる
- 494 :Name_Not_Found:2024/05/20(月) 23:35:02.52 ID:???.net
- なにをもってborder-boxが無視されると言ってるの
border-boxの仕様のほうを勘違いしてんじゃないの
- 495 :Name_Not_Found:2024/05/21(火) 00:38:39.02 ID:???.net
- 確認したけど効いてるね
見た目は同じになるはずだけど、getComputedStyleを使ってheight/widthを取得するとちゃんとborderの分の差が出るよ
- 496 :Name_Not_Found:2024/05/21(火) 01:15:11.17 ID:???.net
- 開発ツールでは無視されてるように見えるだけってこと?
- 497 :Name_Not_Found:2024/05/21(火) 08:08:52.71 ID:???.net
- 見えない
- 498 :Name_Not_Found:2024/05/21(火) 08:39:10.30 ID:???.net
- 「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 :Name_Not_Found:2024/05/21(火) 08:59:36.33 ID:???.net
- 「height:autoだと子要素がボーダーの内側に収まるように計算される」のはbox-sizingの指定では変わらんので、画面上の見た目も開発者ツールの計算済みタブの図で表示される数値も変わらん
これが「効いていない」ように見えているだけではないかな……
- 500 :Name_Not_Found:2024/05/21(火) 11:21:04.55 ID:???.net
- 質問です
以下のコードにpic1を上下中央揃い、
テキスト1が改行してheightが広くなっても画像が上下中央揃いになるようにしたいです
どのようにすれば上手くできるでしょうか?
[HTML]
<div id="main">
<div id="acmenu">
<dl>
<img src="pic1">
<dt>テキスト1</dt>
<dd>
本文1
</dd>
</dl>
<dl>
<dt>テキスト2</dt>
<dd>
本文2
</dd>
</dl>
<dl>
<dt>テキスト3</dt>
<dd>
本文3
</dd>
</dl>
</div>
</div>
- 501 :Name_Not_Found:2024/05/21(火) 11:22:55.10 ID:???.net
- [CSS]
#main {
width: 500px;
margin: 80px auto;
position: relative;
#acmenu {
dl {
border-top: 1px solid gray;
counter-increment: question;
margin: 0;
&:last-of-type {
border-bottom: 1px solid gray;
}
dt {
cursor: pointer;
font-size: 1rem;
line-height: 1;
position: relative;
display: block;
padding: 15px 8px 12px 64px;
&.active {
font-weight: bold;
}
}
dd {
display: none;
margin-bottom: 16px;
padding: 12px 24px 16px;
background: #f7f7f9;
border: 1px solid gray;
border-radius: 8px;
}}}}
- 502 :Name_Not_Found:2024/05/21(火) 11:28:51.29 ID:???.net
- >>500
><dl>
><img src="pic1">
><dt>テキスト1</dt>
dl直下にimgはダメ
- 503 :Name_Not_Found:2024/05/21(火) 11:43:27.91 ID:???.net
- >>502
ありがとうございます、そうだったんですね!
どのような感じで書けばよいのでしょうか…?
- 504 :Name_Not_Found:2024/05/21(火) 13:26:20.98 ID:???.net
- >>502
ありがとうございます、解決しました!
- 505 :Name_Not_Found:2024/05/21(火) 15:28:13.23 ID:???.net
- >>498-499
横からだけど、なるほど分からん、と一瞬思ったが
height:autoだと、content-boxでもborder-boxと同じく「ボーダーの内側に収まる」という前提でheightが計算されているから
content-boxのコンテンツ領域の数値はborder-boxの数値と同じになるって考えたら理解できた(何言ってるのか分かりにくいとは思うが)
というか開発者ツールでマウスオーバーで表示されるフローティングボックスだけ見ちゃってて、計算済みタブの方でheightに差が出てるの見落としてたわ
解説ありがとう、勉強になりました
- 506 :Name_Not_Found:2024/05/23(木) 14:52:59.88 ID:pd9pga9F.net
- (1)beforeはaaa:beforeのように:が1つの場合で書いてあったりaaa::beforeのように
:が2つで書いてあったりするところがあるけど違いはありますか?
(2)style="aaa:before"のようにstyleの中でbeforeは使えますか?
- 507 :Name_Not_Found:2024/05/23(木) 15:00:35.12 ID:???.net
- >>506
1 違いはない :hoverなどの疑似クラスと区別するため推奨される記法
2 できない
- 508 :Name_Not_Found:2024/05/23(木) 15:02:18.54 ID:???.net
- >>506
コロンひとつでも問題なく動いちゃうけど
擬似要素は二つ書くことになってます
htmlのstyleでは擬似要素を書くことができません
- 509 :Name_Not_Found:2024/05/23(木) 15:17:31.11 ID:???.net
- 擬似要素のコロン1つはCSS2.1までの互換のために残ってるだけなので使わない方がいい
- 510 :Name_Not_Found:2024/05/28(火) 01:22:52.49 ID:???.net
- WindowsPC版のChromeの拡張機能のstylusで、youtube画面の不用な機能の非表示などをカスタマイズしています。
ミニプレイヤーを無効にしたく、以下の定義の追加でミニプレイヤーのボタンは非表示にできたのですが、
#movie_player .ytp-right-controls button.ytp-miniplayer-button {
display: none !important;
}
タッチパネルが付いてるPCだと、動画再生エリアをタッチしながら下へスワイプすると、
ミニプレイヤーに切り替わってしまう事が判りました。
この動作を無効化したいのですが、方法がありましたら教えてください。
所々、style="touch-action: 〜"のような属性がページ内にあるのでこの辺りが怪しいと思ってるのですが、
どうしたらいいかまでに至ってません。
- 511 :Name_Not_Found:2024/05/29(水) 06:53:07.62 ID:???.net
- ここはWeb制作板です
- 512 :Name_Not_Found:2024/05/29(水) 13:43:44.80 ID:???.net
- 回答しないつもりなら黙っとればええのに
ChatGPT4o曰くCSSの適用だけでは不十分でTampermonkeyでjavascriptも使えだとさ
- 513 :Name_Not_Found:2024/05/29(水) 13:47:56.88 ID:???.net
- >>512
板違い消えろ
- 514 :Name_Not_Found:2024/05/29(水) 13:51:48.83 ID:???.net
- 板違いなのかな?どこで質問したらいいですかね
CSSとかに詳しそうだったのこの板ぐらいしか見当たらんのだけど
- 515 :Name_Not_Found:2024/05/29(水) 13:52:27.76 ID:???.net
- <div><a></a><div><div></div></div></div>
となってる塊全体を指定するにはどうしたらいい?
- 516 :Name_Not_Found:2024/05/29(水) 13:55:23.82 ID:???.net
- 割とこの話って外人のサイトでも大した情報出てなくて困ってるんだよね
>>1読んでこのスレなら大丈夫そうかなーと思ったらまさか自治厨に煽られるとは
ちょっとでも仕方ねー調べてやっか的な心は芽生えなかったかね?
- 517 :Name_Not_Found:2024/05/29(水) 14:01:25.70 ID:???.net
- >>515
一番最初のdivを指定すればいいんじゃない?
classつけたほうがわかりやすいね!
- 518 :Name_Not_Found:2024/05/29(水) 14:07:15.10 ID:???.net
- 他にも関係ないdivはいっぱいあって
この並びになってるとこだけ抜き出したい
- 519 :Name_Not_Found:2024/05/29(水) 14:07:34.73 ID:???.net
- >>518
classをつけよう
- 520 :Name_Not_Found:2024/05/29(水) 14:09:39.06 ID:???.net
- 他人が書いてるのでclassは付けられません
- 521 :Name_Not_Found:2024/05/29(水) 14:10:49.38 ID:???.net
- パターンマッチを知らんと見えるが
このパターンになっていたらというような条件はCSSでは書けない
残念だったね
- 522 :Name_Not_Found:2024/05/29(水) 14:10:57.48 ID:???.net
- 状況としてはスクレイピングしていて、特定のデータを抜き出す為のセレクタの書き方
- 523 :Name_Not_Found:2024/05/29(水) 14:13:31.96 ID:???.net
- >>522
板違い消えろ
- 524 :Name_Not_Found:2024/05/29(水) 14:16:37.05 ID:???.net
- 脊髄反射すぎね?100歩譲って今日だけおかしなのが暴れてるとしようか
- 525 :Name_Not_Found:2024/05/29(水) 14:19:22.27 ID:eZz6URnG.net
- <div class="aaa">aaa1</div>
<div class="aaa">aaa2</div>
<div class="aaa">aaa3</div>
このように子要素はないけど
class="aaa"の2番目(つまりaaa2)の部分だけbackground-color:#ffff00とするには
どのようにセレクタを指定すればいいんですか?
- 526 :Name_Not_Found:2024/05/29(水) 14:20:42.80 ID:???.net
- おさらいしよう
ローカルルール
>扱う話題
> HTML、CSSなどのサイト制作の技術
> JavaScript、VBScriptなどのクライアントサイドプログラム
> Webサイトの運営および管理についての情報交換・雑談
> 2chでは荒らし依頼はできません
>板違いな話題
> ネット上の事象の観察→『ネットwatch』
> レンタルサーバー、ドメイン→『レンタル鯖』
> HPの宣伝、ネットするだけで儲かる話等→『宣伝掲示板』
> CGI、Perl、PHPなどのサーバサイドプログラミング→『WebProg』
> Flash制作→『FLASH・動画』
> アフィリエイト、ネット広告の話題→『Web収入』
> アダルトサイトの制作関連→『ウェブマスター』(21禁)
このスレ
>ここは初心者からベテランまで、全ての人を対象に優しく答えるスレです
>類似質問、重複質問、丸投げ大いに結構。HTML / CSS 関係の事なら何でもOK
- 527 :Name_Not_Found:2024/05/29(水) 14:24:11.98 ID:???.net
- >>525
何番目のタグとか大雑把に指定できたと思う
0オリジンならdiv[1]とかそんなだったかと(うろ覚え)
- 528 :Name_Not_Found:2024/05/29(水) 14:28:01.57 ID:???.net
- 能力を超えるものは板違い
- 529 :Name_Not_Found:2024/05/29(水) 14:32:59.50 ID:???.net
- まあ匿名じゃ所詮このレベルだよな
本当に解決したいなら技術系SNSで聞いた方がいいよ
- 530 :Name_Not_Found:2024/05/29(水) 14:35:42.28 ID:???.net
- chat-GPTにまず聞け
このスレでちゃんと回答が出てくる耳タコ質問系なら一発で解決する場合が多い
- 531 :Name_Not_Found:2024/05/29(水) 15:02:15.53 ID:???.net
- chat-GPTにレガシーサイトのソースを完全書き換えさせようと試みたけどまだ無理だわ
- 532 :Name_Not_Found:2024/05/29(水) 15:25:47.21 ID:???.net
- 最初はパターンマッチだったんだよな
まだpythonよりperlが主流な頃
bs4がいけてるよ、findよりもselectがいけてるよ、という流れなのに、
また原始的な方法に戻らないといけない
- 533 :Name_Not_Found:2024/05/29(水) 16:50:27.16 ID:???.net
- ほんとゴミ人間は板違いすら認識できないのは、同じ人間ではないわな
猿がキーボード叩いてそうw
- 534 :Name_Not_Found:2024/05/29(水) 16:55:12.72 ID:???.net
- 相手が知らなくて自分が知ってることを回答して気持ちよくなりたいんだから、
知らないこと聞くような奴は来るんじゃない
- 535 :Name_Not_Found:2024/05/29(水) 17:04:16.85 ID:???.net
- >>525
class名ごとにカウントできる仕組みにアップデートまだー
- 536 :Name_Not_Found:2024/05/29(水) 17:10:28.08 ID:???.net
- >>534
知らないんじゃなくてnthセレクタじゃ無理だからjs使わないとできないんだぞ池沼
- 537 :Name_Not_Found:2024/05/29(水) 17:53:52.12 ID:???.net
- >>525
aaaクラスしかないのなら
.aaa:nth-of-type(2) {
background-color:#ffff00;
}
で問題ない
- 538 :Name_Not_Found:2024/05/29(水) 18:10:41.31 ID:???.net
- >>515
バカみたいだけど
div:not([class]):has(> a) {
}
これで一応選択はできるよ
- 539 :Name_Not_Found:2024/05/29(水) 18:29:51.22 ID:???.net
- これいいな
同じ<a>を何度も選択しないのがいい
これで荒く拾っておいて、あとは条件に合わないのを弾けば十分使える
1階層まではパターンが書けるのか
- 540 :Name_Not_Found:2024/05/29(水) 18:50:10.33 ID:???.net
- div:has(> a + div)
これで完全なものが得られた
- 541 :Name_Not_Found:2024/05/29(水) 19:37:36.95 ID:???.net
- >div:not([class]):has(> a) {
>div:has(> a + div)
これに限った話じゃないけど1週間でも1ヶ月でも後で読んで何のことか判るものなの?
セレクタってもっと記述的に書けませんか?
- 542 :Name_Not_Found:2024/05/29(水) 19:40:27.90 ID:???.net
- 保守性を考えるならclassを振るべき
classがいじれないとかいうバカ案件にはこういう邪道をやるしかない
- 543 :Name_Not_Found:2024/05/29(水) 19:43:29.93 ID:???.net
- コメントでも書いとけ
- 544 :Name_Not_Found:2024/05/29(水) 23:09:23.75 ID:???.net
- :has()なんて使ったことなくて、CSSでは無理と発狂しちゃうおじいちゃんは、
div:has(> a + div) なんて何してるか全く分からないだろうな
- 545 :Name_Not_Found:2024/05/29(水) 23:11:28.55 ID:???.net
- 何故か質問する側の厨房が親切な回答者の威を借りてマウントするスレ
- 546 :Name_Not_Found:2024/05/29(水) 23:14:44.82 ID:???.net
- :is :not :where :hasなんてスレで頻出なのに
>>544は何が悔しくていじけているのかわからない
- 547 :Name_Not_Found:2024/05/29(水) 23:19:02.91 ID:???.net
- ほぞがw
あり得ないほどほぞが噛まれているwww
しかも速攻で
CSSは無駄に奥が深いので、迂闊に無理とか言っちゃ駄目だぞ
- 548 :Name_Not_Found:2024/05/29(水) 23:29:58.95 ID:???.net
- 板違いを指摘された子が荒らしに進化したパターンかな
- 549 :Name_Not_Found:2024/05/29(水) 23:31:16.15 ID:???.net
- たまに発生するキチガイやルビキチをNGするためにこの板にもワッチョイあればいいのに
- 550 :Name_Not_Found:2024/05/29(水) 23:35:12.82 ID:???.net
- 板違いだと思っちゃう子は基準レベル以下なんよな
絡まない方がいいよ
- 551 :Name_Not_Found:2024/05/29(水) 23:37:22.97 ID:???.net
- >>514
まだ冷静
>>516
キレはじめ
- 552 :Name_Not_Found:2024/05/29(水) 23:38:19.52 ID:???.net
- >>550
もうキレちゃってなぜか質問キッズなのに回答へのお礼もなく荒らすことしか頭にない
- 553 :Name_Not_Found:2024/05/29(水) 23:42:00.88 ID:???.net
- 次から次へとほぞが
なかなかの良問だったみたいだな
- 554 :Name_Not_Found:2024/05/29(水) 23:45:41.49 ID:???.net
- 真面目な話
更新でコンテンツ増減したり順番が変わったりラッパーが増えたりするのに
意地でもclass付けずにパズルみたいな疑似クラス使ってるオナニーコードはたまにある
- 555 :Name_Not_Found:2024/05/30(木) 01:53:59.28 ID:???.net
- ブロック対策には有効
- 556 :Name_Not_Found:2024/05/30(木) 06:45:36.63 ID:???.net
- >>554
そういうの引き継ぎたくないわー
絶対やだわー
- 557 : 警備員[Lv.39]:2024/06/03(月) 19:29:43.52 ID:???.net
- 育成
- 558 :Name_Not_Found:2024/06/05(水) 13:53:13.15 ID:???.net
- 専ブラのsikiのCSS触ってみてるけどワケワカメ
- 559 :Name_Not_Found:2024/06/05(水) 14:19:00.19 ID:???.net
- 今どきCSSを手で書くってどういう時?
- 560 :Name_Not_Found:2024/06/05(水) 20:33:04.75 ID:???.net
- chatGPTにでも書かせるの?
- 561 :Name_Not_Found:2024/06/06(木) 12:03:07.13 ID:???.net
- コピペで済むことしかやらないんじゃね
- 562 :Name_Not_Found:2024/06/06(木) 20:45:14.87 ID:???.net
- 手打ちしちゃだめなの…?入力補助機能使うっていう意味?
- 563 :Name_Not_Found:2024/06/07(金) 16:08:33.73 ID:???.net
- Ruby on Rails 7 のデフォルトのCSS フレームワークは、
Bootstrap, Bulma, Tailwind, PostCSS, Dart Sass の5つ
CSSが分からない香具師は、
Bootstrap, Bulma, Tailwind などのレスポンシブ・フレームワークを使えばよい
- 564 :Name_Not_Found:2024/06/07(金) 16:27:51.12 ID:???.net
- ルビキチしね
- 565 :Name_Not_Found:2024/06/08(土) 00:59:40.17 ID:???.net
- >>564
今時、透明あぼんしてないの?
- 566 :Name_Not_Found:2024/06/08(土) 01:26:18.02 ID:???.net
- あぼんしててもしね
- 567 :Name_Not_Found:2024/06/09(日) 00:16:31.26 ID:???.net
- <style>
#test{
display:flex;
list-style:none;
align-items:center;
}
</style>
<ul id="test">
<li>aaa</li>
<li>bbb</li>
<li>aaa<br>bbb<br>ccc</li>
</ul>
これだと全てのliが縦の中央揃えになってしまうけど
最初のliだけ縦の中央揃えにするにはどうやればいいんですか?
ulのalign-items:centerを削除して
#test li:nth-child(1){align-items:center}とやっても効かなかったです
- 568 :Name_Not_Found:2024/06/09(日) 00:39:57.45 ID:???.net
- >>567
#test li:first-child { align-self: center; }
- 569 :Name_Not_Found:2024/06/09(日) 08:31:24.31 ID:cfJ6pxYN.net
- >>568
ありがとうございます
- 570 :Name_Not_Found:2024/06/16(日) 21:59:14.87 ID:???.net
- インラインの CSS を上書きするにはどうしたら?
- 571 :Name_Not_Found:2024/06/16(日) 22:06:05.82 ID:???.net
- !important
- 572 :Name_Not_Found:2024/06/16(日) 22:13:54.23 ID:???.net
- ゴメン。
インラインに既に !important が入ってる場合です。
- 573 :Name_Not_Found:2024/06/16(日) 22:39:49.54 ID:???.net
- インラインのimportantは詳細度が最高なので同じくインラインでしか上書きできない
jsで削除するくらいしかない
- 574 :Name_Not_Found:2024/06/16(日) 22:59:48.91 ID:???.net
- ありがと。
そうか、CMS 側でもう決め打ちってことなのね。
- 575 :Name_Not_Found:2024/06/17(月) 02:12:51.62 ID:???.net
- <thead>には絶対に<th>を使わなくてはいけないという規格等はありますか?
- 576 :Name_Not_Found:2024/06/17(月) 03:59:09.64 ID:???.net
- 無い
- 577 :Name_Not_Found:2024/06/17(月) 06:49:56.24 ID:???.net
- ありがとうございます安心しました
なるべく早くtabl;eタグ使わずに済むように精進します
- 578 :Name_Not_Found:2024/06/17(月) 09:50:04.83 ID:???.net
- そういうの『html 入れ子』でググれば出てくるよー
- 579 :Name_Not_Found:2024/06/17(月) 16:21:59.87 ID:???.net
- https://jsfiddle.net/m84csfn3/
↑こんな感じでsubgridを使ってレイアウトしたのですが、
3つ目のcard-item内に注釈を追加することになった場合、
ベストな方法を教えてください。
grid-row: span 3;を4にすると注釈がないカードに無駄な空きスペースが生まれるのを回避したいです。
- 580 :Name_Not_Found:2024/06/17(月) 17:01:16.89 ID:???.net
- >>578
ありがとうございます
親子関係で問題が無ければ親孫に影響しないという考えでいいのでしょうか
今回の件では<thead><tbody><tfoot>の子は<tr>であり、<tr>の子は<th><td>だから<thead>に<td>を使っても影響なし
- 581 :Name_Not_Found:2024/06/17(月) 17:43:18.30 ID:???.net
- >>579
card-item内はgridじゃなくflexにしたら?
- 582 :Name_Not_Found:2024/06/17(月) 18:02:03.36 ID:???.net
- >>581
ありがとうございます
注釈をabsoluteにして〜とかいろいろ試してみたのですが
flexのほうが楽そうですね
- 583 :Name_Not_Found:2024/06/17(月) 21:16:14.74 ID:???.net
- >>580
そうだよー
- 584 :Name_Not_Found:2024/06/17(月) 22:25:32.04 ID:???.net
- >>579
gridでやるならsubgrid使わずに:has()でgrid-template-rowsの指定を分けるかなー
https://jsfiddle.net/a2x0rLfu/
まーでもflex使う方が楽ね
- 585 :Name_Not_Found:2024/06/18(火) 02:52:54.93 ID:???.net
- >>583
ありがとうございます!
- 586 :Name_Not_Found:2024/06/18(火) 13:24:01.41 ID:???.net
- そういう注釈の入れ方はデザイン的にどうよは別問題かな?w
- 587 :Name_Not_Found:2024/06/19(水) 03:10:47.57 ID:???.net
- そういうデザイン指定なら再現するしかないさー
- 588 :Name_Not_Found:2024/06/19(水) 23:35:47.89 ID:???.net
- ゆいまーるさー
- 589 :Name_Not_Found:2024/06/20(木) 15:02:17.10 ID:???.net
- nth-chlidのof構文っていつから使えてたの?
便利ね
- 590 :Name_Not_Found:2024/06/20(木) 15:31:49.35 ID:???.net
- >>589
去年の5月にfirefoxが対応してモダンブラウザ埋まった
- 591 :Name_Not_Found:2024/06/20(木) 15:33:20.01 ID:???.net
- ありがとう!
地味に嬉しい
180 KB
新着レスの表示
掲示板に戻る
全部
前100
次100
最新50
read.cgi ver.24052200