2ちゃんねる ■掲示板に戻る■ 全部 1- 最新50    

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
名前: E-mail (省略可) :

read.cgi ver.24052200