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/09/27(月) 21:29:59.78

サイトのデザインに関してなんですが、中央寄せが無難なのでしょうか？
左側に寄っているデザインがかっこいいなぁと思うんす

その理由はわかりませんか？

ただ、利便性優先です

**Name_Not_Found** · 2021/09/27(月) 21:30:35.96

デザインによる

**Name_Not_Found** · 2021/09/28(火) 00:39:41.93

>>586
flexで出来そうな気がしたので試した
https://jsfiddle.net/c7y9zd4s/

**Name_Not_Found** · 2021/09/28(火) 01:12:34.91

>>610
リバースさせたのをorderでさらに逆転させとるんやね
パズルみたいでおもろいね
ワイの>>591よりスマートやわ

**Name_Not_Found** · 2021/09/28(火) 01:45:47.13

>>610
素晴らしい
勉強になる

**Name_Not_Found** · 2021/09/28(火) 03:20:57.88

flexのショートハンドいまだに暗唱で書けねぇ
ついつい、flex-wrap書いちゃう。

**Name_Not_Found** · 2021/09/28(火) 03:41:35.10

おれショートハンド使わないわ
animationとかbackgroundも

**Name_Not_Found** · 2021/09/28(火) 07:37:13.97

>>611
ワイって言葉やめてくれ

**Name_Not_Found** · 2021/09/28(火) 09:05:25.65

>>609
中央寄せだとどういうメリットがあるんでしょうか？

**Name_Not_Found** · 2021/09/28(火) 09:36:08.48

>>616
感覚的なんで人による、が考えなしにカッコいいとかアホな理由は多分おそらく無い、といいなぁ

一例として、左寄せだと視線が左に片寄りすぎて、図表などの回り込みで横に広い画面の場合に、通して読むと視線の動線が右行って左行ってと激しく動くので疲れる
だからマージンとかで真ん中にブロックを配置してその中での左寄せテキストとかにすることで動線を短くしたりする
あくまで一例として

**Name_Not_Found** · 2021/09/28(火) 10:31:15.63

23年ぐらい前だけど、プライベートのサイトは
<center>ばかり使ってた時あったな
侍魂とかもセンター寄せだったな

**Name_Not_Found** · 2021/09/28(火) 10:52:31.35

文字糞小さくして幅狭めて中央寄せとか多かったなぁ

**Name_Not_Found** · 2021/09/28(火) 10:57:28.77

test

**Name_Not_Found** · 2021/09/28(火) 11:28:22.46

>>615
だめだ

**Name_Not_Found** · 2021/09/28(火) 11:47:13.17

>>617
例えば1000px固定で左寄せならと、中央寄せなら、視線の動く幅は同じじゃないですか？

**Name_Not_Found** · 2021/09/28(火) 12:07:30.50

>>618
1998年ならテーブルでレイアウトとかやってた頃か？

**Name_Not_Found** · 2021/09/28(火) 12:16:22.62

https://blog.hatena.ne.jp/-/store/theme/98012380861710503
https://blog.hatena.ne.jp/-/store/theme/17680117126993190707
カラムの境界線を引くのと曖昧なのとでは、曖昧な方がスタイリッシュに見える理由はなんでしょうか？

**Name_Not_Found** · 2021/09/28(火) 12:27:45.10

スタイリッシュかどうかは主観です

**Name_Not_Found** · 2021/09/28(火) 12:48:09.14

>>616
揃える位置が真ん中で固定なこと
みっちり箱組みにしないことを前提として

センタリングの特長がよく働けばおおらかに見えやすい
視線の動きにも迷いがうまれにくいし、ゆったり読める
ポエミーなテンポの演出も？

悪く働けば
間延び感を感じ、また視線を次へ次へと誘導しにくい
下手するとアメブロのセンタリング記事ぽい感じになる貧相

デザインの話なら
他にも相応しいスレがありそうだなともおもいつつ

**Name_Not_Found** · 2021/09/28(火) 13:25:51.13

>>625
はい
>>626
文字のセンタリングの話をしているのでしょうか？
文字は左寄せ、メインカラム（コンテナ）をmargin autoで中央寄せした場合の印象に関してです。

**Name_Not_Found** · 2021/09/28(火) 14:16:17.07

スレ違い

**Name_Not_Found** · 2021/09/28(火) 15:23:52.67

>>607
コード無しに文字だけの説明だけでスクショ見ると、余計に何が何だか分からんが
例えば、こういう似たようなことやってそうなサイトを参考にしてみるとか
https://www.qbhouse.co.jp/
https://www.cainz.com/

**Name_Not_Found** · 2021/09/28(火) 22:27:52.73

>>607
よく理解できていないのですが、一応解決したのでご報告いたします。

親を position:fixed; にしつつ、子にあたるナビとクリックレイヤーも fixed
になっていたので、ナビだけ absolute にしたら描画されました。
クリックレイヤーは fixed のままで何故か途切れないのですが、
心が折れそうなので原因追及は諦めます。

**Name_Not_Found** · 2021/09/29(水) 23:16:25.30

<dl class="red">と書いて dt の文字だけ赤くしたいですが
.red, dl dt {~~}
みたく書きたいのですが、全部赤くなってしまいます
この場合、別のclass名で色を指定しないとだめですか？

**Name_Not_Found** · 2021/09/29(水) 23:26:40.90

.red > dt

**Name_Not_Found** · 2021/09/29(水) 23:27:39.63

すみません631です
dl.red>dt の間違いでした
.redがすでにあったらdl.red2>dtみたく書かないとだめですか？

**Name_Not_Found** · 2021/09/30(木) 00:02:09.20

dlにも.redが反映されて然るべきなので別のclass名が必要っぽいですね
632さんありがとうございました

**Name_Not_Found** · 2021/09/30(木) 00:27:00.74

pc用とスマホ用のレスポンシブ(ブレイクポイント1つ)で
ipadや、iphone横で右がwidth=device-widthで切れてしまう問題ってどう対応してる？

**Name_Not_Found** · 2021/09/30(木) 00:56:27.79

ランドスケープ判定して出し分ける
あるいはPC幅になるようにする

**Name_Not_Found** · 2021/09/30(木) 10:22:17.78

そもそもwidth=device-widthは非推奨

**Name_Not_Found** · 2021/09/30(木) 10:29:27.73

>>637
え？まじで？というかスマホの仮想解像度どうするのよ

**Name_Not_Found** · 2021/09/30(木) 12:32:38.29

>>637
まじか。知らんかった
これ指定するって書いてるサイトよく見かける気がする

**Name_Not_Found** · 2021/09/30(木) 18:33:07.02

コピペで使えるかんたんなレスポンシブバーガーメニューのソースください

**Name_Not_Found** · 2021/09/30(木) 19:05:15.08

> width=device-width
> 非推奨: この機能は非推奨になりました。まだ対応しているブラウザーがあるかもしれませんがなんたらかんたら
https://developer.mozilla.org/ja/docs/Web/CSS/@media/device-width

はぁぁぁ、知らんかった

**Name_Not_Found** · 2021/09/30(木) 19:25:21.67

まじか消すわ
emmetででこないようにできんのかIE=Edgeとかも

**Name_Not_Found** · 2021/09/30(木) 19:27:59.85

cssメディアクエリのdevice-widthは非推奨だけどmeta viewportのは違くね？

**Name_Not_Found** · 2021/09/30(木) 19:31:46.77

>>641
>まだ対応しているブラウザーがあるかもしれません
さりげなく現行ブラウザをディスってて草

**Name_Not_Found** · 2021/09/30(木) 19:56:38.90

こういうのが非推奨ってことか
<link rel="stylesheet" media="screen and (max-device-width: 799px)" href="http://foo.bar.com/narrow-styles.css"; />

**Name_Not_Found** · 2021/09/30(木) 20:25:41.88

で、スマホ用はdevice-widthを使わずにどう指定すれば良かですか？

**Name_Not_Found** · 2021/09/30(木) 21:27:01.85

>>643
んだ

**Name_Not_Found** · 2021/09/30(木) 23:33:59.78

initial-scale=1だけ指定しときゃwidthは勝手にdevice-widthになる

**Name_Not_Found** · 2021/10/01(金) 00:46:21.46

両方書いてるから
不具合でない限り放置したろ、、

**Name_Not_Found** · 2021/10/01(金) 22:13:33.58

meta viewportのは書き漏れあると古いandroidが表示おかしくなって原因特定にめちゃめちゃ苦労したから
呪文のように脳死で書いてる
これを抜いたせいでの原因特定に後から苦労するくらいならええわ

**Name_Not_Found** · 2021/10/02(土) 00:05:39.19

まあ、そういうことあるよね
推奨って何

**Name_Not_Found** · 2021/10/02(土) 14:07:28.90

水晶

**Name_Not_Found** · 2021/10/02(土) 19:11:32.59

https://developer.mozilla.org/ja/docs/Web/CSS/initial の
「注: 継承プロパティでは、初期値は期待されない値かもしれません。」
の意味がよく分からないので、若し分かれば教えて頂きたいです

**Name_Not_Found** · 2021/10/02(土) 19:22:13.08

>>653
継承された値は初期化されない

**Name_Not_Found** · 2021/10/02(土) 19:55:29.82

>>654
あっそうなんですね、ありがとうございます

**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の高さはどうしたいの？