HTML/CSS のどんな質問にも優しく答えるｽﾚ 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/ ソースコード上は改行したいけど、出力は改行したくないってこと？ >>209 その通り
>>210 おぉ、その手があったか！ でも、何か汚い感じするｗ 昔からこれでやってんだよ
実際クソ汚い
テーブルコーディングとかと同レベルの古代遺物
嫌ならソースでは改行しないかCSSで無茶しろ vscodeなら幅指定で見た目だけ改行が設定で可能
もちろん改行コード入れずに 例えばチェックボックスのON/OFFとかで、ある要素の表示/非表示を切り替えたい場合、あらかじめ非表示(display:none)のスタイルを定義しておいて、Javascriptで要素に対して非表示用のクラスを付けたり外したりするのが良くあると思うのですが、
100行とかあるテーブルのなかで個々の50行の各要素が非表示に該当するような場合、
前述のように50個の要素に対して非表示クラスを付けたり外したりするほうが良いのか、
100行の内容を書き出す時にあらかじめ識別用のクラスを付けておいてから、チェックボックスのON/OFFに合わせて非表示用のスタイルそのものを追加、削除するのが良いのか、どちらが良いとかありますか？
50個じゃなく、仮に100,500個とかになった場合でのパフォーマンスへの影響を気にしてます。
(イメージとしては商品一覧を表示し、「売り切れを非表示する/しない」みたいなチェックボックスです) >>214
classのつけ外しなんて数千でもたいした負荷にならん
見た目の話ならどっちでもいいが
状態としてチェックボックスがチェックされているかどうかなのだから一つずつ管理すべき
もし「チェックボックスが全てチェックされている」とは別に「中身がすべてチェックされている」という状態を用意しているなら親要素などで管理するべきだが 付け外ししたいのはチェックボックスじゃなくて要素のほうか
それにしても要素一つ一つで管理すべき
例えばシリーズA、B、Cと数種類のグループがあって中身の組み合わせが大した数じゃないなら親要素の状態で管理してもいいが >>214
個々の要素に手を入れる場合は、一度に全部やるんじゃなくて表示分だけ処理した方がいいね
自分なら売り切れや在庫未入荷のクラスをDBからの出力時につけて、表示制御は親のクラスを切り替える形にするかな ありがとうございます。基本的には個々の要素にクラス付与ということで良いのですね。
>>217さんの最後の行の意味が良く分からなかったのですが、今の想定の表があくまでイメージですが↓以下のようになっています。
--
<div class="itemList">
__<div class="item sale">商品
__<div class="item soldout">商品
____ : (上記が商品数だけずらずら並ぶ)
で非表示用チェックボックスがONの時、以下のように一括でクラス付与、みたいな感じです。
$('.soldout').addClass('hide')
(.hideの適用スタイルがdisplay:none)
--
「親のクラスを切り替える」というのは、CSSで
.itemList.hide_soldout > .soldout {
diaplay: none;
} を準備し、
$('.itemList').addClass('hide_soldout')
ということなのでしょうか？？ >>218
そうそう、そんな感じ
それが唯一の正解って訳じゃないので、自分の実装しやすい方法でいいと思うよ 自分なら売り切れ商品は非表示ではなく
phpでDBから引いてくるときにDOM自体除外するなあ 取り扱ってすらいないのかわからない状態にするってこと？ 見た目だけじゃなくてDOMも消すって話
売り切れも含むみたいなチェックがオンなら売り切れ中であることを明示して再生成する ##.style_td:has-text(ビーム):style()
##[class="style_td"]:has-text(ビーム):style()
↑これらが同じ効果を与える環境です
class値に~=や^=で制御し、適用されるテキストを差別化するのは慣れているのですが、
class値が全く同じで「ビーム」単体のみではなく「ビーム砲」や「拡散ビームなんちゃら」等、ビームという単語を含む一文すべてに反応してしまう現状
:has-text()が"この文字列を含む"という効果なので当然の結果です
それを、~=のように"この文字列だけ"や^=のように"この文字列から始まるものだけ"と指定する方法はないでしょうか？
よろしくお願いいたします >>220
俺もこれだな
diaplay none付けて非表示にする商品は最初からHTMLに出力しない
どれだけSEOに効果あるのかは分からないけどHTMLのデータ量が少ない方がCWVのスコアがいいしね >>223
CSSに:has-textなんて疑似クラスは無いのでスレ違いだし、よく分からんので意図通りに動くかは知らんが
()内で正規表現使ってダメなら、adblock系のスレで質問した方がいいんじゃないかと has擬似クラスはいつになったらFirefoxで使えるようになるんだろ :hasみたいなのあればいいな（jsのcladdList.containsみたいなことやりたいな）としょっちゅう思ってたはずなのに
実の所 :not と :isで事足りているのはある 皆さんでしたら、一つのタグ内である特定の文字列だけを色変更する場合、どのように記述しますか？
例えば
〜.com##.style_td:has-text(ビーム):style(color:#00ccff!important;)
とすると、そのサイトのclass値がstyle_tdのタグ内でビームという文字列を含んだ場合、現状ではタグ内にあるビーム以外の文字列も全部#00ccffカラーへ置き換えられます
「ビームという文字列が含まれたstyle_td」が:style()の対象にされるため、です
それを、ビームの部分だけ#00ccffカラーに変更したい displayつながりならよくね？
結局パフォーマンス問題でレンダリングさせるさせないに行き着くわけだし NGしてて見えないのかもしれないが、>>223,228みたいなのはAdBlockスレでやる話やね
Web制作でのCSSの話じゃないし borderのdashedって
破線の長さ、間隔をCSSで設定することはできませんよね？
Figmaが線の「高度な設定」内で破線と間隔指定できるので
なにか対策あるのかと思いまして border-styleじゃ無理なのでbackground-imageで再現するみたいだよ >>234
ありがとうございます！
やっぱりそうなんですね ひと手間かけるんですね 角丸どうしよう >>233
figmaでできるなら
figmaの開発者モードでどんなCSS吐き出してるか見ればよいのでは >>236
レスついてたの気がつきませんでした
開発者モードでは
border: 1px dashed var(--Grey, #666);
となっているだけで、破線と間隔指定の記載は見当たらないのです >>238
わーーー、すごい！！ありがとうございます！！
border imgではなく
background-imageで作るんですね
ブックマークします SVG使うならダッシュストロークの長さを制御して順に描画するアニメーションも面白いよ
>>236,237
figmaの表示はcanvasにwebGLで描画してるぽいので、そのまま持ち込むのは難しそう 低レベルな質問をさせて下さい
拡張子を.htmlとして作成したファイルを、クロムなどで開くとブラウザ表示されると
思うのですが、タグで囲わず例えば「練習」とだけ書いても見られるんです
これはheadタグやbodyタグ内に「練習」と書いて見るのと
意味的には何が違うのでしょうか？ >>241
ブラウザが補完してbody内のテキストとして扱われてる
そのファイルを開いて開発者ツールで要素の状態見れば納得できると思うよ >>242
マジですか
目から鱗です
ありがとうございます 239です
>>238さんに教えていただいたサイトだと丸点線ボーダーが半分削れちゃっていましたが
svgを%指定、svgに点線指定すればインラインSVGをposition:absoluteで配置でレスポンシブ対応で丸点線ボーダーができました！
>>240さんのアニメーションできるってアドバイスも気づきのきっかけになりました 合わせてお礼申し上げます そろそろpopover API使ってみよかなって思ったら、これもまだFirefox対応してないのか…
:has()もそうだし、使えないままのプロパティ多いと非対応枠にポイッとされちゃうぞ デスクトップ版「Firefox」の開発が「Git」に一本化へ、「Mercurial」を諦める
https://forest.watch.impress.co.jp/docs/news/1545389.html
Mozillaは11月6日（米国時間）、デスクトップ版「Firefox」の開発を「Git」に一本化すると発表した。 知り合いから今運営しているHPがだいぶ古いからリニューアルしてって頼まれたんですが、見てみたらカラーミーで作ってあるショップでした。コーディングで作りたかったのですが、自分で作ったhtmlを既存サイトのトップに表示させる方法もわからず、かと言ってカラーミーのテンプレでは思い描くサイトにはほど遠く。自作サイトにカラーミーの商品ページだけリンクさせようかとも思ったけど、カラーミーのシステムである「マイアカウント」とかも厄介で…。皆さんだったらどうしますか？知り合いの制作会社では凄い勉強してカラーミー専用の言語も学んで0からショップをコーディングできるらしいですが、自分は正直そこまで理解出来そうにないです。 ありがとうございます。WPのプラグインですかね？良い知恵を頂き大変感謝しております。全く新しいカートという事ですね。既存のカラーミーショップに結構な会員登録してる購入者がいるのですが、移行してもらう他ないですかね〜(^-^; カラーミーに既存客いるなら移動なんて絶対に無理
あとトップページを大幅に変えたらSEO下がる可能性もある
というよりも仕事で受けてるならカラーミーくらいやり倒せば？
このくらいできないならWordPressだろうが他のEC系カスタマイズも無理だろ
そもそもhtmlだけで何とかできそうと思ってはいけない
それぞれのシステムに合わせてページ毎のロジックの学習は必須 分かりましたぁ！勉強してきます！さーせんしたぁ！！！ Shopify は？
月5千円〜1万円
Shopifyのカスタマイズ用言語は、Ruby 製のLiquid だけど、
これもRuby on Rails のirb で、HTML を作っていれば、何となく分かる
命令文は、{% 〜 %}
表示部分はヒゲ、{{ 〜 }}
<h1>{{ collection.title }}</h1>
{% for product in collection.products %}
<p>{{ product.title }}</p>
{% endfor %} ありがとうございます。カラーミーが月3,000円でカート機能的に十二分なので、「どこでもカラーミー」って奴を用いて新規サイトにカートを貼り付けて対応しようかなと今思ってます。カートから従来のカラーミートップへ飛ばないようにする&新規TOPに飛ばしてみたいな…愚策ですかね…(T . T) すみません！CSSでどうも上手くいかないので質問させてください
同じ位置に、複数のテキストを順番にフェードイン・フェードアウトさせて、
最後に画像をフェードインさせて固定させたいのですが、どうすれば良いでしょうか？ 同じ位置に重ねてテキスト（複数）と画像を設定
一番最初
animation-duration:1s;
animation-delay: 0s;
二番目
animation-duration:1s;
animation-delay: 1s;
三番目
animation-duration:1s;
animation-delay: 2s;
ってanimation-delayの数値を変える >>259
CSSだけじゃ厳しいですか？
>>260
ありがとうございます！
よろしければですが、同位置に表示させる方法を教えていただけないでしょうか‥‥
なおレスポンシブなページなので相対的に指定しなければいけません あ、ID出ないのですねこの板
私は>>258,261です。
テキストと図形を表示させる位置はdivのセンターです Gridで重ねてもいいし、position:absoluteで重ねてもいいよ >>263
ヒントありがとうございます！やってみます 動きと表示位置については、何とか出来ました！
ただ、#ffffffの文字なのに真っ白にならないんです
#ffffffになるのはほんの一瞬だからでしょうか？
アニメーションのopacity: 1になる間の秒数って設定出来ないでしょうか？ 何度も申し訳ありません。
ease-in-outやらcubic-bazie()やら色々試してみましたが、ダメでした
アニメのタイミングの問題ではないのかもしれません
画像はちゃんと真っ白になるんだけどなあ
難しいですね‥‥ @keyframes fade {
0% {
opacity:0;
}
70% {
opacity:1.0;
}
80% {
opacity:1.0;
}
100% {
opacity:0.0;
}
全体5秒（animation-duration: 5s;）だとして
3.5秒でフェードインして
0.5秒間表示して
1秒かけてフェードアウト
ただし、animation-timing-functionの設定しだいで計算通りにいきません >>267
なんとこんな技が！！
本当にありがとうございます😭
自分もいつか他の人に恩返し出来るよう頑張ります！ :local-linkって知ってた？
これ使えばメニューなどでcurrentの効果をCSSだけで簡単に作れるよね？ 他人に恩返し、良いじゃん
中国では大金持ちに助けてもらって自分が成功した場合、また他の貧しい者を救えって考えがある
受けた恩を本人へ返せるならごもっともだけど、世界規模で見たらとても良い考えだと思うよ
共産思想だのマルクス主義自体は好きじゃないけどね 本ではHTMLファイルのインデントがスペース2つになっているのですが、
自分で書くときはスペース4つでもいいですか？ お好きにどうぞ
2つ、4つ、タブなど宗教戦争になるから自分の信じる道を。 分かりました
レスくれた方、ありがとうございました 最近のエディタはその辺の事情酌んで事後の扱いが自由になってるから助かる
俺はTab派 HTMLの表示に何のフォントが使われているかを確認するためにWhatFontという
ブラウザの拡張を入れたのですが、フォントがserifやsan-serifの場合にそれが
実際に何のフォントなのかを確認する方法はあるでしょうか?
本来論理的なフォント名にしてそういう詳細にこだわらないというものなのでしょうが、
その他のフォントとの兼ね合いやOS等による違いを一応把握しておきたいのです chromeのdevツールのComputedの一番下にRendered fontsがあるじゃろ firefoxも開発ツールの右ペインにフォントタブがある Firefox121、規定で:has()有効になったね >>284 >>285
できました、どうもありがとうございます 画像にcssでfilter drop-shadowで影をつける際に
影だけ乗算を適用させることってできますか？ drop-shadowとmix-blend-mode用に::beforeで同サイズのblockを画像の下に重ねるとか？
乗算ならberforeのblockにbackground-color: white;入れとくといいかも 画像が矩形じゃなくて透過で形通りの影を乗算にしたいとかなら無理じゃねーかな 矩形の画像ならdivの背景にしておいて、後ろに乗算で同サイズの擬似要素を追加すればできる
背景抜いた画像は擬似要素のcontentに同じ画像を指定すればいける
ただしサイズ調整が利かないのでレスポンシブ使用には厳しい
手間の割に効果は薄いので、自分なら乗算は使わずそれっぽく見える透明度に調整するかな
イラレとかだとデフォが乗算になってるだけで、デザイナーがどうしても乗算を要求するってケースは少ないし 288です
ありがとうございます！ おっしゃる通り矩形ではなく透明のあるpng画像です
擬似要素に同じ画像ってのは考え付かなかったです
それでできるか試してみます！ filter dropshadowをかけた要素内でposition fixedが効かなくなる
バグ（？）に初めて出会った
SafariだけOKでChrome、Edge、FFがNG
Safariの挙動が正しくないのかな ホントだ
ChromeもFirefoxも、親にfilter使った途端に子がabsoluteの挙動になるね
これはWebkitの方が正しいんでない？ >>293
https://developer.mozilla.org/ja/docs/Web/CSS/position
>固定位置指定は絶対位置指定に似ていますが、要素の包含ブロックがビューポートによって
>定義される初期包含ブロックであるという点が異なり、祖先の一つに transform, perspective, filterの
>何れかのプロパティが none 以外 (CSS Transforms Spec を参照) に設定されている場合は例外で、
>その場合は祖先が包含ブロックとしてふるまいます。
まあいつもの通りでSafariが悪い 謎でもないと思うぞ
transformやらが親要素に効いてるのに子要素がfixedだと、親とは全く無関係な位置に配置されちゃうから
transformの効果をどう処理したらいいのか解釈があいまいになっちゃうだろ
そういうややこしいことが起こらないように、fixedさせたいならなるべくbody直下に置いておけという
仕様になってもそれは妥当なんじゃないか fixed要素はルート直下の設置がいいのは同意だけど、filterやtransformで動作が変わるってのは納得いかないな
Webkitの実装の方が直感的だと思うわ
まあその辺は散々議論された上でこの仕様なんだろうけど 初歩的な質問ですみません
画像の位置とテキストの位置ってどうやって調整するんですか？
どこかと揃えたいんじゃなくて位置を変えたいです。お願いします position:absolute;
で自由に配置しよう！ >>300できました！！！すごい！ありがとうございます！！本当に助かりました！ >>300
すみませんposition:absolute;ってテキストには使えないんですか？ >>300
すみませんposition:absolute;ってテキストには使えないんですか？ >>303
divなりspanなり、タグでテキストを囲えばいい h2 {
color:#66cc99;
font-size: 85px;
font-family: serif;
width: 1500px;
height: 120px;
background-color: #ccffcc;
padding: 2px;
left: 5px;
top: 1px;
}
cssこんな感じで、テキストを左上に寄せたいです。うまくいかないのですがどこが原因なのかわかりません
ご教示願いますm(_ _)m ゴールがわからないから答えようがない
こういうサービスでコード張って
https://jsfiddle.net/
目指す形を画像で出そう 幅1500、高さ120の範囲に
見出しをサイズ85pxでレイアウトしたいってことなら
<div class='bg'>
<h2>タイトル</h2>
</div>
って形に変えてh2だけでレイアウトしない
ちなみにcssは
.bg {
position: relative;
width: 1500px;
height: 120px;
padding: 2px;
background-color: #ccffcc;
}
h2 {
color: #66cc99;
font-size: 85px;
font-family: serif;
position: absolute;
left: 5px;
top: 1px;
}
で想定のデザインなのかな？ >>306 ありがとうございます！
>>307 ハイ！ 
