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/09(日) 08:31:24.31

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

**Name_Not_Found** · 2024/06/16(日) 21:59:14.87

インラインの CSS を上書きするにはどうしたら？

**Name_Not_Found** · 2024/06/16(日) 22:06:05.82

!important

**Name_Not_Found** · 2024/06/16(日) 22:13:54.23

ゴメン。
インラインに既に !important が入ってる場合です。

**Name_Not_Found** · 2024/06/16(日) 22:39:49.54

インラインのimportantは詳細度が最高なので同じくインラインでしか上書きできない
jsで削除するくらいしかない

**Name_Not_Found** · 2024/06/16(日) 22:59:48.91

ありがと。
そうか、CMS 側でもう決め打ちってことなのね。

**Name_Not_Found** · 2024/06/17(月) 02:12:51.62

<thead>には絶対に<th>を使わなくてはいけないという規格等はありますか？

**Name_Not_Found** · 2024/06/17(月) 03:59:09.64

無い

**Name_Not_Found** · 2024/06/17(月) 06:49:56.24

ありがとうございます安心しました
なるべく早くtabl;eタグ使わずに済むように精進します

**Name_Not_Found** · 2024/06/17(月) 09:50:04.83

そういうの『html 入れ子』でググれば出てくるよー

**Name_Not_Found** · 2024/06/17(月) 16:21:59.87

https://jsfiddle.net/m84csfn3/
↑こんな感じでsubgridを使ってレイアウトしたのですが、
3つ目のcard-item内に注釈を追加することになった場合、
ベストな方法を教えてください。
grid-row: span 3;を4にすると注釈がないカードに無駄な空きスペースが生まれるのを回避したいです。

**Name_Not_Found** · 2024/06/17(月) 17:01:16.89

>>578
ありがとうございます
親子関係で問題が無ければ親孫に影響しないという考えでいいのでしょうか
今回の件では<thead><tbody><tfoot>の子は<tr>であり、<tr>の子は<th><td>だから<thead>に<td>を使っても影響なし

**Name_Not_Found** · 2024/06/17(月) 17:43:18.30

>>579
card-item内はgridじゃなくflexにしたら？

**Name_Not_Found** · 2024/06/17(月) 18:02:03.36

>>581
ありがとうございます
注釈をabsoluteにして～とかいろいろ試してみたのですが
flexのほうが楽そうですね

**Name_Not_Found** · 2024/06/17(月) 21:16:14.74

>>580
そうだよー

**Name_Not_Found** · 2024/06/17(月) 22:25:32.04

>>579
gridでやるならsubgrid使わずに:has()でgrid-template-rowsの指定を分けるかなー
https://jsfiddle.net/a2x0rLfu/

まーでもflex使う方が楽ね

**Name_Not_Found** · 2024/06/18(火) 02:52:54.93

>>583
ありがとうございます！

**Name_Not_Found** · 2024/06/18(火) 13:24:01.41

そういう注釈の入れ方はデザイン的にどうよは別問題かな？ｗ

**Name_Not_Found** · 2024/06/19(水) 03:10:47.57

そういうデザイン指定なら再現するしかないさー

**Name_Not_Found** · 2024/06/19(水) 23:35:47.89

ゆいまーるさー

**Name_Not_Found** · 2024/06/20(木) 15:02:17.10

nth-chlidのof構文っていつから使えてたの？
便利ね

**Name_Not_Found** · 2024/06/20(木) 15:31:49.35

>>589
去年の5月にfirefoxが対応してモダンブラウザ埋まった

**Name_Not_Found** · 2024/06/20(木) 15:33:20.01

ありがとう！
地味に嬉しい

**Name_Not_Found** · 2024/06/21(金) 03:10:38.05

<br>を連続で使ってはいけない理由って結局何なんでしょうか
空白行用のcss？がわからなくて、ここ3行空けたいなとか写真の間に説明入れたい時とか多用しちゃってます
今の所不具合出てないのですがやめたほうが良いのでしょうか

**Name_Not_Found** · 2024/06/21(金) 09:21:15.53

段落の行間をあけるとかだったらcssでやるべきだけれど
単純にｎ空白行をというのなら使っちゃ駄目ということは無い
ただしレスポンシブでその空白行が見苦しくならないことが前提で

**Name_Not_Found** · 2024/06/21(金) 09:21:38.77

使っていけない理由は何もありません
1行分丸々空いちゃうのでデザイン的に使い勝手が悪いというだけで

**Name_Not_Found** · 2024/06/21(金) 10:17:44.56

使ってはいけないというのはどこの情報？

**Name_Not_Found** · 2024/06/21(金) 10:45:22.27

文書は文書、空白は空白
文書の一部である改行は段落を変えることであって空白にすべきではない

文書をコピペするとなぜか改行が3つついているとかクソでしかない

**Name_Not_Found** · 2024/06/21(金) 12:11:51.12

とりま、サルワカでも読んどけ

HTMLで改行する方法：brとpタグの使い分け方は？
ttps://saruwakakun.com/html-css/reference/br

**Name_Not_Found** · 2024/06/21(金) 12:42:33.89

>>592
空行を入れるなら段落が変わるのでp要素でマークアップすべき、という論理構造上の問題。
https://momdo.github.io/html/text-level-semantics.html#the-br-element

**Name_Not_Found** · 2024/06/21(金) 21:51:44.76

display:gridに移行しろって話もあるけどまだflexとinline-boxで戦えるの？

**Name_Not_Found** · 2024/06/21(金) 22:07:08.92

>>599
inline-boxはこれ以上、流行るも流行らないもないし覚えるならflexだけで十分
gridは、一部が未だ押してるけど、おそらくこのまま広まらないまま終わるのかな

**Name_Not_Found** · 2024/06/21(金) 22:25:53.02

subgridで覚醒したぞ
便利すぎる

**Name_Not_Found** · 2024/06/21(金) 23:32:31.35

移行じゃなくて追加やね
お手本は取っつき悪いけど、実際はきっちりtemplate指定しなくても使えるし、flexと同じぐらい便利
覚えないでいるのはもったいない

**あぼーん** · NG

あぼーん

**Name_Not_Found** · 2024/06/24(月) 00:36:29.30

flexboxで
画像　見出し
　　　テキスト
のような形からスマホだと
見出し
画像
テキスト
のようになるデザインがよくあるのですが、
この場合、当方はスマホ用の見出しを用意してdisplay:noneで出し分けしているのですが、
同じhtmlが二つになるため、良くないのではと思っています。
皆さんはどのようにしているのでしょうか？

**Name_Not_Found** · 2024/06/24(月) 00:39:09.32

>>604
grid-template-areasでPCとSPの配置変える
なんならSPはdisplay無指定（block）でPCだけgridにすることもある

**Name_Not_Found** · 2024/06/24(月) 00:40:47.94

↑わかりにくいかもですが、
見出しとテキストは同じdivに入っているようなイメージです

**Name_Not_Found** · 2024/06/24(月) 00:43:52.19

>>605
早速ありがとうございます！
gridはまだ学習していないので想定にありませんでした…
これを機にgridにも触れてみたいと思います

**Name_Not_Found** · 2024/06/24(月) 09:35:38.20

flexでもorderプロパティ使えばPCとSPでコンテンツの配置変更は簡単よ

**Name_Not_Found** · 2024/06/24(月) 10:00:56.32

gridが意味不明すぎてorderで長く頑張ってたが
二重になるよりはマシとはいえレスポンシブに対応するためだけのグルーピングdivが必要になったりしてたので
いまはgridやな

**Name_Not_Found** · 2024/06/24(月) 10:37:18.50

flex=VHS
grid=ベータ

**Name_Not_Found** · 2024/06/24(月) 10:45:25.21

dvdやろ

**Name_Not_Found** · 2024/06/25(火) 04:04:10.98

GitHub Pagesで営業マンの日報システムを無料公開できると喜んでいました
従業員10人以下で手書きの代わりにとりあえず簡単にデジタル化という目論見だったのですが…

（質問1）
入力フォームをグーグルスプレッドシートに送くるつもりでしたが
これだとソースコードにAPIもあるしシートのURLもあるので
悪意があれば勝手に改ざんできるということですよね？

（質問2）
ログイン画面も作れない（擬似的につくってもやはりidとpassがソースに書いてある）しどうするのがよいのでしょうか？

素人なので認証サーバーを経由して、などあまり難しいことはわかりませんがデータはcsvにしてメールで送信して、
あとは自動でExcelなどに取り込むとかでしょうか？

**Name_Not_Found** · 2024/06/25(火) 07:38:29.01

次の方、質問どうぞ

**Name_Not_Found** · 2024/06/25(火) 18:40:09.91

>>612
ここはHTML/CSSの記述に関する質問に答えるスレですので、
特定のWebサービスの構築に関する質問はスレ違いですね…

**Name_Not_Found** · 2024/06/25(火) 18:50:07.99

>>612
Googleフォームでええんちゃう？

**Name_Not_Found** · 2024/06/25(火) 21:10:57.85

Web系板なのに答えられないのか？

**Name_Not_Found** · 2024/06/25(火) 21:59:20.25

Web系板なら、無関係なスレで質問してもいいのか？

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

Webだから無関係とは言えない

**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スレへ