1. 現在位置:
  2. トップページ
  3. HP作成tips
  4. stylesheet
ふりがなの位置などを指定 |  表示・非表示 |  印刷時の改ページ部分を指定 |  表にタイトルを付ける |  マージン調整 | 
ふりがなの位置などを指定
ruby {
ruby-align: distribute-space;
ruby-overhang: auto;
ruby-position: above;
}

亜阿吾あああ

ruby-align 「ふりがな」の位置を、左、中央、右、両端揃え、均等、行端揃えで指定
ruby-overhang 「ふりがな」がはみ出る場合に、前後の文字の上にはみ出すかどうかを指定
ruby-position 「ふりがな」の位置を、対象文字の上部か右側で指定
■visibility 表示・非表示を指定
div {
visibility: hidden;
}
visible (表示する)デフォルト
hidden (表示しない)
■page-break-○○ 印刷時の改ページ部分を指定
hr {
page-break-after: always;
}
page-break-before(直前の改ページを制御)
auto (自動)デフォルト
always (直前で改ページする)
avoid (直前の改ページを禁止する)

page-break-after(直後の改ページを制御)
auto (自動)デフォルト
always (直後に改ページする)
avoid (直後の改ページを禁止する)

見出しの直前で改ページしたり、水平線で区切って改ページする場合の例です。
h2 { page-break-before: always; } … 見出し(h2要素)の直前で改ページ
hr { page-break-after: always; } … 水平線(hr要素)の直後で改ページ
■表にタイトルを付ける
(captionタグで指定したタイトルは、表の上部中央に表示)
<caption>表のタイトルを表示</caption>
・グループ化の指定を行っていない場合
tableタグとtrタグの間に記述します。
<table>
<caption>表のタイトル</caption>
<tr>

・グループ化の指定を行っている場合
tableタグとtheadタグの間、またはtableタグとcolgroupタグの間に記述します。
<table>
<caption>表のタイトル</caption>
<thead>
<tr>
キャプション(表題)の表示位置を指定
caption {
caption-side: bottom;
}
top(表の上部に表示)デフォルト
bottom(表の下部に表示)
left(表の左に表示)
right(表の右に表示)
より細かい位置指定
text-align(left、center、right) や vertical-align(top、middle、bottom) プロパティと組み合わせると、より細かい位置指定が可能
caption { caption-side: bottom; text-align: right; }
caption { caption-side: left; vertical-align: middle; }
■margin マージン調整
<div  style="margin-top:★px;margin-left:★px;margin-right:★px;">マージン調整</div>