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

**Name_Not_Found** · 2023/08/23(水) 18:52:13.52

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

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

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

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

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

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

**Name_Not_Found** · 2023/11/14(火) 17:09:52.76

>>259
CSSだけじゃ厳しいですか？

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

**258** · 2023/11/14(火) 17:14:16.13

あ、ID出ないのですねこの板
私は>>258,261です。
テキストと図形を表示させる位置はdivのセンターです

**Name_Not_Found** · 2023/11/14(火) 17:17:38.31

Gridで重ねてもいいし、position:absoluteで重ねてもいいよ

**258** · 2023/11/14(火) 17:27:47.94

>>263
ヒントありがとうございます！やってみます

**258** · 2023/11/14(火) 17:57:08.89

動きと表示位置については、何とか出来ました！
ただ、#ffffffの文字なのに真っ白にならないんです
#ffffffになるのはほんの一瞬だからでしょうか？
アニメーションのopacity: 1になる間の秒数って設定出来ないでしょうか？

**258** · 2023/11/14(火) 18:02:38.42

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

**Name_Not_Found** · 2023/11/14(火) 18:07:16.99

@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の設定しだいで計算通りにいきません

**258** · 2023/11/14(火) 18:23:31.14

>>267
なんとこんな技が！！
本当にありがとうございます😭
自分もいつか他の人に恩返し出来るよう頑張ります！

**Name_Not_Found** · 2023/11/15(水) 09:52:45.87

他人に恩返しすんな

**Name_Not_Found** · 2023/11/16(木) 02:02:58.87

最後まで頭が残念な子だったな

**Name_Not_Found** · 2023/11/29(水) 23:10:59.54

:local-linkって知ってた？
これ使えばメニューなどでcurrentの効果をCSSだけで簡単に作れるよね？

**Name_Not_Found** · 2023/11/30(木) 02:26:37.44

ブラウザが対応すれば

**Name_Not_Found** · 2023/12/02(土) 03:30:11.71

他人に恩返し、良いじゃん
中国では大金持ちに助けてもらって自分が成功した場合、また他の貧しい者を救えって考えがある

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

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

**Name_Not_Found** · 2023/12/02(土) 03:56:05.07

半月前の書き込みにレスするな

**Name_Not_Found** · 2023/12/11(月) 19:25:29.25

本ではHTMLファイルのインデントがスペース2つになっているのですが、
自分で書くときはスペース4つでもいいですか？

**Name_Not_Found** · 2023/12/11(月) 19:45:15.88

お好きにどうぞ
2つ、4つ、タブなど宗教戦争になるから自分の信じる道を。

**Name_Not_Found** · 2023/12/11(月) 19:48:46.66

いいよ

**Name_Not_Found** · 2023/12/11(月) 20:26:56.79

インデントしなくてもよい？

**Name_Not_Found** · 2023/12/11(月) 20:51:37.57

よい

**275** · 2023/12/11(月) 22:24:05.10

分かりました
レスくれた方、ありがとうございました

**Name_Not_Found** · 2023/12/12(火) 01:07:35.95

俺は3派

**Name_Not_Found** · 2023/12/12(火) 04:06:19.83

最近のエディタはその辺の事情酌んで事後の扱いが自由になってるから助かる
俺はTab派

**Name_Not_Found** · 2023/12/18(月) 12:41:23.37

HTMLの表示に何のフォントが使われているかを確認するためにWhatFontという
ブラウザの拡張を入れたのですが、フォントがserifやsan-serifの場合にそれが
実際に何のフォントなのかを確認する方法はあるでしょうか?

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

**Name_Not_Found** · 2023/12/18(月) 12:46:29.15

chromeのdevツールのComputedの一番下にRendered fontsがあるじゃろ

**Name_Not_Found** · 2023/12/18(月) 13:38:00.36

firefoxも開発ツールの右ペインにフォントタブがある

**Name_Not_Found** · 2023/12/20(水) 00:23:13.63

Firefox121、規定で:has()有効になったね

**Name_Not_Found** · 2023/12/21(木) 16:48:14.74

>>284 >>285
できました、どうもありがとうございます

**Name_Not_Found** · 2023/12/22(金) 14:38:48.61

画像にcssでfilter drop-shadowで影をつける際に
影だけ乗算を適用させることってできますか？

**Name_Not_Found** · 2023/12/22(金) 21:40:19.52

drop-shadowとmix-blend-mode用に::beforeで同サイズのblockを画像の下に重ねるとか？
乗算ならberforeのblockにbackground-color: white;入れとくといいかも

**Name_Not_Found** · 2023/12/22(金) 22:02:28.83

画像が矩形じゃなくて透過で形通りの影を乗算にしたいとかなら無理じゃねーかな

**Name_Not_Found** · 2023/12/22(金) 22:08:07.38

矩形の画像ならdivの背景にしておいて、後ろに乗算で同サイズの擬似要素を追加すればできる
背景抜いた画像は擬似要素のcontentに同じ画像を指定すればいける
ただしサイズ調整が利かないのでレスポンシブ使用には厳しい

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

**Name_Not_Found** · 2023/12/23(土) 10:02:36.22

288です
ありがとうございます！　おっしゃる通り矩形ではなく透明のあるpng画像です
擬似要素に同じ画像ってのは考え付かなかったです
それでできるか試してみます！

**Name_Not_Found** · 2023/12/24(日) 15:43:39.93

filter dropshadowをかけた要素内でposition fixedが効かなくなる
バグ（？）に初めて出会った
SafariだけOKでChrome、Edge、FFがNG
Safariの挙動が正しくないのかな

**Name_Not_Found** · 2023/12/24(日) 20:49:00.67

ホントだ
ChromeもFirefoxも、親にfilter使った途端に子がabsoluteの挙動になるね
これはWebkitの方が正しいんでない？

**Name_Not_Found** · 2024/01/02(火) 01:34:59.85

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

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

**Name_Not_Found** · 2024/01/02(火) 19:30:52.27

開発側にとっては謎仕様やな

**Name_Not_Found** · 2024/01/02(火) 22:07:47.20

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

**Name_Not_Found** · 2024/01/03(水) 01:39:06.29

fixed要素はルート直下の設置がいいのは同意だけど、filterやtransformで動作が変わるってのは納得いかないな
Webkitの実装の方が直感的だと思うわ
まあその辺は散々議論された上でこの仕様なんだろうけど

**Name_Not_Found** · 2024/01/03(水) 14:00:05.52

初歩的な質問ですみません
画像の位置とテキストの位置ってどうやって調整するんですか？
どこかと揃えたいんじゃなくて位置を変えたいです。お願いします

**Name_Not_Found** · 2024/01/03(水) 14:51:01.83

position:absolute;
で自由に配置しよう！

**Name_Not_Found** · 2024/01/03(水) 16:42:47.31

>>300できました！！！すごい！ありがとうございます！！本当に助かりました！

**Name_Not_Found** · 2024/01/03(水) 17:00:34.36

>>300
すみませんposition:absolute;ってテキストには使えないんですか？

**Name_Not_Found** · 2024/01/03(水) 17:00:35.35

>>300
すみませんposition:absolute;ってテキストには使えないんですか？

**Name_Not_Found** · 2024/01/03(水) 17:18:42.76

>>303
divなりspanなり、タグでテキストを囲えばいい

**Name_Not_Found** · 2024/01/03(水) 19:36:57.25

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

**Name_Not_Found** · 2024/01/03(水) 19:41:14.33

ゴールがわからないから答えようがない
こういうサービスでコード張って
https://jsfiddle.net/
目指す形を画像で出そう

**Name_Not_Found** · 2024/01/04(木) 03:17:55.09

幅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;
}
で想定のデザインなのかな？

**Name_Not_Found** · 2024/01/04(木) 08:01:31.68

>>306 ありがとうございます！
>>307　ハイ！

**Name_Not_Found** · 2024/01/04(木) 08:47:05.98

>>307
やってみたらすべてのテキストが左上に集まりました…何が原因なのでしょうか？

**Name_Not_Found** · 2024/01/04(木) 09:55:06.28

imgurに完成予想図、
ソースをjsFiddleにアップしないと伝わりにくいよ
https://imgur.com/
https://jsfiddle.net/

**Name_Not_Found** · 2024/01/10(水) 16:38:53.35

>>309です！ホームページ完成しました！本当にありがとうございます！
すみません、スレの趣旨とは外れてしまいますが、皆さんのおすすめのレンタルサーバーは何ですか？
学生であまりお金がないです。期間はとりあえず1年ほどを考えています。

**Name_Not_Found** · 2024/01/10(水) 16:48:15.62

今考えているのはロリポップ、桜のレンタルサーバー、エックスサーバーです

**Name_Not_Found** · 2024/01/10(水) 16:56:09.73

どんな内容で何が目的のページか知らんけどただの静的サイトならスターフリーみたいな無料のでいいんじゃないの

**Name_Not_Found** · 2024/01/10(水) 17:45:43.71

今はプロバイダに無料のHPスペースついてない？

**Name_Not_Found** · 2024/01/10(水) 19:00:05.58

>>313静的サイトではないです！スターフリー調べてみました！候補に入れます！ありがとうございます！

**Name_Not_Found** · 2024/01/10(水) 19:01:40.32

>>314そうなんですか？wi-fiはプロバイダですか？

**Name_Not_Found** · 2024/01/10(水) 19:03:39.48

(哲学)

**Name_Not_Found** · 2024/01/10(水) 19:50:47.99

一度思うままやってみればいい
うまくいかないときに学んだことは役に立つ

**Name_Not_Found** · 2024/01/10(水) 20:33:28.55

>>318はい！ありがとうございます！とりあえずやってみます！

**Name_Not_Found** · 2024/01/14(日) 22:24:22.97

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

**Name_Not_Found** · 2024/01/14(日) 22:37:36.47

親のセグメントにpadfing-topで一つめのstickyの格納場所を作っておく

**Name_Not_Found** · 2024/01/15(月) 12:53:28.54

>>321
ありがとうございます。その場合、padingの高さはsticky要素の高さに会わせないといけないということですよね？
stickt要素の高さが可変の場合はjavascriptで調整するしかないですか？

**Name_Not_Found** · 2024/01/15(月) 12:58:45.43

yes

**Name_Not_Found** · 2024/01/16(火) 14:15:21.74

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

**Name_Not_Found** · 2024/01/16(火) 14:30:51.32

SP時とPC時で動作を変える

**Name_Not_Found** · 2024/01/21(日) 22:37:00.94

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

**Name_Not_Found** · 2024/01/22(月) 02:29:59.55

逆に、iPhone Safariの勝手ズームを止めたらダメ！

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

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

**Name_Not_Found** · 2024/01/29(月) 18:56:57.94

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

**Name_Not_Found** · 2024/01/29(月) 19:42:56.25

>>328
遷移するということはevent.preventDefault();まで到達してないのでスクリプトかidが間違ってる
そのページのnew formData(form)は間違いnew FormData(form)が正しい

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

**Name_Not_Found** · 2024/01/30(火) 09:11:26.25

今レスポンシブデザインの静的サイトを作るとして一番有用なツールは何になりますか？
ひと昔前だとDWだったと思うのですが最近はあまりおすすめされていないようです
習得も難しいです
HTMLとCSSの知識は一通りあります
先達のお知恵を拝借したいです

**Name_Not_Found** · 2024/01/30(火) 09:39:29.57

エディタ？vscodeでいいよ

**Name_Not_Found** · 2024/01/30(火) 10:09:09.43

>>330
VSCode一択です

**Name_Not_Found** · 2024/01/30(火) 12:41:34.11

>>329
ありがとうございました

**Name_Not_Found** · 2024/01/30(火) 12:54:03.01

>>331,332
エディタではないです
もうちょっとビジュアル的に操作できるものが良いです

**Name_Not_Found** · 2024/01/30(火) 13:34:06.76

ない

**Name_Not_Found** · 2024/01/30(火) 13:41:52.20

ないことはないだろうよ

**Name_Not_Found** · 2024/01/30(火) 13:54:29.64

dwでいいのでは

**Name_Not_Found** · 2024/01/30(火) 13:56:34.84

DWマスターしてたら仕事でweb会社に入った時に早くに通用しますか？

**Name_Not_Found** · 2024/01/30(火) 14:54:15.32

いいえ

**Name_Not_Found** · 2024/01/30(火) 22:15:55.69

>>334
WYSIWYGエディタはもう息してないので、素直にVSCode使った方がいいよ

**Name_Not_Found** · 2024/02/03(土) 21:31:04.51

DWマスターしたレベルで使えるなら他のも普通に使えよう

**Name_Not_Found** · 2024/02/04(日) 02:34:58.87

メモ帳→GL→DW→VSCodeときたけどVSCode快適だわ
使う人少ないだろうけどVisualStudioも意外と使いやすい

**Name_Not_Found** · 2024/02/06(火) 07:56:02.65

メモ帳, 秀丸, FrontPage, Expression Web, DW(3日), VSCode
だな

**Name_Not_Found** · 2024/02/06(火) 10:03:43.94

VSCodeでDWみたいにパパっとテンプレート読み込んで使えますか？
そういうプラグインやテンプレートありますか？

**Name_Not_Found** · 2024/02/06(火) 16:50:37.79

>>342
VisualStudioのCSSのフォーマッタが好き

**Name_Not_Found** · 2024/02/07(水) 00:03:49.74

>>344
自分で試したらいい
無料なんだし紹介ページも腐るほどある
どうしても訊きたいときはVSCodeスレへどうぞ

**Name_Not_Found** · 2024/02/07(水) 08:36:48.23

どんな質問にも優しく答えるスレなんだからさぁ。。
わざわざ自分で試したらいいとか間抜けなレスしてんなよ
仕事もできねえやつなんだろうなぁ

**Name_Not_Found** · 2024/02/07(水) 13:56:17.45

これは充分優しいぞ
ググって死ねで充分だからな

**Name_Not_Found** · 2024/02/07(水) 17:09:43.43

>>347
どんな質問もじゃねーよスレタイ読め

**Name_Not_Found** · 2024/02/07(水) 17:10:57.19

うるせいわw

**Name_Not_Found** · 2024/02/07(水) 17:11:58.90

うるせいわじゃねーよマヌケ
ちゃんと謝っとけ

**Name_Not_Found** · 2024/02/07(水) 17:12:32.55

日本社会にはもっと優しさ要素が必要だよな
自分でやれとか言ってる場合じゃねえわ
共助を忘れるなよ

**Name_Not_Found** · 2024/02/07(水) 17:13:13.91

スレ違いを許す優しさは要らない

**Name_Not_Found** · 2024/02/07(水) 17:19:21.30

正義マンはお呼びじゃないです by スレ利用者一同

**Name_Not_Found** · 2024/02/08(木) 02:56:37.72

結局のところ、自分が使いたい機能とか使い勝手が自分に合ってるかどうかなんて
本人にしか分からないから、とりあえずVSCodeが良さそうだってことが分かったのなら
ここでスレ違いな質問するよりも、自分でググって気になる機能拡張を片っ端から試した方が
回答を待つよりも速いだろう

**Name_Not_Found** · 2024/02/08(木) 14:58:15.90

初心者です。
会社のcmsにHTMLを書いてページの調整をしているのですが、テーブルの罫線が付けられません。

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

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

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

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

**Name_Not_Found** · 2024/02/08(木) 15:50:19.81

>>356
書き方間違ってる
<table border="2" table width="1550" style=“height:560px; border-collapse:collapse; margin:auto; border-color:black;”>
これでやって効かなかった箇所に!importantを付ける
border-color:black!important;
てな具合に

**Name_Not_Found** · 2024/02/08(木) 16:00:16.97

border:solid 1px #000;

**Name_Not_Found** · 2024/02/08(木) 16:46:38.52

>>357
>>358
回答ありです。
(セミコロンあたりは画像からのテキスト抽出故の誤変換でした)

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

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

**Name_Not_Found** · 2024/02/08(木) 18:26:16.97

tableではなくthやtdにborderを設定しなさい