HTML/CSS のどんな質問にも優しく答えるｽﾚ 52

**Name_Not_Found** · 2024/04/11(木) 12:14:48.80

>>408
言い方を間違えました
言いたいことはそれでした

wrapperの必要性がちゃんとわかってなくて
背景がある場合はわかりやすいんですけど

とりあえず今はページの外枠とコンテンツ幅と覚えておきます
ありがとうございました

**Name_Not_Found** · 2024/04/11(木) 12:42:32.26

>>406
何も指定しなければブラウザが持っているデフォルトのスタイルで、コンテンツが装飾される訳だけど
デフォルトのliの左余白は、olやulのpadding-leftで決まり（chromeやfirefoxではデフォルトで40px）
更に番号や中黒は、list-style-positionがoutsideになっているため、liの外側（olやulのpadding領域内）に表示される
なので、list-style-positionをinsideにしてもいいんだが、liのテキスト量が多い場合に改行位置がズレるので
デフォのoutsideのままでulやolのpadding-leftを、例えばcalc(40px + ○em)とかで指定すると改行されてもズレない
（使用するフォントに合わせて○は1.2とか1.3ぐらい？で番号や中黒の分を位置調整）

以上まとめるとpをliの位置に合わせるなら、pにはpadding-left:40px;、olにはpadding-left:calc(40px + 1.3em);を指定
というのが簡単でオススメ

具体的にはこんな感じ
https://jsfiddle.net/zjt3vxf1/

というわけで上記を応用すれば、お好みの位置で色々と調整できるはず

**Name_Not_Found** · 2024/04/11(木) 13:04:26.27

>>410
詳しくありがとうございます！
しっかりと確認して実装してみます
本当にありがとうございます

**Name_Not_Found** · 2024/04/12(金) 12:31:41.18

画像のようにh2の下に50px距離をあけたい場合

h2のpadding-bottomなのか
h2のmargin-bottomなのか

iconのpadding-topなのか
iconのmargin-bottomなのか

どれが適切なんでしょうか？
その辺がよく分かってなくて、なんとなく感覚で選んでいます

よろしくお願いします
https://i.imgur.com/eLzRvvs.jpg

**Name_Not_Found** · 2024/04/12(金) 12:34:32.92

>>412
一部文章間違えました
5行目iconのmargin-bottomなのかではなく

iconのmargin-topなのか、です

**Name_Not_Found** · 2024/04/12(金) 12:48:30.99

内側の余白はpadding
外側の間隔はmargin
縦並び要素のmarginが上か下かは宗教戦争になるから好きにしよう

**Name_Not_Found** · 2024/04/12(金) 20:07:04.69

>>414
ありがとうございます

**Name_Not_Found** · 2024/04/12(金) 21:06:42.91

質問お願いします

この写真のようなサイトを作るという課題で
正解のコードが
heightが120の
paddingが40でした

ただ写真を見ると高さの合計が200でした

なのでheightを200にしてその内側の余白として
padding40と書いたのですが間違いでした

よく意味がわからないので教えてください
よろしくお願いします
https://i.imgur.com/pLNq31X.jpg

**Name_Not_Found** · 2024/04/12(金) 21:12:07.81

heightを200にして
paddingを40にすると

footerの高さが高くなってしまいます

**Name_Not_Found** · 2024/04/12(金) 22:31:57.01

>>416
https://developer.mozilla.org/ja/docs/Web/CSS/box-sizing

**Name_Not_Found** · 2024/04/13(土) 12:17:22.88

>>418
ありがとうございます
要素の構造についてまだちゃんと理解できていないから分からないと思うので読んで勉強してみます

**Name_Not_Found** · 2024/04/16(火) 18:59:48.33

>>416
プロゲ懐かしいな、まだあったんだ
俺もwebはここからスタートして今では昔勉強したイタリア料理で年収2000万超えたよ
観光客相手に高単価なメニュー出してる

**Name_Not_Found** · 2024/04/17(水) 01:35:18.35

大量のGと職場が一緒の飲食は無理

**Name_Not_Found** · 2024/04/18(木) 17:45:18.69

質問させてください
下記URL先の画像のように作りたいです

画像を左右に設置することはできましたが、
緑色が左右の画像の間に左右の画像目いっぱいに幅を設定して置けませんでした
緑色の幅をフレキシブルにしたいですがそちらもできません…

どのようにすればよいのか教えて頂けませんでしょうか
宜しくお願いしますm(_ _)m

https://imepic.jp/20240418/637200

**Name_Not_Found** · 2024/04/18(木) 17:48:48.43

display:flexを使えばいいよ
とりあえずググってみよう

**Name_Not_Found** · 2024/04/18(木) 17:57:41.43

>>422
flex使えばいけるね

そういうのは専門学校の宿題か何か？
良かったら教えて
課題とかでそういうのが出てるの？

**Name_Not_Found** · 2024/04/18(木) 18:24:24.43

レスありがとうございます、試してみたらできました！
フレキシブルを使った自由課題でしたm(_ _)m

<div class="outline">
<div class="box1"></div>
<div class="greenbox"></div>
<div class="box2"></div>
</div>
.outline {
width: 100%;
height: auto;
display:flex;
}
.box1 {
width: 50px;
height: 50px;
float: left;
background: #da5f2b;
}
.box2 {
width: 50px;
height: 50px;
float: right;
background: #da5f2b;
}
.greenbox {
width: 100%;
height: 50px;
float: left;
background: #76c03d;
}

**Name_Not_Found** · 2024/04/18(木) 18:40:13.44

並び順なのでfloat指定いらないよ

**Name_Not_Found** · 2024/04/18(木) 19:34:52.11

>>425
自由課題か・・宿題とか課題とか嫌いだったな
高校生でそんなのやるわけないか、専門学校？

ちなみにオレンジボックスは共通の書き方にしてコード減らせるからやってみ
flex使えばfloatも使う必要無いよ、昔はfloatだったからそれが模範解答で出てきたら時代と教材がかなり古いと思う

**Name_Not_Found** · 2024/04/18(木) 19:35:27.90

ひねくれてgridでやろうぜ
https://jsfiddle.net/15ufnjgk/

**Name_Not_Found** · 2024/04/18(木) 19:39:17.33

grid警察だ！そこを動くな！

**Name_Not_Found** · 2024/04/18(木) 21:02:16.18

gridは最終手段って感じ
これを使わなくて済むようなデザイン組んでほしいって思う

**Name_Not_Found** · 2024/04/18(木) 21:35:37.87

gridはいいんだけど
orderやgrid-areaで順番をゴチャゴチャ変えないと成立しないスマホデザインとかはうんこ
スクリーンリーダーなどアクセシビリティ的にも良くない

**Name_Not_Found** · 2024/04/20(土) 20:14:49.08

以下のようなテーブルがあります。
実際にはこの三行を1グループとして複数グループが下に続いています。

┌┬┐　ここで、左側の行にカーソルをのせた時に
│├┤　ハイライトするようにしたいです。
│├┤　この時、カーソルを載せている右列だけでなく
└┴┘　左の列もハイライトするようにするには
どうすればよいですか？
今はbootstrapを使っているのですが、
1行目のときしか左列がハイライトされなくて困っています。

**Name_Not_Found** · 2024/04/20(土) 20:18:18.41

jqueryのほうが早いな
cssでやるのはちとつらいのでは？

**Name_Not_Found** · 2024/04/21(日) 01:17:42.06

その3行ごとにtbodyで囲ってtbody:hoverでできそうではあるが、別の問題が発生しそう

**Name_Not_Found** · 2024/04/21(日) 01:39:40.72

質問です
個人経営の店ですが取引業者のサービスでホームページ作りました
業者のサービスはWordPressベースでｓｓｌ対応です
ただurlが業者の名前＆ディレクトリ以下に無機的な数字が続きビミョーです
お名前.comでドメインを用意してurl転送サービスでフレーム転送にしました
これでOKと思いきや設定したurlでホームページを表示してもssl対応になりません
個人情報を扱わないサイトですがセキュリティソフトが信用できないサイトとか警告が出ます

http → https のフレーム転送でssl対応にする方法は有りますか？

**Name_Not_Found** · 2024/04/21(日) 04:05:19.54

過去にやったの調べたら>>434と同じでtbody:hover{}してた
css的に問題はなかったしjQueryでtbodyを抽出しても問題なかった
でもこういうtbodyの乱用はどうなんだろうとは思うし、将来いきなりNGになるかもしれんよね

**Name_Not_Found** · 2024/04/23(火) 18:19:08.99

質問です

親要素にdisplay:flexを設定して
子要素1は左に配置
子要素2は右に配置したいです
どのように書けば実現できるでしょうか？

**Name_Not_Found** · 2024/04/23(火) 18:23:49.00

<div class="parent">
<div class="child01">子1</div>
<div class="child02">子2</div>
</div>

.parent{
display:flex;
justify-content:space-between;
}

**Name_Not_Found** · 2024/04/23(火) 18:40:47.01

>>438
ありがとうございます
その書き方は出でこなかったので勉強になりました
結果ですが子要素1と子要素2のサイズが違うこと？で子要素2の配置が真ん中やや右に表示されてしまいました

**Name_Not_Found** · 2024/04/23(火) 19:00:41.67

他のcssなければ子要素は同じサイズのはず
（子要素内の文字数一緒なので）
子要素2が真ん中より右ってのは他のCSSが影響してると思うよ
justify-content:space-between;
は子要素を均等に配置するなので
parentの左右にそれぞれピッタリ配置されてるはず

**Name_Not_Found** · 2024/04/25(木) 16:35:17.89

JS使わなくてもよくなるのね
実装はよ！

Help us invent CSS Grid Level 3, aka “Masonry” layout
https://webkit.org/blog/15269/help-us-invent-masonry-layouts-for-css-grid-level-3/

**Name_Not_Found** · 2024/04/26(金) 22:09:29.47

ある WEB サイトに入力する場所が２つあるとして、其処に指定の値を入力した状態でそのサイトを開くには、どの様に書けば良いのでしょうか？
例えば ttp://www.aaa.com/bbb/ というサイトだとして、其処に、foo と bar が入力された状態でブラウザで開きたいのですが…
ttp://www.aaa.com/bbb/ だけを実行すると、入力欄は空のままで開かれますよね。

**Name_Not_Found** · 2024/04/26(金) 22:38:58.37

>>442
サイト側でクエリなりなんなりを反映する仕組みがないと無理やで

**Name_Not_Found** · 2024/04/26(金) 22:48:01.15

>>443
> サイト側でクエリなりなんなりを反映する仕組みがないと無理やで
それを確かめるには、どんな事をすればいいのですか…？

**Name_Not_Found** · 2024/04/26(金) 22:55:14.72

自分でURLから何か受け取れるように実装したもの以外は基本的にありません

**Name_Not_Found** · 2024/04/26(金) 23:23:36.71

chromeの何かのアドオンでそれができたような

**Name_Not_Found** · 2024/04/27(土) 01:12:27.09

>>446
> chromeの何かのアドオンでそれができたような
サイト側で受け取る準備がされてなくても、入力した状態で開けるのですか？
それは欲しい…

**Name_Not_Found** · 2024/04/27(土) 01:48:04.72

フォームに初期値が入ってて欲しい、というシンプルな話では無いんだよね？

**Name_Not_Found** · 2024/04/27(土) 02:26:48.94

>>448
> フォームに初期値が入ってて欲しい、というシンプルな話では無いんだよね？
いやそれが希望です。
あるサイトに入力する場所があり、其処に指定した文字列を入力した状態でブラウザで開きたい、と…
例えば www.google.co.jp を実行すると検索する語句が入力待ちになりますが、
その欄に、検索する語句が入力された状態で開きたい、と。
グーグルなら、「ttps://www.google.co.jp/search?q=あいうえお」とやると、
「あいうえお」を入力して検索実行した後の状態で開きますよね。
別に実行後の状態でも、入力しただけで実行待ちの状態でもどちらでもいいのですが…

**Name_Not_Found** · 2024/04/27(土) 02:40:46.56

それはgoogleがURLパラメータを受け取れるようにしてるからって話が>>443

そういう仕様で作られてないなら拡張機能で対応するかフォーム自動入力ツール使えばいい
自分でHTML書く話じゃないならスレ違いだから詳しくは該当スレでどうぞ

**Name_Not_Found** · 2024/04/27(土) 03:57:51.25

『html input 初期値』でぐぐって出てくる話じゃダメなん？
textだったらvalueに書いとく、てやつ

**Name_Not_Found** · 2024/04/27(土) 04:04:58.92

自分のサイトじゃなくて他人のサイトか

**Name_Not_Found** · 2024/04/27(土) 16:47:28.19

具体的に何のフォームに何を入力しておきたいの？

**Name_Not_Found** · 2024/04/27(土) 20:14:56.34

対象フォームに値を入力するJS書いてブックマークレットにしとけばいいんじゃね

**Name_Not_Found** · 2024/04/27(土) 22:38:17.64

掲示板に同じ書き込みしまくって荒らすんじゃないか？

**Name_Not_Found** · 2024/04/28(日) 12:52:06.37

<div class="test" style="background:#ff00ff">てすと</div>
のようにclassとstyleを混ぜて書くのはだめなんですか？
背景色だけperlやphpなどで入力された値にしたいので

**Name_Not_Found** · 2024/04/28(日) 13:24:15.30

ダメなんてことはない
お好きにどうぞ

**Name_Not_Found** · 2024/04/28(日) 13:41:30.39

>>456
ダメではないが古い
jsやphpならcss変数に値を格納できるから自分ならそれ使うな

**Name_Not_Found** · 2024/04/28(日) 18:58:20.80

ロジック内で直接指定してあると後から面倒なことになるしなー
テーマみたいに値が決まってるならクラス切り替えた方がいいと思う

**Name_Not_Found** · 2024/04/29(月) 03:15:20.52

**Name_Not_Found** · 2024/05/01(水) 09:04:37.45

>>456
むしろそれでいい

**Name_Not_Found** · 2024/05/18(土) 16:23:14.67

Bootstrao使っている人に質問です。フォントサイズが小さくないですか？
何も適用していない、1remの状態（fs-6）でも小さいし、
フォントサイズが16pxのクラスを作って適用しても小さく感じます

警備員[Lv.1][新芽初] · 2024/05/18(土) 20:19:28.97

小さいと思ったこと無い
本家でサンプルDLして表示させても小さいっていうなら
ブラウザやOSの設定か、感覚の問題じゃね？

**Name_Not_Found** · 2024/05/19(日) 00:26:49.17

本家のサンプルは小さくないです。
なぜかCDNで読み込んで自サイトで見ると小さく感じます。
font-size-baseは16px（デフォルト）のままなんですが・・・

**Name_Not_Found** · 2024/05/19(日) 01:18:17.15

小さく感じるとか言われても分からんのだが
当該部分は何pxで表示されてんの？
開発者ツールで見りゃ分かると思うんだが

**Name_Not_Found** · 2024/05/19(日) 09:43:23.97

>>465
16pxです。つまり変更していません。
それで、bootstrapのscssを読み込んで、
$font-size-base: 1.1rem;
にしたら本家と同じような文字サイズになります

これって私の環境なんですかね？
文字サイズが小さくなる環境ってあるのだろうか・・・

**Name_Not_Found** · 2024/05/19(日) 09:53:36.75

だから開発者ツールで何pxなんだよ

**Name_Not_Found** · 2024/05/19(日) 11:08:50.65

変更してないので1remのままです。

**Name_Not_Found** · 2024/05/19(日) 11:26:07.48

pxが算出されるだろ　それを書けや

**Name_Not_Found** · 2024/05/19(日) 13:05:18.18

>>468
1remは何pxで表示されてんの？って話
Chromeの開発者ツールでフォントが小さい部分のタグを選択した状態で
「計算済み」タブにある「Text」の下の「font-size」はpxで表示されてると思うけど
どうなってる？

**Name_Not_Found** · 2024/05/19(日) 14:26:52.38

前から疑問なのだが、この界隈に一定数いる
絶対に開発ツール開きたくないマンって何なん？
デバッグ時の最初の選択肢であり、実際一番有効な方法だと思うのだが

**Name_Not_Found** · 2024/05/19(日) 16:10:56.39

問題ある部分に何が効いて不具合が出てるのか
開発者ツール使えば、ある程度分かるのにねぇ

**Name_Not_Found** · 2024/05/19(日) 19:41:15.52

>>470
16pxです。不具合は出ていません
最初に書きましたが、CDNを読み込んでも小さいです

**Name_Not_Found** · 2024/05/19(日) 20:12:35.50

ページのズーム倍率下がってたりして

**Name_Not_Found** · 2024/05/19(日) 20:30:02.99

あとは
ブラウザごとで違いが出るか？
スマホ、タブレット等ではどうなる？
フォントは何を使ってるのか？
そもそもbootstrapを使ったサイトは自作？テンプレート？

ハンター[Lv.209][SR武][SSR防][苗] · 2024/05/19(日) 21:02:23.53

>>474
俺もそれ書こうかと思ったけど、まさかね

**Name_Not_Found** · 2024/05/19(日) 21:46:37.63

>>474
普通に100％です。

>>475
違いはでません。フォントも設定してないです。
Viteは使っていますが、vscodeでHTML作成して
CDNでbootstrapを読み込んだら、小さく感じました。

ここまで質問して思ったのですが、
自分の目の問題かもしれません。

ChatGPTやcopilotをよく使っているので、
あの文字サイズに慣れてしまったわけで、
他のサイトの文字を小さく感じるのかもしれません

**Name_Not_Found** · 2024/05/19(日) 21:54:46.25

だから皆さん開発者ツールで何pxかって尋ねてるのでしょ
昔はブラウザのフォントサイズは14pxにしてたのだけど、
個人のHPを立ち上げた時は16px基準にしたらしばらく字が大きく感じ過ぎてなw

**Name_Not_Found** · 2024/05/19(日) 22:07:49.90

>>477
だったら本家のサンプルファイルは同じ16pxなのに
そっちは小さくない（>>464）っていうのが意味不明

**Name_Not_Found** · 2024/05/19(日) 22:25:37.96

>>479
Zの知能舐めすぎ
>>477なら、まともな知能があれば最初に行う、サンプルと自サイトの窓を横に並べて見比べる事もしてないんだろ
そういえば最近の連中はスマホから入るから複数の窓を同時に使うという感覚が無いと聞いたような気も

**Name_Not_Found** · 2024/05/20(月) 07:50:46.02

>>480
デュアルディスプレイなので、見比べてはいます。
さすが全ての情報を開示して説明できないです。

自分が期待した答えは「◯◯だと小さくなる」
でしたが、まさか当たり前（HTMLやコンソールの確認など）
についても四の五の言われると思いませんでした
質問に答える気がなく、単にいじめてるだけじゃないですか

**Name_Not_Found** · 2024/05/20(月) 07:52:40.77

お前らなんてAIに劣るんだから
AIにできない過去の経験を語るぐらいしかないのに
よくもなぁ、チクチク小姑みたいに突っ込んでくるのな
どうせこの後も難癖つけるんだろ？やってることが古いんだよ

**Name_Not_Found** · 2024/05/20(月) 08:22:30.50

>>481
コードとかスクショとか、再現するための情報を出さずに「気がする」なんて曖昧なことしか書かなけりゃ、そりゃ基本的なとこからの確認になるわな

**Name_Not_Found** · 2024/05/20(月) 08:25:52.37

>>481
求めている答えが得られない理由は「質問の仕方が悪い」「情報が足りない」「態度が悪い」のどれかよ

**Name_Not_Found** · 2024/05/20(月) 08:27:20.65

>>482
じゃあさっくり答えてやれよ
できるもんならな

**Name_Not_Found** · 2024/05/20(月) 08:30:03.36

以前ここで聞いたら回りくどいもったいぶった教え方で本質的なことは隠して学習しろみたいな爺さんばかりで
ChatGPTに聞いたら爺さんのやり方の1000倍スマートなのを完璧に示してくれたことあったわ

**Name_Not_Found** · 2024/05/20(月) 08:55:22.68

>>481
なら最初からその証拠を上げれば済んだ話だろ
つまり、2画面同時に並べて、両方とも開発者ツール開いた状態で、フォントの大きさが違うと主張する部分を選択して、Styleが見えてる状態で、スクショ
これがあればこれまでの全てのやりとりは必要なかったろ
そしてこれが出来ないんだから、出来ない程度の超初心者と見なされて当然
お前の根底に「僕が間違ってるわけがない」の超初心者あるあるがある点からも

本当にブラウザ/OS/フレームワーク/CDNのどれかにバグがあるのなら、
当たり前だが第三者が確認出来る証拠と再現方法を示す必要がある
だからまともな奴なら最初から上記スクショが出てくるんだよ

> 自分の目の問題かもしれません。
ああこいつは駄目だ、もう二度と相手にしないようにしよう、とリアルなら思われるよ
逆にこういうクズが無罪放免されてしまうから質が上がらなくて酷いままなのがネットだが

まあお前は(ビジネスに必要な、正しい意味での)コミュ障って奴だ
何を伝えれば相手に通じるか、まるで分かってないというね
最低限これだけ示せば誤解の恐れがない、というところまでは伝える必要があって、
言及してない部分は各自が想定する一番確率の高いもので補完されて当然
マヌケな事を書いてるからマヌケ扱いされてるのは至極妥当
話が進まないのはお前の問題

ああ一応言っておくと、
> 自分が期待した答えは「◯◯だと小さくなる」
俺らが想定してるのは、「お前の○○が間違ってるんだよ馬鹿タレ、小さくはならねえよボケ」だ
だから俺らはお前のどこが間違ってるか、間違い探しをしてて、
だからお前は「絶対に僕は間違ってないもん！！！」と俺らにも納得せざるを得ない証拠を出す必要があるわけ
そしてこれがないとバグレポートも出来ないだろ
お前は何から何まで、本当に何も分かってない
だから話が進まない

**Name_Not_Found** · 2024/05/20(月) 09:48:37.06

その具体例を思い出せない爺さん

**Name_Not_Found** · 2024/05/20(月) 11:43:52.65

box-sizing: border-box;はheightをpxで指定すると効くけど
height:auto;にしたら効きませんでした。
どうすればheight:autoでも効きますか？

**Name_Not_Found** · 2024/05/20(月) 11:51:22.83

効いてるよ

**Name_Not_Found** · 2024/05/20(月) 16:04:56.44

widthやheightってautoにするとborder-boxは無視されるんじゃなかったっけ？

**Name_Not_Found** · 2024/05/20(月) 17:50:15.31

されないが

**Name_Not_Found** · 2024/05/20(月) 21:59:13.05

試してみれば分かるがされる

**Name_Not_Found** · 2024/05/20(月) 23:35:02.52

なにをもってborder-boxが無視されると言ってるの
border-boxの仕様のほうを勘違いしてんじゃないの

**Name_Not_Found** · 2024/05/21(火) 00:38:39.02

確認したけど効いてるね
見た目は同じになるはずだけど、getComputedStyleを使ってheight/widthを取得するとちゃんとborderの分の差が出るよ

**Name_Not_Found** · 2024/05/21(火) 01:15:11.17

開発ツールでは無視されてるように見えるだけってこと？

**Name_Not_Found** · 2024/05/21(火) 08:08:52.71

見えない

**Name_Not_Found** · 2024/05/21(火) 08:39:10.30

「box-sizing: border-boxが効いていない」と思うのであれば、なにか認識が食い違っているのではなかろうか

box-sizingとheight: autoに対する自分の認識はこう

box-sizing: border-box;
height: auto;
border: 10px solid red;
こうスタイルを指定した要素は「子要素がボーダーの内側に収まる」ようになるので
計算済みのheightは「子要素によって計算される高さ+20px(上下のボーダー)」
になる
box-sizing: content-boxにすると「子要素がボーダーの内側に収まる」のは変わらないけど「ボーダーが高さの計算に入らなくなる」のでその分小さくなる

**Name_Not_Found** · 2024/05/21(火) 08:59:36.33

「height:autoだと子要素がボーダーの内側に収まるように計算される」のはbox-sizingの指定では変わらんので、画面上の見た目も開発者ツールの計算済みタブの図で表示される数値も変わらん
これが「効いていない」ように見えているだけではないかな……

**Name_Not_Found** · 2024/05/21(火) 11:21:04.55

質問です
以下のコードにpic1を上下中央揃い、
テキスト１が改行してheightが広くなっても画像が上下中央揃いになるようにしたいです
どのようにすれば上手くできるでしょうか？

[HTML]
<div id="main">
<div id="acmenu">
<dl>
<img src="pic1">
<dt>テキスト１</dt>
<dd>
本文１
</dd>
</dl>
<dl>
<dt>テキスト２</dt>
<dd>
本文２
</dd>
</dl>
<dl>
<dt>テキスト３</dt>
<dd>
本文３
</dd>
</dl>

</div>
</div>

**Name_Not_Found** · 2024/05/21(火) 11:22:55.10

[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;
}}}}

**Name_Not_Found** · 2024/05/21(火) 11:28:51.29

>>500
><dl>
><img src="pic1">
><dt>テキスト１</dt>
dl直下にimgはダメ

**Name_Not_Found** · 2024/05/21(火) 11:43:27.91

>>502
ありがとうございます、そうだったんですね！
どのような感じで書けばよいのでしょうか…？

**Name_Not_Found** · 2024/05/21(火) 13:26:20.98

>>502
ありがとうございます、解決しました！

**Name_Not_Found** · 2024/05/21(火) 15:28:13.23

>>498-499
横からだけど、なるほど分からん、と一瞬思ったが
height:autoだと、content-boxでもborder-boxと同じく「ボーダーの内側に収まる」という前提でheightが計算されているから
content-boxのコンテンツ領域の数値はborder-boxの数値と同じになるって考えたら理解できた（何言ってるのか分かりにくいとは思うが）
というか開発者ツールでマウスオーバーで表示されるフローティングボックスだけ見ちゃってて、計算済みタブの方でheightに差が出てるの見落としてたわ
解説ありがとう、勉強になりました

**Name_Not_Found** · 2024/05/23(木) 14:52:59.88

（１）beforeはaaa:beforeのように:が１つの場合で書いてあったりaaa::beforeのように
:が２つで書いてあったりするところがあるけど違いはありますか？

（２）style="aaa:before"のようにstyleの中でbeforeは使えますか？

**Name_Not_Found** · 2024/05/23(木) 15:00:35.12

>>506
1　違いはない　:hoverなどの疑似クラスと区別するため推奨される記法

2　できない

**Name_Not_Found** · 2024/05/23(木) 15:02:18.54

>>506
コロンひとつでも問題なく動いちゃうけど
擬似要素は二つ書くことになってます

htmlのstyleでは擬似要素を書くことができません

**Name_Not_Found** · 2024/05/23(木) 15:17:31.11

擬似要素のコロン1つはCSS2.1までの互換のために残ってるだけなので使わない方がいい

**Name_Not_Found** · 2024/05/28(火) 01:22:52.49

WindowsPC版のChromeの拡張機能のstylusで、youtube画面の不用な機能の非表示などをカスタマイズしています。
ミニプレイヤーを無効にしたく、以下の定義の追加でミニプレイヤーのボタンは非表示にできたのですが、

#movie_player .ytp-right-controls button.ytp-miniplayer-button {
display: none !important;
}

タッチパネルが付いてるPCだと、動画再生エリアをタッチしながら下へスワイプすると、
ミニプレイヤーに切り替わってしまう事が判りました。
この動作を無効化したいのですが、方法がありましたら教えてください。

所々、style="touch-action: ～"のような属性がページ内にあるのでこの辺りが怪しいと思ってるのですが、
どうしたらいいかまでに至ってません。

**Name_Not_Found** · 2024/05/29(水) 06:53:07.62

ここはWeb制作板です

**Name_Not_Found** · 2024/05/29(水) 13:43:44.80

回答しないつもりなら黙っとればええのに
ChatGPT4o曰くCSSの適用だけでは不十分でTampermonkeyでjavascriptも使えだとさ

**Name_Not_Found** · 2024/05/29(水) 13:47:56.88

>>512
板違い消えろ

**Name_Not_Found** · 2024/05/29(水) 13:51:48.83

板違いなのかな？どこで質問したらいいですかね
CSSとかに詳しそうだったのこの板ぐらいしか見当たらんのだけど

**Name_Not_Found** · 2024/05/29(水) 13:52:27.76

<div><a></a><div><div></div></div></div>
となってる塊全体を指定するにはどうしたらいい?

**Name_Not_Found** · 2024/05/29(水) 13:55:23.82

割とこの話って外人のサイトでも大した情報出てなくて困ってるんだよね
>>1読んでこのスレなら大丈夫そうかなーと思ったらまさか自治厨に煽られるとは
ちょっとでも仕方ねー調べてやっか的な心は芽生えなかったかね？

**Name_Not_Found** · 2024/05/29(水) 14:01:25.70

>>515
一番最初のdivを指定すればいいんじゃない？
classつけたほうがわかりやすいね！

**Name_Not_Found** · 2024/05/29(水) 14:07:15.10

他にも関係ないdivはいっぱいあって
この並びになってるとこだけ抜き出したい

**Name_Not_Found** · 2024/05/29(水) 14:07:34.73

>>518
classをつけよう

**Name_Not_Found** · 2024/05/29(水) 14:09:39.06

他人が書いてるのでclassは付けられません

**Name_Not_Found** · 2024/05/29(水) 14:10:49.38

パターンマッチを知らんと見えるが
このパターンになっていたらというような条件はCSSでは書けない
残念だったね

**Name_Not_Found** · 2024/05/29(水) 14:10:57.48

状況としてはスクレイピングしていて、特定のデータを抜き出す為のセレクタの書き方

**Name_Not_Found** · 2024/05/29(水) 14:13:31.96

>>522
板違い消えろ

**Name_Not_Found** · 2024/05/29(水) 14:16:37.05

脊髄反射すぎね？100歩譲って今日だけおかしなのが暴れてるとしようか

**Name_Not_Found** · 2024/05/29(水) 14:19:22.27

<div class="aaa">aaa1</div>
<div class="aaa">aaa2</div>
<div class="aaa">aaa3</div>

このように子要素はないけど
class="aaa"の２番目（つまりaaa2）の部分だけbackground-color:#ffff00とするには
どのようにセレクタを指定すればいいんですか？

**Name_Not_Found** · 2024/05/29(水) 14:20:42.80

おさらいしよう
ローカルルール
>扱う話題
>　HTML、CSSなどのサイト制作の技術
>　JavaScript、VBScriptなどのクライアントサイドプログラム
>　Webサイトの運営および管理についての情報交換・雑談
>　2chでは荒らし依頼はできません
>板違いな話題
>　ネット上の事象の観察→『ネットwatch』
>　レンタルサーバー、ドメイン→『レンタル鯖』
>　HPの宣伝、ネットするだけで儲かる話等→『宣伝掲示板』
>　CGI、Perl、PHPなどのサーバサイドプログラミング→『WebProg』
>　Flash制作→『FLASH・動画』
>　アフィリエイト、ネット広告の話題→『Web収入』
>　アダルトサイトの制作関連→『ウェブマスター』(21禁)
このスレ
>ここは初心者からベテランまで、全ての人を対象に優しく答えるスレです
>類似質問、重複質問、丸投げ大いに結構。HTML / CSS 関係の事なら何でもOK

**Name_Not_Found** · 2024/05/29(水) 14:24:11.98

>>525
何番目のタグとか大雑把に指定できたと思う
0オリジンならdiv[1]とかそんなだったかと(うろ覚え)

**Name_Not_Found** · 2024/05/29(水) 14:28:01.57

能力を超えるものは板違い

**Name_Not_Found** · 2024/05/29(水) 14:32:59.50

まあ匿名じゃ所詮このレベルだよな
本当に解決したいなら技術系SNSで聞いた方がいいよ

**Name_Not_Found** · 2024/05/29(水) 14:35:42.28

chat-GPTにまず聞け
このスレでちゃんと回答が出てくる耳タコ質問系なら一発で解決する場合が多い

**Name_Not_Found** · 2024/05/29(水) 15:02:15.53

chat-GPTにレガシーサイトのソースを完全書き換えさせようと試みたけどまだ無理だわ

**Name_Not_Found** · 2024/05/29(水) 15:25:47.21

最初はパターンマッチだったんだよな
まだpythonよりperlが主流な頃
bs4がいけてるよ、findよりもselectがいけてるよ、という流れなのに、
また原始的な方法に戻らないといけない

**Name_Not_Found** · 2024/05/29(水) 16:50:27.16

ほんとゴミ人間は板違いすら認識できないのは、同じ人間ではないわな
猿がキーボード叩いてそうw

**Name_Not_Found** · 2024/05/29(水) 16:55:12.72

相手が知らなくて自分が知ってることを回答して気持ちよくなりたいんだから、
知らないこと聞くような奴は来るんじゃない

**Name_Not_Found** · 2024/05/29(水) 17:04:16.85

>>525
class名ごとにカウントできる仕組みにアップデートまだー

**Name_Not_Found** · 2024/05/29(水) 17:10:28.08

>>534
知らないんじゃなくてnthセレクタじゃ無理だからjs使わないとできないんだぞ池沼

**Name_Not_Found** · 2024/05/29(水) 17:53:52.12

>>525
aaaクラスしかないのなら
.aaa:nth-of-type(2) {
　background-color:#ffff00;
}
で問題ない

**Name_Not_Found** ころころ · 2024/05/29(水) 18:10:41.31

>>515
バカみたいだけど
div:not([class]):has(> a) {
}
これで一応選択はできるよ

**Name_Not_Found** · 2024/05/29(水) 18:29:51.22

これいいな
同じ<a>を何度も選択しないのがいい
これで荒く拾っておいて、あとは条件に合わないのを弾けば十分使える
1階層まではパターンが書けるのか

**Name_Not_Found** · 2024/05/29(水) 18:50:10.33

div:has(> a + div)
これで完全なものが得られた

**Name_Not_Found** · 2024/05/29(水) 19:37:36.95

>div:not([class]):has(> a) {
>div:has(> a + div)
これに限った話じゃないけど1週間でも1ヶ月でも後で読んで何のことか判るものなの？
セレクタってもっと記述的に書けませんか？

**Name_Not_Found** · 2024/05/29(水) 19:40:27.90

保守性を考えるならclassを振るべき
classがいじれないとかいうバカ案件にはこういう邪道をやるしかない

**Name_Not_Found** · 2024/05/29(水) 19:43:29.93

コメントでも書いとけ

**Name_Not_Found** · 2024/05/29(水) 23:09:23.75

:has()なんて使ったことなくて、CSSでは無理と発狂しちゃうおじいちゃんは、
div:has(> a + div) なんて何してるか全く分からないだろうな

**Name_Not_Found** · 2024/05/29(水) 23:11:28.55

何故か質問する側の厨房が親切な回答者の威を借りてマウントするスレ

**Name_Not_Found** · 2024/05/29(水) 23:14:44.82

:is :not :where :hasなんてスレで頻出なのに
>>544は何が悔しくていじけているのかわからない

**Name_Not_Found** · 2024/05/29(水) 23:19:02.91

ほぞがw
あり得ないほどほぞが噛まれているwww
しかも速攻で

CSSは無駄に奥が深いので、迂闊に無理とか言っちゃ駄目だぞ

**Name_Not_Found** · 2024/05/29(水) 23:29:58.95

板違いを指摘された子が荒らしに進化したパターンかな

**Name_Not_Found** · 2024/05/29(水) 23:31:16.15

たまに発生するキチガイやルビキチをNGするためにこの板にもワッチョイあればいいのに

**Name_Not_Found** · 2024/05/29(水) 23:35:12.82

板違いだと思っちゃう子は基準レベル以下なんよな
絡まない方がいいよ

**Name_Not_Found** · 2024/05/29(水) 23:37:22.97

>>514
まだ冷静
>>516
キレはじめ

**Name_Not_Found** · 2024/05/29(水) 23:38:19.52

>>550
もうキレちゃってなぜか質問キッズなのに回答へのお礼もなく荒らすことしか頭にない

**Name_Not_Found** · 2024/05/29(水) 23:42:00.88

次から次へとほぞが
なかなかの良問だったみたいだな

**Name_Not_Found** · 2024/05/29(水) 23:45:41.49

真面目な話
更新でコンテンツ増減したり順番が変わったりラッパーが増えたりするのに
意地でもclass付けずにパズルみたいな疑似クラス使ってるオナニーコードはたまにある

**Name_Not_Found** · 2024/05/30(木) 01:53:59.28

ブロック対策には有効

**Name_Not_Found** · 2024/05/30(木) 06:45:36.63

>>554
そういうの引き継ぎたくないわー
絶対やだわー

警備員[Lv.39] · 2024/06/03(月) 19:29:43.52

育成

**Name_Not_Found** · 2024/06/05(水) 13:53:13.15

専ブラのsikiのCSS触ってみてるけどワケワカメ

**Name_Not_Found** · 2024/06/05(水) 14:19:00.19

今どきCSSを手で書くってどういう時?

**Name_Not_Found** · 2024/06/05(水) 20:33:04.75

chatGPTにでも書かせるの？