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

**Name_Not_Found** · 2022/02/25(金) 16:42:48.40

https://mevius.5ch.net/test/read.cgi/hp/1636434627/

**221** · 2022/04/22(金) 02:09:01.65

>>221です。

>>222-223
222のサイトを使って見せたいもの作れたんだけど、どうやったらここに貼れるんですか？
スクショ貼れって話だったりします？

**221** · 2022/04/22(金) 02:11:37.62

>224
runとかsaveってボタン見落としてました。
必死にローカルで作ってぺたぺたしてた……
※resultってあるのに自動で変わらんなぁとか思ってましたわ(;・∀・)

https://jsfiddle.net/1gao8x4j/

**Name_Not_Found** · 2022/04/22(金) 15:45:27.08

内容に合わせて個別にクラス指定するかjavascript使わないと
CSSだけで汎用性持たせるのは無理じゃね？

**Name_Not_Found** · 2022/04/22(金) 15:48:43.55

思ったようなのが見つからないときはjsで目的の物を実装しておいて
後でゆっくりCSSでできるか調べるのも手よ

**221** · 2022/04/22(金) 20:00:14.49

>>226
やっぱり無理かな？
無理なら無理で諦めようとは思ってます。
※妥協大事

>>227
js使えば何とかできるけどそこまで手間暇かけたくなくてね……
※２～４カラム対応でjsでそこまで書くの面倒で……
まあ、提示したやつで妥協しますわ。

相談にのってくれてありがとうございました。

**Name_Not_Found** · 2022/04/23(土) 16:28:07.82

**Name_Not_Found** · 2022/04/23(土) 16:30:31.72

試して見れば
だめだったら爆発するわけじゃないんだし

**Name_Not_Found** · 2022/04/23(土) 16:31:10.23

>>229
大丈夫だよ

**Name_Not_Found** · 2022/04/23(土) 16:43:10.89

動くけどbody内のstyleはひっそり非推奨になったから気をつけて

**Name_Not_Found** · 2022/04/23(土) 16:46:17.24

まあ色々試す場合はいじってるタグの近くにstyle置いて
確定したら上か外部に移動やな

**Name_Not_Found** · 2022/04/23(土) 23:54:36.53

もう何年かしたら
html内にだららららーと表示されたりするのだろうか、、

**Name_Not_Found** · 2022/04/24(日) 00:59:01.42

body内だめになったんか？
一時期bodyないに入れろってなってなかった？

**Name_Not_Found** · 2022/04/24(日) 03:50:36.67

>>235
入れるべきではないが動く
↓
入れてもいい
↓
やっぱ入れないで　動くけど

と変遷してる
入れるべき、になったことはない

**Name_Not_Found** · 2022/04/24(日) 04:29:42.31

入れるべき

はないわなｗ
プログラムやってるともうちょいなんとかしたいが

**Name_Not_Found** · 2022/04/25(月) 01:12:33.09

Scssのif文て全く使う機会ないんだが実際便利な使い道ってある？
静的な文書で条件ってのもなんか微妙な気が

**Name_Not_Found** · 2022/04/25(月) 02:07:54.15

roop内の分岐は？
特定のカウンタごとで結果を変えるとか

**Name_Not_Found** · 2022/04/25(月) 03:22:34.18

>>238
変数にいらん値を入れるとerror吐くようにするとか
目視でやったほうが早かったりするから自己満足やね

**Name_Not_Found** · 2022/04/25(月) 10:08:09.13

https://popo-design.net/template/demo/simple-corp/subpage.html
このカラム２を６つ並べて、７つ目を作ったときに１つ目の下に自動的に入るようにするにはどうすればよいのでしょうか？
よろしくお願いいたします。

**Name_Not_Found** · 2022/04/25(月) 12:47:29.34

単純に折り返すだけでいいならdisplay:flex;を指定してる親要素に
flex-wrap: wrap;
を追加

**Name_Not_Found** · 2022/04/25(月) 13:06:10.84

cssのネイティブの変数が最新のWPやBootstrap5でもう実装されちゃってんのな

しかしscssの変数の方が圧倒的に文字数少なくて済むが使い分けどうすんのこれ、、
そのうちscssはやっぱりいらなくなりましたってなりそうだしなー

**Name_Not_Found** · 2022/04/25(月) 13:54:24.44

カスタムプロパティ実装すんのはブラウザの仕事やろ、wpやらBootstrapは関係ないやん。Sass変数と違ってカスケーディングの対象だし全くの別モンやで。

**Name_Not_Found** · 2022/04/25(月) 14:22:02.29

>>243
ネストできるようになったらいよいよいらないかな
minifyやプレフィクサーのためになんらかのコンパイル自体は残るだろうけど

**Name_Not_Found** · 2022/04/25(月) 14:29:00.12

>>242
ありがとうございます。
やってみたところ、１行目は６つなんですが、
２行目以降が５つにしかならないんです……

**Name_Not_Found** · 2022/04/25(月) 15:27:05.60

>>246
3行以上あるの？だったらCSSに

.col:nth-of-type(6n+1) {
margin-left: 0;
}

を追加
他に影響が合ったり効かないようなら、クラス名等は環境に合わせて工夫して

**Name_Not_Found** · 2022/04/25(月) 17:35:31.42

>>247
で、できました！
ありがとうございます！

**Name_Not_Found** · 2022/05/02(月) 00:16:50.00

scssの質問です

#hoge1{
.module1{
font-size:120%;
color:red;
}
}
#hoge2{
.module1{
font-size:120%;
color:red;
}
}
を

こんな感じのイメージでセレクタをまとめて書きたいのですが、
#hoge1{
.module1,　@at-root #hoge2 .module1{
font-size:120%;
color:red;
}
}
どう書いたらよいでしょうか？（@extendとかにするはナシで）

**Name_Not_Found** · 2022/05/02(月) 00:37:35.59

その例だと親セレクタカンマで解決しちゃう

**Name_Not_Found** · 2022/05/02(月) 00:40:34.66

エスパー予測すると
インターポレーション　#{$this}　とかでぐぐってみて

**Name_Not_Found** · 2022/05/02(月) 01:10:29.14

>>250
確かに。。例が悪かった・・・

聞きたいのは、#hoge1の内容がもっと巨大であって、その中の1部だけを別の箇所でも汎用クラス的に使いまわしたいケース。

例では、#hoge1の中身を全部#hoge2でも使いたいわけではなく、あくまで#hoge1の中の.module1だけを#hoge2でも使いたい。

ちなみにこれだと@at-root書いても.module1の中にはいっちまうのだな・・
#hoge1{
.module1,　@at-root #hoge2 .module1{
@extend .module1;
}

**Name_Not_Found** · 2022/05/02(月) 01:12:38.70

>>251
すまん、ググったがちょっとわからない、、
インターポレーションは演算しないようにする為のものじゃないの？

**Name_Not_Found** · 2022/05/02(月) 01:13:43.47

なんとしてもそのネストでやりたい理由がわからんが
mixin化するか大人しくその装飾をコンポーネントとみなして一つclass作るかなあ

**Name_Not_Found** · 2022/05/02(月) 01:15:56.59

>>252
ごめんこれ間違い
>ちなみにこれだと@at-root書いても.module1の中にはいっちまうのだな・・
↓

ちなみにこれだと@at-root書いても#hoge1の中にはいっちまうのだな・・

**Name_Not_Found** · 2022/05/02(月) 01:18:44.01

>>254
まあ普通にそうなるよね。ありがとう

一度完成したサイトで一部分を切り出して別の場所で臨時的に使いたい
ってケースなんだが、どうやったらcssの構造崩さずにラクできるかなと思い、、

**Name_Not_Found** · 2022/05/05(木) 04:30:03.39

https://www.free-css.com/assets/files/free-css-templates/preview/page210/piccolo/pages/gallery-6col.php
このサイトのIllustrationやDesign、Videoなどをクリックすると、それに対応したものが
自動で移動するっていう動作を勉強したいのですが、なんというキーワードで検索したら良いでしょうか？
よろしくおねがいします

**Name_Not_Found** · 2022/05/05(木) 14:31:24.02

>>257
ソート、フィルタリングだね。

この辺り
https://www.webdesignleaves.com/pr/plugins/filtering-component-with-css.html
https://yiotis.net/filterizr/#/
https://coco-factory.jp/ugokuweb/wp-content/themes/ugokuweb/data/6-2-2/6-2-2.html

**Name_Not_Found** · 2022/05/05(木) 23:23:05.73

すみません質問させてください

htmlの要素の検証とかEdgeのWebキャプチャの機能使って画像保存したりしたのってサイトの管理者にはわかりますか？

**Name_Not_Found** · 2022/05/05(木) 23:43:10.23

分かりませんが、仮にバレたところで何か問題でも？

**Name_Not_Found** · 2022/05/06(金) 00:02:38.87

>>260
ありがとうございます
画像保存禁止のページでその辺使ってしまってバレたらヤバイとなりました

**Name_Not_Found** · 2022/05/06(金) 00:07:43.25

バレてもなんもないよ
そんなこと気にしてるとウイルスに感染しましたスパムに引っかかるよ

**Name_Not_Found** · 2022/05/06(金) 00:45:50.87

>>262
ありがとうございました
まだちょっと不安ですがなんとか落ち着こうと思います

**Name_Not_Found** · 2022/05/06(金) 20:01:52.98

保存禁止なんて勝手に言ってるだけやからな

**Name_Not_Found** · 2022/05/10(火) 12:43:51.21

よくソースコードを表示してあるサイトでtextareaの背景が１行ごとに色が変わって横のしましま模様になっているの見かけるけど
これみたいにtextareaの背景色を１行ごとに変えるにはどうすればいいんですか？
<textarea style="background:#ff00ff">
aaa
bbb
ccc
</textarea>
のようにやっても単色でしか塗りつぶせないので

**Name_Not_Found** · 2022/05/10(火) 12:47:00.16

>>265
その目的とするサイトの目的の箇所の上で右クリックして
検証じゃだめなの？

**Name_Not_Found** · 2022/05/10(火) 12:47:35.89

右クリック禁止してなきゃブラウザ上でまる見えよ

**Name_Not_Found** · 2022/05/10(火) 12:56:10.58

>>266
見てもよくわからなかったっす

**Name_Not_Found** · 2022/05/10(火) 12:57:53.78

初歩的な話だがCSSは分かる？

**Name_Not_Found** · 2022/05/10(火) 12:58:25.22

>>268
現物のソースタグじゃなくて害と箇所にかかってるCSSを見ないと
タグに対するCSSの情報も見れるでしょ

**Name_Not_Found** · 2022/05/10(火) 12:58:41.84

害と箇所ｘ
該当箇所

**Name_Not_Found** · 2022/05/10(火) 13:13:40.22

>>269
わかるよ
>>270
今はPCないのであとで見てみる

**Name_Not_Found** · 2022/05/10(火) 13:39:47.80

web界隈はサンプルソースだらけなので参考の仕方を覚えておくといいよ

**Name_Not_Found** · 2022/05/10(火) 16:17:56.61

そんなもん別にweb界隈に限ったことじゃないけどなｗ

**Name_Not_Found** · 2022/05/10(火) 17:34:35.01

>>265
ああいうのはtextareaじゃなくてcontentEditable=trueにした要素でしょ

**Name_Not_Found** · 2022/05/10(火) 20:52:07.87

>>265
textarea内の行数を認識させるのは普通には無理なはず。

ちなみにこういうのはtextareは使ってないよ。
http://www.netyasun.com/syntaxhighlighter/index.html

**Name_Not_Found** · 2022/05/10(火) 21:01:02.98

こういうの初心者にもわかりやすくて良い説明

いざという時に使える13のHTML&CSS Tips集
https://pulpxstyle.com/html-css-tips01/

**Name_Not_Found** · 2022/05/11(水) 00:15:02.81

申し訳ありません、間違ったスレへ投稿してしまったようなのでこちらへマルチさせてくださいm(vv)m
--------------
昔、youtubeの個別ページにおいてサイドへRecommended for youがひたっすら記載されていた時代

www.youtube.com##span[class="ytd-video-meta-block"]:has-text(Recommended for you)

的な記述で全部削除していました
最近それらの仕様削除を知り、ならば他のサイトで気に入らないテキスト語句を上記の部分入れ替えで使おう！と試すものの、有効とならず

用途はあるサイト内において、テキストを一括削除することです
この上記記述に過不足または間違いがあるのでしょうか？よろしくお願いしますm(vv)m

**278** · 2022/05/11(水) 00:31:15.22

ふと、spanの部分を変更したら自己解決できました
仕様の根本を無理解のままコピペ運用すると、こういう面で苦労しますね
失礼しました

**Name_Not_Found** · 2022/05/11(水) 10:14:38.75

>>277
知らないのが多かった
サンクス

**Name_Not_Found** · 2022/05/12(木) 22:56:12.15

Youtubeの登録チャンネル画面からショート動画を消そうと試みましたが全く不完全です

www.youtube.com##ytd-browse[page-subtype="subscriptions"] ytd-grid-video-renderer.ytd-grid-renderer.style-scope:has(#video-title[title~="#shorts"])
www.youtube.com##ytd-browse[page-subtype="subscriptions"] ytd-grid-video-renderer.ytd-grid-renderer.style-scope:has-text(/#short/i)

どのようにしたらショート動画を非表示に出来るでしょうか

**Name_Not_Found** · 2022/05/12(木) 23:53:07.15

広告ブロックか何だか知らんけど、hasの中は

ytd-thumbnail-overlay-time-status-renderer[overlay-style="SHORTS"]

とかじゃダメなの？

**Name_Not_Found** · 2022/05/13(金) 01:15:40.93

すっぽん食べるとギンギンになるって本当ですか(´・ω・｀)？

**Name_Not_Found** · 2022/05/13(金) 01:23:48.25

本当です

**Name_Not_Found** · 2022/05/13(金) 11:30:42.37

>>282
その記述だとサムネイル上のショート動画のマークだけ消えました
サムネ自体は非表示になりません　難しい

**Name_Not_Found** · 2022/05/13(金) 12:49:30.31

>>283
スッポンの生き血もいいけどハブ酒とかもかなり効くぜ
まあこの手のゲテモノ関連は得てして精力剤としてのものだ

**Name_Not_Found** · 2022/05/13(金) 13:34:32.27

>>285
いや、それ書き方間違ってない？
chrome、firefoxのuBlock Originで動作確認出来てるけど、こう書けって話なんだが

www.youtube.com##ytd-browse[page-subtype="subscriptions"] ytd-grid-video-renderer.ytd-grid-renderer.style-scope:has(ytd-thumbnail-overlay-time-status-renderer[overlay-style="SHORTS"])

**Name_Not_Found** · 2022/05/13(金) 14:00:21.02

広告ブロッカーだと未だsafariしかサポートしてない:has()に対応してるんだな

**Name_Not_Found** · 2022/05/13(金) 18:40:19.01

>>287
出来ました！
そうですね確かにhasの中って書いてあったのに私が記述間違ってましたありがとう

**Name_Not_Found** · 2022/05/18(水) 10:31:13.42

viewportについて質問させてください。
横幅1366px幅の固定幅サイトに、以下のタグを追記しました。

結果は
・スマホで表示すると、画面に合わせてサイトが縮小された状態で表示されました
・解像度が低いデスクトップPC(1280 * 768)は、ChromeでF11の全画面表示でも横スクロールが表示されました

MDNのサイト(https://developer.mozilla.org/ja/docs/Web/CSS/Viewport_concepts)では、「多くのモバイル端末やブラウザーが全画面モードである場合、ビューポートは画面全体です。」と記載があったのできれいに表示できるかと思ったのですが出来ませんでした。
上記metaタグの場合、デスクトップ上のブラウザ上ではどのように振る舞うものでしょうか。
また、モバイル端末でのみ有効なのでしょうか。

**Name_Not_Found** · 2022/05/18(水) 10:34:34.48

タグ抜け出ました…
<meta name="viewport" content="width=1366, user-scalable=yes">

**Name_Not_Found** · 2022/05/18(水) 10:37:46.15

デスクトップとモバイルで拡大縮小も動作違うしなあ
デスクトップは素材単位で拡大縮小するのでレイアウト崩れしまくるけど
モバイルはレンダリング結果を画像を拡大縮小するようにレイアウト崩れなしでいける
この辺の差がありそう

**Name_Not_Found** · 2022/05/18(水) 12:01:17.94

そこの部分の説明のビューポートはあくまでもブラウザ内の表示領域という意味でmeta viewportでどうふるまうかとはちがくね？

**Name_Not_Found** · 2022/05/19(木) 12:01:40.28

>>283
顔文字には教えん

**Name_Not_Found** · 2022/05/21(土) 18:43:29.43

レコメンド広告だけ大量に表示しまくる方法ってありますか
暇な時あれ眺めてると掘り出し物とか出来てき好きなんですが・・・

**Name_Not_Found** · 2022/05/26(木) 11:29:46.61

CSSの新しい単位「lvh」「svh」これでiOSのSafariで100vhがビューポートの高さではない仕様に対応できる
https://coliss.com/articles/build-websites/operation/css/large-small-dynamic-viewports.html

**Name_Not_Found** · 2022/05/28(土) 19:04:05.03

自分が触っているサイトが
inputにフォーカスが当たると青い枠が出るんだけど、
cssや直書きhtmlに疑似クラスのfocusも、プロパティのoutlineも無いんだけどなぜかわからん・・・
ラジオボタンも中心が青いし、inputに作用していることは間違いないんだけどどこに書いてそう？

**Name_Not_Found** · 2022/05/28(土) 20:23:19.94

ん？user agent stylesheetの話？

**Name_Not_Found** · 2022/05/28(土) 20:44:32.75

>>297
開発者ツールで目的の要素や周辺のスタイル適用がどう変化してるか見てみよう
cssでないならスクリプトでやってるかもね

**Name_Not_Found** · 2022/05/28(土) 21:50:37.26

>>298
始めて名前は聞いたけどそれっぽい
firefoxなら青枠、edgeなら黒枠、inputの背景はクリーム色になる
ie11なら特に装飾無し

もともと13年ぐらい前のphpで、cssの行頭には
* {margin: 0;padding: 0;}
これしか書いていなかった

firefoxで、おなじみ開発ツールではその色などは :focus-visibleにすると青枠が出るけど
継承とかには出てこないけど、ブラウザが変わるとuser agent stylesheetからの継承とか出るみたいね
結局はreset.cssみたいなので消えるということか

13年前はフロント周りはhtml4の殻に閉じこもっていたなぁ

**Name_Not_Found** · 2022/05/29(日) 15:11:59.58

div内にflexのulを作って、liならべてwrapする時
例えばliのwidth:50%って
ul.col2 li {width:50%}
ul li.col2 {width:50%}
どっちが正解？

**Name_Not_Found** · 2022/05/29(日) 16:25:13.43

正解はない
liにいちいちclassをつけて管理するか
wrap要素で管理するか

**Name_Not_Found** · 2022/05/29(日) 16:52:15.37

>>302
サンクス、デファクトスタンダードみたいなのが存在するかと思ってた
liの数が多いからwrapper要素に指定します

**Name_Not_Found** · 2022/06/01(水) 14:01:14.05

ちょっとjsも含んでしまいますがtext-decoration:none;でリンクの下線が消えません。

<style>
#test{
text-decoration:none;
background:#ff00ff;
}
</style>

<ins id="haichi"></ins>

<スクリプト>
let haichi_elm = document.getElementById("haichi");

let a_elm = document.createElement("a");
a_elm.id = "test";
a_elm.href = "./test.html";
a_elm.innerHTML = "テストリンク";
haichi_elm.appendChild(a_elm);
</スクリプト>

何でリンクの背景色は変わったのに下線は消えないんでしょうか？
どうすれば下線を消せますか？

**Name_Not_Found** · 2022/06/01(水) 16:33:51.47

ここでも見ればいいんじゃない

ttps://qumeru.com/magazine/150

hは自分でつけてね

ていうか、Googleで「text-decoration none 効かない」って検索したらトップに出てきたんだけど

**Name_Not_Found** · 2022/06/01(水) 16:38:42.97

読み込み順の問題とか？

**Name_Not_Found** · 2022/06/01(水) 16:49:21.39

そのtestってidはaタグ(アンカータグ)にかかってんの？
親要素や子要素にかかってても下線消えないらしいけど。

仕事だからもういくわ。
また夜に来るよ。

**Name_Not_Found** · 2022/06/01(水) 17:08:13.87

#haichiにもtext-decoration: none;

**Name_Not_Found** · 2022/06/01(水) 20:49:21.17

>>307
アンカータグです

**Name_Not_Found** · 2022/06/01(水) 20:55:37.44

>>308
おれもこれで消えた
理由は何でか分からん

**Name_Not_Found** · 2022/06/01(水) 20:59:50.73

>>308
それにもtext-decoration: none;したら下線消えました
でも何でaタグだけにtext-decoration: none;しても下線消えなかったのかな

**Name_Not_Found** · 2022/06/01(水) 21:00:41.09

>>305
見たけど解決はしませんでした

**Name_Not_Found** · 2022/06/01(水) 21:14:23.95

わかった<ins>がだめなんだ<div>にしたらそのまま消える

**Name_Not_Found** · 2022/06/01(水) 21:24:24.44

役に立たなかったか。すまん
解決したならよかった

**Name_Not_Found** · 2022/06/01(水) 21:46:40.26

主要なブラウザのデフォルトCSSではinsにtext-decoration: underline;が指定されてる
だから、元のCSSでもa要素の下線は消えてたけど、insの方は消えてなかったって話
試しにinsにテキスト入れてみりゃ分かる

**Name_Not_Found** · 2022/06/01(水) 21:50:08.22

プロが来た

**Name_Not_Found** · 2022/06/01(水) 21:53:33.51

insってなに

**Name_Not_Found** · 2022/06/01(水) 22:02:10.40

insタグなんか初めて聞いたのじゃ
戦前には無かったからのぅ

**Name_Not_Found** · 2022/06/01(水) 22:14:47.96

殆どのブラウザで初期からサポートされてるタグだよ

<ins> - HTML: HyperText Markup Language | MDN
https://developer.mozilla.org/ja/docs/Web/HTML/Element/ins

性質上、delタグよりも使う人は少ないよね

**Name_Not_Found** · 2022/06/01(水) 23:52:17.15

初学者ですが、このスレ勉強になるね。

**Name_Not_Found** · 2022/06/02(木) 00:03:16.62

insなんてタグ初めてしったわ
HTML系の本かれこれ10年以上何十冊も読んでるけど
出てきたことない
辞典には一応のってるな

**Name_Not_Found** · 2022/06/02(木) 00:44:58.94

アドセンスコードでinsタグ使われているから存在は知ってた

**Name_Not_Found** · 2022/06/10(金) 12:41:03.53

divの中にある要素（画像やテキストやボタンなど）をdivの幅に合わせて
縮小拡大するにはどうすればいいんですか？