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

**Name_Not_Found** · 2023/08/23(水) 18:52:13.52

ここは初心者からベテランまで、全ての人を対象に優しく答えるスレです
類似質問、重複質問、丸投げ大いに結構。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/

**Name_Not_Found** · 2024/06/26(水) 11:26:01.97

関係ないわ

**Name_Not_Found** · 2024/06/26(水) 11:45:03.20

>>616
>>618
わかってるみたいだから答えてあげればいいのに

**Name_Not_Found** · 2024/06/27(木) 01:40:46.37

回答するとしたらGitHub使わないで全てGoogleのサービス使えばいいだけ

**Name_Not_Found** · 2024/06/27(木) 03:18:21.13

社員番号とパスで制限つけたフォームページ作ってファイルを吐き出すだけの単純なことなのか
どうしてもスプレシート使わなくちゃいけないのか
具体的な内容がわからんから誰も代替案を出せないし他スレへの誘導すらできない

前者でフォームデザインやcssでわからない事があればここで聞けばいい
そうでないならスレチ

**Name_Not_Found** · 2024/06/27(木) 14:30:21.65

GitHub pagesもHTMLとCSSで作られてるんだからケチ臭いこと言わないで答えてやれよ
どんな質問にも優しく答えるスレなんだろ？

**Name_Not_Found** · 2024/06/27(木) 15:02:55.41

まだ荒らしよるんか

**Name_Not_Found** · 2024/06/28(金) 06:08:04.50

>>607
glidもflexも覚えりゃ便利なのでマスターすべし二刀流

**Name_Not_Found** · 2024/06/28(金) 15:45:02.75

link rel="canonical"で質問です。

毎年1回タイトルの○○年だけを変えて新規の記事をアップしています。
タイトルの年以外と各表題(h2)は同じですが、内容＝本文は毎年違います。

以前書いた記事のhref=は

(1)毎年そのままでいいでしょうか？
hage2021.html：href="https://hoge.com/hage2022.html";
hage2022.html：href="https://hoge.com/hage2023.html";
hage2023.html：href="https://hoge.com/hage2024.html";
hage2024.html：なし

(2)全て最新年に毎年書き換えるべきでしょうか？
hage2021.html：href="https://hoge.com/hage2024.html";
hage2022.html：href="https://hoge.com/hage2024.html";
hage2023.html：href="https://hoge.com/hage2024.html";
hage2024.html：なし

**Name_Not_Found** · 2024/06/28(金) 18:16:46.19

>>626
スパマーは死んでくれ

**Name_Not_Found** · 2024/06/28(金) 18:46:29.44

>>626

> タイトルの年以外と各表題(h2)は同じですが、内容＝本文は毎年違います。

内容の異なるページなので(1)も(2)もcanonicalの誤用
検索エンジンに無視されていると思われます
実際に検索して要確認

SEO的なcanonicalの役割は
内容が変わらないページが重複インデックスになり
ペナルティを防ぐ為のです

例えば
https://hoge.com/hage2022.html";
https//hoge.com/hage2022.html"
https://www.hoge.com/hage2022.html";
http://www.hoge.com/hage2022.html";
が重複インデックスになりペナリティを防ぐために
canonicalに以下のように指定して重複インデックスを防ぐものです
https://hoge.com/hage2022.html";

**Name_Not_Found** · 2024/06/28(金) 20:10:09.09

>>627
は？何がスパマー？

>>628
ずっと(2)の方法で全てインデックスされ、かつ全て検索上位に来てます。
その意味で、その行は無視されていたのですね。

別で正規化と「重複」ページには使用していて、
また最新年だけヒットしてくれればいいので（といってnoindexではない）「類似」ページとしていましたが誤用だったのですね。
ありがとう。

**Name_Not_Found** · 2024/06/28(金) 23:03:13.12

ちなみに「類似」ページには間違いないです。
それがgoogleの言う「類似」とは違うのかもしれませんが。
その点で各ブログの例はどれも参考になりませんでしたので。

**Name_Not_Found** · 2024/06/29(土) 03:55:57.54

GoogleはSEOの評価方法変えすぎ

**Name_Not_Found** · 2024/06/29(土) 04:59:55.98

SEOはスレチ

**Name_Not_Found** · 2024/06/29(土) 09:55:05.73

スレチでもない
head内に書く
<link rel="canonical" href="正規ページURL">
の意味を語っている流れなので

**Name_Not_Found** · 2024/06/29(土) 10:15:18.95

>>633
SEOはスレチ

**Name_Not_Found** · 2024/06/29(土) 15:40:44.17

頑固だね

**Name_Not_Found** · 2024/06/29(土) 18:40:53.51

**Name_Not_Found** · 2024/06/29(土) 21:42:10.21

SEOはスレチ

**Name_Not_Found** · 2024/06/30(日) 01:18:32.35

スレチにすると過疎るじゃん

**Name_Not_Found** · 2024/06/30(日) 19:32:35.34

やたらSEO嫌う人って自分のが上位に来たことないんだろうな
正しい記述とSEOの関連性を理解してないから

**Name_Not_Found** · 2024/06/30(日) 20:24:52.03

↓こっちでやりたまえ
【SEO】Google対策パート84【Google】
https://mevius.5ch.net/test/read.cgi/hp/1567608679/

**Name_Not_Found** · 2024/07/01(月) 17:32:16.22

いや誰もそこ行くほどの話してないからｗ

**Name_Not_Found** · 2024/07/01(月) 18:19:31.96

>>641
SEOはスレチ

**Name_Not_Found** · 2024/07/01(月) 20:41:37.64

とりあえずNGに入れといた

**Name_Not_Found** · 2024/07/02(火) 02:53:21.99

>>643
スレチ

**Name_Not_Found** · 2024/07/02(火) 20:57:03.56

>>642
スレチ

**Name_Not_Found** · 2024/07/25(木) 18:14:11.86

古いキーボード
https://i.imgur.com/cmjjdKf.jpeg

**Name_Not_Found** · 2024/08/01(木) 16:09:33.13

最近CSSのネストを知って便利でたくさん使ってるんだけど、開発ツールで他のサイト見ると全然使われてないのが気になる
何か問題があったりするの？

**Name_Not_Found** · 2024/08/01(木) 16:15:34.11

古いブラウザだと使えないからじゃないかな
iOSが一つ前(iOS16)のSafariだとネストはダメみたいだし
もしくはscssで書き出してるから

**Name_Not_Found** · 2024/08/01(木) 16:22:12.07

現場だとクライアントやユーザーがどんな訳わからんブラウザでみてるかわからないから最新のプロパティや構文はまだまだ使いづらい
ある一つのためだけにフォールバックやポリフィル入れるくらいなら従来の書き方でいいとなる
IEがあった時よりマシだが

**Name_Not_Found** · 2024/08/01(木) 16:59:17.96

CSSネストはまともに使えるようになってまだ1年もたってないからねぇ

**Name_Not_Found** · 2024/08/02(金) 00:49:14.54

わ即レスくれてたんだ、ありがとうお三方
対応ブラウザかーそうだよね普通はそういうの考えなきゃだから大変だよね
うちは自分しか見ないからそれ自体に問題がある訳じゃないならどんどん使っちゃおう

**Name_Not_Found** · 2024/08/03(土) 10:03:16.20

今まで:has-text(AAA)を一言ずつ記述しNGワード扱いとしてきましたが、これらを可能な限り一行へまとめることはできないでしょうか
:has()には:has(AAA, BBB, CCC)という手段があったものの:has-text()では適用されず

##[class*="XXX"]:has-text(AAA)の縦列→##[class*="XXX"]:has-text(AAA, BBB, CCC)的な感じでまとめたいです
よろしくお願いいたします

**Name_Not_Found** · 2024/08/03(土) 12:37:41.17

>>652
:has-textはcssではなく広告ブロック独自の物
カンマ区切りができない代わりに正規表現は使えます

**Name_Not_Found** · 2024/08/03(土) 12:59:03.51

>>広告ブロック独自
そうでしたか、長年の疑問を補えました
##[class*="XXX"]:has-text(AAA+BBB+CCC)で上手くいきそうです
有難うございました

**654** · 2024/08/03(土) 13:02:06.01

AAA+BBB+CCCでは上手くいきませんでしたorz

**Name_Not_Found** · 2024/08/03(土) 13:16:27.07

>>655
/AAA|BBB|CCC/
あとは広告ブロックスレでどうぞ

**Name_Not_Found** · 2024/08/03(土) 13:19:51.69

うおおおおおおお
正規表現という用語をヒントに検索しまくったら色々出てきよったｗｗｗ
:has-text(/(AAA|BBB)/)で奇跡の到来！！！！いやー頑張ったわー

**Name_Not_Found** · 2024/08/03(土) 13:23:08.80

>>656
自己解決してしまいましたが、ヒントになる助言を有難うございました
似ているそちらのコードの方が簡略化出来そうなので試したいと思います

また、広告系のスレはスクリプトで全滅＆こちらの住人達より質が劣っているようでして^^;
ですが「cssではなく広告ブロック独自の物」であるなら仰る通りでしょうね・・・残念です

**Name_Not_Found** · 2024/08/03(土) 15:54:16.30

劣っていると他人を見下してるが
ここと同じ様に関係ないスレで関係ない質問して放置されてるだけな気がする
正規表現だと教えてもらってなお正規表現スレに行こうとしないし

**Name_Not_Found** · 2024/08/03(土) 17:36:52.78

^^;

**Name_Not_Found** · 2024/08/03(土) 17:37:49.98

>>659
教えて君に構っちゃダメ

**Name_Not_Found** · 2024/08/19(月) 08:39:17.57

>>657-658
この賢者タイムのチー牛おもしろいなw

**Name_Not_Found** · 2024/09/21(土) 12:45:26.33

<ul style="display:flex;width:80%;list-style:none;margin:0px;padding:0px">
<li><img scr="test1.png"></li>
<li>aaa</li>
<li><img src="test2.png"></li>
</ul>

aaaの部分のli幅をul全体の幅からtest1画像幅とtest2画像幅を引いた幅にしたいんだけど
どのようにすればできますか？
画像の幅はウインド幅によって変わるものとします。

**Name_Not_Found** · 2024/09/21(土) 13:19:59.48

aaaのliにwidth:100%を指定すればええんちゃう
https://jsfiddle.net/7mkvnfxs/

**Name_Not_Found** · 2024/09/21(土) 14:46:52.15

aaaにflex-grow: 1;じゃだめ？

**Name_Not_Found** · 2024/09/21(土) 15:32:40.60

>>664>>665
どちらでもできました
ありがとうございます

**Name_Not_Found** · 2024/09/29(日) 11:18:15.18

JavaScriptを使用してインラインフレーム(iframe)内のコンテンツを切り替え
ttps://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q1017254935

↑こういうiframe内の情報をタブでhtml切り替えたい場合

<input type="button" onClick="changeFramePage('test1.html');" value="test1">
<input type="button" onClick="changeFramePage('test2.html');" value="test2">

この部分のtest1とtest2を外部htmlを読み込むんじゃなく
index.html自体に記述されたhtmlタグを読み込ませるにはどうやんの？

index.html
test1.html
test2.html
みたいに複数のhtmlじゃなくindex.htmlのみでタブ切り替えしたいんだけど

**Name_Not_Found** · 2024/09/29(日) 11:24:58.44

>>667
要素をidやclassを指定して変数にコピーを格納
格納したコピーをinsertAdjacentHTMLなどで挿入
そもそも同じhtml内ならそんなdom操作せずdisplayを切り替えたほうが早いと思う
いずれにせよjavascriptスレへ

**Name_Not_Found** · 2024/09/30(月) 11:17:58.42

**Name_Not_Found** · 2024/09/30(月) 11:30:16.20

>>669
1x1の透明PNGをプレースホルダとしてsrcに指定しておくか、
JSでロード完了するまでvisibility:hiddenにしておく

**Name_Not_Found** · 2024/09/30(月) 22:41:16.53

>>670
できました、ありがとうございました

**Name_Not_Found** · 2024/10/04(金) 11:36:28.58

もう生成AIにhtmlソース作らせるか修正させれば大抵やってくれるな

**Name_Not_Found** · 2024/10/04(金) 13:37:35.37

Noto sans jpにfont-feture-settingsが効くようになっとる！

**Name_Not_Found** · 2024/10/21(月) 09:45:48.74

右クリック禁止のサイトをCTRL+Sでローカルに保存してテキストとして開いて編集してるんだが右クリック禁止はHTML上のどの文に当たるの?
javaやscriptで検索して見て行っても分からない

**Name_Not_Found** · 2024/10/21(月) 09:57:21.36

oncontextmenu="return false;"
これが右クリック禁止
どこかにあるんじゃないか、bodyとかdivとかに

**674** · 2024/10/21(月) 12:18:46.92

>>675
これで行けたよ
回答ありがとうございます

**Name_Not_Found** · 2024/10/21(月) 13:45:30.03

スレ違いかもやけど。

海外の外部サービスを使ってメルマガ配信。
SEO を考え、まぐまぐのような所謂バックナンバーのページを自社ドメイン内でブログとして作りたい。

条件
・外部サービスではメルマガのソースは提供してない
・メルマガをメールアプリでソースをみても文字化けしてる

どうにかメルマガをキレイに HTML 化して、ブログの記事としてバックナンバーを作ることはできませんかね？

**676** · 2024/10/21(月) 13:48:20.94

メールアプリからPDFに保存してからHTML化するのも考えたけど、縦に長いメルマガだとPDFが分解されてダメでした。

**Name_Not_Found** · 2024/10/21(月) 18:24:30.47

ThunderbirdでメールをHTML形式で保存

**Name_Not_Found** · 2024/10/27(日) 22:19:38.16

比較的最近追加されたようなプロパティや単位などで実装レベルで便利なのあったらおせーてください
text-wrap: balance、
:has
とか使ってる？

**Name_Not_Found** · 2024/10/27(日) 22:21:39.95

>>672
まじそれ。javscriptを学ぶ意欲が無くなった
考える事も減ったし　製作者の思考力も低下していくと思う

**Name_Not_Found** · 2024/10/27(日) 22:27:38.35

>>648
それ。ネストがiOS対応してなくて絶望した

**Name_Not_Found** · 2024/10/27(日) 23:48:54.76

dvh、マジ助かる

**Name_Not_Found** · 2024/10/28(月) 03:37:04.74

>>680
:has()はなにかとお役立ち

**Name_Not_Found** · 2024/10/28(月) 13:12:41.07

マジでiOS消えてくれ
色々iOSのケツ拭くのめんどくせーわ

**Name_Not_Found** · 2024/10/28(月) 13:14:37.79

例えば何？

**Name_Not_Found** · 2024/10/28(月) 13:19:27.37

横からだがgridのalignやjustifyが特定の条件できかなくなることあったな
flexでもよい場所だったからflexにしたけど
あとはjsだけどiOSだけtransitionEndやanimationEndがちゃんと取得できないのでそれだけのためにpromiseに書き直したり

**Name_Not_Found** · 2024/10/28(月) 13:33:09.68

IE時代を知ってるか知らないかで反応が分かれそうやな

**Name_Not_Found** · 2024/10/28(月) 13:41:09.75

IEというのはいわば共通の敵だったんや
それがいなくなった今safariとfirefoxの独自仕様がうざいってことや
「IEはなくなってもうモダンなコーディングできるんじゃなかったのかよ！よくも騙したァアアア！」ってなるんや

**Name_Not_Found** · 2024/10/28(月) 14:37:24.98

>>686
たとえばlinear-gradientで、transparentが使えないからrgba使ったりな
今は知らんけど

前に案件でネスト使って構築したら、
最新じゃないiOSのsafariでみれなくて、全部書き直したわ

いちいちめんどい

**Name_Not_Found** · 2024/10/28(月) 14:47:47.08

昔のIEでよくあったような「safariとfirefoxのこのバグに気をつけろ」みたいなtipsの令和最新版がほしいな

**Name_Not_Found** · 2024/10/28(月) 14:57:02.49

ワシも横からだが、flexだかfloatだかのリセット用？にdisplay:table;が指定された
空の疑似要素に、safariだけ勝手に1pxの余白が挿入されて、原因が分からず
小一時間ハマった事ある
自分で書いたものではなく海外製のjqueryプラグインで色々と面倒臭かった

**Name_Not_Found** · 2024/10/28(月) 15:05:49.58

chmって元はhtmlなんだろ
pdfよりよっぽど使いやすいのに何で普及しなかったんだろう

**Name_Not_Found** · 2024/10/28(月) 15:11:55.01

>>691
よく検索するとまとまってないのよねー
いま、Firefoxのgridがおかしくて泣いてる

**Name_Not_Found** · 2024/10/28(月) 15:21:03.26

>>694
画面幅がこうで、親要素がこうだと、子要素このプロパティがなんかおかしいんだけど？くらいまで自分で見当つければヒットしたりはするんだけど
英語のフォーラムしかないとかね

**Name_Not_Found** · 2024/10/28(月) 16:00:23.40

ルビカス死ね

**Name_Not_Found** · 2024/10/28(月) 17:03:54.10

>>692
その昔、ワイはハマると6時間とか平気で潰した事あったわ・・
今は情報もたくさんあるしAIもいるしでほんと環境はよくなったね

**Name_Not_Found** · 2024/10/28(月) 17:07:30.37

>>688
トップページがIE6で崩れてる事を不意打ちで言われたときの冷や汗やばかった
floatの崩れかたってクラッシュ感が半端ない

**Name_Not_Found** · 2024/10/28(月) 17:59:44.13

そもそも複数のブラウザが未だhtmlの仕様統一されてないのが糞なだけ

**Name_Not_Found** · 2024/10/28(月) 18:06:10.63

にもかかわらずWebエンジン増やそう！って勢力が未だにおるんよな

**Name_Not_Found** · 2024/10/28(月) 18:26:25.27

エンジンは多様なほうがいいというのは事実なんだが
たかだか見た目の描画に差があるのが問題
多様性ってのはあの処理は早いけどこの処理は苦手だよねとか
あのセキュリティホールは他は無事だったねとかそういうもんなのに
cssやjsごときの解釈で見た目が崩れますとかアホかと

**Name_Not_Found** · 2024/10/29(火) 00:41:29.78

HTML5って5.2とか5.3でマイナーチェンジしてるみたいだけど
何が違うの

**Name_Not_Found** · 2024/10/29(火) 02:13:30.18

>>694
解決したら情報を共有してもらえるとありがたいっす

**Name_Not_Found** · 2024/10/29(火) 03:01:10.28

CSSはUA CSSが異なればデザインやレイアウトも変わる仕様なので、ある程度は仕方ない。
その問題ならリセットで解決する。

jsにしても仕様に書かれてない部分は実装依存なのだから、仕様外の部分に共通性を求めているならそれは間違い。

勿論、仕様通りに実装されてないならバグ。
けど、文章読む限り、仕様と実装を区別できてるのかなと思った。

**Name_Not_Found** · 2024/10/29(火) 05:41:22.28

>>701
> たかだか見た目の描画に差があるのが問題
たかが見た目されど見た目

**Name_Not_Found** · 2024/10/29(火) 07:46:57.57

place-contet:centerでsafariだけ中央にならないとかgrid系はバグだらけ

**Name_Not_Found** · 2024/10/29(火) 07:56:47.26

>>704
リセットなんかしてるに決まってるやろ

**Name_Not_Found** · 2024/10/29(火) 13:17:39.06

>>703
原因はわかったので共有します　2点あります
1.
子要素を中央にする際に、子要素のtemplateにfit-contentを使うと
Firefoxでは中央合わせにならない
→解決策はfit-contentを使わない

2.
subgridを使う場合、子要素にimgが一番先の場合は
Firefoxではレイアウトが崩れる（画像下に謎のスペースができる）
→解決策はfigureで囲う

htmlとscssはこちらを参照
https://jsfiddle.net/r17vx2s0/1/

**Name_Not_Found** · 2024/10/29(火) 16:19:07.61

生成AIでベースになるhtml、javascript書かせた場合
javascriptってGPLとか著作権ってないの？

**Name_Not_Found** · 2024/10/29(火) 16:28:27.30

有ったり無かったりというか
javascriptに限らず、AIで出力されたコードの元になってるトレーニングデータの
ライセンス条件を確認する必要があるので、特に仕事で使うには注意が必要

**Name_Not_Found** · 2024/10/29(火) 16:30:33.84

> 元になってるトレーニングデータのライセンス条件を確認

じゃなくて「トレーニングデータの出所にライセンス条件を確認」だな

**Name_Not_Found** · 2024/10/29(火) 20:44:29.56

>>708
ありがとー！

**Name_Not_Found** · 2024/10/30(水) 23:00:21.56

nth-of-typeについて、最近(n+3)などの指定記述を覚え重宝しています
ついでにこれらで偶数奇数関係なく、2と3と7を指定みたいな記述方法は存在しないのでしょうか
(/|/)の様な正規表現と同様の使い方です
よろしくお願いいたしますm(vv)m

**Name_Not_Found** · 2024/10/30(水) 23:12:49.36

何個飛びとか法則性が無いんだったらカンマ区切りでセレクタ複数書くのと変わらない

**Name_Not_Found** · 2024/10/30(水) 23:14:28.92

ランダムに何回も出てくるんならクラス名付けたほうがよくない

**Name_Not_Found** · 2024/10/30(水) 23:25:24.68

:nth-of-type(2,3,7)ということでしょうか？
:has-text()に通用する記述なども試したのですが、全部エラーなんですよね・・・

やけくそで↓も試せど、こういうのはエラーにならない反面、当然のようにサイトへも反映されず
:nth-of-type(2):nth-of-type(3):nth-of-type(7)

a:nth-of-type(2)
a:nth-of-type(3)
a:nth-of-type(7)
のような縦書きコードを圧縮したいのですm(vv)m

**Name_Not_Found** · 2024/10/30(水) 23:51:34.83

みんなのコメントからたいへん勉強になった。CSSはAPIテストとは直接関係ないが、EchoAPIとフロントエンドのシームレスな動作により、スタイルをより統合することができると聞いて。おすすめ！

**Name_Not_Found** · 2024/10/31(木) 00:41:36.17

>>716
その縦書きをカンマで区切るって意味だよ
そもそも法則性がないなら順番で指定しようとするのが間違い
要素の増減や順番の変更に対応できないクソコードが生まれるだけ
>>715の言うとおり目的から考えたらclassをつけるのが正攻法