Marginを使った表示位置の微調整のソースを表示

== 文字の表示位置を微調整 ==
:インデントで文字位置をずらすことはできますが、場合によってほんの少し位置をずらしたいことがあります。
:例えば以下のような例(ワンダーフォーゲル班のページ)では、展開する表の頭が少し下がってしまいます。また、前後の行との間隔も空いてしまい、不自然な印象を受けます。

'''記述例'''
<div style="margin:-9px 0 -8px 2em; max-width:850px;">
 <nowiki>:頂　5号
:頂　6号
:{| class="mw-collapsible mw-collapsed" data-expandtext="表紙・目次等を見る" data-collapsetext="折りたたむ"
|頂　7号　1959年11月発行　([https://www.dropbox.com/s/peelf6je26wilwo/itadaki7.pdf?dl=0 頂 7号])
|-
|<gallery widths=300px  heights=430px >
ファイル:頂7号 表紙.jpg|<div style="text-align:center; > 表 紙 </div>
ファイル:頂7号 巻頭言.jpg|<div style="text-align:center; > 巻頭言 </div>
ファイル:頂7号 目次01.jpg|<div style="text-align:center; > 目次 01 </div>
ファイル:頂7号 目次02.jpg|<div style="text-align:center; > 目次 02 </div>
</gallery>
|-
| [https://www.dropbox.com/s/peelf6je26wilwo/itadaki7.pdf?dl=0 「頂 7号」PDFファイルへのリンク]
|}
:頂　8号
:頂　9号</nowiki>
</div>
<br>
'''表示例'''
:頂　5号
:頂　6号
:{| class="mw-collapsible mw-collapsed" data-expandtext="表紙・目次等を見る" data-collapsetext="折りたたむ"
|頂　7号　1959年11月発行　([https://www.dropbox.com/s/peelf6je26wilwo/itadaki7.pdf?dl=0 頂 7号])　
|-
|<gallery widths=300px  heights=430px >
ファイル:頂7号 表紙.jpg|<div style="text-align:center; > 表 紙 </div>
ファイル:頂7号 巻頭言.jpg|<div style="text-align:center; > 巻頭言 </div>
ファイル:頂7号 目次01.jpg|<div style="text-align:center; > 目次 01 </div>
ファイル:頂7号 目次02.jpg|<div style="text-align:center; > 目次 02 </div>
</gallery>
|-
| [https://www.dropbox.com/s/peelf6je26wilwo/itadaki7.pdf?dl=0 「頂 7号」PDFファイルへのリンク]
|}
:頂　8号
:頂　9号
:上下にスペースが空いて、行頭も少し下がってしまいました。
<br><br>

:そこで「margin」を使ってマイナス値を「px」で指定します。
'''記述例'''<br>
<div style="margin:-9px 0 -8px 2em; max-width:800px;">
 <nowiki><div style="margin:-8px 0 -8px -3px">
:{| class="mw-collapsible mw-collapsed" data-expandtext="表紙・目次等を見る" data-collapsetext="折りたたむ"
…………
…………
| [https://www.dropbox.com/s/peelf6je26wilwo/itadaki7.pdf?dl=0 「頂 7号」PDFファイルへのリンク]
|}
</div></nowiki>
</div>
<br>
'''表示例'''
:頂　5号
:頂　6号
<div style="margin:-8px 0 -8px -3px">
:{| class="mw-collapsible mw-collapsed" data-expandtext="表紙・目次等を見る" data-collapsetext="折りたたむ"
|頂　7号　1959年11月発行　([https://www.dropbox.com/s/peelf6je26wilwo/itadaki7.pdf?dl=0 頂 7号])　
|-
|<gallery widths=300px  heights=430px >
ファイル:頂7号 表紙.jpg|<div style="text-align:center; > 表 紙 </div>
ファイル:頂7号 巻頭言.jpg|<div style="text-align:center; > 巻頭言 </div>
ファイル:頂7号 目次01.jpg|<div style="text-align:center; > 目次 01 </div>
ファイル:頂7号 目次02.jpg|<div style="text-align:center; > 目次 02 </div>
</gallery>
|-
| [https://www.dropbox.com/s/peelf6je26wilwo/itadaki7.pdf?dl=0 「頂 7号」PDFファイルへのリンク]
|}
</div>
:頂　8号
:頂　9号
<br>
:自然なスペースとなりました。
<br><br>

== 文字数分 移動するには ==
:一文字分移動すると言うような場合は、「em」を使用します。
:以下の記述では、「右1文字、左3文字」分マージンを取るという意味です。
<br>
'''記述例'''
 <nowiki><div style="margin:0 1em 0 3em">
:ここに表や文字などを記述する。
:ここに表や文字などを記述する。
:ここに表や文字などを記述する。
</div></nowiki>
<br><br>
'''表示例'''
<div style="margin:0 1em 0 3em">
:ここに表や文字などを記述する。
:ここに表や文字などを記述する。
:ここに表や文字などを記述する。
</div>
<br><br>
=== 質問・ご意見はこちら ===
:[mailto:wiki_admin@koyamadai100.jp お問い合わせ・ご意見のメールはこちら]
<br>
:上記リンクをクリックしてもメールソフトが起動しない場合は、以下のアドレスをコピーしてメールソフトの「宛先」に貼り付けてください。
:　【担当者メールアドレス】wiki_admin@koyamadai100.jp
<br><br>
----
:　[[動画・音声を再生する| ←「12. 動画・音声を再生する 」]]　　　[[コメント(編集時のみ表示) | ←「13. コメント(編集時のみ表示)」]]　　　[[テンプレートの作成と利用| →「15. テンプレートの作成と利用」]]　　　[[ファイルアップロードと削除| →「16. ファイルアップロードと削除」]]　　　[[管理者用ヘルプ| →「18. 管理者用ヘルプ」]]
:　[[#top| ↑ページトップへ]]　　　　[[メインページ#編集者のためのヘルプ　ヘルプを表示／非表示| ↑↑「メインページ」の「編集者のためのヘルプ」に戻る]]　　　[[メインページ| ↑↑「メインページ」トップに戻る]]
<br>
----
脚注：　<references/>
<br>
･<br>
<div Align="right">
<span style="color:white;">
{{REVISIONYEAR}}年{{REVISIONMONTH1}}月{{REVISIONDAY}}日：直近編集者：{{REVISIONUSER}}<br>
TimeStamp：{{REVISIONTIMESTAMP}}
</span>
</div>