2ちゃんねる ■掲示板に戻る■ 全部 1- 最新50    

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

1 :Name_Not_Found:2023/08/23(水) 18:52:13.52 ID:???.net
ここは初心者からベテランまで、全ての人を対象に優しく答えるスレです
類似質問、重複質問、丸投げ大いに結構。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/

2 :Name_Not_Found:2023/08/23(水) 21:00:21.97 ID:???.net
>>前998
新スレ立てた瞬間に知り合いが遊びに来てレスするの忘れてスレ埋まってしまいました。
また相談に乗ってもらったらありがたいです

3 :Name_Not_Found:2023/08/24(木) 09:43:59.41 ID:???.net
質問失礼します。
レスポンシブデザインでサイトを作成しており、PCから見た時に①の画像のようになるようにCSSを書きました。
これがスマホから見ると②の画像のようになってしまいます。
PC表示部分のCSSは③の画像、スマホ表示部分のCSSは④のような状態なのですが、どこを改善すればよいでしょうか。
https://i.imgur.com/e42hJSO.png
https://i.imgur.com/mBDlOmA.png
https://i.imgur.com/6RavAGV.png
https://i.imgur.com/DuEybLY.png

4 :Name_Not_Found:2023/08/24(木) 09:50:05.24 ID:???.net
>>3
②が正しくないのでしたら、まずどうなるのが正しいのかを書きましょう

5 :Name_Not_Found:2023/08/24(木) 11:06:37.25 ID:???.net
>>3
画像のinline-block上の階層でflex使いなよ
横に並べるにしても縦に並べるにしても制御が楽になるよ

6 :Name_Not_Found:2023/08/24(木) 11:07:39.32 ID:???.net
>>5
あ、編集したら抜けた
画像のinline-block「やめて」上の階層で

7 :Name_Not_Found:2023/08/24(木) 11:08:50.05 ID:???.net
>>4
失礼しました
テキストがスマホの端で折り返し、ピンクの点線枠内に収まるようにしたいです

8 :Name_Not_Found:2023/08/24(木) 11:09:17.77 ID:???.net
>>3
#mainあたりにmax-width入れてみては?

9 :Name_Not_Found:2023/08/24(木) 11:09:20.06 ID:???.net
>>5
レスありがとうございます
flex調べてみます

10 :Name_Not_Found:2023/08/24(木) 11:10:32.44 ID:???.net
>>8
③のCSSの#main内でよろしいですかね
やってみます

11 :Name_Not_Found:2023/08/24(木) 11:33:56.55 ID:???.net
>>8さんのやり方でできました!
しかし制御が楽になるとのことなので、この機会にflexのことも勉強しようと思います
また何かありましたらこのスレで質問させてください
アドバイスありがとうございました

12 :Name_Not_Found:2023/08/24(木) 17:47:45.35 ID:???.net
疑似要素を4つ使いたい場合、タグを増やすしかない?
でもそれって明らかに論理マークアップ上で無駄なHTMLだよね

13 :Name_Not_Found:2023/08/24(木) 19:11:34.49 ID:???.net
それをいうなら疑似要素が4つ必要になるのはデザインに対してマークアップがおかしいです

14 :Name_Not_Found:2023/08/24(木) 20:20:35.98 ID:???.net
正論ですな

15 :Name_Not_Found:2023/08/24(木) 22:20:40.10 ID:???.net
>>13 例えば

見出しタイプ1
====================================


↑これが通常の見出しで一箇所だけ↓こうなる場合


☆         ★    ※星部分が回転
  見出しタイプ2
★         ☆

divで親タグを増やしていくって方法以外無いでしょう?
デザインの為だけに無駄なHTMLが増えるんでしょ?

<h2>見出しタイプ1<h2>
<div class="star"><h2>見出しタイプ2</div>

これのどこがマークアップがおかしいの?

16 :Name_Not_Found:2023/08/24(木) 22:21:53.66 ID:???.net
↑閉じタグ抜けてるがきにせんといて

17 :Name_Not_Found:2023/08/24(木) 22:35:11.89 ID:???.net
h2の飾りって意味合いだと
<h2><span></span>見出し<span></span></h2>
って形にしたくなる

18 :Name_Not_Found:2023/08/25(金) 00:24:37.98 ID:???.net
親にdiv追加じゃなくh2にborder-imageとか

19 :Name_Not_Found:2023/08/25(金) 00:48:03.16 ID:???.net
>>15
その例だとborderや背景でできるだろとしか言いようがないけど
重要なことを教えると
空divなどと違って装飾のための入れ子は構造的に何もおかしくない
>マークアップ上で無駄なHTMLだよね
に答えるなら「無駄じゃない」で終わり

20 :Name_Not_Found:2023/08/25(金) 01:02:29.10 ID:???.net
あと見出しタイプ2という呼称からの推察になるが
h2のバージョン違いなら
>>17の言うようにh2の中身を変えるかな

通常
<h2 class="head2">
<span class="head2__label">見出し</span>
</h2>

星付き
<h2 class="head2--star">
<span class="head2__label">見出し</span>
</h2>

こんなん

21 :Name_Not_Found:2023/08/25(金) 07:56:42.91 ID:???.net
みんなCSSで背景作ればいいんです言うけど
レスポンシブ対応はどうすればいいの?

22 :Name_Not_Found:2023/08/25(金) 11:00:02.85 ID:???.net
どこに困るのかが分からん…

23 :Name_Not_Found:2023/08/25(金) 12:20:49.64 ID:???.net
background-sizeでcoverとかcontainとか色々あるだろ

24 :Name_Not_Found:2023/08/25(金) 17:48:20.87 ID:???.net
chromeの検証ツールで↓のページを見た時、表示端末にスマホを指定するとスワイプ操作で横スクロールできるけど、iPad系を指定するとスワイプできないできないんですがおま環ですか?
https://jsfiddle.net/om7uLzwy/show

実機で見た時にはスマホと同じようにスワイプで横スクロールできるはずですよね?
タブレット持ってないので試せず。。

25 :Name_Not_Found:2023/08/25(金) 18:14:39.31 ID:???.net
>>22-23
じゃあ見出しの文頭に画像を表示するにはどうしたらいい?
Bootstrap5使ってる静的HTMLサイト

26 :Name_Not_Found:2023/08/25(金) 19:01:42.19 ID:???.net
>>24
スワイプでスクロールできたよ
iPadは実機でないと動作わからないことも多いので、検証用に一枚導入してもらうのが確実ね
制作環境がMacならXcodeのSimulatorが使えるんだけど、Windowsだよね?

27 :Name_Not_Found:2023/08/25(金) 19:05:41.68 ID:???.net
>>26
じゃあおま環ですね。。
多分表示サイズを75%に落としてるのが原因のようです。

28 :Name_Not_Found:2023/08/25(金) 23:29:22.81 ID:???.net
>>25
https://jsfiddle.net/r1wkj0e6/

29 :Name_Not_Found:2023/08/25(金) 23:56:16.43 ID:HwTbDN0+.net
集団摘発案件、逮捕案件

表向きはIT企業だが本職は特殊詐欺グループ
SALES GO株式会社(セールスゴー)
セールスゴーは特殊詐欺グループです!!

元鹿島サポーターの押川定和も詐欺グループの一員です。

表向きのセールスゴー
↓↓↓↓↓↓
https://salesgo.co.jp/company

〒140-0002
東京都品川区東品川四丁目13-14
グラスキューブ品川

鹿島アントラーズ 鹿島アントラーズ
押川定和押川定和押川定和押川定和押川定和
セールスゴー セールスゴー セールスゴー
鹿島アントラーズ 鹿島アントラーズ
押川定和押川定和押川定和押川定和押川定和
セールスゴー セールスゴー セールスゴー
鹿島アントラーズ 鹿島アントラーズ
押川定和押川定和押川定和押川定和押川定和
セールスゴー セールスゴー セールスゴー
鹿島アントラーズ 鹿島アントラーズ
押川定和押川定和押川定和押川定和押川定和
セールスゴー セールスゴー セールスゴー

http://www.jpdo.com/cc02/18/img/34090.jpg

30 :Name_Not_Found:2023/08/26(土) 09:38:21.51 ID:???.net
>>28
ありがとう、ビューポートを使えば実装できるんだね

31 :Name_Not_Found:2023/08/26(土) 21:56:22.48 ID:22hMSXVv.net
=T=i=k=T=o=k(←迷惑でしたらこちらをNGしてください。)

友人にも紹介して、追加で¥3500をGETできる。
https://i.imgur.com/4BmBiOm.jpg

32 :Name_Not_Found:2023/08/26(土) 23:38:42.95 ID:???.net
>>31
ありがとう、実際にやってみるよ

33 :Name_Not_Found:2023/08/27(日) 01:28:51.90 ID:???.net
>>31
迷惑って自覚があるならNG避けようとすんなゴミカス

34 :Name_Not_Found:2023/08/27(日) 03:53:52.61 ID:???.net
HTMLかどうか分からないんですが、PC版Chromeでホームページを見ると「アプリをインストールしますか?」という謎の通知が出てきます。
出ないようにしたいのですがどうしたらいいでしょうか。

35 :Name_Not_Found:2023/08/27(日) 11:20:46.15 ID:???.net
>>19
borderや背景でそれぞれの星を回転ってできるの?
試しにborderで書いたやつを見せてくれんかの?

36 :Name_Not_Found:2023/08/27(日) 11:29:25.16 ID:???.net
>>19
セマンテックな観点からデザインに関する部分はCSSのみでやるべきだって昔誰かが言ってた気がしたんだよw
実際、疑似用を多数使いたいって要望は多いと思ったんだがねえ

>>20
せやね

37 :Name_Not_Found:2023/08/27(日) 12:21:28.55 ID:???.net
>>34
そのホームページとやらの素性が分からないので、その情報だけじゃ何も分からない

38 :Name_Not_Found:2023/08/27(日) 13:07:05.37 ID:???.net
>>35
背景もBorderも回転GIFをはりつければいいんじゃね?
後出し仕様があるなら知らんけど

39 :Name_Not_Found:2023/08/27(日) 13:21:01.44 ID:???.net
cssだけで回転させたいとか言い出しそうだけど
svgでやればイケる?

40 :Name_Not_Found:2023/08/27(日) 13:28:15.09 ID:???.net
>>38 >>39
最初の質問時に
>>12 疑似要素を4つ使いたい場合
>>15 ※星部分が回転

て書いた通り、疑似要素でcssだけで回転させるイメージなんだがやはりborderや背景では無理って事?
gifアニやsvg使うってのはなんか余計に面倒にならない?

41 :Name_Not_Found:2023/08/27(日) 13:29:29.82 ID:???.net
gifアニやsvg使うくらいならjsでやるわ

42 :Name_Not_Found:2023/08/27(日) 13:40:05.87 ID:???.net
そもそもお題の様なデザインはダサいから採用しないってのはあるが

43 :Name_Not_Found:2023/08/27(日) 14:30:59.88 ID:???.net
>>36
要望は多い!使えるなら5個でも6個でも使えたらsection一個で再現できるのになってデザインはもちろんあるぜ!
「デザイナーがコーディングできて、かつすべての要素を疑似要素2つまでで完結できるようデザインする」とかじゃない限りどう足掻いてもdivやspanは必要になるね
というかセマンティックなタグだけでどんなデザインも再現できるなら極論divとspanというタグは存在する意味がないんよ

44 :Name_Not_Found:2023/08/27(日) 14:35:34.56 ID:???.net
>>42
これは構造を見てわかるようにした例えだよ

つか既存のwebやcssの見出しデザインてもう出尽くし感と既視感しかないと思うんだが。
むしろそこに疑問を感じているのだ

45 :Name_Not_Found:2023/08/27(日) 14:35:55.82 ID:???.net
>>40
borderや背景それ自体は動かないからgifとか使うしかないよ
最小のタグでやりたいというお題に答えるならそうなるというだけ
普通は>>20みたいにするから親と子で疑似要素が4つ存在できる
さらに疑似要素が必要になる場合包括するタグを増やせばいい
入れ子と違って空要素は非推奨だが、実際の現場では背景画像が入れてあるだけの空divなんてざらにある
なんならalt空のimg放り込むなんてことも余裕である

46 :Name_Not_Found:2023/08/27(日) 14:36:43.81 ID:???.net
>>43
うん

47 :Name_Not_Found:2023/08/27(日) 14:41:15.43 ID:???.net
>>45
うん。なんか背景にはtransform使えるようだから、
背景は複数指定できるように昨今、なんかできそうな気もするんよな
既にやってる人いるならそれ貰ったほうがいいなって思い、、
borderでは回転制御の方法は思いつかないから出来るなら見てみたいって思った感じ

48 :47:2023/08/27(日) 14:43:52.38 ID:???.net
すまん、背景にtransformは勘違いかもしれん

49 :Name_Not_Found:2023/08/27(日) 16:02:08.77 ID:???.net
つか、お前らがセマンティクス教徒になってる理由は何なん?
手書き履歴書以上に意味がないと思うが
(手書き履歴書は「意味のない慣習にも30分ほどはつき合う気はある」という踏み絵にはなるが、
論理マークアップ/セマンティクスには本当に何の実質的意味も価値もない)

>>43
> というかセマンティックなタグだけでどんなデザインも再現できるなら極論divとspanというタグは存在する意味がないんよ
現在は逆で、divだけでどんなデザインも再現出来てしまうのでセマンティクスの存在意義がない(そしてこれは極論ではなく単なる事実)
だからみんなおつきあい程度に守ってるだけで、divが必要なら躊躇無くdiv使う(デザインをセマンティクスより優先させる)

50 :Name_Not_Found:2023/08/27(日) 19:40:10.34 ID:???.net
論理マークアップ不要なら
どんなデザインもdivだけで再現出来てしまうのは昔からやろ

51 :Name_Not_Found:2023/08/27(日) 19:46:36.84 ID:???.net
一昔前はSEOの為のタグ構造(例えばHタグの出現順番など)と
anotherLINTだかW3Cだかの厳格型のHTMLチェッカーで100点目指さないといけないみたいな風潮があったからな
anotherLINTだかがめちゃめちゃ厳しくて、100点取る為には一切無駄な記述をしてはならないって洗脳されてしまったんよ

52 :Name_Not_Found:2023/08/27(日) 21:44:32.36 ID:???.net
>>50
歴史は詳しくないがHTML5からじゃね?
HTML4だと各タグに汎用性/一般性が無かった気が

>>51
> anotherLINT (1997)
つまり26年前のゴミに未だに振り回されてると?
基本、最新版以外はゴミなWeb界で、無駄に伝統を重んじる連中がいたことにびっくりだわ

にしても今更要らんし、何らかの理由で枠が必要なら一番手っ取り早いのはdivだし、
装飾の為だけにHTML構造を変えるのが嫌なら全部div付けて使わずに誤魔化すのが一般的なわけで、
そうすればいいし、また、そうするしかないとも思うが
(現在のCSSには枠を付加する機能がないから、
あらゆるデザインをCSSの差し替えだけで対応出来るようにするには、
あらゆる場所にdivを配置し必要な場合には枠として機能するように仕込んでおく必要があって、
これがプログラムでHTML生成された場合にdivが無駄に入れ子になる原因だが、
15もこれってだけの話)

53 :Name_Not_Found:2023/08/27(日) 22:05:48.39 ID:???.net
anotherLintって聞いて26年前とか言い出す謎リテラシーの時点で読む価値無いのはわかった
その理屈だとhtmlも30年前の言語になるだろ

54 :Name_Not_Found:2023/08/28(月) 01:21:28.18 ID:???.net
>>53
ね。俺も最初のそれで、はァ??
ああ、後発が自分の立ち位置を正当化したいのねって思った

55 :Name_Not_Found:2023/08/28(月) 01:23:06.57 ID:???.net
ちな一応教えてお手上げるとanotherLINTが機能しなくなって廃れたのはHTML5草案あたりだから2012年ころかな。

56 :Name_Not_Found:2023/08/28(月) 01:31:38.13 ID:???.net
モールのASPやメルマガなんかだとソースの文字数制限なんかも厳しくて、
余計なソース、将来使うかもしれないから予め書いておくなんて考えが一切許されん環境もあったな。
まあ今は自由な環境の方が多いから、予測できる範囲で入れ子はしておくし、使ってない汎用関数も書きっぱなしだわ

57 :Name_Not_Found:2023/08/28(月) 06:32:47.09 ID:???.net
>>53-54
なるほど先発が自分の立ち位置を正当化する為に26年前の開発手法を今でも踏襲しているのか
定義通りの老害だな

>>55
逆に考えてみろ
必要ないから廃れた、HTML5に対応する価値がなかったからやらなかった
(まあ継承してHTML5に対応してるサイトも提供されてるが)


>>56
> 使ってない汎用関数も書きっぱなし
いや使ってないと分かってるのなら落とせよ
多分ビルド時に自動で落とせるし、それ以前にIDEが文句言うと思うが

> 予測できる範囲で入れ子はしておくし
これが比較的許されるのは、ユーザーがCSS当てたときに枠がないと詰むからだよ
お前が今使ってなくても、ユーザーが使う可能性もあるという事

58 :Name_Not_Found:2023/08/28(月) 06:40:14.68 ID:???.net
タグに意味をもたせたいから使う
出会ったこともないけどもし全部がdivのコードみたら乾いた笑いが出るな
お前それ管理どうすんの?って
そしてそのままリファクタissue化される

59 :Name_Not_Found:2023/08/28(月) 07:19:30.09 ID:???.net
>>58
抽象思考出来無い馬鹿乙

全部がdivなら、ほぼ全部にクラスが付いてるはず
実際自動生成されたHTMLはほぼこの形態だろ
タグ名とクラスは役割が被ってて、クラスの方が一般的に使えるんだよ
だから(div+クラス)の形態で生成される

ただ全部がdivなら、省略して(タグ名は省略+クラス)でも同じで、
ならクラスの部分をタグ名にして(タグ名部分にクラス+クラス無し)となってるのが、
お前らが拘ってる論理マークアップ()、セマンティクス()なんだよ
意味的には同じで、書式が違うだけ

60 :Name_Not_Found:2023/08/28(月) 07:23:28.87 ID:???.net
>>59
HTML Living Standard
https://html.spec.whatwg.org/multipage/

Sass Document
https://sass-lang.com/documentation/
Sass Guideline
https://sass-guidelin.es/

Javascript Reference
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference

言ってること小3で草
わざわざ公式が用意してくれてんのに老害がー!ってワールドスタンダード全無視じゃん

何か語る前に何のためにドキュメントが存在してるか、まず初歩の初歩から見直したほうがいいわ

嫌ならお前がルール決める側にまで上がってお前が定義変えろ
それが無理なら公開オナニーやめるかブランチ切ってオナっとけ

61 :Name_Not_Found:2023/08/28(月) 08:04:00.45 ID:jDjXZqSY.net
>>60
そのドキュメント類のどこに「論理マークアップしろ」と書いてあるんだ?
(せめてW3C謹製のドキュメントを持ってくるべき)

現在の状況において合理的価値が無い事に拘り続けてるから「定義通りの老害」だと言ってる

62 :Name_Not_Found:2023/08/28(月) 08:10:42.44 ID:???.net
>>61
苦しそうで草

63 :Name_Not_Found:2023/08/28(月) 08:20:14.54 ID:???.net
>>61
横からで悪いけど、今はWHATWGに移管されてるよ
よく調べた?

64 :Name_Not_Found:2023/08/28(月) 08:28:25.99 ID:???.net
>>63
知ってるよ
完敗したW3CはWHATWG(ブラウザ勢)の規格を追認するだけの機関に成り下がった
だからその中には「論理マークアップしろ」なんて一言も書いてないはず

だからお前らは何を根拠に「論理マークアップしろ」と考えるのか?と聞いてるのだ
「昔からそうだから」なら、現状認識を改めることのない「定義通りの老害」だろ

65 :Name_Not_Found:2023/08/28(月) 08:32:44.81 ID:???.net
>>64
60に言ってね同一人物認定されたくないから横からって書いたの理解して

一つ言うなら今の標準も知らなかったあなたが現状について何かを言っても誰も納得しないと思う。
けど現状をなんとかしたいってのはよく分かったよ頑張ってね

66 :Name_Not_Found:2023/08/28(月) 09:25:21.32 ID:???.net
>>65
コミュ障か?
W3C謹製の『現行の』「論理マークアップしろ」と書いた文書なんて無いはずと分かってての発言だぞ
『昔の』なら多分あるんだろうけど
まあこんな小学生レベルの揚げ足取りはどうでもよくて、問題は、

現在は公式には誰も「論理マークアップしろ」なんて言ってないのに
お前らが認識改めずに昔のままで「論理マークアップしろ」と考えるのは「定義通りの老害」だろ

67 :Name_Not_Found:2023/08/28(月) 09:33:46.70 ID:???.net
>>66
興奮しすぎ少し落ち着きなよ。
じゃあそれでいいから好きにdivdivすればいいと思うよ誰も止めないから

けどその先の展望があって且つ提示し続けないと、
それこそあなたが上で言われてるようなオナニー屋さんとして評価されるから気をつけてね

68 :Name_Not_Found:2023/08/28(月) 09:48:48.84 ID:???.net
>>67
展望もクソも、div使わないとデザイン出来ないからdiv使う、これが普通の人だろ
お前ら老害は、「完璧な論理マークアップでは再現出来ないデザインがあると知ってるが、
それでも論理マークアップを止めない!!!」だろ
完全に論理マークアップオナニー屋じゃん

まあこれまで通りdivもspanも禁止でどうぞ
誰も止めないし、君達が今後とも公開オナニーし続けるのも自由だし
実際、現実はdivdivしてるだろ、俺だけの話ではなく

69 :Name_Not_Found:2023/08/28(月) 09:54:28.24 ID:???.net
>>68
オナニー返しww
ごめん笑っちゃったそれ効いてたんだね
まあとにかく頑張ってね

70 :Name_Not_Found:2023/08/28(月) 11:59:45.34 ID:???.net
>>64
横からすまんが君はSEO対策してないの??
何のために論理マークアップって、巡回ロボに構造を伝えるためだろ
Googleの仕様読んだことないのかえ?

71 :Name_Not_Found:2023/08/28(月) 12:02:54.80 ID:???.net
>>57
>ユーザーがCSS当てたときに枠がないと詰むからだよ
そんな説は聞いたことない。それ主観だろ。

ユーザーCSSの為にHTML配慮なんてしてるサイトなんてねーよw
そもそも構造決まってんならXpathで特定できるし。

72 :Name_Not_Found:2023/08/28(月) 12:03:48.11 ID:???.net
老害老害いうけどあなた何歳なの?

73 :Name_Not_Found:2023/08/28(月) 12:11:22.13 ID:???.net
このdivdiv君って以前も同じ内容で暴れて、なぜ必要なのかを具体的な大手サイトを複数提示して教えてあげて
その時納得したはずなのに、また考えが元に戻ってる・・

それと俺に勘違いして噛みついてきた事に謝れって言ったらそこから静かになって逃げたよね?

74 :Name_Not_Found:2023/08/28(月) 14:09:13.04 ID:???.net
divdiverはコテつけてくれ

75 :Name_Not_Found:2023/08/28(月) 14:41:32.40 ID:???.net
>>70
それもお前らの奇妙な願望で、都市伝説だろ
以下にはお前らがやってる「装飾div/spanを使わない」なんて書いてない
https://developers.google.com/search/docs/fundamentals/seo-starter-guide?hl=ja&visit_id=638287958271530595-2635680571&rd=1

というかね、そもそも検索エンジンは各サイトの「優良コンテンツ」をレーティングするわけで、
それが仮に「優良マークアップ順で中身無視」なら検索エンジン間の競争に負けるだろ
だからそっち方向には圧力はかからない

76 :Name_Not_Found:2023/08/28(月) 14:44:45.28 ID:???.net
「div spanは必要に応じて使うべきだが意味のある部分はセマンティックなタグで作ろう」
「それはお前らの願望!div spanは使うななんて書いてない!」
これもう障害だろ

77 :Name_Not_Found:2023/08/28(月) 15:01:10.42 ID:???.net
>>76
「セマンティックなタグを駆使すれば検索順位が上がります」とも書いてないぞ
つかお前らのその都市伝説的願望、どこから来てるんだ?
(なおHTML講座みたいなサイトではそう吹聴されてるのは知ってる)

78 :Name_Not_Found:2023/08/28(月) 15:19:38.33 ID:???.net
>>75

>>64
>だからお前らは何を根拠に「論理マークアップしろ」と考えるのか?と聞いてるのだ

論理マークップが何故必要かについて SEOの為だと言っているんだけど。

あんた、俺が指摘するまでここまで一切SEOの事一切触れてなかったけど>>70で言われてハッとしたんだろ?

79 :Name_Not_Found:2023/08/28(月) 15:20:07.14 ID:???.net
>>77
俺はそんな主張してないから知らんがな

80 :Name_Not_Found:2023/08/28(月) 15:20:50.62 ID:???.net
>>77
何もわかってない。

>HTML講座みたいなサイトではそう吹聴されてるのは知ってる
どこそれ?しらんな。具体的にソース出して。

81 :Name_Not_Found:2023/08/28(月) 15:27:46.67 ID:???.net
>>78
> 論理マークップが何故必要かについて SEOの為だと言っている
論理マークアップがSEOに有利という話の出所はどこなんだ?
(検索エンジン各社がそう言ってるのならいいが、そうではないだろ)

82 :Name_Not_Found:2023/08/28(月) 15:43:03.19 ID:???.net
>>81
有利ではなくやらないと不利になるんだよ。 アルゴの仕様はそりゃ公開してないだろ。
これは何年も何十サイトと実際に自分の管理サイトと検索順位を監視して検証してきてわかっている事だから。
例えばH1タグをdivにしてみたり、titleタグを空にしてみたり試してみろ。

てかあんた、そんな事きいてくる時点でお察しだぞ

83 :Name_Not_Found:2023/08/28(月) 15:50:41.12 ID:???.net
>>64
>だからお前らは何を根拠に「論理マークアップしろ」と考えるのか?と聞いてるのだ

てか論理マークアップしてない有名サイトなんてどこにあんの?
具体的なURLを今教えて

84 :Name_Not_Found:2023/08/28(月) 15:52:19.50 ID:???.net
↑検索エンジンのページ以外でな

85 :Name_Not_Found:2023/08/28(月) 15:57:53.01 ID:???.net
何の生産性もないからdivdiverの講演会とそれへの反論はよそでやってほしい

86 :Name_Not_Found:2023/08/28(月) 15:57:59.87 ID:???.net
>>82
つまり経験知か
なるほど出所としては妥当だろうし、ずっと更新されないのも納得ではある

> 例えばH1タグをdivにしてみたり、titleタグを空にしてみたり試してみろ。
なお、前者は分かるが、後者はあり得ない
(titleはタブに表示されるので検索切ってても必要)

87 :Name_Not_Found:2023/08/28(月) 15:58:35.36 ID:???.net
>>86
コテつけろ

88 :Name_Not_Found:2023/08/28(月) 16:02:30.63 ID:???.net
>>86
なんか自分の方が新しい事知ってますよってていで行きたいんだろうけど
残念ながら俺らも実務で最前線でやってんだから常にアップデート求められる環境なんよ。
あんたは、恐らくSEO対策をした事がないよね。
YESかNoで答えて

89 :Name_Not_Found:2023/08/28(月) 16:36:17.04 ID:???.net
SOHOやフリーで本当に細々と食ってる奴の134人目
https://mevius.5ch.net/test/read.cgi/hp/1687357689/

90 :Name_Not_Found:2023/08/28(月) 20:19:33.70 ID:???.net
質問と返しですぐに見抜かれるのに
なんで自分の知らないことを知ってるように装うんだろ
>>61で色んな人に見限られただろうに
損な性格してるわ

91 :Name_Not_Found:2023/08/31(木) 19:38:35.37 ID:???.net
divdiv君、また追い詰められて沈黙、逃走
前回と同じじゃん

92 :Name_Not_Found:2023/08/31(木) 20:21:01.23 ID:???.net
召喚すな

93 :Name_Not_Found:2023/09/01(金) 07:38:32.84 ID:???.net
なにそのdivdiv君って何?
xhtml星から生まれたの?

94 :Name_Not_Found:2023/09/02(土) 00:22:15.14 ID:???.net
ブランチきってオナっとけって結構殺傷能力高いよな…一方的過ぎて見ててちょっと可哀想だった
一応初心者スレだし

95 :Name_Not_Found:2023/09/02(土) 01:21:26.04 ID:???.net
質問スレであって初心者スレではない
真面目に質問してる初心者にはあんなふうにならんだろう
上級者ぶってイキってる無知ウンコだから懲らしめられる

96 :Name_Not_Found:2023/09/03(日) 16:28:20.78 ID:Udh4NPPz.net
質問です

div "display: flex" の中のアイテム(div)の高さを親の div 内に収めたいです。
親 div の中に 子 div だけ置くとできるのですが、
子 div の中に h2 と div を置くと、h2 の高さのぶんだけ親 div からはみ出してしまいます。

display: flex で、子 div の中に見出しと overflow-y: scroll な div を置きたいとき、
どうすればはみ出さなくなるでしょうか?
見出しと、スクロールバー有りのコンテンツを置いて flex で並べたいです。

https://i.imgur.com/sXA8Rcs.png
https://jsfiddle.net/0dghepau/13/

97 :Name_Not_Found:2023/09/03(日) 16:39:34.32 ID:???.net
>>96
子もflexにすると親の高さを継承する

98 :Name_Not_Found:2023/09/03(日) 16:42:57.69 ID:Udh4NPPz.net
>>96
flex は関係なかったので、最小の例を作りました。
子 div の中に h2 と div を置いて、子 div の高さを親 div と同じにしたいです。

https://jsfiddle.net/7kq2mvbd/10/

99 :Name_Not_Found:2023/09/03(日) 16:45:27.91 ID:Udh4NPPz.net
>>97
ありがとうございます
できました

https://jsfiddle.net/7kq2mvbd/12/

100 :Name_Not_Found:2023/09/05(火) 18:05:42.35 ID:???.net
比較的最近リリースされたCSSで使えるのってなんかある?

Scroll-driven Animations
@scope

この辺も便利なんだろうけどペースが早いわ

101 :Name_Not_Found:2023/09/06(水) 10:07:05.38 ID:???.net
最近リリースといっても他のブラウザで対応してないのもあるから
今すぐ無理に使わなくてもよい

102 :Name_Not_Found:2023/09/06(水) 11:11:36.87 ID:???.net
リリースは全然最近じゃないけど自分が使い始めたのが最近なのは
scroll-gap

overflow: clip;
かな

103 :Name_Not_Found:2023/09/06(水) 11:41:43.45 ID:???.net
>>102
さんくす!
scroll-gap 
→ググってもでてこんな

代わりにscroll-paddingってのを知れたから良かった。これでページ内リンクの問題も楽になりそうな

overflow: clip;
→使いどころがわからん、気が向いたら教えてクレメンス

104 :Name_Not_Found:2023/09/06(水) 12:00:44.35 ID:???.net
scroll-padding 調べてみた
めっちゃ便利だねー
margin-top と padding-top で疑似的に調整してやってたわ
ありがとう

105 :Name_Not_Found:2023/09/06(水) 12:31:57.86 ID:???.net
>>103
すまんscroll-paddingだったわw

overflow:clip;は親に設定しても子をposition:sticky;にできる(親がhiddenだと子はstickyの基準点を見失う)
厳密にはいろいろ違うんだけどhiddenの上位互換みたいな感じ

106 :Name_Not_Found:2023/09/06(水) 12:53:16.71 ID:???.net
CSSのみでアンカーリンクのスクロールが滑らかにできるのに
いまだに昔書いたJQueryを使いまわしてる

107 :Name_Not_Found:2023/09/06(水) 13:33:15.44 ID:???.net
cssのスクロールビヘイビアは速度がいじれるようになるまでは
スムーススクロールはjsだなあ
そもそもスムーススクロール要らん派だけど要望は多い

108 :Name_Not_Found:2023/09/06(水) 13:35:09.53 ID:???.net
なるほど、scroll-beheivorでの欠点をscroll-paddingで補えばCSSだけで完結できるわけか

109 :Name_Not_Found:2023/09/06(水) 13:35:38.72 ID:???.net
ああ、たしかにイージングは欲しいね

110 :Name_Not_Found:2023/09/07(木) 01:49:29.45 ID:???.net
>>100
自分も全然最近じゃないけど、display: contents かなー
直下の要素じゃなくてもgridに振り分けられるのがえらい便利だった

111 :Name_Not_Found:2023/09/07(木) 10:48:14.19 ID:UAGv2jDr.net
CSSでのスムーススクロール使ったサイトが増えてきたからか独自にJavaScript使ってスムーススクロール実装したサイト見ると違和感覚えるときあるな
懐かしい感じというかなんというか
CSSに任せられることはCSSでやってしまう方がシンプルでいい気がする

112 :Name_Not_Found:2023/09/07(木) 11:32:09.08 ID:???.net
>>111
speedが遅い😭

113 :Name_Not_Found:2023/09/07(木) 12:41:04.67 ID:???.net
>>112
遅いってページ内移動の速度のこと?
cssだと速度はブラウザ依存だと思うが特に遅いとは思わないけどな
これ以上速くしてもページ内移動だと分かりにくくなるかなと
それなら最初からスムーススクロール使わないって選択するかな

114 :Name_Not_Found:2023/09/07(木) 13:32:24.71 ID:???.net
>>113
見た目上というかeasingというべきかな
距離が短いときも長いときも同じ時間で割られるので
短い時に異常にゆっくりになる

115 :Name_Not_Found:2023/09/09(土) 14:57:01.91 ID:???.net
flexでもgridでもgapが使えるの最高すぎる

116 :Name_Not_Found:2023/09/09(土) 16:31:00.55 ID:???.net
gap最高だよね!超便利 なぜなかったか不思議なくらい

117 :Name_Not_Found:2023/09/09(土) 18:45:24.00 ID:???.net
なにこの良スレ

118 :Name_Not_Found:2023/09/09(土) 19:11:42.35 ID:???.net
<ul>
<li>◎◎◎</li>
<li>◎◎</li>
<li>◎◎◎◎◎</li>
<li>◎◎</li>
<li>◎◎◎◎</li>
<li>◎◎◎◎</li>
<ul>

こんなHTMLで下記のように最大の文字数(この場合は全角5文字)を基準として各子要素を同じ幅で割り振りたいのですがどうすればいいですかね
flexでもgridでもかまわないのですが
<li> にwidthをあてて別に差し支えはないのですが、同様な記述が10数カ所あるもんでもう少しスッキリできないかと…

・◎◎◎  ・◎◎   ・◎◎◎◎◎
・◎◎   ・◎◎◎◎ ・◎◎◎◎

119 :Name_Not_Found:2023/09/09(土) 19:35:25.38 ID:???.net
grid-template-column: repeat(3, 1fr);

120 :Name_Not_Found:2023/09/09(土) 20:20:45.75 ID:???.net
>>119
書きそびれたけど、最大文字数によっては子要素が2つになったり5つになったりするんですよねえ

121 :Name_Not_Found:2023/09/09(土) 20:24:25.64 ID:???.net
auto-fillかauto-fit好きな方

122 :Name_Not_Found:2023/09/09(土) 20:31:29.72 ID:???.net
grid便利そうなんだけど覚えきれない
ジェネレーターで使ってやるぐらいだわ
偉いなお前らは

123 :Name_Not_Found:2023/09/09(土) 21:50:56.10 ID:???.net
auto-fit大好き

124 :Name_Not_Found:2023/09/10(日) 00:28:44.28 ID:???.net
flexboxしか使わんけどgrid必要な場面がまったくない

125 :Name_Not_Found:2023/09/10(日) 03:20:37.16 ID:???.net
auto-fillやauto-fitはflex-wrapでは代替がきかないな
grid-areaもorderにはできないことができる
display:contentも組み合わせれば大体のデザインはワンソースでできる

126 :Name_Not_Found:2023/09/10(日) 05:50:08.75 ID:???.net
>>124
PC時は
左に画像、右に見出しとリード
SP時は
上から
見出し、画像、リード
これのためだけにgrid使ってる

127 :Name_Not_Found:2023/09/12(火) 13:16:44.22 ID:ZyApT9EM.net
チェックボックスを用いてフィルタリングが出来るフォームを作ろうとしています。

□全部 □円形 □四角形 □青色 □緑色

とチェックボックスが並んでおり、その下には

丸くて青色・四角くて青色・丸くて緑色・四角くて緑色

・・・のオブジェクトが並んでいて、チェックボックスにチェックを入れる事で該当のオブジェクト以外がhiddenになるようなイメージです。
実装自体は出来そうなのですが、挙動をどうするかで悩んでおりアドバイスを頂きたいです。
例えば「円形」「四角形」
の両方にチェックを入れた時、挙動としては
(1)円形かつ四角形のオブジェクトを可視化
(2)円形のオブジェクトと四角形のオブジェクト、および円形かつ四角形のオブジェクトを可視化
のいずれが適切というか、ユーザから見て自然でしょうか。
(上の例では円形と四角形しか無いですが、実際には両方をあわせ持つオブジェクトもあるものと想定して頂きたいです)

128 :Name_Not_Found:2023/09/12(火) 14:47:08.43 ID:???.net
自分は2

129 :Name_Not_Found:2023/09/12(火) 14:52:45.66 ID:???.net
個人的には2だが逆の人いるんだよな
orかandかのラジオボタンも作っちゃえば

130 :Name_Not_Found:2023/09/12(火) 17:22:16.78 ID:???.net
>>127
俺も 2

131 :Name_Not_Found:2023/09/12(火) 19:02:35.63 ID:???.net
自分は1
hiddenにしていくなら1が自然だと思う
絞り込み検索って書いておいてくれるとなお嬉しい感じ

2の挙動は初期状態が表示件数ゼロで項目を足していく時に使うのが自然に感じる

132 :Name_Not_Found:2023/09/14(木) 13:06:02.38 ID:aPP30ZSe.net
tableの作り方で質問です。
こんなテーブルを作ろうと思っています。

a: colspan=2
b: colspan=2
c: colspan=4
d: 指定不要
e: colspan=2
f: 指定不要

とすればよいと思うのですが、
テーブル全体の幅やeとfの中身のテキスト量にかかわらず
eとfの幅が均等な状態を維持したいです。
その場合、どのように設定すればよいでしょうか。

必要な情報かわからないですが以下補足です。
aとdのwidthは固定、
bはテーブル全体の幅からaの幅を引いた幅
cは未固定(テーブル全体の幅)
eとfはテーブル全体の幅からdの幅を引いた幅を2分した大きさとなるようにしたいです。
https://o.5ch.net/21xso.png

133 :Name_Not_Found:2023/09/14(木) 13:48:54.86 ID:???.net
dが固定ならefはcalc使えばよさそうだけど
tableだとダメとかあるんかな

134 :Name_Not_Found:2023/09/14(木) 14:04:55.94 ID:???.net
>>132
<col>を用意してそれにwidthを指定したらよいのでは

135 :132:2023/09/14(木) 15:05:02.01 ID:???.net
colタグの存在を初めて知りました。
calcを用いた指定と合わせて試してみたのですが、やり方や考え方が間違っているんでしょうか…

https://codepen.io/Nickey-the-looper/pen/MWZoPJv

136 :Name_Not_Found:2023/09/14(木) 16:40:54.34 ID:???.net
grid使うとか他にもっと良い方法があるのかもしれないけど、とりあえずtable使うということで
・tableの最上段にダミーでtr1行追加
・更にbと同一幅のセルを左から4番目に追加
・最上段だけvisibility: collapse;で不可視化(hiddenだとレイアウトからも除去されるので)
ってのはどうでしょう?
https://jsfiddle.net/dumov8ng/

137 :Name_Not_Found:2023/09/15(金) 01:14:20.28 ID:???.net
Bootstrap で出来ないの?

138 :Name_Not_Found:2023/09/15(金) 04:02:19.83 ID:9yhdlK5+.net
列数を増やしてしまえ

139 :Name_Not_Found:2023/09/15(金) 04:07:26.56 ID:???.net
あとは行にtable追加するとか
昔はよくやってたけど今はもっと便利な方法があるのかな

140 :Name_Not_Found:2023/09/15(金) 04:58:56.21 ID:???.net
みんな>>132の説明でどんなテーブルかわかるん?
俺全然わかんねえや…

141 :Name_Not_Found:2023/09/15(金) 08:31:34.98 ID:???.net
一番下のお絵かきの画像

142 :132:2023/09/15(金) 16:21:00.96 ID:???.net
>>136さんと138さんの方法で出来ました!
大変助かりました、ありがとうのざいます。
gridはよくわからなかったので勉強してみます。

>>137
まさにbootstrap使ってるんですが、gridレイアウトを使ったらどうかということでしたかね?

143 :Name_Not_Found:2023/09/15(金) 16:24:10.05 ID:???.net
なぜgridはflexに負けたのですか?

144 :Name_Not_Found:2023/09/15(金) 17:02:01.69 ID:???.net
>>141
あー、分かる人にはなんか表示されてるのか
納得

145 :Name_Not_Found:2023/09/15(金) 17:06:03.89 ID:???.net
>>143
別に勝ち負けないじゃん?
flexの出始めと一緒で、使えるようになった人から使っていく流れっしょ

146 :Name_Not_Found:2023/09/15(金) 17:33:04.16 ID:???.net
というか今でもflex使うけど
単に横一列縦一列に並べるなら絶対flexのが早いし

147 :Name_Not_Found:2023/09/15(金) 18:45:00.12 ID:???.net
>>142
>>135のcodepen見て>>136作ったけど、>>132の画像ちゃんと見てなかったから一応修正
https://jsfiddle.net/xjo2qLcy/

結局のところtable-layout: fixedの場合は

table-layout - CSS: カスケーディングスタイルシート | MDN
https://developer.mozilla.org/ja/docs/Web/CSS/table-layout#%E5%80%A4

> 表と列の幅は table 要素と col 要素の幅によって、または最初の行のセルの幅によって設定されます。後続する行のセルは列の幅に影響しません。

ってことなので、先頭行がcolspanで結合してる場合には後続のセル幅のコントロールが少し面倒
colタグ使ってもセルが結合してると難しいね

あとはダミー追加したくなかったら、あまり推奨はされてないけどtableの中にtableをネストしてもイケる
https://jsfiddle.net/q48phobx/

148 :Name_Not_Found:2023/09/15(金) 21:31:12.70 ID:???.net
<div id="hoge">
 <ul>
  <li>文1</li>
  <li>文2</li>
  <li>文3</li>
 </ul>
</div>

#hoge > ul li {
・・・
}

でW3C CSS検証かけると

#hoge > ul li 文法解析エラーが発生しました [empty string]

とエラーになってしまいます。
何がいけないのでしょうか?
CSS(表示)としては正常に働いています。

149 :Name_Not_Found:2023/09/15(金) 22:26:35.76 ID:???.net
今となってはflexとgridなしは考えられないな
昔はflexなしでTableレイアウトをcssで再現してたけど無理があったよね

150 :Name_Not_Found:2023/09/15(金) 23:09:19.85 ID:???.net
>>148
#hoge > ul li {
background : #f00;
}
はエラー無しで通るから、どこかでミスタイプしてたりしない?

151 :Name_Not_Found:2023/09/16(土) 01:37:35.45 ID:???.net
gridがflexよりも優秀な時ってどういう時があるの?

152 :Name_Not_Found:2023/09/16(土) 02:13:25.20 ID:???.net
少し上読めば?

153 :Name_Not_Found:2023/09/16(土) 02:28:55.38 ID:???.net
>>152
たぶん同じ質問繰り返して荒らしてるだけだと思う

154 :Name_Not_Found:2023/09/16(土) 21:04:55.77 ID:???.net
>>150
ダメですか?

#hoge > ul li {
color: #03f;
text-decoration: none;
margin-bottom: 5px;
border-radius: 5px;
padding: 2px 10px;
background: #ddd;
outline: none;
display: inline-block;
}

#hoge > ul li:hover {
color: #06c;
background: #fff;
border-radius: 5px;
}


ちなみにHTMLはエラーなしです。

155 :Name_Not_Found:2023/09/16(土) 21:29:04.44 ID:???.net
>>154
コピペしたけど↓は通ったよ
https://jigsaw.w3.org/css-validator/validator

156 :Name_Not_Found:2023/09/16(土) 22:10:26.63 ID:???.net
>>154
もしかしてcss-validator.org使った?
正解はこっち https://jigsaw.w3.org/css-validator/

157 :Name_Not_Found:2023/09/16(土) 22:57:43.87 ID:???.net
https://css-validator.org/validator.ja.html
で直接入力(元ソースコピペ)、オプションをCSS3にしてます。
ここでなくてもいいのですがどこかのブログか何かで紹介されててブックマークしたのを昔からそのまま使ってるだけです。
154をそのまま貼ると同様エラーになります。

>>156
そこと何が違うのでしょうか?

158 :Name_Not_Found:2023/09/16(土) 23:58:24.80 ID:???.net
古くて機能してない
そこじゃなくていいなら使うな

159 :Name_Not_Found:2023/09/17(日) 00:02:03.02 ID:???.net
>>157
border-radiusでempty stringを吐くバグがあるらしいね
https://www.w3.org/Bugs/Public/show_bug.cgi?id=11975

border-radiusをなくしたらエラーでなかったよ

160 :159:2023/09/17(日) 00:04:07.33 ID:???.net
原因ってことで回答したけれども
まっとうなほうを使うようにするのがお薦め

161 :Name_Not_Found:2023/09/17(日) 00:10:22.20 ID:???.net
バリデーターやツールはW3Cの本家サイトから辿った方が無難だね

Validators and tools | Developers | W3C
https://www.w3.org/developers/tools/

162 :Name_Not_Found:2023/09/17(日) 14:11:21.66 ID:???.net
コンテンツのヘッダ部分にposition: sticky を適用して、スクロールしてヘッダ部分が固定されてるとき、その背後に隠れてる部分(文字とか)をぼかして表示させたいのですが、どうしても効きません
やってるのは、
ヘッダ部分にposition:sticky、塗りつぶしで適当な透明度の背景、
backdrop-filter: blur(5px)
です。
背後に文字などが来たときに、その文字をぼかしたいです。
イメージとしてはWeb twitterのヘッダ部分にみたいな感じです。

スマホだとちゃんと見れないかもですが、検証用の簡易的なコードです。
https://jsfiddle.net/tb62nuxh/

実際には、固定されてるかどうかをJSで処理し、必要に応じてスタイルを適用します。

163 :Name_Not_Found:2023/09/17(日) 14:26:05.21 ID:???.net
.header {
position: sticky;
top: 0px;
-webkit-backdrop-filter: blur(3px);//Safari
backdrop-filter: blur(3px);
}

164 :Name_Not_Found:2023/09/17(日) 14:38:50.16 ID:???.net
最新のSafariでもまだベンダプリフィクス要るのよね…

165 :Name_Not_Found:2023/09/17(日) 15:23:24.95 ID:???.net
chromeだと動くからsafariで検証してたってことか

166 :Name_Not_Found:2023/09/17(日) 18:46:28.15 ID:???.net
あれ、すみません
>>162のリンクだと途中の内容だったみたいで、保存済みのほうが↓です
https://jsfiddle.net/tb62nuxh/2/

>>163の内容だと -webkit~のが足りなかったぐらいだったぐらいでそれも追加したのですが、やはり、ぼかし表現にはなりませんでした。
PC版Chrome(116)で確認してます。
何か他に必要でしょうか?

167 :Name_Not_Found:2023/09/17(日) 19:22:33.11 ID:???.net
>>166
opacity入れると効かないので外して、代わりにbackground-colorを#000aぐらいに指定

168 :Name_Not_Found:2023/09/17(日) 19:37:42.81 ID:???.net
opacityだめなんだね
rgbaで指定するのがよいのかな

169 :Name_Not_Found:2023/09/17(日) 19:58:27.43 ID:???.net
>>167
あぁ、ありがとうございます!
opacityダメなのは盲点でした…
ドキュメントでは「少なからず透明にして」とあったのでopacity付けてしまいました。

170 :Name_Not_Found:2023/09/18(月) 01:41:29.02 ID:???.net
ちょっとスレ違いなのかもしれないんですが…
横スクロールのゲームの攻略記事を作るにあたって、横に長いステージをキャプチャしたものを掲示したいです。
その方法として、今のところ横スクロール可能なiframe的な要素の中に横長の画像を配置する想定ですが
この方法が本当にベストなのかがわからず、他に良い方法があったら教えていただきたいです。

具体的にどの程度の長さになるかはまだ作成していないためわからないです。

171 :Name_Not_Found:2023/09/18(月) 02:12:45.85 ID:???.net
>>168,169
rgbaの方が透明度を把握しやすいかもね
自分はお手軽に短縮hexでやっちゃうことが多いけど

>>170
連続していることを優先するなら想定どおりの形、閲覧性を優先するなら適当なエリアで分割して縦に並べるかな
マウスで横スクロールは両手使わないとだし…

172 :148:2023/09/18(月) 10:31:00.56 ID:???.net
>>156,159
具体的にありがとう。
他にも手前と背景が同じ色などどうでもいいエラー出されてたのですが全て一気にエラーなしになりました。

>>161
まさかあんな紛らわしいページが存在してるとは想像もしませんでした。今後そうします。
ありがとう。

173 :Name_Not_Found:2023/09/19(火) 21:47:17.97 ID:???.net
>>132
tableを入れ子にすりゃかんたん
d,e,fを一つのテーブルにしたらいいよ。

174 :Name_Not_Found:2023/09/19(火) 21:52:50.73 ID:???.net
>>173
>>147
> あとはダミー追加したくなかったら、あまり推奨はされてないけどtableの中にtableをネストしてもイケる
> https://jsfiddle.net/q48phobx/

175 :Name_Not_Found:2023/09/20(水) 03:42:06.35 ID:???.net
defのあとにまたabcdefが続くような構造だと
入れ子にしたらむちゃくちゃになる

176 :Name_Not_Found:2023/09/20(水) 14:48:36.98 ID:???.net
お題に無い話を勝手に足されても困る

177 :Name_Not_Found:2023/09/20(水) 14:57:13.99 ID:???.net
パっと見だとそもそもa d c部分はテーブルですらない

178 :Name_Not_Found:2023/09/20(水) 16:12:09.27 ID:???.net
ちょっと何言ってるか分かんない

179 :Name_Not_Found:2023/09/20(水) 16:18:11.65 ID:???.net
Safari 17.0がリリース、プロファイル機能のほか、多数のAPIや要素のサポートが追加される - GIGAZINE
ttps://gigazine.net/news/20230920-webkit-safari-17-0/

180 :Name_Not_Found:2023/09/20(水) 16:27:25.24 ID:???.net
TwitterでiOS17のSafariでフォントの太さがーって騒いでるね

181 :Name_Not_Found:2023/09/20(水) 19:25:50.13 ID:???.net
次のようなcssがあります。

#hoge_1:checked ~ #target_1 {
省略
}

このhoge_nとtarget_nはコンテンツのボリュームに応じて動的に増減し、nの部分は連番になっています。
それらの要素全てに上記のようなcssを適用したいのですが、どのように書くのがよいでしょうか?

182 :Name_Not_Found:2023/09/20(水) 19:34:36.77 ID:???.net
https://developer.mozilla.org/ja/docs/Web/CSS/Attribute_selectors
数字限定とかでなくてもいいなら、属性セレクタ使えばいいんじゃないかな

[id^="hoge_"] でid属性がhoge_で始まるもの全てになる

183 :Name_Not_Found:2023/09/21(木) 13:49:59.57 ID:???.net
コンテナクエリって使い道がイマイチわからん

184 :Name_Not_Found:2023/09/21(木) 13:54:10.80 ID:???.net
「こういうのあったらなあ」と思う瞬間は何度もあったのにいざ出来たら使い道に迷うものたち

@container
@layer
:scope

185 :Name_Not_Found:2023/09/22(金) 14:15:55.45 ID:GQ+SUbJe.net
bootstrap5を使ってカルーセルを実現しようとしているのですが、モバイルデバイスで表示した場合に以下のような動きをしており、原因がわからないでいます。
・フリックで画像を切替えられない
・ただし、一度「prev」「next」のボタンを使った後はフリックも有効になる

該当部分のhtmlは以下のようになっています。
bootstrapのカルーセルに関するページを同じデバイスで閲覧すると、問題なく最初からフリックによる操作が出来ているのでなにかおかしいところがあるのだと思うのですが…
原因がわかる方はおられますでしょうか。よろしくお願い致します。

<div class="carousel carousel-dark slide" id="carousel-container" data-bs-interval="false">
<div class="carousel-inner">
<div class="carousel-item active">
<img class="test d-block w-100" src="static/images/test_01.png">
</div>
<div class="carousel-item">
<img class="test d-block w-100" src="static/images/test_02.png">
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carousel-container" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carousel-container" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span><span class="visually-hidden">Next</span>
</button>
</div>

186 :Name_Not_Found:2023/09/22(金) 16:22:43.24 ID:???.net
そういう場合は
Carousel (カルーセル) · Bootstrap v5.0
https://getbootstrap.jp/docs/5.0/components/carousel/
ここにあるサンプルのHTMLコードと比較する
ってことで多分、最上位のコンテナに
data-bs-ride="carousel"
ってのが足りないので、コレ追加すれば上手くいくんじゃない?

ついでに
Carousel (カルーセル) · Bootstrap v5.0
https://getbootstrap.jp/docs/5.0/components/carousel/#via-data-attributes

> data-bs-ride="carousel"属性は、ページの読み込み時にカルーセルをアニメーションとしてマークするために使用されます。 data-bs-ride="carousel" を使用してカルーセルを初期化しない場合は、自分で初期化する必要があります。

とのことなので、ボタン押さないとフリック出来ないというのは、この属性が無くて初期化されてなかったとか?

187 :185:2023/09/23(土) 02:27:06.04 ID:f5iOHgtl.net
>186
レスありがとうございます。
この属性は元々はサンプルに従って同様に設定していたのですが、設定していると
「prev」または「next」ボタンを一度押下すると自動的に画像が切り替わり続ける状態になる
という挙動を見せ、自動では動いてほしくなかったため除外した経緯があります。
おそらく>185に書いた問題とは関係ないのではないかと思っています。

188 :Name_Not_Found:2023/09/23(土) 06:28:56.05 ID:???.net
>>187
実機じゃなくシミュレータで確認しててdata-bs-interval="false"に設定してあるから
シミュレータでは自動再生しないんだけど、実機では自動再生するの?
それじゃ同じタグにdata-bs-ride="carousel"に加えてdata-bs-slide="false"を追加するとどうなる?

189 :Name_Not_Found:2023/09/24(日) 19:12:05.18 ID:xZzXY+Iq.net
質問です

<meta name="viewport" content="initial-scale=1, minimum-scale=0, user-scalable=yes">

を指定すると、横幅の広いページの場合(ページの横幅が画面サイズより大きい倍)には縮小表示できますが、
縦長のページの場合(ページの横幅が小さく、縦幅が画面サイズより大きい場合)、縮小表示できないようです。
どうすれば縦長のページで縮小表示できるようになりますか?
(縦長のコンテンツを縮小して一目で確認できるようにしたいです)

Android の Chrome、iPadOS の Safari で確認しました


(ページの横幅が画面サイズより小さい場合、minimum-scale=0 が無視されて scale=1 までしか縮小できないような。
ウェブページは一般的に縦長で縦にスクロールして読むものなので、横幅さえ画面に収まる(ように縮小できた)ならそれ以上は縮小できないように仕様で決まっているか、各ブラウザが制限を設けているのでしょうか?

力技として、
<meta name="viewport" content="width=10000">
とすると縮小できるようになりますが、横幅が無駄にめちゃくちゃ広いページになってしまいます)

https://jsfiddle.net/14xepgrb/2/

190 :Name_Not_Found:2023/09/24(日) 19:22:28.27 ID:???.net
できません

191 :Name_Not_Found:2023/09/25(月) 14:53:29.68 ID:???.net
IE11が亡くなった今だからこそ
使ってる/使いたいおすすめCSSを教えて!
transform使わずにscale、translate、rotateが地味に便利

192 :Name_Not_Found:2023/09/25(月) 16:41:05.06 ID:???.net
文字リンクにtitle属性(補足情報の表示)を書いていますが、タブレットで見たときに表示されなくて困っています。
かわりにページにテキストエリアを置いて、リンクをクリックした時に補足情報を表示したいです。

調べてもなかなか情報が出てこないのでどなたか教えてください。
表示したい補足情報は20文字前後です。

193 :Name_Not_Found:2023/09/25(月) 18:12:55.34 ID:???.net
>>192
ツールチップを表示させたいってこと?

HTMLでポップアップ(ツールチップ)させる方法(スマホ対応) | オレDEV.com
ttps://dev.ore-shika.com/post/css-tooltip/

194 :Name_Not_Found:2023/09/25(月) 19:22:12.53 ID:???.net
>>193
スマホ表示ならできそうですね、ツールチップで調べてみます。
ありがとうございます。

195 :Name_Not_Found:2023/09/26(火) 20:04:00.18 ID:???.net
ツールチップは一見簡単だが自動的な位置適正にこだわるとけっこう面倒だからこれ使っちゃってるわ
https://jqueryui.com/tooltip/

HTML+CSSでこれよりいいの見たことない
JS組み込む必要あるのが難点

196 :Name_Not_Found:2023/10/01(日) 12:43:45.64 ID:???.net
https://wikiwiki.jp/postmodern/

197 :Name_Not_Found:2023/10/07(土) 02:43:14.60 ID:umF+3V+1.net
質問なんですが、画像をズームさせる機能をつけて
Firefoxだと画面内に収まるように表示されるのにchromeだとウインドウからはみ出すの、何が原因ですか??

198 :Name_Not_Found:2023/10/08(日) 01:52:00.06 ID:???.net
自動で収集されてるんだとは思うんですが、海外の怪しい通販サイトのソースに自分のサイトの文章が無意味に引用されてるっぽいんですけど、これって防ぐ手立てないんですか?

199 :Name_Not_Found:2023/10/08(日) 01:58:42.63 ID:???.net
公開されてる以上防ぐのは不可能
ドメインからサーバーが特定できれば大元に通報するなりできるけど
大体はサーバー会社も外国の訳わからん所だからな

200 :198:2023/10/08(日) 03:21:43.16 ID:???.net
ですよね。なんかセキュリティ面で致命的なミスなり欠陥なりあるのかなあとも悩みましたが、まあそういうものだと思って諦めます

201 :Name_Not_Found:2023/10/14(土) 09:28:38.28 ID:???.net
https://i.imgur.com/kJUPURh.jpg
家族等などにも紹介してプラス\4000をゲットできます
tk..tk [あぼーん用]

202 :Name_Not_Found:2023/10/14(土) 16:39:32.23 ID:K05jjQAy.net
「あいうえお【ここで改行】かきくけこ」と書いた場合、「お」の直後に半角スペースが1個挿入されて改行されてしまう。
これを防ぐ方法は?

203 :Name_Not_Found:2023/10/14(土) 16:52:17.07 ID:K05jjQAy.net
訂正
【ここで改行】ってのは、ソースコード上の改行であって、改行命令ではない。
だから、「あいうえお かきくけこ」っていう半角スペース込みの出力になってしまう。

204 :Name_Not_Found:2023/10/14(土) 16:56:20.78 ID:???.net
<br>使ったらダメなの?

205 :Name_Not_Found:2023/10/14(土) 17:06:12.84 ID:???.net
正規表現で改行コードぶちこめないなら無理

206 :Name_Not_Found:2023/10/14(土) 17:06:46.58 ID:???.net
「ここで改行」は<br>の意味かと思ったけど
エディタ上での改行ってことか

207 :Name_Not_Found:2023/10/14(土) 17:11:07.62 ID:???.net
エディタなら閉じタグの変なところで改行するとかコメントアウトするとか色んな小技が編み出されてきたが
そんなことしなきゃいけない時はHTML設計がおかしい

208 :Name_Not_Found:2023/10/14(土) 17:28:30.34 ID:???.net
>>202
改行しない

209 :Name_Not_Found:2023/10/14(土) 20:31:38.17 ID:???.net
ソースコード上は改行したいけど、出力は改行したくないってこと?

210 :Name_Not_Found:2023/10/15(日) 01:25:33.56 ID:???.net
あいうえお<!--
-->かきくけこ

211 :Name_Not_Found:2023/10/15(日) 02:38:18.97 ID:n/jmxEKA.net
>>209 その通り
>>210 おぉ、その手があったか! でも、何か汚い感じするw

212 :Name_Not_Found:2023/10/15(日) 04:02:15.10 ID:???.net
昔からこれでやってんだよ
実際クソ汚い
テーブルコーディングとかと同レベルの古代遺物
嫌ならソースでは改行しないかCSSで無茶しろ

213 :Name_Not_Found:2023/10/15(日) 04:02:32.95 ID:???.net
vscodeなら幅指定で見た目だけ改行が設定で可能
もちろん改行コード入れずに

214 :Name_Not_Found:2023/10/15(日) 12:16:52.93 ID:???.net
例えばチェックボックスのON/OFFとかで、ある要素の表示/非表示を切り替えたい場合、あらかじめ非表示(display:none)のスタイルを定義しておいて、Javascriptで要素に対して非表示用のクラスを付けたり外したりするのが良くあると思うのですが、
100行とかあるテーブルのなかで個々の50行の各要素が非表示に該当するような場合、
前述のように50個の要素に対して非表示クラスを付けたり外したりするほうが良いのか、
100行の内容を書き出す時にあらかじめ識別用のクラスを付けておいてから、チェックボックスのON/OFFに合わせて非表示用のスタイルそのものを追加、削除するのが良いのか、どちらが良いとかありますか?
50個じゃなく、仮に100,500個とかになった場合でのパフォーマンスへの影響を気にしてます。
(イメージとしては商品一覧を表示し、「売り切れを非表示する/しない」みたいなチェックボックスです)

215 :Name_Not_Found:2023/10/15(日) 13:33:07.24 ID:???.net
>>214
classのつけ外しなんて数千でもたいした負荷にならん
見た目の話ならどっちでもいいが
状態としてチェックボックスがチェックされているかどうかなのだから一つずつ管理すべき
もし「チェックボックスが全てチェックされている」とは別に「中身がすべてチェックされている」という状態を用意しているなら親要素などで管理するべきだが

216 :Name_Not_Found:2023/10/15(日) 13:36:03.20 ID:???.net
付け外ししたいのはチェックボックスじゃなくて要素のほうか
それにしても要素一つ一つで管理すべき
例えばシリーズA、B、Cと数種類のグループがあって中身の組み合わせが大した数じゃないなら親要素の状態で管理してもいいが

217 :Name_Not_Found:2023/10/15(日) 14:10:45.39 ID:???.net
>>214
個々の要素に手を入れる場合は、一度に全部やるんじゃなくて表示分だけ処理した方がいいね
自分なら売り切れや在庫未入荷のクラスをDBからの出力時につけて、表示制御は親のクラスを切り替える形にするかな

218 :Name_Not_Found:2023/10/15(日) 15:52:54.90 ID:???.net
ありがとうございます。基本的には個々の要素にクラス付与ということで良いのですね。

>>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')

ということなのでしょうか??

219 :Name_Not_Found:2023/10/15(日) 22:57:20.44 ID:???.net
>>218
そうそう、そんな感じ
それが唯一の正解って訳じゃないので、自分の実装しやすい方法でいいと思うよ

220 :Name_Not_Found:2023/10/15(日) 23:19:54.82 ID:???.net
自分なら売り切れ商品は非表示ではなく
phpでDBから引いてくるときにDOM自体除外するなあ

221 :Name_Not_Found:2023/10/16(月) 02:07:40.13 ID:???.net
取り扱ってすらいないのかわからない状態にするってこと?

222 :Name_Not_Found:2023/10/16(月) 03:23:13.80 ID:???.net
見た目だけじゃなくてDOMも消すって話
売り切れも含むみたいなチェックがオンなら売り切れ中であることを明示して再生成する

223 :Name_Not_Found:2023/10/16(月) 03:40:07.94 ID:R+2RS1w5.net
##.style_td:has-text(ビーム):style()
##[class="style_td"]:has-text(ビーム):style()

↑これらが同じ効果を与える環境です
class値に~=や^=で制御し、適用されるテキストを差別化するのは慣れているのですが、
class値が全く同じで「ビーム」単体のみではなく「ビーム砲」や「拡散ビームなんちゃら」等、ビームという単語を含む一文すべてに反応してしまう現状

:has-text()が"この文字列を含む"という効果なので当然の結果です
それを、~=のように"この文字列だけ"や^=のように"この文字列から始まるものだけ"と指定する方法はないでしょうか?
よろしくお願いいたします

224 :Name_Not_Found:2023/10/16(月) 07:46:21.62 ID:???.net
>>220
俺もこれだな
diaplay none付けて非表示にする商品は最初からHTMLに出力しない
どれだけSEOに効果あるのかは分からないけどHTMLのデータ量が少ない方がCWVのスコアがいいしね

225 :Name_Not_Found:2023/10/16(月) 13:01:06.23 ID:???.net
>>223
CSSに:has-textなんて疑似クラスは無いのでスレ違いだし、よく分からんので意図通りに動くかは知らんが
()内で正規表現使ってダメなら、adblock系のスレで質問した方がいいんじゃないかと

226 :Name_Not_Found:2023/10/16(月) 15:20:19.80 ID:???.net
has擬似クラスはいつになったらFirefoxで使えるようになるんだろ

227 :Name_Not_Found:2023/10/16(月) 15:28:01.51 ID:???.net
:hasみたいなのあればいいな(jsのcladdList.containsみたいなことやりたいな)としょっちゅう思ってたはずなのに
実の所 :not と :isで事足りているのはある

228 :Name_Not_Found:2023/10/16(月) 18:42:33.88 ID:UcrE7pLb.net
皆さんでしたら、一つのタグ内である特定の文字列だけを色変更する場合、どのように記述しますか?
例えば
〜.com##.style_td:has-text(ビーム):style(color:#00ccff!important;)
とすると、そのサイトのclass値がstyle_tdのタグ内でビームという文字列を含んだ場合、現状ではタグ内にあるビーム以外の文字列も全部#00ccffカラーへ置き換えられます
「ビームという文字列が含まれたstyle_td」が:style()の対象にされるため、です
それを、ビームの部分だけ#00ccffカラーに変更したい

229 :Name_Not_Found:2023/10/16(月) 20:04:57.54 ID:???.net
だからそれcssじゃねーだろ
失せろ

230 :Name_Not_Found:2023/10/16(月) 21:02:25.00 ID:???.net
いつものスレチクソに構うな

231 :Name_Not_Found:2023/10/16(月) 23:05:55.10 ID:???.net
displayつながりならよくね?
結局パフォーマンス問題でレンダリングさせるさせないに行き着くわけだし

232 :Name_Not_Found:2023/10/17(火) 00:40:37.80 ID:???.net
NGしてて見えないのかもしれないが、>>223,228みたいなのはAdBlockスレでやる話やね
Web制作でのCSSの話じゃないし

233 :Name_Not_Found:2023/10/22(日) 14:26:43.83 ID:???.net
borderのdashedって
破線の長さ、間隔をCSSで設定することはできませんよね?
Figmaが線の「高度な設定」内で破線と間隔指定できるので
なにか対策あるのかと思いまして

234 :Name_Not_Found:2023/10/22(日) 14:42:39.15 ID:???.net
border-styleじゃ無理なのでbackground-imageで再現するみたいだよ

235 :Name_Not_Found:2023/10/22(日) 14:50:26.07 ID:???.net
>>234
ありがとうございます!
やっぱりそうなんですね ひと手間かけるんですね 角丸どうしよう

236 :Name_Not_Found:2023/10/22(日) 14:55:40.34 ID:???.net
>>233
figmaでできるなら
figmaの開発者モードでどんなCSS吐き出してるか見ればよいのでは

237 :Name_Not_Found:2023/10/26(木) 15:05:26.31 ID:???.net
>>236
レスついてたの気がつきませんでした
開発者モードでは
border: 1px dashed var(--Grey, #666);
となっているだけで、破線と間隔指定の記載は見当たらないのです

238 :Name_Not_Found:2023/10/26(木) 16:59:37.95 ID:???.net
>>237
CSS Trick – Customized Dashed or Dotted Border
https://kovart.github.io/dashed-border-generator/

239 :Name_Not_Found:2023/10/26(木) 17:11:43.99 ID:???.net
>>238
わーーー、すごい!!ありがとうございます!!
border imgではなく
background-imageで作るんですね
ブックマークします

240 :Name_Not_Found:2023/10/26(木) 21:29:14.47 ID:???.net
SVG使うならダッシュストロークの長さを制御して順に描画するアニメーションも面白いよ

>>236,237
figmaの表示はcanvasにwebGLで描画してるぽいので、そのまま持ち込むのは難しそう

241 :Name_Not_Found:2023/10/27(金) 22:33:26.73 ID:???.net
低レベルな質問をさせて下さい

拡張子を.htmlとして作成したファイルを、クロムなどで開くとブラウザ表示されると
思うのですが、タグで囲わず例えば「練習」とだけ書いても見られるんです
これはheadタグやbodyタグ内に「練習」と書いて見るのと
意味的には何が違うのでしょうか?

242 :Name_Not_Found:2023/10/27(金) 23:54:17.45 ID:???.net
>>241
ブラウザが補完してbody内のテキストとして扱われてる
そのファイルを開いて開発者ツールで要素の状態見れば納得できると思うよ

243 :241:2023/10/28(土) 00:11:19.08 ID:???.net
>>242
マジですか
目から鱗です
ありがとうございます

244 :Name_Not_Found:2023/10/28(土) 13:11:07.93 ID:???.net
239です
>>238さんに教えていただいたサイトだと丸点線ボーダーが半分削れちゃっていましたが
svgを%指定、svgに点線指定すればインラインSVGをposition:absoluteで配置でレスポンシブ対応で丸点線ボーダーができました!

>>240さんのアニメーションできるってアドバイスも気づきのきっかけになりました 合わせてお礼申し上げます

245 :Name_Not_Found:2023/11/01(水) 16:36:25.68 ID:???.net
そろそろpopover API使ってみよかなって思ったら、これもまだFirefox対応してないのか…
:has()もそうだし、使えないままのプロパティ多いと非対応枠にポイッとされちゃうぞ

246 :Name_Not_Found:2023/11/09(木) 19:38:40.24 ID:???.net
デスクトップ版「Firefox」の開発が「Git」に一本化へ、「Mercurial」を諦める
https://forest.watch.impress.co.jp/docs/news/1545389.html
 Mozillaは11月6日(米国時間)、デスクトップ版「Firefox」の開発を「Git」に一本化すると発表した。

247 :Name_Not_Found:2023/11/12(日) 22:12:04.95 ID:???.net
知り合いから今運営しているHPがだいぶ古いからリニューアルしてって頼まれたんですが、見てみたらカラーミーで作ってあるショップでした。コーディングで作りたかったのですが、自分で作ったhtmlを既存サイトのトップに表示させる方法もわからず、かと言ってカラーミーのテンプレでは思い描くサイトにはほど遠く。自作サイトにカラーミーの商品ページだけリンクさせようかとも思ったけど、カラーミーのシステムである「マイアカウント」とかも厄介で…。皆さんだったらどうしますか?知り合いの制作会社では凄い勉強してカラーミー専用の言語も学んで0からショップをコーディングできるらしいですが、自分は正直そこまで理解出来そうにないです。

248 :Name_Not_Found:2023/11/12(日) 22:49:39.45 ID:???.net
Woocommerceでつくりなおす

249 :Name_Not_Found:2023/11/12(日) 23:16:26.05 ID:???.net
ありがとうございます。WPのプラグインですかね?良い知恵を頂き大変感謝しております。全く新しいカートという事ですね。既存のカラーミーショップに結構な会員登録してる購入者がいるのですが、移行してもらう他ないですかね〜(^-^;

250 :Name_Not_Found:2023/11/13(月) 00:36:36.76 ID:???.net
Tiktok LiteでPayPayやAmazonギフトなどに交換可能な4000円分のポイントをプレゼント中!
※既存Tiktokユーザーの方はTiktokアプリからログアウトしてアンインストールすればできる可能性があります。

1.SIMの入ったスマホ・タブレットを用意する
2.以下のTiktok Liteのサイトからアプリをダウンロード(ダウンロードだけでまだ起動しない)
https://lite.tiktok.com/t/ZSNfGY43n/
3.ダウンロード完了後、もう一度上記アドレスのリンクからアプリへ
4.アプリ内でTiktokで使用してない電話番号かメールアドレスから登禄
5.10日間連続チェックインで合計で4000円分のポイントゲット

ポイントはPayPayやAmazonギフト券に交換可能です!
家族・友人に紹介したり、通常タスクをこなせば更にポイントを追加でゲットできます。

251 :Name_Not_Found:2023/11/13(月) 01:22:42.20 ID:???.net
カラーミーに既存客いるなら移動なんて絶対に無理
あとトップページを大幅に変えたらSEO下がる可能性もある

というよりも仕事で受けてるならカラーミーくらいやり倒せば?
このくらいできないならWordPressだろうが他のEC系カスタマイズも無理だろ

そもそもhtmlだけで何とかできそうと思ってはいけない
それぞれのシステムに合わせてページ毎のロジックの学習は必須

252 :Name_Not_Found:2023/11/13(月) 02:40:40.49 ID:???.net
>>250
プチ稼ぎだけど、やる気が出てきた

253 :>>247:2023/11/13(月) 14:07:08.36 ID:NJab6j04.net
分かりましたぁ!勉強してきます!さーせんしたぁ!!!

254 :Name_Not_Found:2023/11/13(月) 19:45:18.76 ID:???.net
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 %}

255 :Name_Not_Found:2023/11/13(月) 20:08:06.35 ID:???.net
ルビキチ死ね

256 :Name_Not_Found:2023/11/13(月) 20:27:22.13 ID:???.net
>>250
これはやるべきだな

257 :Name_Not_Found:2023/11/13(月) 21:21:00.55 ID:???.net
ありがとうございます。カラーミーが月3,000円でカート機能的に十二分なので、「どこでもカラーミー」って奴を用いて新規サイトにカートを貼り付けて対応しようかなと今思ってます。カートから従来のカラーミートップへ飛ばないようにする&新規TOPに飛ばしてみたいな…愚策ですかね…(T . T)

258 :Name_Not_Found:2023/11/14(火) 16:21:52.40 ID:gKDaMAaV.net
すみません!CSSでどうも上手くいかないので質問させてください

同じ位置に、複数のテキストを順番にフェードイン・フェードアウトさせて、
最後に画像をフェードインさせて固定させたいのですが、どうすれば良いでしょうか?

259 :Name_Not_Found:2023/11/14(火) 16:26:38.06 ID:???.net
jQueryやな

260 :Name_Not_Found:2023/11/14(火) 16:45:21.54 ID:???.net
同じ位置に重ねてテキスト(複数)と画像を設定
一番最初
animation-duration:1s;
animation-delay: 0s;
二番目
animation-duration:1s;
animation-delay: 1s;
三番目
animation-duration:1s;
animation-delay: 2s;
ってanimation-delayの数値を変える

261 :Name_Not_Found:2023/11/14(火) 17:09:52.76 ID:???.net
>>259
CSSだけじゃ厳しいですか?

>>260
ありがとうございます!
よろしければですが、同位置に表示させる方法を教えていただけないでしょうか‥‥
なおレスポンシブなページなので相対的に指定しなければいけません

262 :258:2023/11/14(火) 17:14:16.13 ID:???.net
あ、ID出ないのですねこの板
私は>>258,261です。
テキストと図形を表示させる位置はdivのセンターです

263 :Name_Not_Found:2023/11/14(火) 17:17:38.31 ID:???.net
Gridで重ねてもいいし、position:absoluteで重ねてもいいよ

264 :258:2023/11/14(火) 17:27:47.94 ID:???.net
>>263
ヒントありがとうございます!やってみます

265 :258:2023/11/14(火) 17:57:08.89 ID:???.net
動きと表示位置については、何とか出来ました!
ただ、#ffffffの文字なのに真っ白にならないんです
#ffffffになるのはほんの一瞬だからでしょうか?
アニメーションのopacity: 1になる間の秒数って設定出来ないでしょうか?

266 :258:2023/11/14(火) 18:02:38.42 ID:???.net
何度も申し訳ありません。
ease-in-outやらcubic-bazie()やら色々試してみましたが、ダメでした
アニメのタイミングの問題ではないのかもしれません
画像はちゃんと真っ白になるんだけどなあ
難しいですね‥‥

267 :Name_Not_Found:2023/11/14(火) 18:07:16.99 ID:???.net
@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の設定しだいで計算通りにいきません

268 :258:2023/11/14(火) 18:23:31.14 ID:???.net
>>267
なんとこんな技が!!
本当にありがとうございます😭
自分もいつか他の人に恩返し出来るよう頑張ります!

269 :Name_Not_Found:2023/11/15(水) 09:52:45.87 ID:???.net
他人に恩返しすんな

270 :Name_Not_Found:2023/11/16(木) 02:02:58.87 ID:???.net
最後まで頭が残念な子だったな

271 :Name_Not_Found:2023/11/29(水) 23:10:59.54 ID:???.net
:local-linkって知ってた?
これ使えばメニューなどでcurrentの効果をCSSだけで簡単に作れるよね?

272 :Name_Not_Found:2023/11/30(木) 02:26:37.44 ID:???.net
ブラウザが対応すれば

273 :Name_Not_Found:2023/12/02(土) 03:30:11.71 ID:???.net
他人に恩返し、良いじゃん
中国では大金持ちに助けてもらって自分が成功した場合、また他の貧しい者を救えって考えがある

受けた恩を本人へ返せるならごもっともだけど、世界規模で見たらとても良い考えだと思うよ

共産思想だのマルクス主義自体は好きじゃないけどね

274 :Name_Not_Found:2023/12/02(土) 03:56:05.07 ID:???.net
半月前の書き込みにレスするな

275 :Name_Not_Found:2023/12/11(月) 19:25:29.25 ID:???.net
本ではHTMLファイルのインデントがスペース2つになっているのですが、
自分で書くときはスペース4つでもいいですか?

276 :Name_Not_Found:2023/12/11(月) 19:45:15.88 ID:???.net
お好きにどうぞ
2つ、4つ、タブなど宗教戦争になるから自分の信じる道を。

277 :Name_Not_Found:2023/12/11(月) 19:48:46.66 ID:???.net
いいよ

278 :Name_Not_Found:2023/12/11(月) 20:26:56.79 ID:???.net
インデントしなくてもよい?

279 :Name_Not_Found:2023/12/11(月) 20:51:37.57 ID:???.net
よい

280 :275:2023/12/11(月) 22:24:05.10 ID:???.net
分かりました
レスくれた方、ありがとうございました

281 :Name_Not_Found:2023/12/12(火) 01:07:35.95 ID:???.net
俺は3派

282 :Name_Not_Found:2023/12/12(火) 04:06:19.83 ID:???.net
最近のエディタはその辺の事情酌んで事後の扱いが自由になってるから助かる
俺はTab派

283 :Name_Not_Found:2023/12/18(月) 12:41:23.37 ID:???.net
HTMLの表示に何のフォントが使われているかを確認するためにWhatFontという
ブラウザの拡張を入れたのですが、フォントがserifやsan-serifの場合にそれが
実際に何のフォントなのかを確認する方法はあるでしょうか?

本来論理的なフォント名にしてそういう詳細にこだわらないというものなのでしょうが、
その他のフォントとの兼ね合いやOS等による違いを一応把握しておきたいのです

284 :Name_Not_Found:2023/12/18(月) 12:46:29.15 ID:???.net
chromeのdevツールのComputedの一番下にRendered fontsがあるじゃろ

285 :Name_Not_Found:2023/12/18(月) 13:38:00.36 ID:???.net
firefoxも開発ツールの右ペインにフォントタブがある

286 :Name_Not_Found:2023/12/20(水) 00:23:13.63 ID:???.net
Firefox121、規定で:has()有効になったね

287 :Name_Not_Found:2023/12/21(木) 16:48:14.74 ID:???.net
>>284 >>285
できました、どうもありがとうございます

288 :Name_Not_Found:2023/12/22(金) 14:38:48.61 ID:???.net
画像にcssでfilter drop-shadowで影をつける際に
影だけ乗算を適用させることってできますか?

289 :Name_Not_Found:2023/12/22(金) 21:40:19.52 ID:???.net
drop-shadowとmix-blend-mode用に::beforeで同サイズのblockを画像の下に重ねるとか?
乗算ならberforeのblockにbackground-color: white;入れとくといいかも

290 :Name_Not_Found:2023/12/22(金) 22:02:28.83 ID:???.net
画像が矩形じゃなくて透過で形通りの影を乗算にしたいとかなら無理じゃねーかな

291 :Name_Not_Found:2023/12/22(金) 22:08:07.38 ID:???.net
矩形の画像ならdivの背景にしておいて、後ろに乗算で同サイズの擬似要素を追加すればできる
背景抜いた画像は擬似要素のcontentに同じ画像を指定すればいける
ただしサイズ調整が利かないのでレスポンシブ使用には厳しい

手間の割に効果は薄いので、自分なら乗算は使わずそれっぽく見える透明度に調整するかな
イラレとかだとデフォが乗算になってるだけで、デザイナーがどうしても乗算を要求するってケースは少ないし

292 :Name_Not_Found:2023/12/23(土) 10:02:36.22 ID:???.net
288です
ありがとうございます! おっしゃる通り矩形ではなく透明のあるpng画像です
擬似要素に同じ画像ってのは考え付かなかったです
それでできるか試してみます!

293 :Name_Not_Found:2023/12/24(日) 15:43:39.93 ID:???.net
filter dropshadowをかけた要素内でposition fixedが効かなくなる
バグ(?)に初めて出会った
SafariだけOKでChrome、Edge、FFがNG
Safariの挙動が正しくないのかな

294 :Name_Not_Found:2023/12/24(日) 20:49:00.67 ID:???.net
ホントだ
ChromeもFirefoxも、親にfilter使った途端に子がabsoluteの挙動になるね
これはWebkitの方が正しいんでない?

295 :Name_Not_Found:2024/01/02(火) 01:34:59.85 ID:???.net
>>293
https://developer.mozilla.org/ja/docs/Web/CSS/position
>固定位置指定は絶対位置指定に似ていますが、要素の包含ブロックがビューポートによって
>定義される初期包含ブロックであるという点が異なり、祖先の一つに transform, perspective, filterの
>何れかのプロパティが none 以外 (CSS Transforms Spec を参照) に設定されている場合は例外で、
>その場合は祖先が包含ブロックとしてふるまいます。

まあいつもの通りでSafariが悪い

296 :Name_Not_Found:2024/01/02(火) 19:30:52.27 ID:???.net
開発側にとっては謎仕様やな

297 :Name_Not_Found:2024/01/02(火) 22:07:47.20 ID:???.net
謎でもないと思うぞ
transformやらが親要素に効いてるのに子要素がfixedだと、親とは全く無関係な位置に配置されちゃうから
transformの効果をどう処理したらいいのか解釈があいまいになっちゃうだろ
そういうややこしいことが起こらないように、fixedさせたいならなるべくbody直下に置いておけという
仕様になってもそれは妥当なんじゃないか

298 :Name_Not_Found:2024/01/03(水) 01:39:06.29 ID:???.net
fixed要素はルート直下の設置がいいのは同意だけど、filterやtransformで動作が変わるってのは納得いかないな
Webkitの実装の方が直感的だと思うわ
まあその辺は散々議論された上でこの仕様なんだろうけど

299 :Name_Not_Found:2024/01/03(水) 14:00:05.52 ID:???.net
初歩的な質問ですみません
画像の位置とテキストの位置ってどうやって調整するんですか?
どこかと揃えたいんじゃなくて位置を変えたいです。お願いします

300 :Name_Not_Found:2024/01/03(水) 14:51:01.83 ID:???.net
position:absolute;
で自由に配置しよう!

301 :Name_Not_Found:2024/01/03(水) 16:42:47.31 ID:gZE/gVdw.net
>>300できました!!!すごい!ありがとうございます!!本当に助かりました!

302 :Name_Not_Found:2024/01/03(水) 17:00:34.36 ID:gZE/gVdw.net
>>300
すみませんposition:absolute;ってテキストには使えないんですか?

303 :Name_Not_Found:2024/01/03(水) 17:00:35.35 ID:gZE/gVdw.net
>>300
すみませんposition:absolute;ってテキストには使えないんですか?

304 :Name_Not_Found:2024/01/03(水) 17:18:42.76 ID:???.net
>>303
divなりspanなり、タグでテキストを囲えばいい

305 :Name_Not_Found:2024/01/03(水) 19:36:57.25 ID:gZE/gVdw.net
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

306 :Name_Not_Found:2024/01/03(水) 19:41:14.33 ID:???.net
ゴールがわからないから答えようがない
こういうサービスでコード張って
https://jsfiddle.net/
目指す形を画像で出そう

307 :Name_Not_Found:2024/01/04(木) 03:17:55.09 ID:???.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;
}
で想定のデザインなのかな?

308 :Name_Not_Found:2024/01/04(木) 08:01:31.68 ID:Zt3WiyEq.net
>>306 ありがとうございます!
>>307 ハイ!

309 :Name_Not_Found:2024/01/04(木) 08:47:05.98 ID:Zt3WiyEq.net
>>307
やってみたらすべてのテキストが左上に集まりました…何が原因なのでしょうか?

310 :Name_Not_Found:2024/01/04(木) 09:55:06.28 ID:???.net
imgurに完成予想図、
ソースをjsFiddleにアップしないと伝わりにくいよ
https://imgur.com/
https://jsfiddle.net/

311 :Name_Not_Found:2024/01/10(水) 16:38:53.35 ID:ubfcGzUb.net
>>309です!ホームページ完成しました!本当にありがとうございます!
すみません、スレの趣旨とは外れてしまいますが、皆さんのおすすめのレンタルサーバーは何ですか?
学生であまりお金がないです。期間はとりあえず1年ほどを考えています。

312 :Name_Not_Found:2024/01/10(水) 16:48:15.62 ID:ubfcGzUb.net
今考えているのはロリポップ、桜のレンタルサーバー、エックスサーバーです

313 :Name_Not_Found:2024/01/10(水) 16:56:09.73 ID:???.net
どんな内容で何が目的のページか知らんけどただの静的サイトならスターフリーみたいな無料のでいいんじゃないの

314 :Name_Not_Found:2024/01/10(水) 17:45:43.71 ID:???.net
今はプロバイダに無料のHPスペースついてない?

315 :Name_Not_Found:2024/01/10(水) 19:00:05.58 ID:ubfcGzUb.net
>>313静的サイトではないです!スターフリー調べてみました!候補に入れます!ありがとうございます!

316 :Name_Not_Found:2024/01/10(水) 19:01:40.32 ID:ubfcGzUb.net
>>314そうなんですか?wi-fiはプロバイダですか?

317 :Name_Not_Found:2024/01/10(水) 19:03:39.48 ID:???.net
(哲学)

318 :Name_Not_Found:2024/01/10(水) 19:50:47.99 ID:???.net
一度思うままやってみればいい
うまくいかないときに学んだことは役に立つ

319 :Name_Not_Found:2024/01/10(水) 20:33:28.55 ID:ubfcGzUb.net
>>318はい!ありがとうございます!とりあえずやってみます!

320 :Name_Not_Found:2024/01/14(日) 22:24:22.97 ID:???.net
ページ内の1つもセグメント(div)に、複数のタイトル表示要素があり、そのタイトル要素をposition: sticky; (top: 0px)で
スクロールしても画面上部に固定されるというのをしたいです。
その際にすでに上部にstickyで固定されているタイトル要素がある状態で、スクロールで次のsticky要素が上部に来たとき、もともと固定されていた要素はそのまま、その直下に固定させるようにしたいのですが、この場合は 2番目のsticky要素の top で位置を調整しないと無理でしょうか?
上記のタイトル要素をtop: 0px で設定すると、2番目3番目のタイトル要素は1番目に重なって表示されます。
1番目がすでに固定状態にあるときに、2番目はそれに重ならないようにするにはどんなやり方がありますか?

321 :Name_Not_Found:2024/01/14(日) 22:37:36.47 ID:???.net
親のセグメントにpadfing-topで一つめのstickyの格納場所を作っておく

322 :Name_Not_Found:2024/01/15(月) 12:53:28.54 ID:???.net
>>321
ありがとうございます。その場合、padingの高さはsticky要素の高さに会わせないといけないということですよね?
stickt要素の高さが可変の場合はjavascriptで調整するしかないですか?

323 :Name_Not_Found:2024/01/15(月) 12:58:45.43 ID:???.net
yes

324 :Name_Not_Found:2024/01/16(火) 14:15:21.74 ID:TEvwQnne.net
ドロップダウンメニューですがパソコンで見る場合マウスを合わせると下にサブメニューが出るのですが
スマホだとタップしないとサブメニューが出ません
そのときタップ扱いとなるため一番上にリンクを置いているとその下のサブメニューは一瞬表示されるのですが選ぶ前にタップした一番上のメニューに飛んでしまいます
長押しすれば飛ばずにサブメニューが開いた状態のまま選ぶことが出来るのですが、そのまえにブラウザののサブメニューが表示されるので消す作業が必要になります
iosも似たような感じですがさらに操作が煩雑になります
なにかスマートに動作させる方法はあるでしょうか?
旨く説明できずすみません

325 :Name_Not_Found:2024/01/16(火) 14:30:51.32 ID:???.net
SP時とPC時で動作を変える

326 :Name_Not_Found:2024/01/21(日) 22:37:00.94 ID:???.net
Web上のテキストボックスへの入力時、iPhone Safariが勝手にズームしてしまうで、それを抑止するためviewportの"maximum-scale=1.0"を設定していますが、これだとAndroid Chromeでピンチアウトによる拡大ができません。
ピンチアウトによる拡大はできるようにしつつ、iPhone Safariの勝手ズームを止める方法ありますか?
フォントサイズが16px以上なら拡大しないそうなのですが、レイアウトの関係でそこまでフォントサイズは大きくはできません。

327 :Name_Not_Found:2024/01/22(月) 02:29:59.55 ID:???.net
逆に、iPhone Safariの勝手ズームを止めたらダメ!

既定の動きを勝手に変えたらダメ!
それは想定外で使いにくいサイト

それを使っている人は、その機能があるから使いやすいわけだから。
嫌なら、その機能をオフにするか、ブラウザを変えるはず

328 :Name_Not_Found:2024/01/29(月) 18:56:57.94 ID:???.net
https://maaengineerhouse.com/archives/1551
ここのサイトを参考にページ遷移しない送信ページを作ったのですが全然ページ遷移してしまいます
action="./test"は自分のメールURLにしてますが他に何が駄目なのかわからない状態です
わかる方教えて頂きたいです

329 :Name_Not_Found:2024/01/29(月) 19:42:56.25 ID:???.net
>>328
遷移するということはevent.preventDefault();まで到達してないのでスクリプトかidが間違ってる
そのページのnew formData(form)は間違いnew FormData(form)が正しい

フォームデータを送信できるのはhttp/httpsに対してだけ
どうしてもメールで受け取りたいなら自分のサーバー側で転送するか、EmailJSやStmpJSといった外部のサービスを利用する

330 :Name_Not_Found:2024/01/30(火) 09:11:26.25 ID:???.net
今レスポンシブデザインの静的サイトを作るとして一番有用なツールは何になりますか?
ひと昔前だとDWだったと思うのですが最近はあまりおすすめされていないようです
習得も難しいです
HTMLとCSSの知識は一通りあります
先達のお知恵を拝借したいです

331 :Name_Not_Found:2024/01/30(火) 09:39:29.57 ID:???.net
エディタ?vscodeでいいよ

332 :Name_Not_Found:2024/01/30(火) 10:09:09.43 ID:???.net
>>330
VSCode一択です

333 :Name_Not_Found:2024/01/30(火) 12:41:34.11 ID:???.net
>>329
ありがとうございました

334 :Name_Not_Found:2024/01/30(火) 12:54:03.01 ID:???.net
>>331,332
エディタではないです
もうちょっとビジュアル的に操作できるものが良いです

335 :Name_Not_Found:2024/01/30(火) 13:34:06.76 ID:???.net
ない

336 :Name_Not_Found:2024/01/30(火) 13:41:52.20 ID:???.net
ないことはないだろうよ

337 :Name_Not_Found:2024/01/30(火) 13:54:29.64 ID:???.net
dwでいいのでは

338 :Name_Not_Found:2024/01/30(火) 13:56:34.84 ID:???.net
DWマスターしてたら仕事でweb会社に入った時に早くに通用しますか?

339 :Name_Not_Found:2024/01/30(火) 14:54:15.32 ID:???.net
いいえ

340 :Name_Not_Found:2024/01/30(火) 22:15:55.69 ID:???.net
>>334
WYSIWYGエディタはもう息してないので、素直にVSCode使った方がいいよ

341 :Name_Not_Found:2024/02/03(土) 21:31:04.51 ID:???.net
DWマスターしたレベルで使えるなら他のも普通に使えよう

342 :Name_Not_Found:2024/02/04(日) 02:34:58.87 ID:???.net
メモ帳→GL→DW→VSCodeときたけどVSCode快適だわ
使う人少ないだろうけどVisualStudioも意外と使いやすい

343 :Name_Not_Found:2024/02/06(火) 07:56:02.65 ID:???.net
メモ帳, 秀丸, FrontPage, Expression Web, DW(3日), VSCode
だな

344 :Name_Not_Found:2024/02/06(火) 10:03:43.94 ID:???.net
VSCodeでDWみたいにパパっとテンプレート読み込んで使えますか?
そういうプラグインやテンプレートありますか?

345 :Name_Not_Found:2024/02/06(火) 16:50:37.79 ID:???.net
>>342
VisualStudioのCSSのフォーマッタが好き

346 :Name_Not_Found:2024/02/07(水) 00:03:49.74 ID:???.net
>>344
自分で試したらいい
無料なんだし紹介ページも腐るほどある
どうしても訊きたいときはVSCodeスレへどうぞ

347 :Name_Not_Found:2024/02/07(水) 08:36:48.23 ID:???.net
どんな質問にも優しく答えるスレなんだからさぁ。。
わざわざ自分で試したらいいとか間抜けなレスしてんなよ
仕事もできねえやつなんだろうなぁ

348 :Name_Not_Found:2024/02/07(水) 13:56:17.45 ID:???.net
これは充分優しいぞ
ググって死ねで充分だからな

349 :Name_Not_Found:2024/02/07(水) 17:09:43.43 ID:???.net
>>347
どんな質問もじゃねーよスレタイ読め

350 :Name_Not_Found:2024/02/07(水) 17:10:57.19 ID:???.net
うるせいわw

351 :Name_Not_Found:2024/02/07(水) 17:11:58.90 ID:???.net
うるせいわじゃねーよマヌケ
ちゃんと謝っとけ

352 :Name_Not_Found:2024/02/07(水) 17:12:32.55 ID:???.net
日本社会にはもっと優しさ要素が必要だよな
自分でやれとか言ってる場合じゃねえわ
共助を忘れるなよ

353 :Name_Not_Found:2024/02/07(水) 17:13:13.91 ID:???.net
スレ違いを許す優しさは要らない

354 :Name_Not_Found:2024/02/07(水) 17:19:21.30 ID:???.net
正義マンはお呼びじゃないです by スレ利用者一同

355 :Name_Not_Found:2024/02/08(木) 02:56:37.72 ID:???.net
結局のところ、自分が使いたい機能とか使い勝手が自分に合ってるかどうかなんて
本人にしか分からないから、とりあえずVSCodeが良さそうだってことが分かったのなら
ここでスレ違いな質問するよりも、自分でググって気になる機能拡張を片っ端から試した方が
回答を待つよりも速いだろう

356 :Name_Not_Found:2024/02/08(木) 14:58:15.90 ID:sr5GdnpV.net
初心者です。
会社のcmsにHTMLを書いてページの調整をしているのですが、テーブルの罫線が付けられません。

表に黒い線(1重線)を引くのでいいのですが、薄い罫線として表示されてしまいます。

コードを書き、cmsのフォーマットの上では黒い罫線として表示されるのですが、プレビューや実装段階になると薄くなってしまいます。
(色の変更もフォーマット上では可能でした)

フォーマット的にHTMLのみ使えるのですが、CMSに邪魔されない(?)やり方はありますでしょうか?


<table border="2" table width="1550" style="height:560px; border-collapse:collapse margin;auto: border-color: black">

357 :Name_Not_Found:2024/02/08(木) 15:50:19.81 ID:???.net
>>356
書き方間違ってる
<table border="2" table width="1550" style=“height:560px; border-collapse:collapse; margin:auto; border-color:black;”>
これでやって効かなかった箇所に!importantを付ける
border-color:black!important;
てな具合に

358 :Name_Not_Found:2024/02/08(木) 16:00:16.97 ID:???.net
border:solid 1px #000;

359 :Name_Not_Found:2024/02/08(木) 16:46:38.52 ID:sr5GdnpV.net
>>357
>>358
回答ありです。
(セミコロンあたりは画像からのテキスト抽出故の誤変換でした)

cms上で
< table border="border: 1px solid #000!important" width="1550" style="height: 560px;">
(更新すると微妙に簡略化されます...)
の様に入れて見ましたが、薄い罫線のままでした。

border-color:black!important
も同様です。
何故だ...

360 :Name_Not_Found:2024/02/08(木) 18:26:16.97 ID:???.net
tableではなくthやtdにborderを設定しなさい

361 :Name_Not_Found:2024/02/08(木) 19:12:47.47 ID:???.net
デベロッパーツールで実際にあたってるスタイルは?
目に見えてる薄い線とやらが実はborderですらないかもしれん

362 :Name_Not_Found:2024/02/09(金) 02:09:34.03 ID:???.net
ただtableに外枠つけるなら<table width="1550" style="border:1px solid; height:560px;">でいいだろうけど
thtdがどうなってるかどうしたいのかがわからんと何も答えられん

363 :Name_Not_Found:2024/02/09(金) 16:26:33.29 ID:CyOGOND3.net
>>360
ありがとうございます!
tdの方に設定したら無事反映されました!

364 :Name_Not_Found:2024/02/09(金) 21:42:35.43 ID:???.net
質問です。
stylebotでどのようにcssを書けばバナーとオンライブを非表示にできますか?
Chrome(64 ビット)Stylebot(拡張機能)

campaign.showroom-live.com/akb48_sr/#/
バナー(SHOWROOMバレンタイン2024キャンペーン for AKB48)

www.showroom-live.com/r/akb48_official
オンライブ

365 :Name_Not_Found:2024/02/09(金) 23:50:18.01 ID:???.net
それってバナーのリンク先URLを貼ってんの?

その書き方じゃどのページでどこを非表示にしたいのか分からんのだが、勝手にエスパーした上で質問するけど
それって、SHOWROOMのトップページの最上部にある各専用ページへのバナーのスライダー全体と
同じくトップページちょい下にある「#オンライブ」全体を非表示にしたいって話?
それともAKBに限定してバナー等を非表示にしたいって話?
それとも全く別の話?

366 :Name_Not_Found:2024/02/10(土) 08:06:40.11 ID:???.net
>>365
showroom live 全部です。一応自己解決しました。

/* オンライブ アクティブ */
section.is-show.st-onlivelist.active {
display: none !important;
}

/* イベントバナー */
div a img {
display: none !important;
}

/* イベントバナー 閉ボタン */
button.room-campaign-close {
display: none !important;
}

showroom live (all)で音量を指定する場合はどのようにcssを書けば良いでしょうか。
(ページを再読込するとミュートから始まったりので)

367 :Name_Not_Found:2024/02/10(土) 08:09:26.57 ID:???.net
cssにそんな機能はない

368 :Name_Not_Found:2024/02/10(土) 14:47:32.48 ID:???.net
漏れはShowroom を、
Ruby で、selenium-webdriver を使って、ブラウザを操作して、
画面上のアバターやパネルなどを削除して見ている

Chrome の拡張機能にも、Showroom を改造するものがあるのでは?

# 各要素の削除
jsCode = <<'EOT'
var elements = document.getElementsByClassName( 'footer-menu' ) ;
elements[0].parentNode.removeChild(elements[0]) ;

var elem = document.getElementById('js-avatar');
elem.parentNode.removeChild(elem);

elem = document.getElementById('gift-log');
elem.parentNode.removeChild(elem);

elem = document.getElementById('gift-area');
elem.parentNode.removeChild(elem);

elem = document.getElementById('js-room-comment-wrapper');
elem.parentNode.removeChild(elem);

elem = document.getElementById('comment-log');
elem.parentNode.removeChild(elem);
EOT

# JavaScript を実行
driver.execute_script jsCode

369 :Name_Not_Found:2024/02/10(土) 14:59:34.83 ID:???.net
こいついつもいるな

370 :Name_Not_Found:2024/02/10(土) 15:14:25.72 ID:???.net
ルビーキチガイはちゃんとルビーオンレイルズといつもの表記しろ
NGすり抜けるな

371 :Name_Not_Found:2024/02/11(日) 04:03:12.28 ID:???.net
画面幅768~1000とかでスクロールバー出すのってどうなんだろう
iPadは良いけどPCで画面幅縮小した時とかのUIが良くないから避けるべき?

372 :Name_Not_Found:2024/02/11(日) 06:12:59.17 ID:???.net
ユーザー自身が拡縮する分は
こちらの想定外でいいと思う

373 :371:2024/02/11(日) 14:01:26.32 ID:???.net
サンクス

374 :Name_Not_Found:2024/02/18(日) 14:35:58.17 ID:???.net
人のSassのソースを見る機会があったんですが
以下のA・B、どっちが主流ですか?
Bで書くことが多いのでAのメリットはなんでしょう?

Aの書き方
.hoge {
width: 100px;
@media (min-width: 1080px) {
width: 200px;
}

}

Bの書き方
.hoge {
width: 100px;
}
@media (min-width: 1080px) {
.hoge {
width: 200px;
}
}

375 :Name_Not_Found:2024/02/18(日) 15:17:37.73 ID:???.net
Aは同じセレクターの状態違いだとわかる
Bはもうsassの意味がないレベル

376 :Name_Not_Found:2024/02/18(日) 15:21:09.49 ID:???.net
ありがとうございます
SP作ってからPC版を作成ってクセが
個々にメディアクエリを書くより楽なもので

377 :Name_Not_Found:2024/02/18(日) 15:32:08.15 ID:???.net
メディアクエリをmixin化するのだ
ひとつセレクタがあったら
.hoge{
@include mixin.media(sp){
}
@include mixin.media(tab){
}
@include mixin.media(pc){
}
}
みたいにセットでコピペするようにすればいい
エディタのスニペットや独自emmetルールでショートカットで出力できるようにしておくとなおよし

378 :Name_Not_Found:2024/02/18(日) 15:34:59.92 ID:???.net
なるほどー
mixinを使うと元を修正するだけで済むから汎用性がますんですね
アドバイス助かります

379 :Name_Not_Found:2024/02/18(日) 16:54:05.41 ID:???.net
Scssは横幅毎にファイル分けてだけどおかしなやり方だったんかなぁ

380 :Name_Not_Found:2024/02/18(日) 17:22:25.13 ID:???.net
>>379
見通しがよければなんでもいいと思うけど
同じセレクターというか同じものを指す記述が何カ所にも登場するとそれだけでclass名の変更があったときなどに置き換える箇所が増えて変更に弱くなるよね
これは&使わない教にも言える
他方、親セレクタひとつ変えれば子孫や状態変化すべて変えられるような変更に強いコードは
hoge__fuga みたいなHTML上のセレクタそのもので全文検索しても見つからないので
hoge の中から探すか、ソースマップ必須になる
どちらが保守性が高いと言えるかはプロジェクトの規模やチームの特性によって変わりうる

381 :Name_Not_Found:2024/02/18(日) 18:41:34.89 ID:???.net
>>380
なるほど変更修正も考えて分かりやすくって事ですね

382 :Name_Not_Found:2024/02/29(木) 18:15:32.28 ID:???.net
div.hogeに以下のようなcssを効かせました
hoge{
position:relative;
}
hoge::after{
position: absolute;
bottom: -20px;
right: -20px;
display: block;
width: 100%;
height: 100%;
background: red
z-index: -1;
}
hoge要素に赤いベタの影つけることができました
ところが、after要素にfilter:drop-shadow()を使うと
after要素の上、hoge要素の下に表示されてしまいます
after要素に影をつけ用とした場合、before要素でafter要素と重ねる方法以外ありますか?

383 :Name_Not_Found:2024/02/29(木) 18:40:08.35 ID:???.net
>>382
hogeの中にインナーを作る
z-indexが インナー>hoge::afterになるようにする
というか影つけるだけなら疑似要素なんかいらなくて
hogeにbox-shadowであかんの

384 :Name_Not_Found:2024/02/29(木) 18:44:44.39 ID:???.net
ありがとうございます
after要素が透明ありのpngなんで、filterなんです
どうもz-indexへの愛と理解が足りてない。。

385 :Name_Not_Found:2024/02/29(木) 18:48:52.34 ID:???.net
疑似要素にcontentでpngを入れてるなら素直にimgタグ書くべき
背景画像がpngという意味ならdrop-shadowきかない

386 :Name_Not_Found:2024/02/29(木) 18:51:45.63 ID:???.net
背景パターンなのでpngをBGに使っています
filter drop-shadow自体は効くようですが
chromeで見ただけなので効かないのもあるんですか
検証します ありがとうございます

387 :Name_Not_Found:2024/02/29(木) 19:11:48.32 ID:???.net
お騒がせしました
after要素に問題なくdrop-shadowが付いてました
なにも書き換えてないと思うのですが

388 :Name_Not_Found:2024/03/10(日) 12:29:31.95 ID:vNGHzsx+.net
3DCGのweb表示をしたいと考えています。
最初はThree.jsでやってたのですがGPU使用率が多く、試行錯誤して
今はmodel-viewerで試行錯誤しています。
model-viewerはモデルが動いてないとGPU使用率も0になるのでいいかとおもったのですが、
表示して暫く触らないと勝手にポインタが出てきてモデルを左右に振ってみせて、
動かせることを主張してきます。これのせいでGPU使用率が上がってしまいます。
この、勝手にポインタが出てくる仕様をOFFにできないでしょうか。

https://008.server-test.space/

389 :Name_Not_Found:2024/03/10(日) 17:49:56.50 ID:???.net
ドキュメント読んでみたけど、そんな設定無さげ

390 :Name_Not_Found:2024/03/10(日) 22:18:22.81 ID:???.net
>>388
interaction-prompt="none"でいいんじゃねえの?
https://modelviewer.dev/docs/index.html#entrydocs-stagingandcameras-attributes-interactionPrompt

念のためググってみたら日本語情報も出てきたし
https://mawasu-blog.com/modelviewer_staging_cameras_api/

391 :Name_Not_Found:2024/03/11(月) 00:12:36.42 ID:???.net
>>389
ありがとうございます。お手数をお掛け頂いて感謝であります。

>>390
ワオ!すごい!まさに!そのブログもいくつか目を通したのですがそこは読み飛ばしてました。
感激であります!!!!1

392 :Name_Not_Found:2024/04/05(金) 23:07:58.30 ID:???.net
<table class="test">
<tr>
<td>aaa1</td><td>bbb2</td><td>ccc1</td>
</tr>
<tr>
<td>aaa2</td><td>bbb2</td><td>ccc2</td>
</tr>
</table>

一番左の列のみbackgroundで色をつけるにはどのようなセレクタにしてやればいいんですか?

393 :Name_Not_Found:2024/04/06(土) 00:06:24.81 ID:???.net
>>392
.test tr > :first-child

394 :Name_Not_Found:2024/04/06(土) 00:16:44.98 ID:???.net
tr th:first-child,
tr tf:first-child{
}

395 :Name_Not_Found:2024/04/06(土) 01:55:06.41 ID:???.net
.test tr > *:first-child { }
外野だけど今までこうしてた
*省略していいんだ>>393さんくす

396 :Name_Not_Found:2024/04/10(水) 22:37:09.78 ID:KnIusri3.net
プロゲートというものをやってる初心者ですが

cssのactiveというコマンドで

position relative
top 7px
boxshadow none

と指定するものがあるんですが
これだと上に動くのか下に動くのかわかりにくくて

それならbottom7pxと何が違うのかと考えたりしてるんですが、どう考えたらいいですか?
質問わかりずらかったらすみません
お願いします

397 :Name_Not_Found:2024/04/10(水) 22:53:50.13 ID:???.net
×コマンド→○疑似クラス

position: relative; ボックスの元の位置を基準に
top: 7px; 「上から」7pxにボックスを配置
bottom: 7px; 「下から」7pxにボックスを配置

398 :Name_Not_Found:2024/04/10(水) 23:02:35.99 ID:KnIusri3.net
>>397
ありがとうごさいます
擬似クラスですね間違えました

topは上から下に
bottomは下から上に動くんでしょうか?

399 :Name_Not_Found:2024/04/10(水) 23:04:45.22 ID:???.net
動きじゃなくて距離
上辺を基準に7px離すならtop

400 :Name_Not_Found:2024/04/11(木) 00:24:50.12 ID:???.net
とりま、これでも読んだ方が早い

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

基本的にtop, right, bottom, leftはそれぞれボックスの内側方向が正の向きって憶えとけば
方向は間違わないかと

401 :Name_Not_Found:2024/04/11(木) 00:46:41.61 ID:hmIzBk5l.net
>>399
わかりました
ありがとうございます

>>400
理解しました
読んで勉強します
ありがとうございました

402 :Name_Not_Found:2024/04/11(木) 07:57:46.10 ID:jTR8gzXc.net
プロゲートの教材で画像のようにtop wrapperを作り背景を指定して、その中にcontainerをいれて中に
h要素、p要素をいれていくものがあるんですが

top wrapperの中にh要素やp要素を直接いれてはいけないんでしょうか?

containerという箱を間に挟む意味を教えて欲しいです

よろしくお願いいたします

403 :Name_Not_Found:2024/04/11(木) 08:00:41.45 ID:???.net
画像

404 :Name_Not_Found:2024/04/11(木) 08:07:48.13 ID:jTR8gzXc.net
すみません忘れてました
https://i.imgur.com/8myqxfS.jpg

405 :Name_Not_Found:2024/04/11(木) 08:18:31.89 ID:???.net
wrapperがページの外枠そのものでcontainerがいわゆるコンテンツ幅ってやつや
wrapperとcontainerにそれぞれ別にpaddingなどが指定できるし
containerの幅を制限して中央寄せなどよくある
gridレイアウトなど使えばコンテナなしでもできたりするが難易度高いから今は言われた通り覚えたまえ

406 :Name_Not_Found:2024/04/11(木) 10:49:36.60 ID:jFdHc6MY.net
すみません、質問させてください!

分かりにくかったら申し訳ございませんが、例えば
<h1>hoge1</h1>
<p>hogehoge</p>
<h1>hoge2</h1>
<ol>
<li>hoge01</li>
<li>hoge02</li>
</ol>
みたいな形式の文章があったとして、<p>内の文章の全行のインデントを<li>と同じ位置にしたいのですが、
<p>を<ul>に変えてlist-style: noneにしたとしても、消えた黒丸の分スペースが残っていて
<ol>の<li>よりも下がってしまうし、本来は段落なのに<ul>を使うのも良くないし、困っています
<p>にtext-indent:◯em等を適用しても、最初の行の一文字目しか下がってくれず、
自動改行の2行目以降はインデントされないので目的が達成されません

どういった方法が良いか、アイデア教えていただけないでしょうか?

407 :Name_Not_Found:2024/04/11(木) 11:01:59.41 ID:9INmCpGN.net
>>405
ありがとうございます
わかりました

今回貼った画像のようにwrapper部分に背景がなかったとしても、wrapperの中にcontainerをいれたほうがいいですか?

408 :Name_Not_Found:2024/04/11(木) 11:36:34.62 ID:???.net
>>407
考え方が逆
「wrapperの中にcontainerは必要か」
ではなく
「今はcontainerのスタイルの設定しているのにwrapperは必要か」
を疑問視するべき
いるいらないはそのうち勝手に判断できるようになる

409 :Name_Not_Found:2024/04/11(木) 12:14:48.80 ID:9INmCpGN.net
>>408
言い方を間違えました
言いたいことはそれでした

wrapperの必要性がちゃんとわかってなくて
背景がある場合はわかりやすいんですけど

とりあえず今はページの外枠とコンテンツ幅と覚えておきます
ありがとうございました

410 :Name_Not_Found:2024/04/11(木) 12:42:32.26 ID:???.net
>>406
何も指定しなければブラウザが持っているデフォルトのスタイルで、コンテンツが装飾される訳だけど
デフォルトのliの左余白は、olやulのpadding-leftで決まり(chromeやfirefoxではデフォルトで40px)
更に番号や中黒は、list-style-positionがoutsideになっているため、liの外側(olやulのpadding領域内)に表示される
なので、list-style-positionをinsideにしてもいいんだが、liのテキスト量が多い場合に改行位置がズレるので
デフォのoutsideのままでulやolのpadding-leftを、例えばcalc(40px + ○em)とかで指定すると改行されてもズレない
(使用するフォントに合わせて○は1.2とか1.3ぐらい?で番号や中黒の分を位置調整)

以上まとめるとpをliの位置に合わせるなら、pにはpadding-left:40px;、olにはpadding-left:calc(40px + 1.3em);を指定
というのが簡単でオススメ

具体的にはこんな感じ
https://jsfiddle.net/zjt3vxf1/

というわけで上記を応用すれば、お好みの位置で色々と調整できるはず

411 :Name_Not_Found:2024/04/11(木) 13:04:26.27 ID:???.net
>>410
詳しくありがとうございます!
しっかりと確認して実装してみます
本当にありがとうございます

412 :Name_Not_Found:2024/04/12(金) 12:31:41.18 ID:UPNbcAUb.net
画像のようにh2の下に50px距離をあけたい場合

h2のpadding-bottomなのか
h2のmargin-bottomなのか

iconのpadding-topなのか
iconのmargin-bottomなのか

どれが適切なんでしょうか?
その辺がよく分かってなくて、なんとなく感覚で選んでいます

よろしくお願いします
https://i.imgur.com/eLzRvvs.jpg

413 :Name_Not_Found:2024/04/12(金) 12:34:32.92 ID:UPNbcAUb.net
>>412
一部文章間違えました
5行目iconのmargin-bottomなのかではなく

iconのmargin-topなのか、です

414 :Name_Not_Found:2024/04/12(金) 12:48:30.99 ID:???.net
内側の余白はpadding
外側の間隔はmargin
縦並び要素のmarginが上か下かは宗教戦争になるから好きにしよう

415 :Name_Not_Found:2024/04/12(金) 20:07:04.69 ID:rpIsvdQA.net
>>414
ありがとうございます

416 :Name_Not_Found:2024/04/12(金) 21:06:42.91 ID:rpIsvdQA.net
質問お願いします

この写真のようなサイトを作るという課題で
正解のコードが
heightが120の
paddingが40でした

ただ写真を見ると高さの合計が200でした

なのでheightを200にしてその内側の余白として
padding40と書いたのですが間違いでした

よく意味がわからないので教えてください
よろしくお願いします
https://i.imgur.com/pLNq31X.jpg

417 :Name_Not_Found:2024/04/12(金) 21:12:07.81 ID:rpIsvdQA.net
heightを200にして
paddingを40にすると

footerの高さが高くなってしまいます

418 :Name_Not_Found:2024/04/12(金) 22:31:57.01 ID:???.net
>>416
https://developer.mozilla.org/ja/docs/Web/CSS/box-sizing

419 :Name_Not_Found:2024/04/13(土) 12:17:22.88 ID:prybyI30.net
>>418
ありがとうございます
要素の構造についてまだちゃんと理解できていないから分からないと思うので読んで勉強してみます

420 :Name_Not_Found:2024/04/16(火) 18:59:48.33 ID:???.net
>>416
プロゲ懐かしいな、まだあったんだ
俺もwebはここからスタートして今では昔勉強したイタリア料理で年収2000万超えたよ
観光客相手に高単価なメニュー出してる

421 :Name_Not_Found:2024/04/17(水) 01:35:18.35 ID:???.net
大量のGと職場が一緒の飲食は無理

422 :Name_Not_Found:2024/04/18(木) 17:45:18.69 ID:???.net
質問させてください
下記URL先の画像のように作りたいです

画像を左右に設置することはできましたが、
緑色が左右の画像の間に左右の画像目いっぱいに幅を設定して置けませんでした
緑色の幅をフレキシブルにしたいですがそちらもできません…

どのようにすればよいのか教えて頂けませんでしょうか
宜しくお願いしますm(_ _)m

https://imepic.jp/20240418/637200

423 :Name_Not_Found:2024/04/18(木) 17:48:48.43 ID:???.net
display:flexを使えばいいよ
とりあえずググってみよう

424 :Name_Not_Found:2024/04/18(木) 17:57:41.43 ID:???.net
>>422
flex使えばいけるね

そういうのは専門学校の宿題か何か?
良かったら教えて
課題とかでそういうのが出てるの?

425 :Name_Not_Found:2024/04/18(木) 18:24:24.43 ID:???.net
レスありがとうございます、試してみたらできました!
フレキシブルを使った自由課題でしたm(_ _)m

<div class="outline">
<div class="box1"></div>
<div class="greenbox"></div>
<div class="box2"></div>
</div>
.outline {
width: 100%;
height: auto;
display:flex;
}
.box1 {
width: 50px;
height: 50px;
float: left;
background: #da5f2b;
}
.box2 {
width: 50px;
height: 50px;
float: right;
background: #da5f2b;
}
.greenbox {
width: 100%;
height: 50px;
float: left;
background: #76c03d;
}

426 :Name_Not_Found:2024/04/18(木) 18:40:13.44 ID:???.net
並び順なのでfloat指定いらないよ

427 :Name_Not_Found:2024/04/18(木) 19:34:52.11 ID:???.net
>>425
自由課題か・・宿題とか課題とか嫌いだったな
高校生でそんなのやるわけないか、専門学校?

ちなみにオレンジボックスは共通の書き方にしてコード減らせるからやってみ
flex使えばfloatも使う必要無いよ、昔はfloatだったからそれが模範解答で出てきたら時代と教材がかなり古いと思う

428 :Name_Not_Found:2024/04/18(木) 19:35:27.90 ID:???.net
ひねくれてgridでやろうぜ
https://jsfiddle.net/15ufnjgk/

429 :Name_Not_Found:2024/04/18(木) 19:39:17.33 ID:???.net
grid警察だ!そこを動くな!

430 :Name_Not_Found:2024/04/18(木) 21:02:16.18 ID:???.net
gridは最終手段って感じ
これを使わなくて済むようなデザイン組んでほしいって思う

431 :Name_Not_Found:2024/04/18(木) 21:35:37.87 ID:???.net
gridはいいんだけど
orderやgrid-areaで順番をゴチャゴチャ変えないと成立しないスマホデザインとかはうんこ
スクリーンリーダーなどアクセシビリティ的にも良くない

432 :Name_Not_Found:2024/04/20(土) 20:14:49.08 ID:???.net
以下のようなテーブルがあります。
実際にはこの三行を1グループとして複数グループが下に続いています。

┌┬┐ ここで、左側の行にカーソルをのせた時に
│├┤ ハイライトするようにしたいです。
│├┤ この時、カーソルを載せている右列だけでなく
└┴┘ 左の列もハイライトするようにするには
どうすればよいですか?
今はbootstrapを使っているのですが、
1行目のときしか左列がハイライトされなくて困っています。

433 :Name_Not_Found:2024/04/20(土) 20:18:18.41 ID:???.net
jqueryのほうが早いな
cssでやるのはちとつらいのでは?

434 :Name_Not_Found:2024/04/21(日) 01:17:42.06 ID:???.net
その3行ごとにtbodyで囲ってtbody:hoverでできそうではあるが、別の問題が発生しそう

435 :Name_Not_Found:2024/04/21(日) 01:39:40.72 ID:???.net
質問です
個人経営の店ですが取引業者のサービスでホームページ作りました
業者のサービスはWordPressベースでssl対応です
ただurlが業者の名前&ディレクトリ以下に無機的な数字が続きビミョーです
お名前.comでドメインを用意してurl転送サービスでフレーム転送にしました
これでOKと思いきや設定したurlでホームページを表示してもssl対応になりません
個人情報を扱わないサイトですがセキュリティソフトが信用できないサイトとか警告が出ます

http → https のフレーム転送でssl対応にする方法は有りますか?

436 :Name_Not_Found:2024/04/21(日) 04:05:19.54 ID:???.net
過去にやったの調べたら>>434と同じでtbody:hover{}してた
css的に問題はなかったしjQueryでtbodyを抽出しても問題なかった
でもこういうtbodyの乱用はどうなんだろうとは思うし、将来いきなりNGになるかもしれんよね

437 :Name_Not_Found:2024/04/23(火) 18:19:08.99 ID:???.net
質問です

親要素にdisplay:flexを設定して
子要素1は左に配置
子要素2は右に配置したいです
どのように書けば実現できるでしょうか?

438 :Name_Not_Found:2024/04/23(火) 18:23:49.00 ID:???.net
<div class="parent">
<div class="child01">子1</div>
<div class="child02">子2</div>
</div>

.parent{
display:flex;
justify-content:space-between;
}

439 :Name_Not_Found:2024/04/23(火) 18:40:47.01 ID:???.net
>>438
ありがとうございます
その書き方は出でこなかったので勉強になりました
結果ですが子要素1と子要素2のサイズが違うこと?で子要素2の配置が真ん中やや右に表示されてしまいました

440 :Name_Not_Found:2024/04/23(火) 19:00:41.67 ID:???.net
他のcssなければ子要素は同じサイズのはず
(子要素内の文字数一緒なので)
子要素2が真ん中より右ってのは他のCSSが影響してると思うよ
justify-content:space-between;
は子要素を均等に配置するなので
parentの左右にそれぞれピッタリ配置されてるはず

441 :Name_Not_Found:2024/04/25(木) 16:35:17.89 ID:???.net
JS使わなくてもよくなるのね
実装はよ!

Help us invent CSS Grid Level 3, aka “Masonry” layout
https://webkit.org/blog/15269/help-us-invent-masonry-layouts-for-css-grid-level-3/

442 :Name_Not_Found:2024/04/26(金) 22:09:29.47 ID:???.net
ある WEB サイトに入力する場所が2つあるとして、其処に指定の値を入力した状態でそのサイトを開くには、どの様に書けば良いのでしょうか?
例えば ttp://www.aaa.com/bbb/ というサイトだとして、其処に、foo と bar が入力された状態でブラウザで開きたいのですが…
ttp://www.aaa.com/bbb/ だけを実行すると、入力欄は空のままで開かれますよね。

443 :Name_Not_Found:2024/04/26(金) 22:38:58.37 ID:???.net
>>442
サイト側でクエリなりなんなりを反映する仕組みがないと無理やで

444 :Name_Not_Found:2024/04/26(金) 22:48:01.15 ID:???.net
>>443
> サイト側でクエリなりなんなりを反映する仕組みがないと無理やで
それを確かめるには、どんな事をすればいいのですか…?

445 :Name_Not_Found:2024/04/26(金) 22:55:14.72 ID:???.net
自分でURLから何か受け取れるように実装したもの以外は基本的にありません

446 :Name_Not_Found:2024/04/26(金) 23:23:36.71 ID:???.net
chromeの何かのアドオンでそれができたような

447 :Name_Not_Found:2024/04/27(土) 01:12:27.09 ID:???.net
>>446
> chromeの何かのアドオンでそれができたような
サイト側で受け取る準備がされてなくても、入力した状態で開けるのですか?
それは欲しい…

448 :Name_Not_Found:2024/04/27(土) 01:48:04.72 ID:???.net
フォームに初期値が入ってて欲しい、というシンプルな話では無いんだよね?

449 :Name_Not_Found:2024/04/27(土) 02:26:48.94 ID:???.net
>>448
> フォームに初期値が入ってて欲しい、というシンプルな話では無いんだよね?
いやそれが希望です。
あるサイトに入力する場所があり、其処に指定した文字列を入力した状態でブラウザで開きたい、と…
例えば www.google.co.jp を実行すると検索する語句が入力待ちになりますが、
その欄に、検索する語句が入力された状態で開きたい、と。
グーグルなら、「ttps://www.google.co.jp/search?q=あいうえお」とやると、
「あいうえお」を入力して検索実行した後の状態で開きますよね。
別に実行後の状態でも、入力しただけで実行待ちの状態でもどちらでもいいのですが…

450 :Name_Not_Found:2024/04/27(土) 02:40:46.56 ID:???.net
それはgoogleがURLパラメータを受け取れるようにしてるからって話が>>443

そういう仕様で作られてないなら拡張機能で対応するかフォーム自動入力ツール使えばいい
自分でHTML書く話じゃないならスレ違いだから詳しくは該当スレでどうぞ

451 :Name_Not_Found:2024/04/27(土) 03:57:51.25 ID:???.net
『html input 初期値』でぐぐって出てくる話じゃダメなん?
textだったらvalueに書いとく、てやつ

452 :Name_Not_Found:2024/04/27(土) 04:04:58.92 ID:???.net
自分のサイトじゃなくて他人のサイトか

453 :Name_Not_Found:2024/04/27(土) 16:47:28.19 ID:???.net
具体的に何のフォームに何を入力しておきたいの?

454 :Name_Not_Found:2024/04/27(土) 20:14:56.34 ID:???.net
対象フォームに値を入力するJS書いてブックマークレットにしとけばいいんじゃね

455 :Name_Not_Found:2024/04/27(土) 22:38:17.64 ID:???.net
掲示板に同じ書き込みしまくって荒らすんじゃないか?

456 :Name_Not_Found:2024/04/28(日) 12:52:06.37 ID:VdqyuX+M.net
<div class="test" style="background:#ff00ff">てすと</div>
のようにclassとstyleを混ぜて書くのはだめなんですか?
背景色だけperlやphpなどで入力された値にしたいので

457 :Name_Not_Found:2024/04/28(日) 13:24:15.30 ID:???.net
ダメなんてことはない
お好きにどうぞ

458 :Name_Not_Found:2024/04/28(日) 13:41:30.39 ID:???.net
>>456
ダメではないが古い
jsやphpならcss変数に値を格納できるから自分ならそれ使うな

459 :Name_Not_Found:2024/04/28(日) 18:58:20.80 ID:???.net
ロジック内で直接指定してあると後から面倒なことになるしなー
テーマみたいに値が決まってるならクラス切り替えた方がいいと思う

460 :Name_Not_Found:2024/04/29(月) 03:15:20.52 ID:???.net
<div class="test magenta">てすと</div>

461 :Name_Not_Found:2024/05/01(水) 09:04:37.45 ID:???.net
>>456
むしろそれでいい

462 :Name_Not_Found:2024/05/18(土) 16:23:14.67 ID:+V0JB20F.net
Bootstrao使っている人に質問です。フォントサイズが小さくないですか?
何も適用していない、1remの状態(fs-6)でも小さいし、
フォントサイズが16pxのクラスを作って適用しても小さく感じます

463 : 警備員[Lv.1][新芽初]:2024/05/18(土) 20:19:28.97 ID:???.net
小さいと思ったこと無い
本家でサンプルDLして表示させても小さいっていうなら
ブラウザやOSの設定か、感覚の問題じゃね?

464 :Name_Not_Found:2024/05/19(日) 00:26:49.17 ID:???.net
本家のサンプルは小さくないです。
なぜかCDNで読み込んで自サイトで見ると小さく感じます。
font-size-baseは16px(デフォルト)のままなんですが・・・

465 :Name_Not_Found:2024/05/19(日) 01:18:17.15 ID:???.net
小さく感じるとか言われても分からんのだが
当該部分は何pxで表示されてんの?
開発者ツールで見りゃ分かると思うんだが

466 :Name_Not_Found:2024/05/19(日) 09:43:23.97 ID:???.net
>>465
16pxです。つまり変更していません。
それで、bootstrapのscssを読み込んで、
$font-size-base: 1.1rem;
にしたら本家と同じような文字サイズになります

これって私の環境なんですかね?
文字サイズが小さくなる環境ってあるのだろうか・・・

467 :Name_Not_Found:2024/05/19(日) 09:53:36.75 ID:???.net
だから開発者ツールで何pxなんだよ

468 :Name_Not_Found:2024/05/19(日) 11:08:50.65 ID:???.net
変更してないので1remのままです。

469 :Name_Not_Found:2024/05/19(日) 11:26:07.48 ID:???.net
pxが算出されるだろ それを書けや

470 :Name_Not_Found:2024/05/19(日) 13:05:18.18 ID:???.net
>>468
1remは何pxで表示されてんの?って話
Chromeの開発者ツールでフォントが小さい部分のタグを選択した状態で
「計算済み」タブにある「Text」の下の「font-size」はpxで表示されてると思うけど
どうなってる?

471 :Name_Not_Found:2024/05/19(日) 14:26:52.38 ID:???.net
前から疑問なのだが、この界隈に一定数いる
絶対に開発ツール開きたくないマンって何なん?
デバッグ時の最初の選択肢であり、実際一番有効な方法だと思うのだが

472 :Name_Not_Found:2024/05/19(日) 16:10:56.39 ID:???.net
問題ある部分に何が効いて不具合が出てるのか
開発者ツール使えば、ある程度分かるのにねぇ

473 :Name_Not_Found:2024/05/19(日) 19:41:15.52 ID:???.net
>>470
16pxです。不具合は出ていません
最初に書きましたが、CDNを読み込んでも小さいです

474 :Name_Not_Found:2024/05/19(日) 20:12:35.50 ID:???.net
ページのズーム倍率下がってたりして

475 :Name_Not_Found:2024/05/19(日) 20:30:02.99 ID:???.net
あとは
ブラウザごとで違いが出るか?
スマホ、タブレット等ではどうなる?
フォントは何を使ってるのか?
そもそもbootstrapを使ったサイトは自作?テンプレート?

476 ::2024/05/19(日) 21:02:23.53 ID:???.net
>>474
俺もそれ書こうかと思ったけど、まさかね

477 :Name_Not_Found:2024/05/19(日) 21:46:37.63 ID:???.net
>>474
普通に100%です。

>>475
違いはでません。フォントも設定してないです。
Viteは使っていますが、vscodeでHTML作成して
CDNでbootstrapを読み込んだら、小さく感じました。

ここまで質問して思ったのですが、
自分の目の問題かもしれません。

ChatGPTやcopilotをよく使っているので、
あの文字サイズに慣れてしまったわけで、
他のサイトの文字を小さく感じるのかもしれません

478 :Name_Not_Found:2024/05/19(日) 21:54:46.25 ID:???.net
だから皆さん開発者ツールで何pxかって尋ねてるのでしょ
昔はブラウザのフォントサイズは14pxにしてたのだけど、
個人のHPを立ち上げた時は16px基準にしたらしばらく字が大きく感じ過ぎてなw

479 :Name_Not_Found:2024/05/19(日) 22:07:49.90 ID:???.net
>>477
だったら本家のサンプルファイルは同じ16pxなのに
そっちは小さくない(>>464)っていうのが意味不明

480 :Name_Not_Found:2024/05/19(日) 22:25:37.96 ID:???.net
>>479
Zの知能舐めすぎ
>>477なら、まともな知能があれば最初に行う、サンプルと自サイトの窓を横に並べて見比べる事もしてないんだろ
そういえば最近の連中はスマホから入るから複数の窓を同時に使うという感覚が無いと聞いたような気も

481 :Name_Not_Found:2024/05/20(月) 07:50:46.02 ID:???.net
>>480
デュアルディスプレイなので、見比べてはいます。
さすが全ての情報を開示して説明できないです。

自分が期待した答えは「◯◯だと小さくなる」
でしたが、まさか当たり前(HTMLやコンソールの確認など)
についても四の五の言われると思いませんでした
質問に答える気がなく、単にいじめてるだけじゃないですか

482 :Name_Not_Found:2024/05/20(月) 07:52:40.77 ID:???.net
お前らなんてAIに劣るんだから
AIにできない過去の経験を語るぐらいしかないのに
よくもなぁ、チクチク小姑みたいに突っ込んでくるのな
どうせこの後も難癖つけるんだろ?やってることが古いんだよ

483 :Name_Not_Found:2024/05/20(月) 08:22:30.50 ID:???.net
>>481
コードとかスクショとか、再現するための情報を出さずに「気がする」なんて曖昧なことしか書かなけりゃ、そりゃ基本的なとこからの確認になるわな

484 :Name_Not_Found:2024/05/20(月) 08:25:52.37 ID:???.net
>>481
求めている答えが得られない理由は「質問の仕方が悪い」「情報が足りない」「態度が悪い」のどれかよ

485 :Name_Not_Found:2024/05/20(月) 08:27:20.65 ID:???.net
>>482
じゃあさっくり答えてやれよ
できるもんならな

486 :Name_Not_Found:2024/05/20(月) 08:30:03.36 ID:???.net
以前ここで聞いたら回りくどいもったいぶった教え方で本質的なことは隠して学習しろみたいな爺さんばかりで
ChatGPTに聞いたら爺さんのやり方の1000倍スマートなのを完璧に示してくれたことあったわ

487 :Name_Not_Found:2024/05/20(月) 08:55:22.68 ID:???.net
>>481
なら最初からその証拠を上げれば済んだ話だろ
つまり、2画面同時に並べて、両方とも開発者ツール開いた状態で、フォントの大きさが違うと主張する部分を選択して、Styleが見えてる状態で、スクショ
これがあればこれまでの全てのやりとりは必要なかったろ
そしてこれが出来ないんだから、出来ない程度の超初心者と見なされて当然
お前の根底に「僕が間違ってるわけがない」の超初心者あるあるがある点からも

本当にブラウザ/OS/フレームワーク/CDNのどれかにバグがあるのなら、
当たり前だが第三者が確認出来る証拠と再現方法を示す必要がある
だからまともな奴なら最初から上記スクショが出てくるんだよ

> 自分の目の問題かもしれません。
ああこいつは駄目だ、もう二度と相手にしないようにしよう、とリアルなら思われるよ
逆にこういうクズが無罪放免されてしまうから質が上がらなくて酷いままなのがネットだが

まあお前は(ビジネスに必要な、正しい意味での)コミュ障って奴だ
何を伝えれば相手に通じるか、まるで分かってないというね
最低限これだけ示せば誤解の恐れがない、というところまでは伝える必要があって、
言及してない部分は各自が想定する一番確率の高いもので補完されて当然
マヌケな事を書いてるからマヌケ扱いされてるのは至極妥当
話が進まないのはお前の問題

ああ一応言っておくと、
> 自分が期待した答えは「◯◯だと小さくなる」
俺らが想定してるのは、「お前の○○が間違ってるんだよ馬鹿タレ、小さくはならねえよボケ」だ
だから俺らはお前のどこが間違ってるか、間違い探しをしてて、
だからお前は「絶対に僕は間違ってないもん!!!」と俺らにも納得せざるを得ない証拠を出す必要があるわけ
そしてこれがないとバグレポートも出来ないだろ
お前は何から何まで、本当に何も分かってない
だから話が進まない

488 :Name_Not_Found:2024/05/20(月) 09:48:37.06 ID:???.net
その具体例を思い出せない爺さん

489 :Name_Not_Found:2024/05/20(月) 11:43:52.65 ID:???.net
box-sizing: border-box;はheightをpxで指定すると効くけど
height:auto;にしたら効きませんでした。
どうすればheight:autoでも効きますか?

490 :Name_Not_Found:2024/05/20(月) 11:51:22.83 ID:???.net
効いてるよ

491 :Name_Not_Found:2024/05/20(月) 16:04:56.44 ID:???.net
widthやheightってautoにするとborder-boxは無視されるんじゃなかったっけ?

492 :Name_Not_Found:2024/05/20(月) 17:50:15.31 ID:???.net
されないが

493 :Name_Not_Found:2024/05/20(月) 21:59:13.05 ID:???.net
試してみれば分かるがされる

494 :Name_Not_Found:2024/05/20(月) 23:35:02.52 ID:???.net
なにをもってborder-boxが無視されると言ってるの
border-boxの仕様のほうを勘違いしてんじゃないの

495 :Name_Not_Found:2024/05/21(火) 00:38:39.02 ID:???.net
確認したけど効いてるね
見た目は同じになるはずだけど、getComputedStyleを使ってheight/widthを取得するとちゃんとborderの分の差が出るよ

496 :Name_Not_Found:2024/05/21(火) 01:15:11.17 ID:???.net
開発ツールでは無視されてるように見えるだけってこと?

497 :Name_Not_Found:2024/05/21(火) 08:08:52.71 ID:???.net
見えない

498 :Name_Not_Found:2024/05/21(火) 08:39:10.30 ID:???.net
「box-sizing: border-boxが効いていない」と思うのであれば、なにか認識が食い違っているのではなかろうか

box-sizingとheight: autoに対する自分の認識はこう

box-sizing: border-box;
height: auto;
border: 10px solid red;
こうスタイルを指定した要素は「子要素がボーダーの内側に収まる」ようになるので
計算済みのheightは「子要素によって計算される高さ+20px(上下のボーダー)」
になる
box-sizing: content-boxにすると「子要素がボーダーの内側に収まる」のは変わらないけど「ボーダーが高さの計算に入らなくなる」のでその分小さくなる

499 :Name_Not_Found:2024/05/21(火) 08:59:36.33 ID:???.net
「height:autoだと子要素がボーダーの内側に収まるように計算される」のはbox-sizingの指定では変わらんので、画面上の見た目も開発者ツールの計算済みタブの図で表示される数値も変わらん
これが「効いていない」ように見えているだけではないかな……

500 :Name_Not_Found:2024/05/21(火) 11:21:04.55 ID:???.net
質問です
以下のコードにpic1を上下中央揃い、
テキスト1が改行してheightが広くなっても画像が上下中央揃いになるようにしたいです
どのようにすれば上手くできるでしょうか?


[HTML]
<div id="main">
<div id="acmenu">
<dl>
<img src="pic1">
<dt>テキスト1</dt>
<dd>
本文1
</dd>
</dl>
<dl>
<dt>テキスト2</dt>
<dd>
本文2
</dd>
</dl>
<dl>
<dt>テキスト3</dt>
<dd>
本文3
</dd>
</dl>

</div>
</div>

501 :Name_Not_Found:2024/05/21(火) 11:22:55.10 ID:???.net
[CSS]
#main {
width: 500px;
margin: 80px auto;
position: relative;
#acmenu {
dl {
border-top: 1px solid gray;
counter-increment: question;
margin: 0;
&:last-of-type {
border-bottom: 1px solid gray;
}
dt {
cursor: pointer;
font-size: 1rem;
line-height: 1;
position: relative;
display: block;
padding: 15px 8px 12px 64px;
&.active {
font-weight: bold;
}
}
dd {
display: none;
margin-bottom: 16px;
padding: 12px 24px 16px;
background: #f7f7f9;
border: 1px solid gray;
border-radius: 8px;
}}}}

502 :Name_Not_Found:2024/05/21(火) 11:28:51.29 ID:???.net
>>500
><dl>
><img src="pic1">
><dt>テキスト1</dt>
dl直下にimgはダメ

503 :Name_Not_Found:2024/05/21(火) 11:43:27.91 ID:???.net
>>502
ありがとうございます、そうだったんですね!
どのような感じで書けばよいのでしょうか…?

504 :Name_Not_Found:2024/05/21(火) 13:26:20.98 ID:???.net
>>502
ありがとうございます、解決しました!

505 :Name_Not_Found:2024/05/21(火) 15:28:13.23 ID:???.net
>>498-499
横からだけど、なるほど分からん、と一瞬思ったが
height:autoだと、content-boxでもborder-boxと同じく「ボーダーの内側に収まる」という前提でheightが計算されているから
content-boxのコンテンツ領域の数値はborder-boxの数値と同じになるって考えたら理解できた(何言ってるのか分かりにくいとは思うが)
というか開発者ツールでマウスオーバーで表示されるフローティングボックスだけ見ちゃってて、計算済みタブの方でheightに差が出てるの見落としてたわ
解説ありがとう、勉強になりました

506 :Name_Not_Found:2024/05/23(木) 14:52:59.88 ID:pd9pga9F.net
(1)beforeはaaa:beforeのように:が1つの場合で書いてあったりaaa::beforeのように
:が2つで書いてあったりするところがあるけど違いはありますか?

(2)style="aaa:before"のようにstyleの中でbeforeは使えますか?

507 :Name_Not_Found:2024/05/23(木) 15:00:35.12 ID:???.net
>>506
1 違いはない :hoverなどの疑似クラスと区別するため推奨される記法

2 できない

508 :Name_Not_Found:2024/05/23(木) 15:02:18.54 ID:???.net
>>506
コロンひとつでも問題なく動いちゃうけど
擬似要素は二つ書くことになってます

htmlのstyleでは擬似要素を書くことができません

509 :Name_Not_Found:2024/05/23(木) 15:17:31.11 ID:???.net
擬似要素のコロン1つはCSS2.1までの互換のために残ってるだけなので使わない方がいい

510 :Name_Not_Found:2024/05/28(火) 01:22:52.49 ID:???.net
WindowsPC版のChromeの拡張機能のstylusで、youtube画面の不用な機能の非表示などをカスタマイズしています。
ミニプレイヤーを無効にしたく、以下の定義の追加でミニプレイヤーのボタンは非表示にできたのですが、

#movie_player .ytp-right-controls button.ytp-miniplayer-button {
display: none !important;
}

タッチパネルが付いてるPCだと、動画再生エリアをタッチしながら下へスワイプすると、
ミニプレイヤーに切り替わってしまう事が判りました。
この動作を無効化したいのですが、方法がありましたら教えてください。

所々、style="touch-action: 〜"のような属性がページ内にあるのでこの辺りが怪しいと思ってるのですが、
どうしたらいいかまでに至ってません。

511 :Name_Not_Found:2024/05/29(水) 06:53:07.62 ID:???.net
ここはWeb制作板です

512 :Name_Not_Found:2024/05/29(水) 13:43:44.80 ID:???.net
回答しないつもりなら黙っとればええのに
ChatGPT4o曰くCSSの適用だけでは不十分でTampermonkeyでjavascriptも使えだとさ

513 :Name_Not_Found:2024/05/29(水) 13:47:56.88 ID:???.net
>>512
板違い消えろ

514 :Name_Not_Found:2024/05/29(水) 13:51:48.83 ID:???.net
板違いなのかな?どこで質問したらいいですかね
CSSとかに詳しそうだったのこの板ぐらいしか見当たらんのだけど

515 :Name_Not_Found:2024/05/29(水) 13:52:27.76 ID:???.net
<div><a></a><div><div></div></div></div>
となってる塊全体を指定するにはどうしたらいい?

516 :Name_Not_Found:2024/05/29(水) 13:55:23.82 ID:???.net
割とこの話って外人のサイトでも大した情報出てなくて困ってるんだよね
>>1読んでこのスレなら大丈夫そうかなーと思ったらまさか自治厨に煽られるとは
ちょっとでも仕方ねー調べてやっか的な心は芽生えなかったかね?

517 :Name_Not_Found:2024/05/29(水) 14:01:25.70 ID:???.net
>>515
一番最初のdivを指定すればいいんじゃない?
classつけたほうがわかりやすいね!

518 :Name_Not_Found:2024/05/29(水) 14:07:15.10 ID:???.net
他にも関係ないdivはいっぱいあって
この並びになってるとこだけ抜き出したい

519 :Name_Not_Found:2024/05/29(水) 14:07:34.73 ID:???.net
>>518
classをつけよう

520 :Name_Not_Found:2024/05/29(水) 14:09:39.06 ID:???.net
他人が書いてるのでclassは付けられません

521 :Name_Not_Found:2024/05/29(水) 14:10:49.38 ID:???.net
パターンマッチを知らんと見えるが
このパターンになっていたらというような条件はCSSでは書けない
残念だったね

522 :Name_Not_Found:2024/05/29(水) 14:10:57.48 ID:???.net
状況としてはスクレイピングしていて、特定のデータを抜き出す為のセレクタの書き方

523 :Name_Not_Found:2024/05/29(水) 14:13:31.96 ID:???.net
>>522
板違い消えろ

524 :Name_Not_Found:2024/05/29(水) 14:16:37.05 ID:???.net
脊髄反射すぎね?100歩譲って今日だけおかしなのが暴れてるとしようか

525 :Name_Not_Found:2024/05/29(水) 14:19:22.27 ID:eZz6URnG.net
<div class="aaa">aaa1</div>
<div class="aaa">aaa2</div>
<div class="aaa">aaa3</div>

このように子要素はないけど
class="aaa"の2番目(つまりaaa2)の部分だけbackground-color:#ffff00とするには
どのようにセレクタを指定すればいいんですか?

526 :Name_Not_Found:2024/05/29(水) 14:20:42.80 ID:???.net
おさらいしよう
ローカルルール
>扱う話題
> HTML、CSSなどのサイト制作の技術
> JavaScript、VBScriptなどのクライアントサイドプログラム
> Webサイトの運営および管理についての情報交換・雑談
> 2chでは荒らし依頼はできません
>板違いな話題
> ネット上の事象の観察→『ネットwatch』
> レンタルサーバー、ドメイン→『レンタル鯖』
> HPの宣伝、ネットするだけで儲かる話等→『宣伝掲示板』
> CGI、Perl、PHPなどのサーバサイドプログラミング→『WebProg』
> Flash制作→『FLASH・動画』
> アフィリエイト、ネット広告の話題→『Web収入』
> アダルトサイトの制作関連→『ウェブマスター』(21禁)
このスレ
>ここは初心者からベテランまで、全ての人を対象に優しく答えるスレです
>類似質問、重複質問、丸投げ大いに結構。HTML / CSS 関係の事なら何でもOK

527 :Name_Not_Found:2024/05/29(水) 14:24:11.98 ID:???.net
>>525
何番目のタグとか大雑把に指定できたと思う
0オリジンならdiv[1]とかそんなだったかと(うろ覚え)

528 :Name_Not_Found:2024/05/29(水) 14:28:01.57 ID:???.net
能力を超えるものは板違い

529 :Name_Not_Found:2024/05/29(水) 14:32:59.50 ID:???.net
まあ匿名じゃ所詮このレベルだよな
本当に解決したいなら技術系SNSで聞いた方がいいよ

530 :Name_Not_Found:2024/05/29(水) 14:35:42.28 ID:???.net
chat-GPTにまず聞け
このスレでちゃんと回答が出てくる耳タコ質問系なら一発で解決する場合が多い

531 :Name_Not_Found:2024/05/29(水) 15:02:15.53 ID:???.net
chat-GPTにレガシーサイトのソースを完全書き換えさせようと試みたけどまだ無理だわ

532 :Name_Not_Found:2024/05/29(水) 15:25:47.21 ID:???.net
最初はパターンマッチだったんだよな
まだpythonよりperlが主流な頃
bs4がいけてるよ、findよりもselectがいけてるよ、という流れなのに、
また原始的な方法に戻らないといけない

533 :Name_Not_Found:2024/05/29(水) 16:50:27.16 ID:???.net
ほんとゴミ人間は板違いすら認識できないのは、同じ人間ではないわな
猿がキーボード叩いてそうw

534 :Name_Not_Found:2024/05/29(水) 16:55:12.72 ID:???.net
相手が知らなくて自分が知ってることを回答して気持ちよくなりたいんだから、
知らないこと聞くような奴は来るんじゃない

535 :Name_Not_Found:2024/05/29(水) 17:04:16.85 ID:???.net
>>525
class名ごとにカウントできる仕組みにアップデートまだー

536 :Name_Not_Found:2024/05/29(水) 17:10:28.08 ID:???.net
>>534
知らないんじゃなくてnthセレクタじゃ無理だからjs使わないとできないんだぞ池沼

537 :Name_Not_Found:2024/05/29(水) 17:53:52.12 ID:???.net
>>525
aaaクラスしかないのなら
.aaa:nth-of-type(2) {
 background-color:#ffff00;
}
で問題ない

538 :Name_Not_Found:2024/05/29(水) 18:10:41.31 ID:???.net
>>515
バカみたいだけど
div:not([class]):has(> a) {
}
これで一応選択はできるよ

539 :Name_Not_Found:2024/05/29(水) 18:29:51.22 ID:???.net
これいいな
同じ<a>を何度も選択しないのがいい
これで荒く拾っておいて、あとは条件に合わないのを弾けば十分使える
1階層まではパターンが書けるのか

540 :Name_Not_Found:2024/05/29(水) 18:50:10.33 ID:???.net
div:has(> a + div)
これで完全なものが得られた

541 :Name_Not_Found:2024/05/29(水) 19:37:36.95 ID:???.net
>div:not([class]):has(> a) {
>div:has(> a + div)
これに限った話じゃないけど1週間でも1ヶ月でも後で読んで何のことか判るものなの?
セレクタってもっと記述的に書けませんか?

542 :Name_Not_Found:2024/05/29(水) 19:40:27.90 ID:???.net
保守性を考えるならclassを振るべき
classがいじれないとかいうバカ案件にはこういう邪道をやるしかない

543 :Name_Not_Found:2024/05/29(水) 19:43:29.93 ID:???.net
コメントでも書いとけ

544 :Name_Not_Found:2024/05/29(水) 23:09:23.75 ID:???.net
:has()なんて使ったことなくて、CSSでは無理と発狂しちゃうおじいちゃんは、
div:has(> a + div) なんて何してるか全く分からないだろうな

545 :Name_Not_Found:2024/05/29(水) 23:11:28.55 ID:???.net
何故か質問する側の厨房が親切な回答者の威を借りてマウントするスレ

546 :Name_Not_Found:2024/05/29(水) 23:14:44.82 ID:???.net
:is :not :where :hasなんてスレで頻出なのに
>>544は何が悔しくていじけているのかわからない

547 :Name_Not_Found:2024/05/29(水) 23:19:02.91 ID:???.net
ほぞがw
あり得ないほどほぞが噛まれているwww
しかも速攻で

CSSは無駄に奥が深いので、迂闊に無理とか言っちゃ駄目だぞ

548 :Name_Not_Found:2024/05/29(水) 23:29:58.95 ID:???.net
板違いを指摘された子が荒らしに進化したパターンかな

549 :Name_Not_Found:2024/05/29(水) 23:31:16.15 ID:???.net
たまに発生するキチガイやルビキチをNGするためにこの板にもワッチョイあればいいのに

550 :Name_Not_Found:2024/05/29(水) 23:35:12.82 ID:???.net
板違いだと思っちゃう子は基準レベル以下なんよな
絡まない方がいいよ

551 :Name_Not_Found:2024/05/29(水) 23:37:22.97 ID:???.net
>>514
まだ冷静
>>516
キレはじめ

552 :Name_Not_Found:2024/05/29(水) 23:38:19.52 ID:???.net
>>550
もうキレちゃってなぜか質問キッズなのに回答へのお礼もなく荒らすことしか頭にない

553 :Name_Not_Found:2024/05/29(水) 23:42:00.88 ID:???.net
次から次へとほぞが
なかなかの良問だったみたいだな

554 :Name_Not_Found:2024/05/29(水) 23:45:41.49 ID:???.net
真面目な話
更新でコンテンツ増減したり順番が変わったりラッパーが増えたりするのに
意地でもclass付けずにパズルみたいな疑似クラス使ってるオナニーコードはたまにある

555 :Name_Not_Found:2024/05/30(木) 01:53:59.28 ID:???.net
ブロック対策には有効

556 :Name_Not_Found:2024/05/30(木) 06:45:36.63 ID:???.net
>>554
そういうの引き継ぎたくないわー
絶対やだわー

557 : 警備員[Lv.39]:2024/06/03(月) 19:29:43.52 ID:???.net
育成

558 :Name_Not_Found:2024/06/05(水) 13:53:13.15 ID:???.net
専ブラのsikiのCSS触ってみてるけどワケワカメ

559 :Name_Not_Found:2024/06/05(水) 14:19:00.19 ID:???.net
今どきCSSを手で書くってどういう時?

560 :Name_Not_Found:2024/06/05(水) 20:33:04.75 ID:???.net
chatGPTにでも書かせるの?

561 :Name_Not_Found:2024/06/06(木) 12:03:07.13 ID:???.net
コピペで済むことしかやらないんじゃね

562 :Name_Not_Found:2024/06/06(木) 20:45:14.87 ID:???.net
手打ちしちゃだめなの…?入力補助機能使うっていう意味?

563 :Name_Not_Found:2024/06/07(金) 16:08:33.73 ID:???.net
Ruby on Rails 7 のデフォルトのCSS フレームワークは、
Bootstrap, Bulma, Tailwind, PostCSS, Dart Sass の5つ

CSSが分からない香具師は、
Bootstrap, Bulma, Tailwind などのレスポンシブ・フレームワークを使えばよい

564 :Name_Not_Found:2024/06/07(金) 16:27:51.12 ID:???.net
ルビキチしね

565 :Name_Not_Found:2024/06/08(土) 00:59:40.17 ID:???.net
>>564
今時、透明あぼんしてないの?

566 :Name_Not_Found:2024/06/08(土) 01:26:18.02 ID:???.net
あぼんしててもしね

567 :Name_Not_Found:2024/06/09(日) 00:16:31.26 ID:???.net
<style>
#test{
display:flex;
list-style:none;
align-items:center;
}
</style>
<ul id="test">
<li>aaa</li>
<li>bbb</li>
<li>aaa<br>bbb<br>ccc</li>
</ul>

これだと全てのliが縦の中央揃えになってしまうけど
最初のliだけ縦の中央揃えにするにはどうやればいいんですか?
ulのalign-items:centerを削除して
#test li:nth-child(1){align-items:center}とやっても効かなかったです

568 :Name_Not_Found:2024/06/09(日) 00:39:57.45 ID:???.net
>>567
#test li:first-child { align-self: center; }

569 :Name_Not_Found:2024/06/09(日) 08:31:24.31 ID:cfJ6pxYN.net
>>568
ありがとうございます

570 :Name_Not_Found:2024/06/16(日) 21:59:14.87 ID:???.net
インラインの CSS を上書きするにはどうしたら?

571 :Name_Not_Found:2024/06/16(日) 22:06:05.82 ID:???.net
!important

572 :Name_Not_Found:2024/06/16(日) 22:13:54.23 ID:???.net
ゴメン。
インラインに既に !important が入ってる場合です。

573 :Name_Not_Found:2024/06/16(日) 22:39:49.54 ID:???.net
インラインのimportantは詳細度が最高なので同じくインラインでしか上書きできない
jsで削除するくらいしかない

574 :Name_Not_Found:2024/06/16(日) 22:59:48.91 ID:???.net
ありがと。
そうか、CMS 側でもう決め打ちってことなのね。

575 :Name_Not_Found:2024/06/17(月) 02:12:51.62 ID:???.net
<thead>には絶対に<th>を使わなくてはいけないという規格等はありますか?

576 :Name_Not_Found:2024/06/17(月) 03:59:09.64 ID:???.net
無い

577 :Name_Not_Found:2024/06/17(月) 06:49:56.24 ID:???.net
ありがとうございます安心しました
なるべく早くtabl;eタグ使わずに済むように精進します

578 :Name_Not_Found:2024/06/17(月) 09:50:04.83 ID:???.net
そういうの『html 入れ子』でググれば出てくるよー

161 KB
新着レスの表示

掲示板に戻る 全部 前100 次100 最新50
名前: E-mail (省略可) :

read.cgi ver.24052200