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

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

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

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

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

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

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

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

**Name_Not_Found** · 2021/10/02(土) 20:02:30.18

>>654
逆逆

注は継承した値を初期値と考えた場合の事を言ってるんだろうけど
653のページの例の通りinitialは継承プロパティでも継承関係なく本来の初期値
あまり難しく考えなくていいのよ

**Name_Not_Found** · 2021/10/02(土) 20:30:14.91

>>656
あー、
「継承プロパティは指定されなければ値は継承されるのがデフォルト→初期値=継承された値」
ではないですよ、って事ですかね？

**Name_Not_Found** · 2021/10/03(日) 20:38:48.23

HTMLとCSSのタグの種類とプロパティの覚え方ってなにか覚えやすくなるコツってありますか？

それからHTMLやCSSでなにか参考になるサイトなどはありますか？

**Name_Not_Found** · 2021/10/03(日) 20:52:24.20

>>658
Emmetやサジェストプラグインで覚えなくていいようにする
参考になるのはMdN

**Name_Not_Found** · 2021/10/03(日) 21:06:19.18

>>659
ありがとうございます！
手打ちで頑張れってことですか？
Mdnってやつは見た感じ学習サイトっぽいですね。

**Name_Not_Found** · 2021/10/04(月) 07:51:55.41

>>660
サイトではないかもだけど、サイト制作の本を何冊か読むのが良いと思う、何冊か併行してつまみ食いがポイント
ただしいきなり自分にあってない難しいのを選ぶと良くない
MdNはそうしたなかで役立つし、自分もよく見る

**Name_Not_Found** · 2021/10/04(月) 11:25:09.01

>>658
【一覧表あり】HTML5でのタグの入れ子のルールを徹底まとめ
https://webliker.info/46840/

**Name_Not_Found** · 2021/10/04(月) 23:44:27.70

chromeのデベロッパーツールのSourcesからimgフォルダの中の画像全部保存したいのだけど一括で保存できる方法ないでしょうか？
一つ一つはできるのですが数が多いので一括でやりたいです。

**Name_Not_Found** · 2021/10/04(月) 23:49:06.22

著作侵害に繋がる予感しかしないので知らんぷり

**Name_Not_Found** · 2021/10/04(月) 23:54:56.51

>>664
お願いします教えてください。
一個ずつ保存めんどくさいだけなんです。

**Name_Not_Found** · 2021/10/04(月) 23:56:32.22

同人エロ漫画だろ

**Name_Not_Found** · 2021/10/05(火) 00:13:07.02

>>665
どんな画像を一気に保存したいの？
url貼ってみ

**Name_Not_Found** · 2021/10/05(火) 00:18:45.55

>>667
https://webliker.info/46840/

**Name_Not_Found** · 2021/10/05(火) 01:51:01.30

>>665
https://stackoverflow.com/a/56534741
あるページにアクセスしたときに、
そのページが取得してくるサブリソースアクセスを全て捉え、
Content-Typeを見て画像であれば（image/jpegとかimage/pngとか）名前をつけて保存する。
適当なフォルダでnpm init -yしてnpm i puppeteerして上のjsファイル１個作ってnode そのファイル名.jsするだけ

**Name_Not_Found** · 2021/10/05(火) 01:53:23.45

あ、/imgディレクトリのみとかするんだったらurlでマッチ取って場合分け一つ追加必要ね

**Name_Not_Found** · 2021/10/05(火) 09:18:15.97

カスにnodeが使えるかよ

**Name_Not_Found** · 2021/10/05(火) 12:46:15.30

ページ全体領域の背景を動画にするにはどうやればいいんですか？
<video src="./test.mp4">ってやっても表示はされるけど静止画になってたし
これだけが表示されて画像や文章とか消えちゃったけど

**Name_Not_Found** · 2021/10/05(火) 13:48:58.80

自動再生オプションつけてないんやろ

**Name_Not_Found** · 2021/10/05(火) 14:46:45.68

あとz-indexな

**Name_Not_Found** · 2021/10/05(火) 16:46:16.03

> ページ全体領域の背景を動画にする
依頼がこうであればしかたなくだが普通こういうサイトはウザいベスト5に入るｗ

**Name_Not_Found** · 2021/10/05(火) 17:52:31.49

自意識過剰サイトのフラグすごそう

**Name_Not_Found** · 2021/10/05(火) 20:09:34.05

ヒカキンの動画かもしれんぞ

**Name_Not_Found** · 2021/10/05(火) 21:43:15.32

<table cellspacing="10">
<tr>
<td>aaa</td><td>bbb</td><td>ccc</td>
</tr>
<tr>
<td>ddd</td><td>eee</td><td>fff</td>
</tr>
</table>
このようなテーブルでセル間隔を10pxにしたいが１行目と２行目の行間の間隔だけ0pxにしたい
どうすればできますか？

**Name_Not_Found** · 2021/10/05(火) 22:00:43.43

私がお答えしよう

**Name_Not_Found** · 2021/10/05(火) 22:13:07.07

>>678
こうすればできる
https://jsfiddle.net/0dnL54m6/

**Name_Not_Found** · 2021/10/05(火) 22:23:10.82

>>680
paddingだとセル内の余白なので違う
やりたいのはセル同士の間隔のことやで

**Name_Not_Found** · 2021/10/05(火) 22:30:05.64

cellspacingを使うな
https://www.tagindex.com/stylesheet/table/border_spacing.html

**Name_Not_Found** · 2021/10/05(火) 22:41:00.55

このようにするってこと

**Name_Not_Found** · 2021/10/05(火) 22:52:05.92

divでやって

**Name_Not_Found** · 2021/10/05(火) 23:24:51.89

処理中を示すプログレスバーを設置したいんですが、処理のパーセンテージが分からない処理のため、バーは100%の状態で、そこに左から右にグラデーションがループするようなイメージのCSSスタイルを探してるのですが、見つかりません
どう探してもバーが空から埋まっていくものしか見あたりません
一般的なアプリでも前述のような処理中を示すバーを見ることがあるので良くあるパターンだとは思うのですが…
もしあれば教えていただけますか

**Name_Not_Found** · 2021/10/05(火) 23:42:30.43

https://codepen.io/Bilal1909/pen/pobgJae
https://codepen.io/redlabor/pen/idHeG
棒状ではないけど　こんなやつ？

**Name_Not_Found** · 2021/10/06(水) 00:05:14.19

Bootstrap, Element UI, Tailwind, Onsen UI などに、

そういうコンポーネントは無いの？

**Name_Not_Found** · 2021/10/06(水) 07:57:22.78

>>685
余計なお節介だけど、
そういう処理の進行と無関係にアニメーションしてるだけのやってる感はイラつくだけだけどな。
止まってるのにぐるぐる回ってる Windows Update のアレとか。
昔の Unix なんかも起動時とかにキャラクターをぐるぐる回したりしてたが、あれは処理が止まるとアニメーションも止まるからな。
そういう意味のある実装を心がけてほしい。

**Name_Not_Found** · 2021/10/06(水) 09:23:10.82

>>686
探してたらイメージに近い物がありました
https://codepen.io/hijiangtao/pen/VBEvMW
上から2つ目のような流れる感じです
これをかなり細く(細いスクロールバーのような)して、流れかたもピコーンとスピードに変化のあるような感じです
ちょっと自分で作り替えられるかトライしてみます

>>688
プログレスバーなのでもちろん処理中だけ表示する想定です

**Name_Not_Found** · 2021/10/06(水) 14:29:52.59

いつ出そうがプログレスが分からないプログレスバーは意味がないどころかユーザーの不信感を買うだけな気がする
まだ「処理中です…」の文字が点滅するだけとかの方がプログレスバー然していない分納得すると思う
なぜ左からバーが埋まっていくタイプのプログレスバーが大多数なのかをちょっと考えた方がいいと思う
横からお節介でした

**Name_Not_Found** · 2021/10/06(水) 15:19:19.78

昔ながらのGIFアニメという手も

**Name_Not_Found** · 2021/10/06(水) 15:35:57.15

いつ終わるのか分からなくても、動いてるのか止まっちゃったのかが分かる表示にしてほしいね。
処理が止まってしまったのにアニメーションが続いてるのであれば何の意味も無い。
Windows Update、お前のことだ。

**Name_Not_Found** · 2021/10/06(水) 15:38:50.74

プログレスバー出すくらいなら処理ログ出せよと思う
自己満足の極みだよあれは

**Name_Not_Found** · 2021/10/06(水) 17:55:03.64

質問です
親要素のwidthが例えば1200pxでmargin:autoがかかっているとして
その子要素を画面幅一杯に表示させたいのですが、
width:100vwとしてもスクロールバーのせいか上手くいきませんでした。
これを解決するには当該の子要素を親要素から外すしかないでしょうか？

**Name_Not_Found** · 2021/10/06(水) 18:43:36.66

>>694
CSSで子要素の幅を親要素より大きくしてはみ出させよう！
ttps://ponsyon.com/archives/4660
子要素を親要素（インナー幅）からはみ出して画面いっぱいにするCSS
ttps://haniwaman.com/inner-over/
【初心者必見】たった2行！親要素を無視して画面幅いっぱいまで要素をはみ出させる方法
ttps://qiita.com/7note/items/c65aeb25784c3b2d27dd

**Name_Not_Found** · 2021/10/06(水) 18:56:56.07

>>695
ありがとうございます！
参考にしてやってみます！

**Name_Not_Found** · 2021/10/07(木) 08:42:28.66

前に親は子を超えられないとかあったけど、超えれるのか・・

wrapperが960pxでもその中にあるdivにて
PCでウインドウ幅いっぱいのカルーセルができるってこと？

**Name_Not_Found** · 2021/10/07(木) 08:56:29.32

確かにできたけど、
margin: 0 calc(50% - 50vw);
これが全然理解できんわ

width: 100vwが中央wrapperの左端から描画されていると思うけど
ウインドウ左端とラッパー左端の余白＝ calc(50% - 50vw);
になるのかわからん・・・

**Name_Not_Found** · 2021/10/07(木) 08:59:29.51

https://zawa2.com/ZZsim/opamp_inv_amp.html
このサイトのGUIに非常に興味があり、自作したいのです。
ソースを見ると
<div>
<div>
<canvas id="canvas_sch1" width="300" height="150"></canvas>
<object type="text/xml" data="zzs_schematic_skel.xml"></object>
<object type="text/xml" data="opamp_inv_amp_2.xml"></object>
</div>
</div>

となっており、zzs_schematic_skel.xmlでボタンや描画エリアのコントロールを作っている模様。
こんな機能を実現するフレームワークはどんなものがあるのでしょうか？

**Name_Not_Found** · 2021/10/07(木) 09:27:37.60

電子回路組める人って尊敬するわ

**Name_Not_Found** · 2021/10/07(木) 09:54:47.63

回路屋を増やすべく、微力ながら貢献したいと思っております。
世界が電化していくと、確実に回路屋が足りなくなる。

機械屋が面倒を見ていたレシプロエンジンをモーターに置き換えるので
回路屋が面倒を見なきゃならない。

**Name_Not_Found** · 2021/10/07(木) 16:46:58.78

回路図のfritzing は、有料になったのか？

水魚堂のBSch3V は、無料のままか？

**Name_Not_Found** · 2021/10/07(木) 17:11:12.57

positionにfixedとか使えば親子の関係断ち切れる

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

<div style="width:70%;height:auto;background:#ff00ff;display:flex">
<div style="width:100px;height:100%;background:#ffff00">aaa</div>
<div style="width:calc(100% - 100px);height:100%;font-size:100pt">あああ</div>
</div>

aaaの方が高さ100%にしても伸びない
どうすれば外枠の高さまで伸びますか？

**Name_Not_Found** · 2021/10/07(木) 23:47:57.37

>>699
とりあえずMathJaxで検索してみるとか

**Name_Not_Found** · 2021/10/07(木) 23:53:41.73

Prototype JavaScript Framework

**Name_Not_Found** · 2021/10/07(木) 23:56:13.54

親のdivの高さはどうしたいの？

**Name_Not_Found** · 2021/10/07(木) 23:59:38.61

>>704
親のheightがautoだから

**Name_Not_Found** · 2021/10/08(金) 00:00:06.46

>>707
自動
中に入る文字や画像の高さにピッタリなるように

**Name_Not_Found** · 2021/10/08(金) 00:02:59.94

>>709
それなら子の高さが100%じゃおかしいと思うよ
高さ具体的に決めないと

**Name_Not_Found** · 2021/10/08(金) 07:20:11.43

>>705
ありがとうございます。

**Name_Not_Found** · 2021/10/08(金) 07:54:28.22

>>710
外枠の方の高さを固定値で決めないとダメなの？

**Name_Not_Found** · 2021/10/08(金) 08:12:19.89

子要素の幅の%指定ってのは、親要素の幅に対する割合ってことだからね
widthの初期値はautoだから、widthにautoを指定するってのはwidthを指定していないのと同義

**Name_Not_Found** · 2021/10/08(金) 08:44:21.84

つまりautoで指定したい場合javascriptで幅や高さを取得しないとだめってことか

**Name_Not_Found** · 2021/10/08(金) 09:43:24.55

>>704
高さを内容に合わせたいなら
2つの子divの height を 100％ → auto にするだけなんだが

**Name_Not_Found** · 2021/10/08(金) 10:20:39.04

あ、widthじゃなくてheightの方か

**Name_Not_Found** · 2021/10/08(金) 10:30:04.22

heightをauto＝初期値
つまり、この場合は親子要素共にheightプロパティの指定自体を削除すれば
希望通りの挙動にはなるわな

**Name_Not_Found** · 2021/10/08(金) 12:18:56.52

横並びとか表を作るならdivよりtableの方がいいよ
divは使いにくい

**Name_Not_Found** · 2021/10/08(金) 14:40:35.78

フォトショップのレイヤーからの書き出しで、2倍に書き出す時に、シェイプの角丸が元の形のままで2倍になりません。
何か設定があるのでしょうか。

**Name_Not_Found** · 2021/10/08(金) 15:56:15.02

それはphotoshopのスレで聞いておくれ

Photoshop Part18
https://egg.5ch.net/test/read.cgi/software/1518785295/

**Name_Not_Found** · 2021/10/08(金) 16:39:23.53

Photoshop/フォトショップ総合質問スレ 82
https://mevius.5ch.net/test/read.cgi/cg/1629839668/

**Name_Not_Found** · 2021/10/08(金) 16:46:36.36

>720
過疎ってました

>721
こちらで聞いてみます

**Name_Not_Found** · 2021/10/09(土) 11:40:30.10

test

**Name_Not_Found** · 2021/10/09(土) 11:42:03.92

なんのテストよ

**Name_Not_Found** · 2021/10/09(土) 12:55:50.22

漢字小テスト

**Name_Not_Found** · 2021/10/10(日) 15:44:21.02

ろくなコード書けない人って自分がやりたいことの説明も下手なんだよなぁ

**Name_Not_Found** · 2021/10/10(日) 18:38:27.65

**Name_Not_Found** · 2021/10/10(日) 19:19:37.19

>>727
justify-content:centerでレイアウトするのが正しい。
しかし定義に矛盾が生じると崩れる。
text-align: center;ではたまたま整ったように見えてるだけ。

正しくは両方記述するのが正解。

**Name_Not_Found** · 2021/10/10(日) 19:28:11.58

display:flex;を設定する階層が違うような

**Name_Not_Found** · 2021/10/10(日) 21:54:54.74

.fmにも背景色付けてみればわかりやすいかな

**Name_Not_Found** · 2021/10/11(月) 00:26:16.47

>>727 のサンプルだとこのように効いている
justify-content:center は .waku内で form を中央揃え
text-align:center は form内で input を中央揃え
form に背景色を付けるとどうなっているか把握しやすい

**Name_Not_Found** · 2021/10/11(月) 02:43:51.98

まぁ、.wakuのtext-align:centerは、継承されて.fm内の.btに効くけども、分かりやすくするなら
.text-align:centerは.fmで指定して、ついでにwidth:100%;も指定しておけば、justify-contentは不要

**Name_Not_Found** · 2021/10/11(月) 08:17:34.36

ChromeでF12を押して開く画面について、ElementsタブとSourecesタブのhtmlファイルの中身が異なる理由は何でしょうか？
Elementsはライブラリが読み込まれ、統合された結果と推察しておりますが、合ってます？

**Name_Not_Found** · 2021/10/11(月) 14:46:35.93

>>733
Elementsは、計算済みのDOM
Sourceは、ダウンロードされただけのhtmlもしくはphp
って感じだと思う

**Name_Not_Found** · 2021/10/12(火) 00:40:14.48

テーブルで特定のセルだけ半透明にしたいけど背景画像が透けて見えません
どうすればできますか？

<body style="background-image:url('./bg.png')">

<table style="width:300px;height:300px">
<tr>
<td style="width:50%;background:#0000ff">aaa</td>
<td style="width:50%;background:#ff0000;opacity:0.5">bbb</td>
</tr>
</table>

</body>

**Name_Not_Found** · 2021/10/12(火) 00:40:14.87

テーブルで特定のセルだけ半透明にしたいけど背景画像が透けて見えません
どうすればできますか？

<body style="background-image:url('./bg.png')">

<table style="width:300px;height:300px">
<tr>
<td style="width:50%;background:#0000ff">aaa</td>
<td style="width:50%;background:#ff0000;opacity:0.5">bbb</td>
</tr>
</table>

</body>

**Name_Not_Found** · 2021/10/12(火) 01:34:43.34

透けてはいるけど、背景画像がちゃんと表示されてないんじゃない？
https://jsfiddle.net/d5oeprqb/

**Name_Not_Found** · 2021/10/12(火) 12:19:15.73

>>737
どうも
実際にやってた方ではtableに背景色がついてたのでできなかったみたいです
tableの背景色を削除したらできました

**Name_Not_Found** · 2021/10/12(火) 12:25:12.45

今度はtdの背景色だけ半透明でその中にある文字や文字の背景は半透明にしたくないんですが
このようにやっても文字や文字の背景色まで半透明にってしまいます。
どのようにすればtdの背景色だけ半透明にできるんですか？

<table style="width:300px;height:300px">
<tr>
<td style="background:#ff00ff;opacity:0.5">
<span style="background:#ffffff;font-size:20pt;opacity:1.0">aaa</span>
</td>
</tr>
</table>

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

background:rgba(255,255,255,0.5)

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

opacityはいらない

**Name_Not_Found** · 2021/10/12(火) 13:33:54.25

>>734
ありがとうございます。

**Name_Not_Found** · 2021/10/12(火) 13:59:41.77

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

> もし、子要素に透明度を適用したくない場合は、以下のように代わりに background プロパティを使用してください。
> background: rgba(0, 0, 0, 0.4);

**Name_Not_Found** · 2021/10/12(火) 14:03:00.10

ウェブサイトを2022年前半に制作するとしたら、IE対応はどの程度にしておくのが妥当だと思いますか？英語のサイトです。

**Name_Not_Found** · 2021/10/12(火) 14:07:28.79

対応しなくていいんじゃね

> 2022 年 6 月 16 日（日本時間）に Microsoft 社の Internet Explorer（以下、IE）のサポートが終了します。
> サポート終了後に IE を起動しようとすると、Microsoft Edge が起動するよう変更されます

**Name_Not_Found** · 2021/10/12(火) 14:31:07.98

>>744
IEも対応という概念を捨てる

**Name_Not_Found** · 2021/10/12(火) 14:33:43.73

IE起動したらすでにedgeが上がるPCもあるよな

**Name_Not_Found** · 2021/10/12(火) 17:59:37.88

IEの件、ありがとうです。
海外でのシェアは日本よりさらに低いみたいなので、
IE対応は見積もり上オプションにしておきました

**Name_Not_Found** · 2021/10/12(火) 18:49:34.87

tableでtdが複数あってレスポンシブでは収まりきらないものって
tdをwidth100%で下に並べるってできる？

**Name_Not_Found** · 2021/10/12(火) 18:59:11.17

相対パスでTopページからCSS参照については反映されています。
書式はこうです。
<link rel="stylesheet" href="hoge/hogehoge.css" type="text/css">

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

<link rel="stylesheet" type="text/css" href="hogehoge.css">

色々検索しましたが、良く分かりません。
使用しているサーバーはさくらインターネットのレンタルサーバーです。

どなたかご助言お願いします。

**Name_Not_Found** · 2021/10/12(火) 19:03:25.77

>>749
できる

**Name_Not_Found** · 2021/10/12(火) 19:13:05.75

>>750
とりあえずhref="./hogehoge.css"って書いてみるか
絶対パスで書いてみて反映されるかどうか

**Name_Not_Found** · 2021/10/12(火) 20:15:36.74

>>751
tr>td*3
を縦にしたかったら、trをflexにして、flex-columnにするとか？

**750** · 2021/10/12(火) 20:19:29.36

>>749
>>750
<!DOCTYPE html>
<html lang="ja">
<head>
<link rel="stylesheet" href="hoge1.css" type="text/css">
<link rel="stylesheet" href="hoge2.css" type="text/css">
<link rel="stylesheet" href="hoge3.css" type="text/css">
<link rel="stylesheet" href="hoge4.css" type="text/css">
<meta charset="UTF-8">
<title></title>

</head>
<body bgcolor="#000000"></body>
</html>

CSSファイルは同じディレクトリにあります…

**750** · 2021/10/12(火) 20:32:59.77

絶対パスでも反映されませんでした
一階層上のページは相対参照でCSS反映されてるほです

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

>>750
念の為に聞くがwordpressではないよな？