69
-
1 初版作成者
2023/04/25(火) 04:18:30 ID: bSg3nHotVw
クリックしたら内容変わる記事は全部ネガティブマージンなんだろうと思って作ったけど、四コマお絵カキコはこれ使わずに内容切り替えできててヤベってなってる
記事名「クリックすると内容が変わる記事一覧」とかにしとけばよかったかも… -
👍1👎0
-
2 ななしのよっしん
2023/05/01(月) 08:53:58 ID: xFpIpImofG
はえ～、いったいどうなってるんだと思ってたけどこういうことだったんすね～。
>>1
記事ができてからあまり日数経っていないし、本文検索してもまだ「一覧の一覧」しか引っかからないし、一覧に挙げられている記事の中にネガティブマージン遷移を内容の切り替え以外に使っているものがなければ今のうちに記事名変更して本文もちょっと書き替えたらいいんじゃないんすかね
-
👍2👎0
-
3 初版作成者
2023/05/03(水) 23:11:31 ID: bSg3nHotVw
記事名変更しました
素人なりに設定方法を書きましたが、間違ってましたらご指摘下さい。。 -
👍2👎0
-
4 ななしのよっしん
2023/05/03(水) 23:18:28 ID: 1mC/vLT6HH
解説ありがとナス！ほめておいたよ！
…
……
………それはそれとして作成者、お前は殺す（ﾃﾞﾃﾞﾝ！） -
👍6👎0
-
5 ななしのよっしん
2023/05/04(木) 05:35:40 ID: 6MVPex+VMx
＞ここをクリックするとスカートの中が見えるよ♡
そんな餌に釣られないクマー（パクッ！） -
👍8👎0
-
6 ななしのよっしん
2023/05/04(木) 06:55:25 ID: xFpIpImofG
急上昇おめ！
-
👍1👎0
-
7 cyan
2023/05/04(木) 08:27:12 ID: RURHWXybSS
もしかして「釣られたなポッター」のフォイが持ってるカードって《閃光の守護者ホーリー》?
-
👍1👎0
-
8 ななしのよっしん
2023/05/04(木) 09:27:17 ID: 4LL/4+6lAK
-
👍1👎0
-
9 ななしのよっしん
2023/05/04(木) 09:30:03 ID: 0Ji+/J/mOd
-
👍4👎0
-
10 ななしのよっしん
2023/05/04(木) 09:54:46 ID: BsrMzG8Kwm
-
👍3👎0
-
11 ななしのよっしん
2023/05/04(木) 10:14:20 ID: 10X82TMYcs
面白い記事だなｗ
-
👍0👎0
-
12 ななしのよっしん
2023/05/04(木) 10:18:01 ID: OV4SpdT2O+
-
👍0👎0
-
13 ななしのよっしん
2023/05/04(木) 13:15:27 ID: s6JYVtnJUC
ワイちゃんDevToolsでフォイをdisplay:noneに書き換えるファインプレー
-
👍3👎0
-
14 ななしのよっしん
2023/05/04(木) 13:22:03 ID: RSUY4d+T83
黙れマルフォイ！
https://lohas.ni coseiga. jp/thumb /1090117 9i 
https://lohas.ni coseiga. jp/thumb /1111979 4i
-
👍7👎0
-
15 ななしのよっしん
2023/05/04(木) 13:30:09 ID: 6MVPex+VMx
-
👍0👎0
-
16 ななしのよっしん
2023/05/04(木) 13:33:18 ID: RSUY4d+T83
さて、わしの計算に間違いがなければ飾りつけを変えねばの
>>im10901179
>>im11119794
-
👍11👎0
-
17 ななしのよっしん
2023/05/04(木) 13:46:30 ID: CMLEorDALV
一番下の水着姿を「どうせマルフォイだろ」と思いつつもクリックしてしまう悲しき性
-
👍13👎0
-
18 ななしのよっしん
2023/05/04(木) 14:05:31 ID: kwMe2ZGTxR
「クリックすると内容が変わる記事一覧」の記事タイトルと説明ですとsummary/detailsを使っていれば広義では全て該当するとも言えてしまいます
クリックで切り替えできるだけが条件だと、割と簡単に作れてしまうので一覧にしようとすると切りが無い部類だとは思います（この手法を使っている編集者のユーザー記事を見ているとちょこちょこ出てきます）
記事名変更前の「ネガティブマージン遷移が使われている記事一覧」の場合は、記事サイドの余白を消すためだけに使われることもあるため、記事名を変更されたものの記事の要件定義段階の趣旨がいまいちハッキリしていないように思われます
ちなみにクリック以外の操作で表示を変えるネガティブマージンを使ったギミックも存在します
クリック以外の操作で表示を変えるネガティブマージンを使わないギミックも存在します
この記事では何をどこまで扱いたいのでしょうか？ -
👍1👎0
-
19 ななしのよっしん
2023/05/04(木) 14:25:18 ID: Pg5P+ujLEI
>>18
記事冒頭に「ある場所をクリックすることで内容が変化する記事」って書いてあるじゃん。
というか一覧系記事は情報はたくさんあれば良いタイプなんだから、切が無い方が良い状況だと思うけどね。 -
👍1👎0
-
20 ななしのよっしん
2023/05/04(木) 14:26:08 ID: bSg3nHotVw
>>18
summary/detailsは…記事作成時に自分が求めてたものとは違うなーと思ったのでちょっと例外にしたいですね…
> ちなみにクリック以外の操作で表示を変えるネガティブマージンを使ったギミックも存在します
>クリック以外の操作で表示を変えるネガティブマージンを使わないギミックも存在します
不勉強ですみません、差し支えなければその記事教えて下さい…
見て一覧の対象にするか判断します -
👍2👎0
-
21 ななしのよっしん
2023/05/04(木) 14:32:30 ID: Pg5P+ujLEI
>>20
例外するとかそういう事をするなら、
「掲載条件をこうします」的な話はちゃんと通してからにした方が良いよ。 -
👍1👎1
-
22 ななしのよっしん
2023/05/04(木) 15:04:15 ID: bSg3nHotVw
>>21
自分としては記事の図でいうなら「ACからBCに入れ替わる」ような記事をまとめたいと思ってまして、summary/detailsのように隠した内容を表示させる「ABからABCに増える」というのは…イメージではなかったなと
（その場合cosMo(暴走P)は本質的には「イメージではない」になるんですが。。「空白スペース」というAが入れ替わって「文章」というBが出てくるというのもAC→BCではあると思っています） -
👍1👎0
-
23 ななしのよっしん
2023/05/04(木) 17:45:16 ID: bSg3nHotVw
一旦条件追記しました
クリック以外で変化する記事については、松本香子などの場合だと高度過ぎて今の自分の手に負えないので、クリック限定にします。。 -
👍1👎0
-
24 ななしのよっしん
2023/05/05(金) 20:14:44 ID: scQndwPPpJ
早速ネガティブマージン使って記事書いてみたけど、なんというかうまくいかない……投稿直後にスマホで遷移しなかったから無理やりdivでごまかしたけど、もっと研究が必要ですね……
-
👍0👎0
-
25 ななしのよっしん
2023/05/06(土) 01:10:06 ID: W3tqcyi2Tg
Loop Heroとかピコジュークボックスもそうかな？
-
👍0👎0
-
26 ななしのぎみっくさん
2023/05/06(土) 22:30:35 ID: nqNf+Zhq27
クリックでの遷移は左右のネガティブマージンを使った方法も
根本的にはoverflow: hidden;で一定の表示領域外を表示しない方法の元で実現しています。
縦に配置するか横に配置するかの違いです。
これはニコニコ大百科にスマホ版ができたことにより従来のように縦に配置すると
スマホ版では中身の文章の改行折り返しなどで表示領域の高さが足りなくなったりするのを回避するためのものです。 -
👍0👎0
-
27 ななしのぎみっくさん
2023/05/06(土) 22:44:52 ID: nqNf+Zhq27
横配置のメリットは、それぞれの表示領域の高さが不揃いでも、
高さ(height)指定無しで隠れている部分を含めた全体の高さに合わせて遷移する領域を作ってくれることです。
デメリットとしては、PC版、スマホ版の追従ヘッダー(スマホだと「ほめる」「広告する」ボタンなとの部分)を
アンカーへのジャンプ時に避けて移動するスクリプトが働いていて、
iOSだと縦の移動がないのでジャンプしないという欠点があります。
1pxでも縦移動を伴えば通常通り遷移するので
margin-top: 1px;
margin-top: 2px;
…と、それぞれの表示領域に縦移動を伴わせれば遷移可能になります。 -
👍0👎0
-
28 ななしのぎみっくさん
2023/05/06(土) 23:10:08 ID: nqNf+Zhq27
また、summary,detailsタグでの…との話しが上でありましたので
通常はそんな使い方しないですが…との前提で話すと
<div style="height: 200px; overflow: hidden;">
<div style="height: 150px; padding-top: 50px; background: blue;">変わる前の内容</div>
<details style="height: 200px; margin-top: -200px; background: red;">
<summary style="height: 50px;">クリックで変わる</summary>
<div style="height: 150px; background: green;">変わった後の内容<br>変わる前の内容と重なって表示される</div>
</details>
</div>
と、重なって表示されるような形にするのも可能です -
👍0👎0
-
29 ななしのよっしん
2023/05/06(土) 23:39:25 ID: bSg3nHotVw
>>26-28
ご指摘本当にありがとうございます。
これを基に記事内容を修正させていただきます。
>>28…そういう方法があるんですね… -
👍0👎0
-
30 ななしのよっしん
2023/05/09(火) 23:42:51 ID: W3tqcyi2Tg
興味ないね＆Baldi's Basics in Education and Learning
APE OUTもクリックすると記事変わるけどここのとはやり方が違うっぽい
新堂誠は単にアンカー入ってるだけかな -
👍0👎0