本記事では、ある場所をクリックすることで内容が変化する記事を挙げる。
本記事における「内容が変わる」とは、記事を開いた通常の表示内容から、文字や画像など記事内の要素をクリックすることで別の表示内容に「切り替わる」ことを指す。
なお、以下は対象外とする。
- detailタグ・summaryタグを用いた、折りたたみで隠した要素を開閉で表示させる記事
- 「記事内の要素のクリック」以外の操作で内容が変化する記事
- ユーザー記事（晒し防止のため。ユーザー本人による追加は歓迎です。）
また、設定方法についても併せて解説する。
①overflow: hidden; のみを使っている記事一覧
- Eve(VTuber)
- SCP-280-JP
- Oktavia von Seckendorff
- 艦隊これくしょん〜艦これ〜
- カンブリアモンスター
- グミぞく
- cosMo(暴走P)
- 最低
- 選択肢
- 二段階認証
- 日常会話に使える聖書の文言集
- 二要素認証
- 排他的論理和
- パネルクイズ アタック25
- Project A.I.D
- ポニ子
- まっちょしぃ
- 回らずにいられる自信がない…
- メドレー制作者の一覧
- 安福莉子
- 四コマお絵カキコ
- ラストコマンド
- REVERSUS
- りゅうのあな
他にありましたら追加お願いします。
方法
overflowとは「要素のボックスからはみ出た部分をどう扱うか」の指定であり、これをhiddenにすることで「はみ出た部分を隠す」ことができる。
要素のボックスの範囲を固定し、クリック後に表示したい内容を、要素のボックスからはみ出た部分に記述することで、普通に記事ページを開いただけでは表示されないようにできる。
下図太線の要素ABのボックスの範囲をA分のみにした場合、Bは表示されなくなり、ACのみが表示される。
そしてA内の文字か画像に<a href="#任意のname">を設定し、B内に<a name="任意のname">を置くことで、hrefをクリックするとBに遷移し、BCが表示されるようになる。
要素のボックスの範囲に合わせた内容と遷移場所を設定する必要があり、これを考慮しないと「Bだけを表示させるつもりがAの下部も見えてしまっている」等、表示内容のズレを起こしてしまう。
| A (はみ出てない) |
A | |
| B (はみ出ている) |
➡ | C |
| C | ↑ こう見えてる |
|
[遷移 |
↓ |
すると] |
| A (はみ出ちゃった) |
B | |
| B (はみ出なくなった) |
➡ | C |
| C | ↑ こう見えてる |
使用例[1]
②overflow: hidden; とネガティブマージンを使っている記事一覧
- アイススティック
- 赤だけ色あせ看板
- アデネラ
- アライさんマンション
- 鬼越トマホーク
- 帯に短し襷に長し
- カタタタキ多々鷹
- Katana ZERO
- Keep Talking and Nobody Explodes
- きりたんのSCPテレビショッピング
- 興味ないね
- 健康と美容のために、食後に一杯の紅茶
- 現実改変
- こおりのぬけみち
- 佐久間まゆ
- ずっと真夜中でいいのに。
- たてる
- チームゆっくり
- 重複
- 東海オンエア
- 【東方】Bad Apple!! ＰＶ【影絵】
- 日本語の誤用
- 抜きゲーみたいな島に住んでる貧乳はどうすりゃいいですか？
- 抜きゲーみたいな島に住んでる貧乳はどうすりゃいいですか？2
- 肺が ん
- Baldi's Basics in Education and Learning
- 反転
- ハンマーカンマー
- 光害
- ピコジュークボックス
- ピコジュークボックス（東方project）
- ひでむし
- ヒント
- ベロリンマンシミュレータ
- 密です
- 見て！○○が踊っているよ
- 未来
- 雪ねぇの部屋
- ランドセルの色は何色ですか？
- ルイザ・グロス・ホロウィッツ賞クイズ
- Loop Hero
- ルルルタタ
- 「○○了承…。」「嗚呼…××…」
他にありましたら追加お願いします。
方法
marginとは「要素の外側の余白をどれくらいの大きさにするか」の指定であり、これをマイナス(ネガティブマージン)にすることで「要素の外側への配置」ができる。
ニコニコ大百科では、margin-rightをマイナスの値にすることで、通常の記事ページでは見えない場所に要素を配置できる。
Aを「float: left;(要素を左側に寄せる)」に設定し、その下にBを「float: right;(要素を右側に寄せる)」に設定＆margin-rightをマイナスに設定することで、Aの右の見えない場所にBを置くことができる。ABをまとめて「overflow: hidden;」を指定し、その後続けてCを記載した場合、ページを開くとACのみが表示される。
そしてA内の文字か画像に<a href="任意のname">を設定し、B内に<a name="任意のname">を置くことで、hrefをクリックするとBに遷移し、BCが表示されるようになる。
「margin-rightのマイナスの値」は、閲覧者の画面拡大設定や使用機器・端末の画面サイズに依存するため、絶対にコレという値はなく、人によっては正常に遷移できない場合がある。
| A | B | |
| C | ↑ | |
| ↑ これが見えてる |
ネガティブ マージン |
|
[遷移 |
↓ |
すると] |
| A | B | |
| C | ||
| ↑ 見えなくなる |
↑ これが見えてる |
使用例[2][3]
③detailタグとperspectiveを使っている記事一覧
他にありましたら追加お願いします。
方法
perspectiveとは、「その要素の奥行きをどうするか」の設定であり、これを設定することで、2つの要素を前後に配置できる。
ニコニコ大百科では、これとdetailタグを組み合わせることで、開閉で表示する内容を、直下の表示内容の手前に表示できる。
通常、detailタグによる開閉で、折り畳んで隠したAを表示させると、直下にあるBは開閉に合わせて下に移動するようになっている。(本記事では、このパターンは掲載対象外としている。)
これについて、Aに対しperspectiveを0以上(単位は問わない)に設定することで、Aに対し奥行きが設定される。この上でAまたはBの配置をmargin等で調整し、Aが表示される位置にBを配置すると、折り畳みを開いた際、AはBを上書きするように表示できる。
①②と異なりBが表示されなくなるわけではなく、あくまでAの裏にはあるため、例えばAを文字のみとした場合、Bの手前にAの文字が重なって表示される。
文字情報を完全に切り替える場合は、Aに背景色を設定する等してBを見えなくするように対応する。
| 通常 | ||
| 閉じdetail | 開きdetail | |
| B | ➡ | A |
| C | B | |
| C | ||
[perspectiveを |
↓ |
設定すると] |
| 閉じtail | 開いtail | |
| B | ➡ | A(裏にB) |
| C | C |
使用例
もうセクシーだからクリックしなくて良いよね♡
|
この記事は第783回の今週のオススメ記事に選ばれました！ よりニコニコできるような記事に編集していきましょう。 |
|
|
この記事は百ッカデミー賞2024にて 「運営が選ぶ2023年ベスト記事」に選ばれました！ ありがとうございます！ |
注意
- ①②の場合、遷移後にブラウザで「戻る」を行うと、遷移が正常に機能しなくなる。
- 見えない要素の記載は、ニコニコ大百科の制限の許す限り設定可能だが、あまりやり過ぎるとページが重くなってしまい、閲覧者にとって不親切になってしまう。
記事内容とのバランスを考慮しながら適度に使うことを推奨する。
関連項目
脚注
- *引用元：最中かーる さんのイラスト一覧 - ニコニコ静画 (イラスト)
- *引用元：天城桜 さんのイラスト一覧 - ニコニコ静画 (イラスト)
- *この使用例では上部にhrefを配置しており、遷移元と遷移先の<a>要素の高さの位置が同じとなっているが、同じ高さにある遷移が連続する場合、閲覧環境によっては遷移が機能しない場合がある。これについては、遷移先の<a>要素に対しmargin-topなどで位置に差をつけるか、遷移先の<a>要素の直前に空白の段落を追記する等して対応する。また、この使用例では遷移先の位置調整にdivを設定している。
親記事
子記事
- なし
兄弟記事
- 61
- 0pt
