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

**Name_Not_Found** · 2021/07/29(木) 18:46:18.57

ここは初心者からベテランまで、全ての人を対象に優しく答えるスレです
類似質問、重複質問、丸投げ大いに結構。HTML / CSS 関係の事なら何でもOK
分からない人は何回聞いても結構。
質問するときはIDを出すためにメール欄を age にすることをおすすめします。
回答してくれる方は優しい人のみ！　質問者に対して暴言を吐く人はこのスレを見るな！！
終わった話を蒸し返すやつはこのスレにくるな！！！
自分で調べろという回答も禁止！！回答するかさもなくば何も書き込むな！！
質問側も節度あるレスで！質問前にスレ内を検索しましょう

■次スレについて
基本的にレスナンバー>>980を取った人（立てられない場合は次の宣言者）が立てて下さい
重複を避けるため、独断でスレ立てはせず必ず意思表示をしてから立てて下さい（>>980を取った場合も）
立てられない事が予め分かっている場合は、>>980付近の書き込みは自重しましょう

■前スレ
HTML/CSS のどんな質問にも優しく答えるｽﾚ 47
https://mevius.5ch.net/test/read.cgi/hp/1617839294/

■関連スレ
Webサイト制作初心者用質問スレ part252
https://mevius.5ch.net/test/read.cgi/hp/1595561376/

■HTML
HTML Living Standard 日本語訳
http://momdo.github.io/html/index.html

■CSS
Selectors Level 4 日本語訳
http://triple-underscore.github.io/selectors4-ja.html

**Name_Not_Found** · 2021/10/12(火) 21:12:51.56

>>756
WPではないです

**Name_Not_Found** · 2021/10/12(火) 21:30:52.69

>>750
> しかし、スタイルシートと同じ階層にあるCSSが反映されません。

とあるがindex.htmlと同じ階層の書き間違い？
それとも言葉のとおりにスタイルシートと同じ階層？
前者なら絶対パスでのリンクを試しておいで
後者ならcss(任意の名前)などの階層にcss入れてるだろうから
css/hoge.css等も変化ないのかね？

**Name_Not_Found** · 2021/10/12(火) 21:35:30.88

cssの読み込みが効かないって
定期的に出てくるなその質問ｗ

確か前の人はソースの記述ミスだったな
カンマが足りないとかそんなかんじだった

**Name_Not_Found** · 2021/10/12(火) 21:58:19.82

>>754
とりあえず<meta charset="UTF-8">は<head>の直後に書いた方がいい

**Name_Not_Found** · 2021/10/12(火) 22:33:54.44

>>754
キャッシュ削除して開発ツールのネットワークログ見て各cssが読み込まれてるか確認

**Name_Not_Found** · 2021/10/12(火) 23:18:48.98

とりあえずrootパスで書く癖つけようか

**Name_Not_Found** · 2021/10/12(火) 23:24:16.55

この件、>>758　が言っているように、パスの間違い、勘違いのように思えてた
もしキャッシュなら
style.css?10000
みたいにパラメータつけると解決するかも

**Name_Not_Found** · 2021/10/13(水) 00:42:01.04

たびたび申し訳ないです

さくらインターネットで独自ドメインのフォルダをつかっています

***sakuranejp/www/***com/css
　　　　　　　　　　　　　　　↑
　　　　　　　　　　　　　　ここにhogehoge.cssが集約されてるのですが
/cssのindex.htmlが反映されないのです

**750** · 2021/10/13(水) 00:43:28.06

名前いれわすれました

**Name_Not_Found** · 2021/10/13(水) 02:29:18.85

というかbgcolorは使わないように

**Name_Not_Found** · 2021/10/13(水) 02:33:39.31

日本語でおk

**750** · 2021/10/13(水) 02:54:36.66

解決しました
CSS自体には問題がなく、他のスクリプトと
連動させていたので、後者の方に問題があり
CSSが原因だと勘違いしてました

ご協力頂いた方々、ありがとうございました

**Name_Not_Found** · 2021/10/13(水) 17:59:47.66

よくある質問

CSSが効きません

過去に合った回答
・ソースに不備があった（カンマ足りない）
・CSSではなく連動させているスクリプトの方に問題があった

**Name_Not_Found** · 2021/10/13(水) 18:01:18.75

CSSに記述する画像の相対パスはCSS起点ってことに気付かずハマったことはある

**Name_Not_Found** · 2021/10/13(水) 18:53:24.30

出されてない情報が原因ってのが1番困る

**Name_Not_Found** · 2021/10/13(水) 19:50:56.74

俺が2年ぶり3回目でハマったのは
qiitaからコピペしたviewportのダブルクオートが全角だった
同じサイトからコピペして3回ハマることになるとは

**Name_Not_Found** · 2021/10/13(水) 20:15:00.26

>>772
あるそれ
大体打ち替えてる

**Name_Not_Found** · 2021/10/13(水) 20:19:41.92

>>772
自分も経験あるわそれ
ムキーッってなる

**Name_Not_Found** · 2021/10/13(水) 20:23:05.73

(t.replace(new RegExp('"' + '."'), ''));
こういうのに全角混ぜられるとイラッとするよね

**Name_Not_Found** · 2021/10/13(水) 20:31:23.41

そういうのの記事を書く時に動作確認した物を貼り付けないのかと不思議に思うわ
わざとトラップ仕込んで利用者の理解度をあげようとでもしてるのか？とまで思う程に

**Name_Not_Found** · 2021/10/13(水) 20:40:21.37

あれだろ、シンタックスハイライト使うのめんどくさいから
かといってソースそのまま貼ると、効いちゃうから
わざと全角にして効かないようにしてるんだろうけど
それにしても迷惑

**Name_Not_Found** · 2021/10/13(水) 21:01:03.41

コピペの仕様的ななにかなのかと思ってた

**Name_Not_Found** · 2021/10/13(水) 23:53:19.25

コーディングしててなんどやってもつまづいて
1日寝て書き直すとちゃんと動くっていうのもある
脳が疲れてるとエラーも見過ごしがち

**Name_Not_Found** · 2021/10/14(木) 07:13:57.23

css変数で
モバイル用の幅指定を指定したいのですが、次のようにやってもうまくいきません。（ブラウザに無視されます）

うまくやる方法はないでしょうか？

:root {
　　　--mob-wid: 701px;
}
@media screen and (max-device-width: var(--mid-wid) ) {　　←ここが701pxになってほしいのですが…

}

**Name_Not_Found** · 2021/10/14(木) 07:15:50.20

>>780
タイポしました（汗）

×　@media screen and (max-device-width: var(--mid-wid) ) {
○　@media screen and (max-device-width: var(--mob-wid) ) {

○のように書いてもうまくいきません。
何か間違っているでしょうか？

**Name_Not_Found** · 2021/10/14(木) 07:49:56.51

sass使ってもいいのよ

**Name_Not_Found** · 2021/10/14(木) 09:54:06.29

max-device-widthじゃなくてmax-widthにしたらどうなる？

device-width - CSS: カスケーディングスタイルシート | MDN
https://developer.mozilla.org/ja/docs/Web/CSS/@media/device-width

**Name_Not_Found** · 2021/10/14(木) 11:46:39.34

余り使ったことなかったのでちょっと調べると
値に使えるのがCSS変数とあって
投稿のような箇所で使ってる例が見つけられなかった
scssでも変数をセレクタとかに使う時にはインターポレーションして使うからなあ

**Name_Not_Found** · 2021/10/14(木) 14:01:56.34

メディア特性はCSSプロパティではないし、@～は:rootよりも外側になるわけだし

**Name_Not_Found** · 2021/10/14(木) 14:23:36.82

そもそも:root疑似クラスの意味

:root - CSS: カスケーディングスタイルシート | MDN
https://developer.mozilla.org/ja/docs/Web/CSS/:root

**Name_Not_Found** · 2021/10/14(木) 15:26:07.61

cssファイルでphpが使用可能になればみんな解決しそう

**781** · 2021/10/14(木) 16:23:07.61

みなさんどうもすみません＆ありがとです。

>>785
原因はたぶんこれですね。

**Name_Not_Found** · 2021/10/14(木) 17:53:32.12

余談だがcssのdevice-widthは非推奨だよ

>>787
sassで良くね？

**781** · 2021/10/14(木) 18:18:08.79

>>789
どうもです

@media screen and (max-width: 701px) {
に書き換えればいいようですね。

>>783
もうmax-device-widthは廃れるんですね。
気づいてよかったです！

**Name_Not_Found** · 2021/10/15(金) 00:38:07.93

>>789
変数使いたいだけなのにいちいちファイルが2つに分裂とかめんどい。
さらっと書いてさらっとアップして終わりたい

**Name_Not_Found** · 2021/10/15(金) 00:41:08.82

jsが進化してJQやライブラリなどでやってた事がもう
バニラで出来るようになっていってる。
cssも進化してscssが淘汰されるのも時間の問題だろう

**Name_Not_Found** · 2021/10/15(金) 00:43:28.29

PostCSSってのがよくわからん

**Name_Not_Found** · 2021/10/15(金) 00:57:28.89

種別としてはsassと同じCSSプリプロセッサだよ
sass(SCSS)はsass(SCSS)としての機能・文法がセットで全部決まってるけど
PostCSSはモジュールごとに自分とかチームとかで決めた入れたい機能だけ選んで導入する
例えばネスト機能だけ入れるとかね
逆に機能入れまくってsassより高機能にすることもできる
まだブラウザに実装されてない機能を先取りして使うjsで言うbabelみたいなこともできる
あとオートフォーマットとかもあったかな（うろ覚え）

**Name_Not_Found** · 2021/10/15(金) 01:14:46.59

>>792
cssが進化するならブラウザがscssを読み込めるようにしたほうが早いよね
まだ変数とかはscssと組み合わせてより便利にするのがいい段階だと思う
たとえばcalcが本格採用されたからといってプリプロセッサの演算機能が淘汰されたか？という具合に

**Name_Not_Found** · 2021/10/15(金) 01:16:50.24

今までemmetやfor文で頑張ってた連番や任意の値ごとのステップ増減なんかは
面白いセレクターができてやらなくてよくなったりするといいなと思ってる

**Name_Not_Found** · 2021/10/15(金) 08:39:37.05

**Name_Not_Found** · 2021/10/15(金) 09:45:02.59

>>794
なるほどありがとう

**Name_Not_Found** · 2021/10/15(金) 10:44:10.08

>>792
変数なんかはその流れを想起させるね
でもまああんまり高機能だとアクセスしづらくなるだろうから
まだまだ先の話っぽそうだね

**Name_Not_Found** · 2021/10/15(金) 18:15:41.20

5Gが浸透すれば、さらに高機能化するで

**Name_Not_Found** · 2021/10/15(金) 18:19:55.91

>>799
この業界は常に変化・進化し続けてるから常にアンテナ張って情報仕入れて勉強しないとな

**Name_Not_Found** · 2021/10/15(金) 19:22:39.50

>>800
ワクチン打ったけど5Gの対応遅いなー
どこに問い合わせすればいいんだ

**Name_Not_Found** · 2021/10/15(金) 21:55:37.21

漏れは、クレジットカードを持っていないので、スマホの契約に困っていたけど、
さっきヨドバシカメラへ行って、銀行のキャッシュカードで、UQ mobile と契約した

人生で、初めてのスマホ。
OPPO A54(5G), 4GB メモリで、キャンペーン価格で5千円だった

銀行引き落としで払える、格安スマホはかなり少ない

**Name_Not_Found** · 2021/10/15(金) 22:04:53.91

？？？

**Name_Not_Found** · 2021/10/16(土) 00:29:41.28

漏れって何？
水？

**Name_Not_Found** · 2021/10/16(土) 10:26:34.55

>>805
失禁してしまう高齢の自分を卑下する言い方

**Name_Not_Found** · 2021/10/16(土) 20:49:21.83

>>806
なるほど。ありがとう
>>803
生きるの大変そうだけど頑張ってください

**Name_Not_Found** · 2021/10/17(日) 12:50:55.08

line-heightの解除ってどうやるの？
<div style="line-height:30px">
aaa
<div>bbb</div>
</div>
子にはline-heightは適用したくないんだけど

**Name_Not_Found** · 2021/10/17(日) 13:12:14.78

子にline-heightを書く

**Name_Not_Found** · 2021/10/17(日) 13:40:48.75

>>809
何pxでもとの状態だかわからん

**Name_Not_Found** · 2021/10/17(日) 14:06:50.04

>>810
大抵body辺りに設定してる値になってそうだが
ディベロッパーツールのcomputedで未設定時の値を見ておいで

**Name_Not_Found** · 2021/10/17(日) 14:23:02.00

line-heightの初期値はnormal

**Name_Not_Found** · 2021/10/17(日) 16:36:11.50

line-heightの値によって上下マージン変わるのを計算すべきかいつも迷う
1行目はマージンあかない仕様にして欲しかった

**Name_Not_Found** · 2021/10/17(日) 17:08:33.59

初期値にしたいならinitialという便利なものもあるよ

**Name_Not_Found** · 2021/10/18(月) 07:38:01.41

querySelectorで使うつもりですが、
特定の子要素を持つ親要素をピンポイントで指定したい場合は、セレクターにどう書けばいいのでしょうか？
たとえば、子に p.foo を持つ div.bar を指定したい、等

**Name_Not_Found** · 2021/10/18(月) 08:57:47.85

cssの質問です
position : absolute;とした要素の大きさをウィンドウではなくスクロールしてもページいっぱいになるように表示したいです。
width100%; height100%;としましたがスクロールしてしまうと要素が下まで届いてないので、これををページ一番下まで届くようにしたいです。

**Name_Not_Found** · 2021/10/18(月) 09:50:35.39

>>815
cssでは無理

**Name_Not_Found** · 2021/10/18(月) 13:33:56.87

>>816
vhはどう？

**Name_Not_Found** · 2021/10/19(火) 13:18:17.09

JSでボタンクリックイベントとwindow.setIntervalを連携させたとき、クリックした回数だけwindowインスタンスが発生し、setIntervalがクリックの時間差で
何度もイベントを発生し続けるのでしょうか？

**Name_Not_Found** · 2021/10/19(火) 14:18:19.95

>>819
jsのスレで聞いてください

**Name_Not_Found** · 2021/10/19(火) 14:25:50.87

>>819
はい

**Name_Not_Found** · 2021/10/21(木) 20:42:05.85

gapの余白指定使ってる？

**Name_Not_Found** · 2021/10/21(木) 22:29:15.33

cssのセレクターで
<div class="a"></div>
<div class="b"></div>←こいつ
<div class="a"></div>
<div class="b"></div>
最初のclass="b"を選択したいんですが、どうすれば良いのでしょうか？
first-childはちょっと違いました

**Name_Not_Found** · 2021/10/21(木) 22:46:15.20

マルチクラスにしろ

**Name_Not_Found** · 2021/10/21(木) 22:47:24.28

どうしてもcssだけでやりたいならnot演算子で3個目以降のdivを排除せよ

**Name_Not_Found** · 2021/10/21(木) 22:48:23.79

>>824
jsのdom操作で並び替えできてしまうので
<div class="a"></div>
<div class="a"></div>
<div class="b"></div>←こいつ
<div class="a"></div>
<div class="b"></div>
の時はこの最初のclass="b"を選択したいんです
無理ですか？

**Name_Not_Found** · 2021/10/21(木) 22:52:17.86

無理です
javascriptでやってください

**Name_Not_Found** · 2021/10/21(木) 23:07:33.70

親クラス > div.b:nth-of-type(1){}

**Name_Not_Found** · 2021/10/22(金) 00:04:16.23

と思うじゃん？

**Name_Not_Found** · 2021/10/22(金) 00:04:49.19

>>828
それは最初のdivかつクラスbなので残念

**Name_Not_Found** · 2021/10/22(金) 00:22:45.87

js使ってるならjsでコンテナの中の最初のbを見つけりゃええやん

**Name_Not_Found** · 2021/10/22(金) 03:52:23.68

*:nth-child(1 of .b)
Safariしか実装しとらんけどええやろ日本なんかiPhoneばっかやし

**Name_Not_Found** · 2021/10/22(金) 06:44:40.13

せやろか

**Name_Not_Found** · 2021/10/22(金) 07:09:39.09

ofの部分か？
さすがはIEの後継者

**Name_Not_Found** · 2021/10/22(金) 11:54:52.50

CSS gridで左1段、右2段でレイアウトする際に
右2段を左1段の上下中央にレイアウトってできますか？
CSS grid難しい

**Name_Not_Found** · 2021/10/22(金) 13:00:22.95

>>834
いやこのofに関しては新しい仕様だからむしろChromeとかFirefoxが怠けてる

**Name_Not_Found** · 2021/10/22(金) 13:27:02.64

>>835
日本語でおk

**Name_Not_Found** · 2021/10/22(金) 13:54:55.58

grid良く分からんからflexでやってみたけど不細工なやり方しか思いつかないな
こういうレイアウトにしたいって事？
https://jsfiddle.net/zpdsgx5y/

**Name_Not_Found** · 2021/10/22(金) 14:14:40.29

>>838
ありがとうございます！
flexでこんな組み方ができるんだと驚愕していますが、
残念ながら、今求めてるのとちょっと違っているので
自分の日本語能力反省します

**Name_Not_Found** · 2021/10/22(金) 15:19:03.39

iframeで埋め込んだサイトをＡで、iframe使ってるサイトをBだとして、
Aをスマホで表示すると全体が縮小表示されるのに
Bから埋め込んだＡをスマホで表示すると、PCでＡを表示した時と同じ表示のされ方（全体縮小されずに縦横スクロールバーが出てくる表示）になってしまう。

仕方なくscale使って埋め込んでみたけど、何かもっとスマートなやり方はありませんか？

そもそもなぜ埋め込んでるだけなのに同じ表示のされ方がされないのでしょうか？
スマホサイズでwidth height 指定しても変わりなしです

AとかBとか分かり辛くて申し訳ないです

**Name_Not_Found** · 2021/10/22(金) 15:21:11.67

埋め込まれた側のビューポートやメディアクエリに依存するから

**Name_Not_Found** · 2021/10/22(金) 15:29:27.51

iframeで埋め込むと警告出て表示されない場合も出てきたな

**Name_Not_Found** · 2021/10/22(金) 15:44:50.88

>>839
横からだけど、こういうこと？
https://jsfiddle.net/6j95rpbu/

gridはジェネレーター使うと便利だよ

CSS Grid Generator
https://cssgrid-generator.netlify.app/
Interactive CSS Grid Generator | Layoutit Grid
https://grid.layoutit.com/

**Name_Not_Found** · 2021/10/22(金) 16:55:25.19

>>843
ありがとうございます。
びっくりするぐらいソースが複雑なんですね　きちんと見させていただきます

**Name_Not_Found** · 2021/10/22(金) 17:05:42.24

>>836
あ、草案のLevel-4なのか

**Name_Not_Found** · 2021/10/22(金) 17:16:33.20

>>841
そういうことか。原因はビューポートの違いみたいです
ありがとうございます。

埋め込まれた側、埋め込んだサイトどちらのビューポートも変更できないのでscale使うしか無さそうね

**Name_Not_Found** · 2021/10/23(土) 03:01:57.04

guideはIEが対応してないせいで
日本だとなかなか浸透しなかったけど
IEが駆逐された今後は増えてくんじゃないか

**Name_Not_Found** · 2021/10/23(土) 08:25:31.26

なんでそこ日本関係あるの

**Name_Not_Found** · 2021/10/23(土) 08:32:01.36

日本でIEのシェアが有意に高いからだろ

**Name_Not_Found** · 2021/10/23(土) 08:39:16.61

>>843
おお、このジェネレーター便利だね
こういうのもっと広まってほしいね

**Name_Not_Found** · 2021/10/23(土) 09:45:25.90

>>843
2つめのジェネレータが特にイイ(´;ω;`)

**Name_Not_Found** · 2021/10/23(土) 10:52:33.25

こんな便利なのあったんか

**Name_Not_Found** · 2021/10/23(土) 12:26:20.77

アタック25のノリでランダムでクリックして埋めてから
ソース作成したら複雑すぎて草
flexでええわ・・・

**Name_Not_Found** · 2021/10/23(土) 21:03:04.78

昔からあるwordpressのbox-sizingがデフォルトのcontent-boxになっているので、
特定のsection以下はborder-boxにしたいんだけど、
たとえばsection.main *{box-sizing: border-box}としても無反応で
*{box-sizing: border-box}とすると、headerやfooterが少し崩れます

content-boxでも特に困ってはない感じだけど、
flexで書き直しているからあまり気にならないのかな・・
content->borderの時、どういう時に影響が出やすいの？

**Name_Not_Found** · 2021/10/23(土) 21:30:08.78

> headerやfooterが少し崩れます

:not()で除外してみるとか

**Name_Not_Found** · 2021/10/23(土) 21:32:21.00

>>854
子要素への適用となってる記述だから
section.main自体に適用されてなさそうだがそれはいいのか？