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

**Name_Not_Found** · 2022/10/29(土) 14:16:31.77

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

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

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

■関連スレ
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

**Name_Not_Found** · 2022/10/29(土) 15:39:17.20

乙です

**Name_Not_Found** · 2022/11/01(火) 04:04:37.04

いつもつ

**Name_Not_Found** · 2022/11/07(月) 20:13:11.22

おつおつ

**Name_Not_Found** · 2022/11/21(月) 23:29:58.09

ページの左端と右端にそれぞれ画像１と２を背景画像として設置したい

body{
background-position:left;
background-image:url(./test1.png);
background-repeat:repeat-y;

background-position:right;
background-image:url(./test2.png);
background-repeat:repeat-y;

}
こんな感じでやってもできませんでした。
どうやればうまくできますか？

**Name_Not_Found** · 2022/11/21(月) 23:48:23.69

>>5
それだと各プロパティが上書きされるだけなので1つにまとめる

body{
background-position:left, right;
background-image:url(./test1.png), url(./test2.png);
background-repeat:repeat-y;
}

最後は同じ値なので2つ目は省略可

**Name_Not_Found** · 2022/11/23(水) 18:03:59.65

このバグの原因わかる人いますか？
https://youtu.be/YXxyeXmT3w0

**Name_Not_Found** · 2022/11/23(水) 18:05:04.36

コード見せろ

**Name_Not_Found** · 2022/11/23(水) 18:25:05.19

再現可能なコードも示さずにYouTubeで現象だけ見せてくるって
初めてのパターン

**Name_Not_Found** · 2022/11/23(水) 18:25:30.00

どこを見せればいいですか？
多分英数字が連続する文字列ではラップされずにサイズが大きくなってしまいそれによって大本のdivのサイズも伸縮してるからのような気がします

**Name_Not_Found** · 2022/11/23(水) 18:26:24.95

GitHubでいいですか？

https://github.com/MAUIHighSchool/MAUIWiki/tree/master/MAUIWiki/Client

**Name_Not_Found** · 2022/11/23(水) 18:32:18.14

たぶんこんな感じです。
https://imgur.com/xA32W3z.jpg

**Name_Not_Found** · 2022/11/23(水) 18:36:24.83

>>10
目星が付いてるなら、該当の要素にoverflow-wrapでも追加してみたら？

**Name_Not_Found** · 2022/11/23(水) 18:44:01.01

>>13
追加してみたのですが全く言うことを効きませんでした
記事タイトルのhにつけたりその上にdivつけてそいつにつけたり色々やったのですが全く言うことを聞いてくれず…

**Name_Not_Found** · 2022/11/23(水) 18:57:41.88

同じバグに遭遇したことある人いないですかね？

**Name_Not_Found** · 2022/11/23(水) 19:09:33.64

それバグではないよ
設定したらどうよ？

word-break: break-all;

**Name_Not_Found** · 2022/11/23(水) 19:10:37.69

バグじゃない
word-wrapプロパティを調べよう
めんどくせーもん落とさせるのはやめよう
該当部分だけjsfiddleに展開しよう

**Name_Not_Found** · 2022/11/23(水) 19:22:00.69

なんかよくわかりませんが回答ありがとうございます
それらは要素のCSSに直書きで大丈夫ですかね？

**Name_Not_Found** · 2022/11/23(水) 19:42:44.59

word-breakもword-wrapも試してみましたがダメでした。
https://jsfiddle.net/r3mxnkoh/
jsfiddleでは大丈夫なのですがなぜでしょうか。

**Name_Not_Found** · 2022/11/23(水) 20:13:03.59

セレクタが間違ってて当てるべきところに当たってないんじゃないの
ちゃんとdeveloper toolで当たってるか確認するくせつけよう

**Name_Not_Found** · 2022/11/23(水) 21:25:16.94

>>20
そうかもしれません…
とりあえずガチャガチャやってたらなんとかなりました
ご協力感謝します

**Name_Not_Found** · 2022/11/24(木) 04:48:00.08

input type="text" にrequiredを付けたのですがsubmitできてしまいます。ブラウザはPCのChromeです。
<form action="/login" method="post">
<input type="text" required />
<button type="submit">Submit</button>
</form>
10年以上HTMLやっててこれは初めてなので不思議。なんででしょうか？

**Name_Not_Found** · 2022/11/24(木) 05:11:46.27

**Name_Not_Found** · 2022/11/24(木) 05:22:18.90

それも試したけど同じ

**Name_Not_Found** · 2022/11/24(木) 05:58:26.70

>>22で効かないなら、>>22に書かれてる以外の箇所に問題があるわけで
他に余計な属性付与してたりするとrequired属性が無視される場合もあるし
もうちょっと情報出そう

**Name_Not_Found** · 2022/11/24(木) 10:04:03.61

やはりおかしいですよね
HTML丸ごと上げるわけにもいかないし、他にどういう情報出せばよさそうでしょう

**Name_Not_Found** · 2022/11/24(木) 10:09:16.14

submitに干渉するjsない？

**Name_Not_Found** · 2022/11/24(木) 10:27:43.38

それなら、最小限にしぼったHTML書いて検証してみなよ

**Name_Not_Found** · 2022/11/24(木) 11:23:33.53

JSはたくさん使われているのでJSが怪しそうです、formやinputの属性いじったりしてるのかな…

やはり地道に切り分けていくしかなさそうですね、この案件にそんな時間はないのでこのまま迷宮入りかな

**Name_Not_Found** · 2022/11/24(木) 12:06:21.83

個人で管理してるのなら好きにすればええけど
納品物ならエラーは取り除かんとまずいよと釘を指しとくで

**Name_Not_Found** · 2022/11/24(木) 14:44:59.01

>>22,29
たぶんbuttonのclickイベになんか定義してあるんやろね
checkValidity()入れるかonsubmitに処理を移すかでいけると思うけど、
他の人が書いてるならそっちに頼む方が早そう

**Name_Not_Found** · 2022/11/24(木) 18:28:06.31

素人なのでスレ違いだったらごめんなさい

クローム等のwebブラウザを旧バージョンにさかのぼっていくと
ある所でツイッター等のはめ込み動画が再生出来なくなります
（再生ボタンが押せない、動画画面が真っ黒のまま等）

これはどういう技術？が関係しているのでしょう

またyoutubeは相当昔のバージョンにさかのぼっても再生が可能です
再生の可、不可を分けているポイントは何でしょうか？

**Name_Not_Found** · 2022/11/24(木) 18:44:38.76

コントロールバーの再生ボタン押しても変わらない？
昔はコントロールバー経由かjsでオンオフ切り替えないと動画中央などのクリックで再生させる機能は無かった覚えがあるよ

**Name_Not_Found** · 2022/11/24(木) 18:53:17.23

> クローム等のwebブラウザを旧バージョンにさかのぼっていくと
> ある所でツイッター等のはめ込み動画が再生出来なくなります

何故、手がかりとなるかもしれないそのVerを書かないのか

**Name_Not_Found** · 2022/11/24(木) 18:59:09.16

>>33-34
お二方レスありがとう

バージョンはクロームの49.0.2623.112

>昔はコントロールバー経由かjsでオンオフ切り替え
jsとはから今ググりながら調べてます

**Name_Not_Found** · 2022/11/24(木) 19:10:35.39

>>32
Chrome開発者ツールのコンソールを見ると、動作不良が起きている状況が残っているかもしれない
それをヒントに調べれば、ネックになっているのがコーデックなのか他の技術なのかわかるんでないかな

ただ、いまはOSもブラウザも「常に最新」が前提になってるので、好奇心を満たす以外に調べる意味はないような…

**Name_Not_Found** · 2022/11/24(木) 19:24:20.29

>>33
コントールバー自体が表示されませんでした…

>>36レスありがとう

>Chrome開発者ツールのコンソールを見ると
なるほど、ちょっと時間かけて調べてみようと思います

>好奇心を満たす以外に
そうですね、好奇心が一番です
あと使ってないvistaの32bitのpcが出てきたので
web動画を見るくらいできたら良いなと思って

**Name_Not_Found** · 2022/11/24(木) 19:47:51.25

>>37
サポート終了したOSでネットに繋ぐのはあまりおすすめしないな
OS上げられないなら処分してFireTVの足しにした方がいいと老婆心ながら

**Name_Not_Found** · 2022/11/24(木) 19:53:52.37

>>38
そうですよね懐かしくてついつい。オフライン用にしておきます

**Name_Not_Found** · 2022/11/25(金) 12:45:30.13

controls属性つけても表示できない？
って聞こうと思ったがWeb動画を見るって話から察するに
自分で作ったWebサイトのデバッグの話じゃないのよ、、、スレチじゃん

**Name_Not_Found** · 2022/11/25(金) 13:37:18.22

こっちに貼っとくぞ
https://coliss.com/articles/build-websites/operation/css/css-clamp-calculator.html

>>40
またお前か>>1読んでいい加減消えろよカス

**Name_Not_Found** · 2022/11/25(金) 13:44:26.00

これだthx

**Name_Not_Found** · 2022/11/25(金) 15:52:49.87

どれだよ

**Name_Not_Found** · 2022/11/26(土) 18:50:56.56

>>41
？？？

**Name_Not_Found** · 2022/11/30(水) 00:05:47.13

カンプをコーディングで起こすときに余白の値を効率よく把握する方法ないですか？
XDでちまちまoption押して余白測って実装して、ディベロッパーツールで確認をひたすら繰り返してますが、
いつも抜けありデザイナーに怒られます…

**Name_Not_Found** · 2022/11/30(水) 11:23:01.53

自分も抜けるから
印刷して紙に鉛筆等で数値やアクション等、メモ書きしてるよ

他の人はどうやってるんだろ？

**Name_Not_Found** · 2022/11/30(水) 11:29:01.95

変な値を設定してるとかならともかく
忘れてるならデザインとブラウザ並べて眺めれば気付かないか

**Name_Not_Found** · 2022/11/30(水) 16:12:36.31

カンプの上に計測値を目立つテキストでメモしておいて、reset.cssで全要素の余白ほかを0にしてからスタイリングやね
なんなら要素の初期背景色も変な色にしておくと漏れがひと目で

計測を楽にしたいって話なら、がんばれとしか…

**Name_Not_Found** · 2022/11/30(水) 17:32:13.78

カンプを画像に出力してChromeのアドオン使って画像と作ったページ重ねて確認してる
なんていうアドオンだっけ

**Name_Not_Found** · 2022/11/30(水) 17:32:47.64

最終確認の話ね

**Name_Not_Found** · 2022/11/30(水) 18:44:09.89

設定し忘れている=0になるようにすべき
大体のルールでは上下余白30だが、セクション3だけは上下余白50で上書きする
みたいなことやってるならデザインに対するCSS設計が悪い

**Name_Not_Found** · 2022/11/30(水) 22:31:57.75

皆さんありがとうございます
独学からコーダーになったのですが、まだ目が慣れないせいかなかなかカンプ通りに作れず…

時間がなくて未完成で途中で降りてきたデザインで組む→完成版との差異を全て回収できない
ということ状況多く、またスマホファーストに慣れなくてpcとspがごちゃごちゃになってしまいます

見比べても全然気がつくことができません…
やっぱり印刷してメモするのがいいみたいですね、やってみます！

**Name_Not_Found** · 2022/12/01(木) 00:53:07.62

>>49
横だけどありがとう　Perfect Pixel　だと思う
こんなのあったんだ
https://liginc.co.jp/568449

**Name_Not_Found** · 2022/12/01(木) 15:01:52.67

>>52
それは差分をちゃんと伝えてくれないデザイン側も悪いな
普通は「ここが変わりました」って注釈を入れてくれる

「見れば分かるだろ」ってデザイナーはただの怠慢なので上に注意してもらい

**Name_Not_Found** · 2022/12/01(木) 18:01:16.89

<table style="width:100%;padding:30px;background:#00ffff">
<tr>
<td style="width:100%;background:#ff00ff">
<form>
<input type="text" name="bg_img_url" value="" style="width:100%">
</form>
</td>
</tr>
</table>

テキストフォームのwidthを100%にたいんだけど
なぜかテキストフォームの右側がテーブルからはみ出てしまいます。
ちゃんとwidth１００％でテーブルにおさまるようにするにはどうやればいいんですか？

**Name_Not_Found** · 2022/12/01(木) 18:11:16.96

<input type="text" name="bg_img_url" value="" style="width:100%; box-sizing: border-box;">
これでどうかな？

**Name_Not_Found** · 2022/12/01(木) 18:43:58.54

>>56
できました。あろがとうございます。
でも何でbox-sizing: border-box;にしないとはみ出てしまうんだろ

**Name_Not_Found** · 2022/12/01(木) 19:37:40.84

まずは読もう
https://developer.mozilla.org/ja/docs/Web/CSS/box-sizing

**Name_Not_Found** · 2022/12/01(木) 19:52:19.98

自分のホムペの検索ボックスに
HOGEHOGE
を入力してEnterを押すと
https://www.kinokuniya.co.jp/f/dsd--01-?q=HOGEHOGE&ptk=01&SF_FLG=1&qs=true
に飛ぶようにしたいです
どういうHTMLを書けばよいのでしょうか

**Name_Not_Found** · 2022/12/01(木) 20:41:55.77

>>59
htmlだけじゃちょい無理ね
文字列つなげる簡単なJavaScriptを追加してやればいける
https://jsfiddle.net/4tdr5p13/
ただこれAPIが公開されてる検索じゃないので、自分だけならともかく、他人に使わせるのはまずいんでないかな…

**Name_Not_Found** · 2022/12/02(金) 20:51:24.31

>>60
ありがとうございます！！！！
こっそり使わせていただきます

**Name_Not_Found** · 2022/12/04(日) 10:59:25.40

<div style="width:800px;height:300px;border:Solid 5px #ff00ff;overflow:hidden;padding:0px;position:relative;">
<img src="./bg1.jpg" style="position:absolute;top:0px;left:0px">
</div>

PC版chromeだと左側にちょっと隙間ができてしまうんだけど、どうしてですか？
edgeだと隙間ができませんでした。

**Name_Not_Found** · 2022/12/04(日) 12:51:16.73

見てないけどブラウザデフォルトcssをリセットしてないんじゃないの

**Name_Not_Found** · 2022/12/04(日) 16:23:56.88

>>62だけど解決しました
ブラウザのズームが８０％くらいになってたので１００％にしたら
ちゃんと隙間なく表示されました

**Name_Not_Found** · 2022/12/04(日) 16:56:00.42

ZOOMERか！？

**Name_Not_Found** · 2022/12/04(日) 19:59:41.33

>>65
そうですよ

**Name_Not_Found** · 2022/12/08(木) 19:41:15.93

htmlの互換性についてですがwin22h2バージョンで一部の機能が動作しなくなったんですが、meta設定すれば解消しますか？

**Name_Not_Found** · 2022/12/08(木) 20:08:12.45

ブラウザの方はEdge Chromiumだとは思うけども、なにがどう動かなくなったのかを伝えないと誰も答えようがない

**Name_Not_Found** · 2022/12/08(木) 21:21:44.43

>>68
失礼しました。画像プレビューの横回転機能が動作しなくなりました。

**Name_Not_Found** · 2022/12/08(木) 21:54:41.02

その画像プレビューの横回転機能ってのは
どうやって動作してたかは分かってる？

**Name_Not_Found** · 2022/12/08(木) 22:16:57.78

作りまでは確認しておりません。画面上のjpegファイルを90°単位に右回転させる機能です。

**Name_Not_Found** · 2022/12/08(木) 22:22:33.82

他人のサイトを見てて動作しないって言ってるのなら
そのサイトのURLを貼った方が早い

**Name_Not_Found** · 2022/12/08(木) 22:48:16.14

今の質問って
「とある料理を新規開店した店で食べたのですが美味しくありません。秘伝のソースを掛ければ解消しますか？」
「イタリア料理店で食べたパスタが美味しくなかったです」
「どうやって作ったかは分かりません。パスタはミートソースで肉は粗挽きです」
みたいな感じ

**Name_Not_Found** · 2022/12/09(金) 00:26:23.92

>>71
動かなくなったページがどこかのサイトならそのURL、自分の作ったものならどこかに上げる、のどちらかがないとちょっと無理かも
画像プレビューの回転が「ブラウザの機能」を指してるなら、metaどころかページ側はいっさい関係ない話になるけど…

**Name_Not_Found** · 2022/12/09(金) 01:39:22.57

どうせブラウザに入れた機能拡張なんかが自動的にバージョンアップされたら
勝手にjavascriptオフられてたとかじゃないの？

**Name_Not_Found** · 2022/12/11(日) 11:10:34.78

HTML5でサイトのコンテンツを左右に分割する方法が調べてもイマイチ分からないので教えていただけると嬉しいです

https://www.usamimi.info/~geko/arch_etc/box.html
具体的にはこのサイトのように、それぞれのコンテンツをこんな感じで分けたいです
ピッタリ真ん中で左右に分けたいと思っています

**Name_Not_Found** · 2022/12/11(日) 11:52:59.32

こんなんでどうだ
https://jsfiddle.net/9omwjxur/

大枠のコンテナを作ってその中で左右のボックス作って
左右のボックスの中に更にボックス作っていく
大枠にFlex当てれば左右の枠は横並びになるので

**Name_Not_Found** · 2022/12/11(日) 16:07:27.98

>>76
おお、float久しぶりに見た
今は>>77の通りflexboxがおすすめ

**Name_Not_Found** · 2022/12/11(日) 20:18:14.40

>>77-78
ありがとうございます！

**Name_Not_Found** · 2022/12/12(月) 16:30:25.94

<form>
<input type="button" value="hoge" onclick="test();">
<a href="javascript:test2();" id="num"></a>
</form>

<script>
function test() {
var rand = 1 + Math.floor( Math.random() * 10 );
document.getElementById("num").innerHTML = rand;
}

function test2() {
location.href = 'hogehoge.html#hoge' + (x);
}
</script>

ボタンを押すたび1～10の乱数の結果にページ内リンクをつけたいです。
リンク名はhoge数値です。
var x の結果を + (x) のような形で書くことはできますか？
よろしくお願いします。

**Name_Not_Found** · 2022/12/12(月) 18:03:32.90

>>80
xがrandと同じなら、test()呼んだ時に#numのhrefもsetAttribute()で書き込んじゃえばいいんでない？
https://jsfiddle.net/j46gyqxr/

ここはHTML/CSSの質問スレだから、これ以上はJavasScript質問スレのがいいかも

**Name_Not_Found** · 2022/12/12(月) 18:20:28.95

>>81
動かしたい挙動で感動しました。ありがとうございます！
スレ違いだったようで重ね重ねもうしわけないです。

**Name_Not_Found** · 2022/12/16(金) 05:57:33.73

ド素人質問失礼します．スレ間違ってたら申し訳ないです．
自分はカードゲームについてのサイトを作ろうと考えています．
日々公開される数枚のカード画像を自分のサイトに載せて一覧で見れるのが第一目標です．
また，カードゲーム界隈では発売前のカードを印刷して紙にプロキシと呼んで使用するのですが
一覧で見れるカード１枚１枚の下に0~4で数字を選ぶことができ，選択した数字XによってA4に選択した画像とX枚をばーっと敷き詰めて簡単にプロキシを作れる機能を実装したいと思っています．
そのために，書籍であったりこの機能についてはこのワードで調べればいいなどなんでも構いませんのでご教授いただければ幸いです．

**Name_Not_Found** · 2022/12/16(金) 08:55:24.64

印刷になってくるとCSSだけではどうにもならんなあ

**Name_Not_Found** · 2022/12/16(金) 15:30:13.74

>>84
https://imgur.com/a/hqGcjcu
こんな感じで新しいタブで表示してサイト上から印刷できるものを想像しているのですが
これでも厳しいですかね・・・？

**Name_Not_Found** · 2022/12/16(金) 16:18:49.83

予め全種類のカードが敷き詰められたページを用意しておいてリンクするだけなら簡単だけど
ボタンを押して生成となるとjsが必要
あと個人的にはやりたいことから考えるとpdfを作ってリンク貼ればいい気がする

**Name_Not_Found** · 2022/12/16(金) 16:36:51.91

動作イメージが分からないんだけど、各カードでそれぞれ出力する枚数を指定して
枚数指定した全カードを並べて出力したいってこと？

いずれにしろ「選択した分だけ敷き詰めて出力」とか「新しいタブで表示して…」
ってのはCSSだけじゃどうにもならない

まぁ、要求仕様によっては無理矢理CSSだけでどうにかなりそうな気もするけど
スマートな方法じゃないし、ソートしたいとか言い出したらどうしようもないから
PHPとかJavaScript辺りで頑張った方がいいかも

**Name_Not_Found** · 2022/12/16(金) 16:45:57.02

レスポンシブで画像の本来の幅を超えないようにしたいので
max-widthに本来の幅を調べてpxで指定するのめんどくさいんだけど
max-widthに画像の本来の幅のpx指定するしか方法はないんでしょうか？
もっといい方法はないのかな？

**Name_Not_Found** · 2022/12/16(金) 16:53:50.26

>>83
印刷フォーマットはそれ用のCSSを用意しとけばいいとして、
選択した数を拾って別タブに要素を生成する過程はJavaScript使わないとムリね
JSは機能ごとにWebで検索しても身に付かないので、オライリーの「入門モダンJavaScript」を一冊やっとくのをおすすめ

>>88
max-width: max-content; でいかが？

**Name_Not_Found** · 2022/12/16(金) 17:28:10.64

>>86
なるほど，ありがとうございます．
やはり使わないカードというのが出てくるので全部４枚ずつ印刷するとなると
莫大な量印刷しなくてはならない問題があったので元レスの仕様にしてみたいなと思ってました．

>>87
ありがとうございます，それであってます．
javascript 了解しました．

>>89
ありがとうございます．
サイトを作るのは高校の授業以来で用語や文法はある程度覚えてますが
何書けば忘れてしまったもので，cssやhtmlについての書籍は何がおすすめでしょうか．

**Name_Not_Found** · 2022/12/16(金) 17:48:24.10

CSSの質問させてください！

WordpressのMassive Dynamicというテーマを使っているのですが、
画像がwidth: calc(100% / 2 - 20px)でサイズ指定されています
この指定により、全体を表示したい画像が何故か拡大（もしくは原サイズ？）＆トリミングされてしまっています
指定を無効にすると画像は全体が表示されますが、レイアウトが崩れます
calcを適用したまま画像を全体表示させたい場合、どういう解決策があるか教えていただけませんか？

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

**Name_Not_Found** · 2022/12/16(金) 17:54:15.85

>>90
htmlやcssは覚えることも少ないし（属性は多いけど）、
MDN（https://developer.mozilla.org/）でいいんじゃない？
書籍がいいなら同じくオライリーの「モダンWeb」とか「CSS3開発者ガイド」かな

**Name_Not_Found** · 2022/12/16(金) 17:58:35.38

>>91
こちらが問題をはっきり理解できてないかもだけど
object-fit: contain;
とか

**Name_Not_Found** · 2022/12/16(金) 18:40:44.71

>>93
ありがとうございます！
今出先なので確認取れないのですが、試してみます
スクショとか上げた方が良いでしょうか？

**Name_Not_Found** · 2022/12/16(金) 20:24:33.90

>>89
ありがとうございました
できました

**Name_Not_Found** · 2022/12/16(金) 20:56:32.39

画像の表示幅を画像の本来の幅の20％にしたいんだけど
width:calc(max-content * (20 /100))とやってもうまくできませんでした
どうやればいいですか？

**Name_Not_Found** · 2022/12/16(金) 21:21:36.79

>>96
「画像の本来の幅に対する相対」は現状のhtmlとcssだけでは使えない
jsが必要

88 · 2022/12/16(金) 21:58:50.47

>>89
家に着いて試してみましたがmax-contentじゃどうも出来なさそうです‥‥
width: calc～はliについてるスタイルなんです

**Name_Not_Found** · 2022/12/16(金) 22:38:21.95

>>98
キミ>>88じゃなくね？

91 · 2022/12/17(土) 00:48:56.03

>>99
間違えました！申し訳ありません

**Name_Not_Found** · 2022/12/17(土) 01:12:18.50

>>96
どうしても元画像のサイズを基準にしなくちゃいけない理由があるなら仕方ないけど、
そうでないなら決め打ちにしたり、ボックスや画面幅を基準にする方が実装は楽ね

JSでやる場合はちょっとめんどいよ
対象の画像ごとに、データがロードされた後のタイミングで処理するようにしないとなので…

**Name_Not_Found** · 2022/12/17(土) 03:01:52.08

WEBの画面全体を上段と下段に分け、下段を3分割したく
次のソースを試してみたのですがうまくいきません。
画面の上半分だけで、上段と下段に別れてしまいます。
どこを直せばよいか教えてくださいませ。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Test html5 iframe</title>
</head>
<body>
<iframe src="top.html" width="100%" height="24%" name="top">dummy</iframe>
<iframe src="left.html" width="32%" height="74%" name="1">dummy</iframe>
<iframe src="center.html" width="32%" height="74%" name="2">dummy</iframe>
<iframe src="right.html" width="32%" height="74%" name="3">dummy</iframe>
</body>
</html>

**Name_Not_Found** · 2022/12/17(土) 04:00:50.03

>>102
<style>
html, body{ height: 100%; }
</style>

をhead内に追加すればいけるんでない

**102** · 2022/12/17(土) 13:19:02.51

>>103 さん
ありがとうございます。
試してみましたが残念ながらうまくいきません。
ブラウザは、Firefox,Chromeで表示確認しています。

**Name_Not_Found** · 2022/12/17(土) 15:02:04.33

>>104
ページの高さをいっぱいに使って欲しいんだよね？
>>103は↓こうなるけど違うの？
https://jsfiddle.net/one4973y/

**Name_Not_Found** · 2022/12/17(土) 16:46:11.69

>>102
gridレイアウト使うと上下の幅も揃えられるよ
https://jsfiddle.net/by1qt83j/

**104** · 2022/12/17(土) 18:30:50.65

>>105 さん
すいません、104での確認が間違っていました。
<style>
html, body{ height: 100%; }
</style>
を追加したらうまく表示できるようになりました。
おかげさまでスマホでの表示も意図どおりになりました。
ありがとうございます。

**Name_Not_Found** · 2022/12/18(日) 00:49:55.95

CSSの100vhがスマホで高さいっぱいにならない問題はこれで解決！ CSSの新しいビューポート単位の使い方と注意事項
https://coliss.com/articles/build-websites/operation/css/css-large-small-dynamic-viewport-units.html

**Name_Not_Found** · 2022/12/18(日) 01:33:04.67

めもめもφ(.. )

**Name_Not_Found** · 2022/12/18(日) 01:39:59.54

スマホブラウザってスクロールするとアドレスバーとか消えたりウェブサイト作る側としては鬱陶しい挙動するよね

**Name_Not_Found** · 2022/12/18(日) 18:29:53.30

position:fixedの画像を中央揃えにするには
どうやったらいいんすか？

**Name_Not_Found** · 2022/12/18(日) 18:33:03.27

1枚の画像でいいの？

**Name_Not_Found** · 2022/12/18(日) 18:39:49.72

>>111
・left: calc(50% - (画像の幅 / 2))を指定する
・fixedを指定した幅100%のボックスでラップして、好きな方法で中揃えにする

**Name_Not_Found** · 2022/12/19(月) 00:00:09.38

>>112
はい
>>113
ありがとうございます

**Name_Not_Found** · 2022/12/20(火) 20:02:44.31

特定のhtmlとcssファイルから
使っていないcssを抽出するｂﾆかできたら嬉ｂｵいけどそういｂ､のできる？
他人が作った使い回しcssの行が多すぎて・・・

**Name_Not_Found** · 2022/12/20(火) 21:08:34.94

使ったことないけどツールがいくつかあるね
https://unused-css.com
https://purgecss.com
https://uncss.github.io/uncss/

**Name_Not_Found** · 2022/12/21(水) 19:30:12.38

ほんとここのスレ民がぶっちぎりで1番優秀ね
質問が出来たけどHTML/CSS関係じゃないからここじゃ聞けないという悲しみ

**Name_Not_Found** · 2022/12/21(水) 20:11:41.07

>>116
一番上やってみたらメールアドレスに送られたURLに色々登録みたいなのさせられそうになって不穏な感じがしたから中断したわ

紹介ありがとう

**Name_Not_Found** · 2022/12/21(水) 20:13:46.67

javascriptでclass設定したりしてたら
staticに使ってなさげなの報告して
javascriptソース眺めるしかないのかな

**Name_Not_Found** · 2022/12/21(水) 23:24:55.79

中央揃えした画像の下に文字をいれたいのですが、文字の1文字目と画像の左側をきっちり揃えるにはどうしたらいいですか？

**Name_Not_Found** · 2022/12/22(木) 02:04:57.88

>>118
一番上は有料サービス、二番目と三番目はデプロイ時に実行する無料ツールね
ローカルで手軽に使うには最後のuncssがよさげかなあ
時間あいたらこっちでも試してみるよ

**Name_Not_Found** · 2022/12/22(木) 02:14:41.11

>>120
画像と文字をdivやfigureの中に入れて、そのボックスを中央揃えに、ボックス内は左揃えにする
文字列が画像の幅より長い場合は、ボックスにrelative、文字にabsoluteを指定して絶対配置

**Name_Not_Found** · 2022/12/22(木) 12:45:38.27

>>122
ありがとうございます。助かりました

**Name_Not_Found** · 2022/12/25(日) 23:58:23.44

Ruby on Rails 7 のデフォルトのCSSフレームワークは、
Bootstrap, Bulma, Tailwind, PostCSS, Dart Sass の5つ

Bootstrapが多いが、Tailwindも増えてきた

確か、Tailwindは、使っていないCSSを削除できる。
Bootstrap, Bulmaは、知らないけど

**Name_Not_Found** · 2022/12/26(月) 00:01:19.20

>>124
うるせえゴミ

**Name_Not_Found** · 2022/12/26(月) 15:52:45.17

ここでRuby持ち出すのはさすがにちょっとご遠慮

**Name_Not_Found** · 2022/12/26(月) 16:18:10.49

>>126
こいつコピペ爆撃魔なんよ
KENTAだかなんだかいう情報商材屋の宣伝してる

**Name_Not_Found** · 2022/12/28(水) 22:59:11.55

質問
テキストを全幅ではなく、テキストの幅に応じたborderの幅で囲いたいので
display:inline-block;にするとイメージ通りになるんだけど
次の要素は横に並ばずに改行させたい。

入れ子にして親要素にdisplay:block;すれば済む話だがタグを無駄に増やしたくない

つまり
display:inline-block;の改行する機能と
display:inline-block;
の要素に応じた横幅
これを両方兼ね備えた新しいプロパティとかって出てなかったっけ？

**Name_Not_Found** · 2022/12/28(水) 23:00:14.49

↑
間違えた

display:block;の改行する機能と
display:inline-block;
の要素に応じた横幅
これを両方兼ね備えたのが知りたい

**Name_Not_Found** · 2022/12/28(水) 23:47:59.53

width: fit-content; のことかしらん？

**Name_Not_Found** · 2022/12/29(木) 23:16:02.29

>>130
おお！さすがです！ありがとう
displayプロパティ探してたら無いと思ってたら
widthの値とはｗ

**Name_Not_Found** · 2022/12/31(土) 08:31:01.73

https://jsfiddle.net/jmw27u86/45/
なぜspanに文字を入れるとずれるのでしょうか？

**Name_Not_Found** · 2022/12/31(土) 10:42:07.10

>>132
テキストを入れていないspanのブロック要素がずれているという事？
インライン要素のデフォルトがベースラインになってるからでは？
liにvertical-align: top;等指定で解決するはず

**Name_Not_Found** · 2022/12/31(土) 12:07:18.91

>>133
凄い！揃いました。ありがとうございました。
空白か改行が混じってると思い、ずっと探していました、助かりました

**Name_Not_Found** · 2023/01/01(日) 15:35:27.27

あけましておめでとうございます。

htmlエラーチェッカーでh7を使ったら怒られたのですが、h6とpの中間くらいの便利なタグはないでしょうか？
良く分かっていないですがバージョンは<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">です。

**Name_Not_Found** · 2023/01/01(日) 15:46:13.18

中間？
文字サイズでタグ選んでる？

**Name_Not_Found** · 2023/01/01(日) 15:48:07.82

>>136
文字サイズでは選んでないです。
h6の下位にあって、章の題として使うのに適切なタグが知りたいくらいの意図です

**Name_Not_Found** · 2023/01/01(日) 16:03:59.03

あけおめ！
そこまで深い階層のドキュメント作ったことないけど、自分ならstrongをブロックにして使うかな

**Name_Not_Found** · 2023/01/01(日) 16:05:39.67

文書構造見直せw

**Name_Not_Found** · 2023/01/01(日) 16:20:57.57

そこまで深いと
divなどの無難な装飾タグを使うかなあ

**Name_Not_Found** · 2023/01/01(日) 16:56:51.58

h3より下はfont-weightで良くないか

**Name_Not_Found** · 2023/01/01(日) 18:36:02.54

>>135
文章の構造が深すぎる
通常はh1がサイト名、h2がページタイトル
文章の多いページならh3で各章の見出しに使うぐらい
h4以降はほとんど使わないはずだぞ

**Name_Not_Found** · 2023/01/01(日) 18:46:47.29

sectionを入れ子にしてh1を下のレベルでも使うって形にすれば
http ://qiita.com/ryokkkke/items/09017cf454953e8647fb

個人的にはやらない方法だけど

**Name_Not_Found** · 2023/01/01(日) 19:55:46.26

遅くなりましたが、勉強になりました。

>>138-143
どうもありがとう！

**Name_Not_Found** · 2023/01/02(月) 00:07:20.76

以前より回答者のレベル上がっとるな
一昔前はjavascript絡むとダンマリする人多かった時代もあったし
初心者が解答していることもあったが

**Name_Not_Found** · 2023/01/03(火) 19:03:49.56

cssを一通り思い通りにできるようになってから
bootstrapやってみたけど、class名が複数で溢れて逆に面倒臭いな・・・
デザイン不要の認証・管理画面や商品登録のような無機質なページならboobtstrapが向いてそうだけど
おまいらbootstrapで一般サイトとかで使いこなしているの？

アコーディオンとかインタラクティブな所も望むとbootstrapのメリットになるのかな

**Name_Not_Found** · 2023/01/03(火) 19:37:02.37

もちろん使いこなしてるよ
どんなデザイナにも自由自在で便利
おれはtailwindよりも楽

**Name_Not_Found** · 2023/01/03(火) 21:29:25.31

自演臭いがスレ違いやで

**Name_Not_Found** · 2023/01/03(火) 22:56:17.91

bootstrapスレって人が全くいないよな

**Name_Not_Found** · 2023/01/03(火) 23:20:27.03

>>146
業務用こそ手書きでは？

>>149
語る事なさすぎでは

**Name_Not_Found** · 2023/01/04(水) 00:01:04.59

>>150
146だけど、俺も業務用は手書きだわ
昔は良かったかも知れないけど、これだけクラス名多いと手書きのほうが利便性良いよな

**Name_Not_Found** · 2023/01/04(水) 19:55:35.34

bootstrapはノンコーダー向けの簡易プラグインって扱いだわ
主にCSS苦手なバックエンド専門のプログラマ御用達
デザインからコーディング起こすガチデザインのではなく
デザイン不要で簡単なUIだけ欲しい時のもの
web制作会社はちゃんとしたフロントエンドが居るから誰もつかっとらん

**Name_Not_Found** · 2023/01/04(水) 19:57:07.01

WordPressのデフォルトテーマとか、出来合いのテーマを使うようなもんだな

**Name_Not_Found** · 2023/01/04(水) 23:18:57.07

bootstrapとかをベースに使えばreset系css含めてブラウザ間の差異を解決してくれるからむしろ使うべきだな
特にスマホ対応
すべて自分でゼロからやるアホはそのへんわかってない自称フロントエンドのゴミ

**Name_Not_Found** · 2023/01/05(木) 02:08:02.51

俺はサーバとかインフラ側だから、システム管理画面を作るには重宝してるけど
呪文のようなクラスが多くてhtmlがなんだか雑多に見える

グリッドだけ使ってあとは自作で良いのかもな

**Name_Not_Found** · 2023/01/05(木) 04:23:23.05

bootstrapスレでどうぞ

**Name_Not_Found** · 2023/01/05(木) 04:37:38.10

>>156
活況なbootstrapスレを案内してくれ、最近使い出したからそっちにいくわ

**Name_Not_Found** · 2023/01/05(木) 04:51:53.01

自分で探すか立てるかしろよ

**Name_Not_Found** · 2023/01/08(日) 22:15:41.68

@mediaはよく使われているけど@supportsや@pageなどを使うことはほとんどないですか？

**Name_Not_Found** · 2023/01/08(日) 23:22:14.05

>>159
俺や俺のまわりでは使わないね

**Name_Not_Found** · 2023/01/08(日) 23:54:02.73

いまんとこ@ルールで常用するのは@charset、@import、@font-face、@keyframes、@mediaぐらいね
@containerも使いこなせば便利なんかな？

**Name_Not_Found** · 2023/01/08(日) 23:57:12.68

@supportはマウスホバーできる端末だけホバーでcss変える時に使う

**Name_Not_Found** · 2023/01/09(月) 00:08:29.76

@containerはfirefox待ちかな
わりと便利だとおもう

**Name_Not_Found** · 2023/01/09(月) 05:07:01.59

@layerはもう使える

**Name_Not_Found** · 2023/01/09(月) 06:44:44.28

ブラウザをアップデートしない奴らもいるから使えるかはそいつら次第

**Name_Not_Found** · 2023/01/10(火) 21:38:57.38

やばいやばいCSSでsin(),cos(),tan()がほぼ全てのブラウザで使えるようになるんだって
これで数学勉強するのやめたのに！

**Name_Not_Found** · 2023/01/10(火) 21:55:14.69

三角関数は座標系と角度を相関させるのに便利な道具
理解せずとも使い方だけ覚えればいいのさー

**Name_Not_Found** · 2023/01/10(火) 23:41:15.50

文法の質問じゃないんでスレ違いだったらすみません。

ウェブ開発に関わる機会が無く、最近ようやくHTML/CSSの勉強を始めたのですがどうも単なる暗記物という感じがして面白くなく身が入りません。
これまで色々な言語に触れてきましたが、例えばこんな文法があるんだ、こんな風にすっきり書けるんだという技に触れられるのが好きでした。
言語から独立した分野だとアルゴリズムだったり設計で色々思考をめぐらしたりとそういうところに面白さを感じてきました。

一方でこっちは文法は単純で山ほどある属性を覚えていくだけというか。
結局画面デザインするだけのための表記法でしかないなって。そもそも見た目にそんな興味無いんだよなぁと。

もちろん初心者なので全く先が見えてないというのは重々承知なんです。
だからHTML/CSSやっていくと、この先こういう面白い技術があるよ、こういうところで頭使うよみたいなのがあれば色々話聞かせてほしいです。

**Name_Not_Found** · 2023/01/10(火) 23:56:23.22

自分で書いてビジュアルがきちっと実装出来た所が面白いので技術面でも面白く感じる事はないかもしれない
新しい仕様も今までこう書いていたのがこれで行けちゃうんだ！って所で興味引かれていくのがCSSだと思う

**Name_Not_Found** · 2023/01/10(火) 23:57:37.85

ただのマークアップ言語であってプログラミング言語じゃないんだから、そこまでやれることはないんじゃないかね
それならjs組み合わせて、すんごい斬新なサイトを作ればいいじゃない
jsなら、あなたの求めている事を駆使して色々出来るよ

**Name_Not_Found** · 2023/01/11(水) 02:29:58.83

暗記物だけど特殊なレイアウトの出題に対して
どれとどれを組み合わせれば実現できるかをあれこれ考えるターンがくるとちょっと考える楽しさはあるよ
たまにだけどね

**Name_Not_Found** · 2023/01/11(水) 04:41:53.56

>>168
見た目に興味ないならhtmlのみでcssはやらないほうがいい
といっても現実にはcssを使わないとまともな表現はできない

つまり苦しむから辞めればいいんだよ

**Name_Not_Found** · 2023/01/11(水) 04:50:00.24

漏れは、Ruby on Rails, Linux, Docker, AWS Solution Architect しか分からない。
HTML, CSS もよく知らない。SASS は知っているけど

Rails 7 のデフォルトのCSSフレームワークは、
Bootstrap, Bulma, Tailwind, PostCSS, Dart Sass の5つ

Bootstrapが多いが、Tailwindも増えてきた。
CSSが分からない香具師は、これらを使えばよい

**Name_Not_Found** · 2023/01/11(水) 09:48:33.37

>>173
しね

**Name_Not_Found** · 2023/01/11(水) 12:51:53.90

>>168
＞結局画面デザインするだけのための表記法でしかないなって。

そうよ
無くても困らんよ

**Name_Not_Found** · 2023/01/11(水) 12:55:30.64

vscodeで、特定の文字列を含まないファイルを検索することはできますか？

**Name_Not_Found** · 2023/01/11(水) 13:03:20.21

標準機能でできる
https://code.visualstudio.com/docs/editor/codebasics#_advanced-search-options

**Name_Not_Found** · 2023/01/11(水) 14:58:33.66

>>173
精神的グロ

**Name_Not_Found** · 2023/01/11(水) 15:11:59.13

>>168
HTMLやCSSはDOMの概念やUIコンポーネントの実装を覚えるための基礎でしかない
さくっと覚えて本命のJavaScriptに進めば望みの世界よ

**Name_Not_Found** · 2023/01/11(水) 18:02:23.11

そもそも、パソコンやインターネッツは縮小してゆくよ

**Name_Not_Found** · 2023/01/11(水) 23:19:28.05

エディタでコピペした時のインデントについて質問
例えばvscodeで
tabキーで4つインデントされたソースを2行コピーして張り付けると
エンター押した時の開始位置が既にインデントされた位置なので
インデントが倍になってしまったりするの良い方法ないかな？

1行ならインデントを含まずコピーすればいいが
何ってるのかわからないかもしれないが俺も何言ってるかわからなくなってきた

**Name_Not_Found** · 2023/01/12(木) 01:05:05.27

ご意見ありがとうございました。とりあえずjavascriptいじりはじめてからまた考えてみようと思います

**Name_Not_Found** · 2023/01/12(木) 01:29:08.08

>>181
エディタ側の機能依存なので、使ってるエディタのスレで訊く方がいいと思う

**Name_Not_Found** · 2023/01/12(木) 02:11:58.06

VSCode の質問は、プログラム板のVSCodeのスレで聞いてください！

**Name_Not_Found** · 2023/01/12(木) 15:56:36.32

>>181
インデント含めたくないなら矩形選択してコピーすればいいのでは？
ペースト後の処理はエディタや設定によるけども

**Name_Not_Found** · 2023/01/12(木) 17:34:54.00

VS Codeでテキストを矩形選択するには：Visual Studio Code TIPS - ＠IT
https://atmarkit.itmedia.co.jp/ait/articles/1805/11/news022.html

**Name_Not_Found** · 2023/01/16(月) 06:20:33.35

ちんちん！シュッ！シュッ！シュッ！

**>>187の母でございます** · 2023/01/16(月) 15:46:34.12

このたびは、息子が糞レスをしてしまい、皆様には大変ご迷惑をおかけしております。
深くお詫び申し上げます。
息子は幼い頃に父親を亡くし、そのショックで内気な子供になってしまいました。
そのせいか、小学校、中学校、そして高校といじめにあっていたのです。
朝、学校へ行くと下駄箱にあるはずの自分の上履きを隠され、昼食となるとお弁当をトイレへ投げ込まれ、
休み時間にはプロレスと称して息子だけが一方的に殴打されるような日々が１０年以上も続いておりました。
度重なるいじめに耐えきれず、息子はとうとう志半ばで高校を中退し、大学進学の夢も諦めねばなりませんでした。
失意のゆえでしょうか、家庭での息子はいじめの反動のせいでしょう、ことあるごとにわたくしに乱暴を振るうようになっていきました。
度重なる暴力のせいでますます息子は部屋に引き篭もり、自分だけの世界に閉じこもるようになってしまいました。
そんな折り、祖父が気分転換にと、息子へパソコンを購入してくれたのです。
息子はこの歳になるまで、恋人はおろか友達さえもいないようでわたくしも大変心配しておりましたが、
この５ｃｈを知って以来、息子も少し明るくなったようです。
どうぞ皆様、息子を暖かく迎えてやってくださいまし。
本当は良い子なんです。よろしくお願い申し上げます。

>>187の母より

**Name_Not_Found** · 2023/01/16(月) 15:54:18.76

デフォルトではテキストの一部のみを表示して
ボタンか何かをクリックして続きを読めるようにしたいのですが
checkboxもjsも使わず実装できるタグはどんなんでしたっけ

**Name_Not_Found** · 2023/01/16(月) 15:56:21.41

これかな？
<details>
　<summary>クリック</summary>
　本文〜〜〜
</details>

**Name_Not_Found** · 2023/01/16(月) 16:04:36.96

>>190
それですそれです！
ありがとうございました

**Name_Not_Found** · 2023/01/19(木) 04:38:32.78

ちんちん！シュッシュッシュッ！

**Name_Not_Found** · 2023/01/19(木) 07:44:53.25

白濁は出る～♪

**Name_Not_Found** · 2023/01/20(金) 14:59:10.60

paddingとmarginの使い分けが今一
分からないのですがどう使い分けてますか?

**Name_Not_Found** · 2023/01/20(金) 15:23:42.38

作ったからこれのmargin-topとpadding-leftの数値弄ってみて
https://jsfiddle.net/nayu4j79/

**Name_Not_Found** · 2023/01/24(火) 16:36:16.34

>>194
paddingは皮下脂肪でmarginは人との距離と覚えたらいいかも
paddingは要素の内側でmarginは要素の外側

**Name_Not_Found** · 2023/01/25(水) 01:51:50.99

>>194
paddingは要素の内側の余白で、主にボックス内の可読性に関わる調整、
marginは要素外側の余白で、主に要素間の距離を調整するって感じ

**Name_Not_Found** · 2023/01/25(水) 11:36:25.46

marginは突き抜けたりするからイヤずら

**Name_Not_Found** · 2023/01/26(木) 00:05:19.17

>>190
こんなのあったのか。知らんかったわ
でも、開閉のスムーズなアニメーションがcssだけだとまだ無理ぽいね。
アクセシビリティ面ではこっちのがいいけど、蔵には見た目でしか評価されないから
まだ結局jsでええやんって感じだな。

**Name_Not_Found** · 2023/01/30(月) 21:16:03.81

html，css学びながらjavascript すっ飛ばしてPythonやり始めると困ることある？