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

**Name_Not_Found** · 2022/02/25(金) 16:42:48.40

https://mevius.5ch.net/test/read.cgi/hp/1636434627/

**Name_Not_Found** · 2022/08/20(土) 15:35:16.92

>>598
オレ環もブックマークしたら同じ？？？
afngo以外で聞いているので問題なしだけれど

**Name_Not_Found** · 2022/08/20(土) 16:40:46.72

>>598
ほんとだ、うちでもその不思議な現象が再現する！(うちも「おま環」なのか？ｗ)
原因わからんしスレチでもあるんだろうけど、どこで訊けばいいのかもわからん
すまんこ

**Name_Not_Found** · 2022/08/20(土) 17:26:53.44

スクリプトでページ遷移したように見せかけてるけど直に開かれた時の事は考えてない作りなんじゃね？

**Name_Not_Found** · 2022/08/20(土) 17:54:57.22

reactで作られてるってのがヒントだな
でもまぁ、無理なんじゃないかね
とりあえずピン留めして開きっぱなしにすればブラウザ再起動してもイケる

**Name_Not_Found** · 2022/08/20(土) 18:15:18.70

Operaだと普通に https://afngo.net/radio/Tokyo プレイヤーページが開かれるな
reactで生成しててもそのURLが変わる事はなはずなのでそのページが開かれないとおかしい
ブックマークのURL確認してみ

**Name_Not_Found** · 2022/08/20(土) 18:20:13.21

firefox developer edition 104.0b10でも問題なし

**Name_Not_Found** · 2022/08/20(土) 19:45:49.78

>>605
いや、Operaだろうが何だろうが普通に https://afngo.net/radio/Tokyo プレイヤーURLが開かれる
しかしそのページを開いたのにAFN GO undefinedとなるからおかしい、と言ってるんだろ？

>>606
開発版Firefoxだと https://afngo.net/radio/Tokyo を直接開いてもAFN Tokyoが聞けるのか？

**Name_Not_Found** · 2022/08/20(土) 22:04:10.24

>>607
すみません、俺があほでした・・・

**Name_Not_Found** · 2022/08/21(日) 00:35:38.29

スレチなのもそうだけどスレで聞くよりまず先に
公式サイトには聞いたのだろうか？

**Name_Not_Found** · 2022/08/21(日) 05:48:16.24

>>598
3 で、Cookie を見たら、2つ保存されていたので、
その値でアクセスOK と判別されているのかも

5 からアクセスすると、Cookie の値がサーバーに登録されていないので、拒否されるとか？

例えば、Ruby on Rails で作っているようなプロなら、
あらゆるページで、URL を保存される事を考えて、
アクセスOK ならリダイレクトする

逆に、認証トークンなどで認証している場合は、アクセスできないようにする

こういう設定を、routing と言う。
つまり、プログラマーが悪い。バグ

**610** · 2022/08/21(日) 06:10:47.85

Edge なら、F12 開発者ツールで、
アプリケーションタブ > ストレージ > Cookie

>>610
修正

3 で、Cookie を見たら、2つ保存されていた。
次に、5 で、Cookieを見たら、同じ値が2つあった

つまり、Cookieで判別していない。
このアプリは、前ページがどこから来たかで、判断しているのだろう

どの道、プログラミングのバグ

**610** · 2022/08/21(日) 06:15:41.89

Ruby, Selenium WebDriver などでは、ブラウザの自動操作ができる

ページA へ移動して、そこで特定のボタンを押して、ページB へ移動するとか

iMacros で出来るかも知れないけど、漏れは知らない

**Name_Not_Found** · 2022/08/21(日) 12:54:09.91

>>609
じゃあお前が公式サイトに聞いて答えをみんなに教えてくれよｗ

**Name_Not_Found** · 2022/08/21(日) 12:56:08.17

>>610
要するにサイト側のバグということで桶？
おま環とか言ってた奴も勘違いということで桶？

**Name_Not_Found** · 2022/08/21(日) 14:25:40.11

例の人に絡んだり、糞しょーもない煽りレスとか
このスレの初心者かな？

**610** · 2022/08/21(日) 17:53:31.72

サイト側のバグ。プログラマーが悪い

例えば、Ruby on Rails の本には書いてある

ユーザーがサイト内のすべてのページを、お気に入りに保存して、
そこからアクセスする場合も、逐一考えなければならない

もし認証が必要なら、ログインページへリダイレクトするとか、
そういう処理・routing も考えなければならない

**Name_Not_Found** · 2022/08/21(日) 18:14:47.19

このruby信者の文章気持ち悪すぎる

**598** · 2022/08/21(日) 19:04:43.79

皆さん、どうも有り難うございました！

自分でも何となく「サイト自体の方が怪しい」とは感じており期待薄ではあったのですが
ひょっとして呼び出し元URLに何らかの引数？など与えたら希望する「AFNTokyo」が
一発呼び出しできるんじゃないか？などと思いお尋ねした次第です。

残念ながら「サイト側のバグ」であることは明白で、しかも私の質問もスレチのようですから
今回の質問はここで一旦おしまいとさせていただきます。今後は公式サイトにバグ修正を
依頼するメールを送ってみるつもりです。

スレチにも関わらず、結局沢山の方々に色々とお手間を取らせてしまいました。
どうもすみませんでした、そして本当に有り難うございました。

**Name_Not_Found** · 2022/08/21(日) 19:11:01.86

バグではなく意図的である可能性も無きにしも非ず
基本的にコンテンツ直リンって、嫌われるイメージある

**Name_Not_Found** · 2022/08/21(日) 19:22:13.99

みなさんコーディングってどれくらいの速さでやるんですか？
独習100時間目くらいなんですが今日このサイトのコーディングに8時間かかってしまった(o´Д`)
https://webdesigner-go.com/engbody/

**Name_Not_Found** · 2022/08/21(日) 19:41:29.70

>>594
8時間って1人日でしょ　上出来では

**598** · 2022/08/21(日) 19:43:10.82

>>620
食事指導に「なし」と「無し」が混在してる

**Name_Not_Found** · 2022/08/21(日) 21:03:31.71

上出来ですか、良かった
鬼集中してやったので終わったらフラフラでした
コーダーを職業にしたらエコノミー症候群になりそう笑

**Name_Not_Found** · 2022/08/21(日) 22:43:22.99

>>618
AFN聞いている一人として
おれ環ではAFN360の時もプレイヤーページをいきなりお気に入れてもダメだった
AFN Goもそれに合わせた「仕様です」ということかもしれない
お気に入りに入れられる勝手サイトで聞いた方が手っ取り早い

**Name_Not_Found** · 2022/08/22(月) 07:49:58.03

>>622
あ、本当だ

**Name_Not_Found** · 2022/08/22(月) 21:23:16.72

画像をドラッグすると禁止アイコンとやや縮小された画像が表示されるけど
これらを表示しないようにするにはどうすればいいんですか？

**Name_Not_Found** · 2022/08/22(月) 21:40:13.94

ulとliで画像を横並びにして画像間の間隔を30pxにしたものをウインドウの幅に合わせて
拡大縮小させる方法は？
zoomが一番いいんでしょうか？

**Name_Not_Found** · 2022/08/22(月) 21:49:47.91

このあいだのzoomマンか？

**Name_Not_Found** · 2022/08/22(月) 22:33:01.74

ファイヤーフォックスだけ使えないけどzoomが一番いい
transform:scaleだと縮小すると画面いっぱいにならない
無駄な余白もできちゃうから

**Name_Not_Found** · 2022/08/22(月) 22:51:18.26

zoomってそんな使い勝手よいか？

**Name_Not_Found** · 2022/08/23(火) 01:41:53.53

悪い

**Name_Not_Found** · 2022/08/23(火) 06:00:42.63

zoomはtransform:scaleより全然使いかっていいよ

**Name_Not_Found** · 2022/08/23(火) 06:33:15.19

zoomマン自演するな

**Name_Not_Found** · 2022/08/23(火) 06:34:26.84

非標準のゴミプロパティ推してるやつなんなんだ

**Name_Not_Found** · 2022/08/23(火) 14:23:55.98

>>627
その条件で何故zoom？
https://jsfiddle.net/5xcd8t2g/

**Name_Not_Found** · 2022/08/23(火) 20:50:45.81

tailwindマジうんち
web標準の一部機能に未対応とか独自のビルドシステムや文法とか時代に逆行してるだろ

**Name_Not_Found** · 2022/08/23(火) 21:36:49.52

しかもtailwindでよろ！っていうクライアントが出現し始めてる
bootstrapよりうざい

**Name_Not_Found** · 2022/08/24(水) 01:04:37.21

俺もtailwind反対派だけどtwitterの人に@applyは互換性もなく思想に反してるんじゃないのみたいにしつこく聞いてたらブロックされたわ

**Name_Not_Found** · 2022/08/24(水) 08:15:11.62

>>635
画像だけでなく、画像間の幅やテキストなどもウインドウ幅におさまるように縮小したいから
画像だけ小さくなっても画像間が30pxのまんまだとバランスとれないし

**Name_Not_Found** · 2022/08/24(水) 08:39:35.74

条件後出し、マジ嫌われるから止めような

**Name_Not_Found** · 2022/08/24(水) 08:49:01.70

レスポンシブ化にzoomを使おうなんて発想が有り得ない

**Name_Not_Found** · 2022/08/24(水) 08:51:14.78

そもそも非推奨プロパティだから使うな

**Name_Not_Found** · 2022/08/24(水) 09:13:40.59

vwでも使えば

**Name_Not_Found** · 2022/08/24(水) 09:46:24.04

>>639
で、何故その条件でfirefoxで動作しないzoom？
せめて最新ブラウザ全てで動作するプロパティ使おうよ
https://jsfiddle.net/1zdutsfw/

**Name_Not_Found** · 2022/08/24(水) 10:33:02.79

このスレの奴らって実力は全然ねえのなｗ
ケチつけられる粗を探して見下すだけ

**Name_Not_Found** · 2022/08/24(水) 10:38:49.28

泣くなよzoomマン

**Name_Not_Found** · 2022/08/24(水) 11:25:12.00

>>643
vwだと希望する幅にならないから
つまりpxできっちり指定したものを縮小させたいんだよ

**Name_Not_Found** · 2022/08/24(水) 12:17:07.08

>>647
vwもpx数を元に設定できるよ
もしかして目分量で設定してる？

**Name_Not_Found** · 2022/08/24(水) 12:28:55.53

px to vwとかでぐぐれ
計算機もあるしmixin関数もゴロゴロ見つかる

**Name_Not_Found** · 2022/08/24(水) 12:53:01.13

いや、ここは>>645先生に任せてみよう
先生！お願いします！

**645** · 2022/08/24(水) 12:57:24.44

>>650
いや、俺もこのスレの一員だから実力は全然ねえよｗ
ケチつけられる粗を探して見下しただけ

**Name_Not_Found** · 2022/08/24(水) 13:10:42.61

>>644
横だがありがとう

clamp関数便利だね
知らずにメディアクエリで個別設定して制御してたわ

**Name_Not_Found** · 2022/08/24(水) 13:23:20.64

>>652
ジェネレーター便利だよ

WEB GENERATOR | WEB GENERATOR
https://web-generates.com/
Fluid-responsive font-size calculator
https://websemantics.uk/tools/responsive-font-calculator/

**Name_Not_Found** · 2022/08/24(水) 13:37:58.38

>>651
だったら煽るだけのヘタレ先生は黙って見下しオナニーでもしてて

**Name_Not_Found** · 2022/08/24(水) 13:41:47.39

>>653
情報ありがとう
でも外部ツールで固定値算出すると修正する時にぱっと見で数値が分かりづらいのと
数値を修正する時が面倒だからSCSSで計算式を残すようにしてるわ

他の人は固定値算出してるのかな？

**Name_Not_Found** · 2022/08/24(水) 14:00:29.57

>>655
紹介しといて何だけど、基本的に自分も計算式は残すｗ
が、手っ取り早く使いたい様な場合と使い分けだね

**Name_Not_Found** · 2022/08/24(水) 14:19:40.84

>>656
補足もありがとう
認識ズレてなくてよかった

**Name_Not_Found** · 2022/08/24(水) 18:48:14.76

>>655
sassのmixinでやるに決まってる

**Name_Not_Found** · 2022/08/24(水) 19:00:17.49

そういう話？

**Name_Not_Found** · 2022/08/24(水) 19:39:26.50

functionとmixin作っておけば計算式はそこにある
コードはfunc.pxToVw(50)とかになるから50pxをvwにしたいのだとすぐわかる
何の問題もない

**Name_Not_Found** · 2022/08/25(木) 22:14:27.62

>>629
transform:scaleで出来る。ただしscaleに与える値を動的に求めるのはcssのcalcじゃ無理
そこでJavaScriptでscaleの値をセットすればzoomもどきができる
当然、Windowsのサイズに動的に追従できてFirefoxでも問題なく動作している
この方法の良いところはtransformのブロックの中の要素を気にせずにzoomもどきができること

**Name_Not_Found** · 2022/08/25(木) 22:27:34.47

vwでいいじゃん定期
jsいらんよ

**Name_Not_Found** · 2022/08/25(木) 23:36:35.59

30pxにしたいのかしたくないのかよくわからないし

**Name_Not_Found** · 2022/08/27(土) 18:33:34.70

divの中に２つののdivがあってdisplay:table-cellを使うと横並びになっちゃうけど
display:table-cellを縦並びにするにはどうすればいいの？

**Name_Not_Found** · 2022/08/27(土) 18:51:32.24

できない

**Name_Not_Found** · 2022/08/27(土) 19:02:37.61

>>662
vwじゃ不都合な時がある
例えば幅１００px高さ２５０pxの画像と幅３００px高さ２５０pxの画像を
それぞれwidth:10vwにすると幅１００pxの画像の方がでかく表示されちゃうから

**Name_Not_Found** · 2022/08/27(土) 19:03:53.09

>>664
親のdivをdisplay:flexにしてflex-direction:columnにする
子のdivがtable-cellでないといけない理由はなんだろ？

**Name_Not_Found** · 2022/08/27(土) 19:56:41.15

>>667
table-cellの方がflexより綺麗に枠におさまるのと
vertical-alignを使えるから

**Name_Not_Found** · 2022/08/27(土) 20:14:49.54

>>668
縦の中央揃えもしたいってこと？
それならflexでもできるよ

**Name_Not_Found** · 2022/08/28(日) 00:21:26.38

それなら子のdivをflexにしてalgin-items指定する方がいいかもね
親に余分な指定しなくても縦に並ぶし

**Name_Not_Found** · 2022/08/28(日) 00:23:40.17

align-itemsのtypoですよって念のため

**Name_Not_Found** · 2022/08/28(日) 11:09:20.47

>>666
まず前提条件としてどういう形にしたいのかを出そう
後出し条件もやめよう
そしてcssの設定箇所を見直そう

**Name_Not_Found** · 2022/08/28(日) 11:11:06.71

zoomマンは困ってて聞いてるんじゃなくてたぶん荒らしだよ

**Name_Not_Found** · 2022/08/28(日) 11:44:34.28

自力で漕ぎ着けた設定でTUEEEしたいんだと思う
それを荒らしというかだな
以後それっぽい人いたらスルーするよ

**Name_Not_Found** · 2022/08/29(月) 13:52:36.10

HTML5のprogress要素を利用したいのですが、
min = 0
max = 100
として
value = 100
が代入されるとページいっぱいに進捗グラフが伸びてしまいます。
どの様にしたらサイズを読み込み時のままに100％表示が出来ますか？

**Name_Not_Found** · 2022/08/29(月) 14:48:31.61

>>675
質問がおま環っぽいので取り下げます。
使ってるライブラリ内に書いてるのが原因ぽかったので

**Name_Not_Found** · 2022/08/29(月) 15:40:30.08

>>675,676
状況再現できなくて回答躊躇してた……原因分かったならなにより
デフォルトで使う分にはいいけど、きっちり整形しようとするとめんどいねこの要素

**Name_Not_Found** · 2022/08/29(月) 18:33:10.49

>>672
<style>
#image_set{
list-style:none;
display:flex;
background-image:url('./bg.png');
}

#image_set img{
width:10vw;
}

#image_set li{
margin-right:1vw;
}
</style>

<ul id="image_set">
<li><img src="./img1.png"></li>
<li><img src="./img2.png"></li>
<li><img src="./img3.png"></li>
</ul>
img1.pngは幅100px高さ250xの画像、img2.pngは幅200px高さ250px、img3.pngは幅300px高さ250pxの画像
これでウインドウサイズを変えると画像の大きさは変わるが
画像の高さが１＞２＞３の順になってしまう。しかも背景画像のbg.pngは縮小されない
これがvwの欠点なので一括縮小できるzoomがいいと思った。

**Name_Not_Found** · 2022/08/29(月) 18:47:17.02

zoom使う要素がどこにもないんだが…

**Name_Not_Found** · 2022/08/29(月) 20:13:06.94

結論　zoomerは荒らし

**Name_Not_Found** · 2022/08/29(月) 20:13:25.41

>>678
・画像のwidthをcalc( (設計時の画像幅 / 設計画面の幅) * 100vw )で指定すれば相対比率を変えずに縮小できる
・画像サイズがバラバラかつ点数が多いなら、object-fit使って同じ枠内に納めればレイアウト上もすっきりする
・間隔はjustify-contentのspace-aroundなりspace-betweenなりに任せれば考える必要もなく
・背景画像はbackground-size:coverなりcontainなりにしておけば相対比率で縮小される

**Name_Not_Found** · 2022/08/29(月) 20:44:28.05

条件が雑過ぎるから、これまでの条件も加味して適当に作ったけど
vw使っても全然できるよね
https://jsfiddle.net/vgh7xm5u/

**Name_Not_Found** · 2022/08/30(火) 05:44:39.03

例えば小説家になろうの
ncode.syosetu.com##.footerbookmark > li > a
に付与されているhrefにより、リンク動作とともに「javascript:void(0)」がマウスオーバーされてしまう現象

正常動作を保ちながらマウスオーバーのみ非表示にする方法はありませんか？
ネットではpointer-events:noneが目立ち、リンクそのものまで完全除去してしまう例ばかりでしてm(vv)m

**Name_Not_Found** · 2022/08/30(火) 12:34:30.26

>>681
設計時の画像の幅はcssで取得できますか？
>>682
９で割っているけど９という値はどこから来たんですか？

**Name_Not_Found** · 2022/08/30(火) 13:17:10.41

以降zoomerを相手するやつも荒らし

**Name_Not_Found** · 2022/08/30(火) 13:26:15.10

> ９で割っているけど９という値はどこから来たんですか？

要は>>681のコレ

> 画像のwidthをcalc( (設計時の画像幅 / 設計画面の幅) * 100vw )で指定すれば相対比率を変えずに縮小できる

calc((660 / 900) * 100vw)

画面幅900px時に660pxになるって意味
「どの画面幅の時に画像幅が250pxだったりmargin-rightが30pxになるよう設計してるのか？」が分からなかったから
仮に900pxとしただけで、そこは1280pxとか好きに変えてどうぞ

というわけで、もうzoomは諦めろ

**Name_Not_Found** · 2022/08/30(火) 13:42:47.42

>>683
先ずその例に挙げられてるとこに辿り着けないのは自分だけ？

**Name_Not_Found** · 2022/08/30(火) 14:08:03.28

>>687
その前に何が言いたいのか分からなかった……

**Name_Not_Found** · 2022/08/30(火) 14:22:12.18

>>687
場所が分かった
各作品ページ内か目次の欄にある「ブックマークから削除 or ブックマークに追加」のボタン
モーダル表示によるワンクッションをいれる為にjavascript:void(0)でAタグによる動作を止めてるっぽいね

＞正常動作を保ちながら～とかマウスオーバーされてしまう～
この付近への理解が追いつかない
ソースを見る限り正常な動作してると思うんだよね
マウスカーソルを矢印のままにしたいとかなのかな？

**683** · 2022/08/30(火) 14:46:52.41

リンク先の値表示で、ハイパーリンク上へカーソルを持っていくとブラウザ下方にステータスが表示されますよね
-----
ncode.syosetu.com##.footerbookmark:style(float:left!important;)
ncode.syosetu.com##.footerbookmark > li:style(height:20px!important; font-size:11px!important; line-height:20px!important; margin:2px 15px 2px 0px!important;)
ncode.syosetu.com##.footerbookmark > li > .add_bookmark:style(font-weight:normal!important; color:#aaaaaa!important; border-color:#eeeeee!important; background-color:#ffffff!important;)
ncode.syosetu.com##.footerbookmark > li > .bookmark_delete_url:style(border-left:0px!important; background-color:#ffffff!important;)
ncode.syosetu.com##.footerbookmark > li > a:style(width:100px!important; padding:0px!important;)
-----
こんな感じで便利かつ邪魔にならない最適な表示位置へ変更したものの、無意味な「javascript:void(0)」ポップアップとカーソルポインタの重なりが絶妙にブラクラ状態となってしまい・・・
特定のハイパーリンクのみを、機能は維持しつつもステータス非表示に出来ないかなと

ブックマークのON/OFFは使いたいがいちいち表示される「javascript:void(0)」ポップアップを消したい
そんな願望ですm(vv)m

**Name_Not_Found** · 2022/08/30(火) 15:10:50.79

というか、それはublockとかの広告ブロッカーの話？

**Name_Not_Found** · 2022/08/30(火) 15:27:14.52

>>690
モーダル（ポップアップ）内のボタンを押した時に
JSでデータベースにアクセスするようにしてるからモーダルをスキップするのは諦めろ
Aタグどうこうだけじゃ無理だし君には手に負えない

**Name_Not_Found** · 2022/08/30(火) 15:39:37.64

> 「javascript:void(0)」ポップアップを消したい

「ブックマークに追加」ボタンを押すことで表示されるモーダルを表示させずに
「ブックマークに追加」と「ブックマークを解除」を切り替えたいってこと？
ブックマークボタンの表示はモーダルのcloseボタンでページをリロードさせて切り替えてるし
いずれにしろjavascriptの話だからスレ違いだし、恐らく今使ってる機能拡張で対応するのは
無理じゃないかな

**Name_Not_Found** · 2022/08/30(火) 16:51:24.39

>>692-693
リンク先のステータスを一括非表示とかであればどこかで何度も目にした記憶ですが、やはりリンク単一での処理は無理でしたか
助言有難うございました

**Name_Not_Found** · 2022/08/30(火) 19:31:30.96

課題で作ってるサイトのお気に入りボタンのハートをクリックした後に色付きにしたいのですがcssだけでできますかね？色付きのハートのボタンを画像化するしかないですか？

**Name_Not_Found** · 2022/08/30(火) 19:45:12.00

ここで聞いたらカンニングじゃん？

**Name_Not_Found** · 2022/08/30(火) 20:49:52.70

できるけどカンニングよくない

**Name_Not_Found** · 2022/08/31(水) 00:33:01.93

>>695
CSSでできる
なにかのやり方を調べるスキルはこの先ずっと必要だから、自力でがんばれ

**Name_Not_Found** · 2022/08/31(水) 00:48:20.19

俺はハート型を書くことができない！
実装はアレとアレかなあ

**Name_Not_Found** · 2022/08/31(水) 19:32:39.32

ハートをCSSだけで作ろうと思えば作れる
クリック後に色を反転させることもJS使わずにCSSだけで作ろうと思えば作れる