「Help:ダイナミック・ナビゲーション・ボックス」の版間の差分
削除された内容 追加された内容
コメントアウト タグ: コメントアウト |
|||
| 10行目: | 10行目: | ||
<div style="max-width:480px;min-width:300px;margin:auto auto auto 0;"> |
<div style="max-width:480px;min-width:300px;margin:auto auto auto 0;"> |
||
< |
<syntaxhighlight lang="html4strict"><div class="NavFrame" style="width:70%;"> |
||
<div class="NavHead">[..タイトル..]</div> |
<div class="NavHead">[..タイトル..]</div> |
||
<div class="NavContent"> |
<div class="NavContent"> |
||
[... ここに折り畳み機能を使いたい部分の内容を入れる ...] |
[... ここに折り畳み機能を使いたい部分の内容を入れる ...] |
||
</div> |
</div> |
||
</div></ |
</div></syntaxhighlight> |
||
<div class="NavFrame" style="width:100%;"> |
<div class="NavFrame" style="width:100%;"> |
||
<div class="NavHead">[..タイトル..]</div> |
<div class="NavHead">[..タイトル..]</div> |
||
| 28行目: | 28行目: | ||
<div style="max-width:480px;min-width:300px;margin:auto auto auto 0;"> |
<div style="max-width:480px;min-width:300px;margin:auto auto auto 0;"> |
||
< |
<syntaxhighlight lang="html4strict"><div class="NavFrame"> |
||
<div class="NavHead" style="text-align:left">[..タイトル..]</div> |
<div class="NavHead" style="text-align:left">[..タイトル..]</div> |
||
<div class="NavContent" style="text-align:left"> |
<div class="NavContent" style="text-align:left"> |
||
[... ここに折り畳み機能を使いたい部分の内容を入れる ...] |
[... ここに折り畳み機能を使いたい部分の内容を入れる ...] |
||
</div> |
</div> |
||
</div></ |
</div></syntaxhighlight> |
||
<div class="NavFrame"> |
<div class="NavFrame"> |
||
| 46行目: | 46行目: | ||
<div style="max-width:480px;min-width:300px;margin:auto auto auto 0;"> |
<div style="max-width:480px;min-width:300px;margin:auto auto auto 0;"> |
||
< |
<syntaxhighlight lang="html4strict"><div class="messagebox standard-talk NavFrame"> |
||
<div class="somerandomclass NavHead">[..タイトル..]</div> |
<div class="somerandomclass NavHead">[..タイトル..]</div> |
||
<div class="NavContent anotherclass"> |
<div class="NavContent anotherclass"> |
||
[... ここに折り畳み機能を使いたい部分の内容を入れる ...] |
[... ここに折り畳み機能を使いたい部分の内容を入れる ...] |
||
</div> |
</div> |
||
</div></ |
</div></syntaxhighlight> |
||
<div class="messagebox standard-talk NavFrame"> |
<div class="messagebox standard-talk NavFrame"> |
||
<div class="somerandomclass NavHead">[..タイトル..]</div> |
<div class="somerandomclass NavHead">[..タイトル..]</div> |
||
2020年7月6日 (月) 11:39時点における版
ウィキペディア日本語版のヘルプページです。
ダイナミック・ナビゲーション・ボックス（Dynamic Navigation Boxes）について説明します。ナビゲーションボックスの内容の表示/非表示を切り替えできるように、JavaScriptとスタイルシートによって実現したものです。
使用方法
divタグを使うことで実現できます。divタグのクラスにNavFrame、NavHead、NavContentを入れるだけです。
テンプレート{{Hidden}}はこの機能を利用していますので、簡単な場合はそちらのテンプレートを使うとよいでしょう。
サンプル例（divタグ）
<div class="NavFrame" style="width:70%;">
<div class="NavHead">[..タイトル..]</div>
<div class="NavContent">
[... ここに折り畳み機能を使いたい部分の内容を入れる ...]
</div>
</div>
[..タイトル..]
[... ここに折り畳み機能を使いたい部分の内容を入れる ...]
サンプル例（divタグHead・Content左寄せ）
<div class="NavFrame">
<div class="NavHead" style="text-align:left">[..タイトル..]</div>
<div class="NavContent" style="text-align:left">
[... ここに折り畳み機能を使いたい部分の内容を入れる ...]
</div>
</div>
[..タイトル..]
[... ここに折り畳み機能を使いたい部分の内容を入れる ...]
クラス混在の例
<div class="messagebox standard-talk NavFrame">
<div class="somerandomclass NavHead">[..タイトル..]</div>
<div class="NavContent anotherclass">
[... ここに折り畳み機能を使いたい部分の内容を入れる ...]
</div>
</div>
関連項目