HTML/CSS のどんな質問にも優しく答えるｽﾚ 51
■ このスレッドは過去ログ倉庫に格納されています
ここは初心者からベテランまで、全ての人を対象に優しく答えるスレです
類似質問、重複質問、丸投げ大いに結構。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 ページの左端と右端にそれぞれ画像１と２を背景画像として設置したい
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;
}
こんな感じでやってもできませんでした。
どうやればうまくできますか？ >>5
それだと各プロパティが上書きされるだけなので1つにまとめる
body{
background-position:left, right;
background-image:url(./test1.png), url(./test2.png);
background-repeat:repeat-y;
}
最後は同じ値なので2つ目は省略可 再現可能なコードも示さずにYouTubeで現象だけ見せてくるって
初めてのパターン どこを見せればいいですか？
多分英数字が連続する文字列ではラップされずにサイズが大きくなってしまいそれによって大本のdivのサイズも伸縮してるからのような気がします >>10
目星が付いてるなら、該当の要素にoverflow-wrapでも追加してみたら？ >>13
追加してみたのですが全く言うことを効きませんでした
記事タイトルのhにつけたりその上にdivつけてそいつにつけたり色々やったのですが全く言うことを聞いてくれず… それバグではないよ
設定したらどうよ？
word-break: break-all; バグじゃない
word-wrapプロパティを調べよう
めんどくせーもん落とさせるのはやめよう
該当部分だけjsfiddleに展開しよう なんかよくわかりませんが回答ありがとうございます
それらは要素のCSSに直書きで大丈夫ですかね？ word-breakもword-wrapも試してみましたがダメでした。
https://jsfiddle.net/r3mxnkoh/
jsfiddleでは大丈夫なのですがなぜでしょうか。 セレクタが間違ってて当てるべきところに当たってないんじゃないの
ちゃんとdeveloper toolで当たってるか確認するくせつけよう >>20
そうかもしれません…
とりあえずガチャガチャやってたらなんとかなりました
ご協力感謝します input type="text" にrequiredを付けたのですがsubmitできてしまいます。ブラウザはPCのChromeです。
<form action="/login" method="post">
<input type="text" required />
<button type="submit">Submit</button>
</form>
10年以上HTMLやっててこれは初めてなので不思議。なんででしょうか？ <input type="text" required="required"> >>22で効かないなら、>>22に書かれてる以外の箇所に問題があるわけで
他に余計な属性付与してたりするとrequired属性が無視される場合もあるし
もうちょっと情報出そう やはりおかしいですよね
HTML丸ごと上げるわけにもいかないし、他にどういう情報出せばよさそうでしょう それなら、最小限にしぼったHTML書いて検証してみなよ JSはたくさん使われているのでJSが怪しそうです、formやinputの属性いじったりしてるのかな…
やはり地道に切り分けていくしかなさそうですね、この案件にそんな時間はないのでこのまま迷宮入りかな 個人で管理してるのなら好きにすればええけど
納品物ならエラーは取り除かんとまずいよと釘を指しとくで >>22,29
たぶんbuttonのclickイベになんか定義してあるんやろね
checkValidity()入れるかonsubmitに処理を移すかでいけると思うけど、
他の人が書いてるならそっちに頼む方が早そう 素人なのでスレ違いだったらごめんなさい
クローム等のwebブラウザを旧バージョンにさかのぼっていくと
ある所でツイッター等のはめ込み動画が再生出来なくなります
（再生ボタンが押せない、動画画面が真っ黒のまま等）
これはどういう技術？が関係しているのでしょう
またyoutubeは相当昔のバージョンにさかのぼっても再生が可能です
再生の可、不可を分けているポイントは何でしょうか？ コントロールバーの再生ボタン押しても変わらない？
昔はコントロールバー経由かjsでオンオフ切り替えないと動画中央などのクリックで再生させる機能は無かった覚えがあるよ > クローム等のwebブラウザを旧バージョンにさかのぼっていくと
> ある所でツイッター等のはめ込み動画が再生出来なくなります
何故、手がかりとなるかもしれないそのVerを書かないのか >>33-34
お二方レスありがとう
バージョンはクロームの49.0.2623.112
>昔はコントロールバー経由かjsでオンオフ切り替え
jsとはから今ググりながら調べてます >>32
Chrome開発者ツールのコンソールを見ると、動作不良が起きている状況が残っているかもしれない
それをヒントに調べれば、ネックになっているのがコーデックなのか他の技術なのかわかるんでないかな
ただ、いまはOSもブラウザも「常に最新」が前提になってるので、好奇心を満たす以外に調べる意味はないような… >>33
コントールバー自体が表示されませんでした…
>>36レスありがとう
>Chrome開発者ツールのコンソールを見ると
なるほど、ちょっと時間かけて調べてみようと思います
>好奇心を満たす以外に
そうですね、好奇心が一番です
あと使ってないvistaの32bitのpcが出てきたので
web動画を見るくらいできたら良いなと思って >>37
サポート終了したOSでネットに繋ぐのはあまりおすすめしないな
OS上げられないなら処分してFireTVの足しにした方がいいと老婆心ながら >>38
そうですよね懐かしくてついつい。オフライン用にしておきます controls属性つけても表示できない？
って聞こうと思ったがWeb動画を見るって話から察するに
自分で作ったWebサイトのデバッグの話じゃないのよ、、、スレチじゃん カンプをコーディングで起こすときに余白の値を効率よく把握する方法ないですか？
XDでちまちまoption押して余白測って実装して、ディベロッパーツールで確認をひたすら繰り返してますが、
いつも抜けありデザイナーに怒られます… 自分も抜けるから
印刷して紙に鉛筆等で数値やアクション等、メモ書きしてるよ
他の人はどうやってるんだろ？ 変な値を設定してるとかならともかく
忘れてるならデザインとブラウザ並べて眺めれば気付かないか カンプの上に計測値を目立つテキストでメモしておいて、reset.cssで全要素の余白ほかを0にしてからスタイリングやね
なんなら要素の初期背景色も変な色にしておくと漏れがひと目で
計測を楽にしたいって話なら、がんばれとしか… カンプを画像に出力してChromeのアドオン使って画像と作ったページ重ねて確認してる
なんていうアドオンだっけ 設定し忘れている=0になるようにすべき
大体のルールでは上下余白30だが、セクション3だけは上下余白50で上書きする
みたいなことやってるならデザインに対するCSS設計が悪い 皆さんありがとうございます
独学からコーダーになったのですが、まだ目が慣れないせいかなかなかカンプ通りに作れず…
時間がなくて未完成で途中で降りてきたデザインで組む→完成版との差異を全て回収できない
ということ状況多く、またスマホファーストに慣れなくてpcとspがごちゃごちゃになってしまいます
見比べても全然気がつくことができません…
やっぱり印刷してメモするのがいいみたいですね、やってみます！ >>49
横だけどありがとう Perfect Pixel だと思う
こんなのあったんだ
https://liginc.co.jp/568449 >>52
それは差分をちゃんと伝えてくれないデザイン側も悪いな
普通は「ここが変わりました」って注釈を入れてくれる
「見れば分かるだろ」ってデザイナーはただの怠慢なので上に注意してもらい <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１００％でテーブルにおさまるようにするにはどうやればいいんですか？ <input type="text" name="bg_img_url" value="" style="width:100%; box-sizing: border-box;">
これでどうかな？ >>56
できました。あろがとうございます。
でも何でbox-sizing: border-box;にしないとはみ出てしまうんだろ >>59
htmlだけじゃちょい無理ね
文字列つなげる簡単なJavaScriptを追加してやればいける
https://jsfiddle.net/4tdr5p13/
ただこれAPIが公開されてる検索じゃないので、自分だけならともかく、他人に使わせるのはまずいんでないかな… >>60
ありがとうございます！！！！
こっそり使わせていただきます <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だと隙間ができませんでした。 見てないけどブラウザデフォルトcssをリセットしてないんじゃないの >>62だけど解決しました
ブラウザのズームが８０％くらいになってたので１００％にしたら
ちゃんと隙間なく表示されました htmlの互換性についてですがwin22h2バージョンで一部の機能が動作しなくなったんですが、meta設定すれば解消しますか？ ブラウザの方はEdge Chromiumだとは思うけども、なにがどう動かなくなったのかを伝えないと誰も答えようがない >>68
失礼しました。画像プレビューの横回転機能が動作しなくなりました。 その画像プレビューの横回転機能ってのは
どうやって動作してたかは分かってる？ 作りまでは確認しておりません。画面上のjpegファイルを90°単位に右回転させる機能です。 他人のサイトを見てて動作しないって言ってるのなら
そのサイトのURLを貼った方が早い 今の質問って
「とある料理を新規開店した店で食べたのですが美味しくありません。秘伝のソースを掛ければ解消しますか？」
「イタリア料理店で食べたパスタが美味しくなかったです」
「どうやって作ったかは分かりません。パスタはミートソースで肉は粗挽きです」
みたいな感じ >>71
動かなくなったページがどこかのサイトならそのURL、自分の作ったものならどこかに上げる、のどちらかがないとちょっと無理かも
画像プレビューの回転が「ブラウザの機能」を指してるなら、metaどころかページ側はいっさい関係ない話になるけど… どうせブラウザに入れた機能拡張なんかが自動的にバージョンアップされたら
勝手にjavascriptオフられてたとかじゃないの？ HTML5でサイトのコンテンツを左右に分割する方法が調べてもイマイチ分からないので教えていただけると嬉しいです
https://www.usamimi.info/~geko/arch_etc/box.html
具体的にはこのサイトのように、それぞれのコンテンツをこんな感じで分けたいです
ピッタリ真ん中で左右に分けたいと思っています こんなんでどうだ
https://jsfiddle.net/9omwjxur/
大枠のコンテナを作ってその中で左右のボックス作って
左右のボックスの中に更にボックス作っていく
大枠にFlex当てれば左右の枠は横並びになるので >>76
おお、float久しぶりに見た
今は>>77の通りflexboxがおすすめ <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) のような形で書くことはできますか？
よろしくお願いします。 >>80
xがrandと同じなら、test()呼んだ時に#numのhrefもsetAttribute()で書き込んじゃえばいいんでない？
https://jsfiddle.net/j46gyqxr/
ここはHTML/CSSの質問スレだから、これ以上はJavasScript質問スレのがいいかも >>81
動かしたい挙動で感動しました。ありがとうございます！
スレ違いだったようで重ね重ねもうしわけないです。 ド素人質問失礼します．スレ間違ってたら申し訳ないです．
自分はカードゲームについてのサイトを作ろうと考えています．
日々公開される数枚のカード画像を自分のサイトに載せて一覧で見れるのが第一目標です．
また，カードゲーム界隈では発売前のカードを印刷して紙にプロキシと呼んで使用するのですが
一覧で見れるカード１枚１枚の下に0~4で数字を選ぶことができ，選択した数字XによってA4に選択した画像とX枚をばーっと敷き詰めて簡単にプロキシを作れる機能を実装したいと思っています．
そのために，書籍であったりこの機能についてはこのワードで調べればいいなどなんでも構いませんのでご教授いただければ幸いです． 印刷になってくるとCSSだけではどうにもならんなあ >>84
https://imgur.com/a/hqGcjcu
こんな感じで新しいタブで表示してサイト上から印刷できるものを想像しているのですが
これでも厳しいですかね・・・？ 予め全種類のカードが敷き詰められたページを用意しておいてリンクするだけなら簡単だけど
ボタンを押して生成となるとjsが必要
あと個人的にはやりたいことから考えるとpdfを作ってリンク貼ればいい気がする 動作イメージが分からないんだけど、各カードでそれぞれ出力する枚数を指定して
枚数指定した全カードを並べて出力したいってこと？
いずれにしろ「選択した分だけ敷き詰めて出力」とか「新しいタブで表示して…」
ってのはCSSだけじゃどうにもならない
まぁ、要求仕様によっては無理矢理CSSだけでどうにかなりそうな気もするけど
スマートな方法じゃないし、ソートしたいとか言い出したらどうしようもないから
PHPとかJavaScript辺りで頑張った方がいいかも レスポンシブで画像の本来の幅を超えないようにしたいので
max-widthに本来の幅を調べてpxで指定するのめんどくさいんだけど
max-widthに画像の本来の幅のpx指定するしか方法はないんでしょうか？
もっといい方法はないのかな？ >>83
印刷フォーマットはそれ用のCSSを用意しとけばいいとして、
選択した数を拾って別タブに要素を生成する過程はJavaScript使わないとムリね
JSは機能ごとにWebで検索しても身に付かないので、オライリーの「入門 モダンJavaScript」を一冊やっとくのをおすすめ
>>88
max-width: max-content; でいかが？ >>86
なるほど，ありがとうございます．
やはり使わないカードというのが出てくるので全部４枚ずつ印刷するとなると
莫大な量印刷しなくてはならない問題があったので元レスの仕様にしてみたいなと思ってました．
>>87
ありがとうございます，それであってます．
javascript 了解しました．
>>89
ありがとうございます．
サイトを作るのは高校の授業以来で用語や文法はある程度覚えてますが
何書けば忘れてしまったもので，cssやhtmlについての書籍は何がおすすめでしょうか． CSSの質問させてください！
WordpressのMassive Dynamicというテーマを使っているのですが、
画像がwidth: calc(100% / 2 - 20px)でサイズ指定されています
この指定により、全体を表示したい画像が何故か拡大（もしくは原サイズ？）＆トリミングされてしまっています
指定を無効にすると画像は全体が表示されますが、レイアウトが崩れます
calcを適用したまま画像を全体表示させたい場合、どういう解決策があるか教えていただけませんか？
よろしくお願いいたします！ >>90
htmlやcssは覚えることも少ないし（属性は多いけど）、
MDN（https://developer.mozilla.org/）でいいんじゃない？
書籍がいいなら同じくオライリーの「モダンWeb」とか「CSS3開発者ガイド」かな >>91
こちらが問題をはっきり理解できてないかもだけど
object-fit: contain;
とか >>93
ありがとうございます！
今出先なので確認取れないのですが、試してみます
スクショとか上げた方が良いでしょうか？ 画像の表示幅を画像の本来の幅の20％にしたいんだけど
width:calc(max-content * (20 /100))とやってもうまくできませんでした
どうやればいいですか？ >>96
「画像の本来の幅に対する相対」は現状のhtmlとcssだけでは使えない
jsが必要 >>89
家に着いて試してみましたがmax-contentじゃどうも出来なさそうです‥‥
width: calc〜はliについてるスタイルなんです ■ このスレッドは過去ログ倉庫に格納されています
