MadCap Flare: CSS に関するヒントとコツ

これは、独立系コンサルタントであり、MadCap Software Advanced Developer の資格を持つ Jay Slagle 氏による寄稿記事です。

この記事では、MadCap Flare でスタイルシートを管理するための簡単なテクニックを紹介します。ここでは、CSS の汎用クラスについて説明し、マージンとパディングを設定するための省略表記を取り上げ、普段使わないスタイル クラスを Flare のインターフェイスに表示しないようにする方法を紹介します。

汎用スタイル クラス

汎用クラスは、見出し、標準段落、div コンテナなど、あらゆる要素に適用できる CSS スタイルで、要素の機能を個別に変更するのに便利です。スタイルシートでは、汎用クラスはピリオドで始まり、p や div などの要素指定は省略されます。以下の汎用クラスは、それぞれテキストを列の中央と右に配置します。

.CenterText
{
text-align: center;
}

.RightText
{
text-align: right;
}

例えば、他のクラスが割り当てられていない段落や見出しのテキストを中央に配置する必要がある場合、簡単に汎用クラスを適用できます。上記の .CenterText クラスを使用することで、以下のクラスのセットを置き換えることができ、リボンバーの [ホーム] タブにある [中央揃え] ボタンを使用する必要もありません。

p.CenterText,
div.CenterText,
h1.CenterText,
h2.CenterText,
h3.CenterText,
h4.CenterText,
h5.CenterText,
h6.CenterText
{
text-align: center;
}

ヒント: ほかの CSS クラスと同様に、汎用クラスには任意の名前を付けることができるため、クラスの機能を明確に示す名前を付けましょう。

印刷出力用の汎用クラス

汎用クラスは印刷出力にも対応しており、PDF のレイアウトを微調整するのに非常に便利です。以下は、印刷出力で改ページを強制する汎用クラスの例です。最初のクラスは、改ページ位置の前の要素に適用します。

.PageBreakAfter
{
page-break-after: always;
}

次のクラスも改ページを強制しますが、このクラスは改ページ位置の後の要素に適用します。

.PageBreakBefore
{
page-break-before: always;
}

また、可能な場合、汎用クラスを使用して特定の位置での改ページを避けることができます。

.NoPageBreakAfter
{
page-break-after: avoid;
}
.NoPageBreakBefore
{
page-break-before: avoid;
}

改ページクラスの使用に関するヒント

  • 同じことをする 2 つのクラスを定義する必要はありませんが、選択肢があると便利な場合もあります。改ページの前にある要素と後にある要素のどちらかにスタイルを適用する方が簡単なこともあります。例えば、いずれかの要素にすでにスタイル クラスが割り当てられている場合です。これについては、以下を参照してください。
  • 要素の前または後の改ページを常に強制または回避する場合は、その要素のスタイルに属性を追加します。このような要素の例としては、見出しや図のキャプションに使用される段落要素などがあります。

見出しレベルの例

汎用クラスは、PDF の目次やブックマーク ペインから特定の見出しを削除するのにも便利です。以下のように、PDF の目次に表示される見出し h1 と h2 を定義したとします (これらは Flare のデフォルト値ですが、スタイルシートで明示的に設定しても問題はありません)。

h1
{
mc-heading-level: 1;
}

h2
{
mc-heading-level: 2;
}

謝辞ページにある見出し <h1> と <h2> を目次に表示させたくない場合、これらの見出しに汎用クラスを適用して、選別することができます。

.NoTOC
{
mc-heading-level: 0;
}

要素への汎用クラスの割り当て

Flare の GUI では、要素の構造ブロックを右クリックしてクラスを選択することで、汎用クラスを割り当てることができます。

また、[スタイル ウィンドウ] (F12 キー) や [StylePicker] (Ctrl + Shift + H キー) を使用して汎用クラスを割り当てることもできます。

スタイルシートの print セクションで汎用クラスを定義した場合、GUI で汎用クラスを適用するには、print に切り替える必要があります。

1 つの要素に複数のクラスを割り当てる

Flare GUI の [StylePicker] では、各要素に 1 つのクラスしか割り当てることができませんが、要素を選択してリボンバーの [ホーム] タブから [属性ウィンドウ] を開き (Shift + F12 キー)、クラス フィールドに別のクラスを入力することで、2 つ目のクラスを追加できます。

また、テキスト エディタを使用して手動で 2 つ目のクラスを追加することもできます。まず、段落要素タグを見つけます。

<h2 class="GlossaryLetter">

次に、引用符の中に 2 つ目のクラス名を追加します。

<h2 class="GlossaryLetter NoTOC">

要素に複数のクラスを割り当てる際の注意点

  • 1 つの要素に 2 つ以上のクラスを割り当てることができますが、CSS 継承の関係上、クラスの順序は重要です。
  • Flare の GUI でメインのスタイル クラスを変更すると、GUI で割り当てられたクラス以外のすべてのクラスが削除されます。そのため、その他のクラスを再度追加する必要があります。

マージンとパディングの値

CSS の省略表記は、スタイルシートのマークアップを直接扱う際に便利です。その中でも、要素のマージンとパディングに関する省略表記は特に役立ちます。

マージンとパディングの違い

マージンとパディングの違いがよく分からないという方のために、簡単に説明します。

  • 要素のマージン値は、その要素と、その要素の上、下、横にあるほかの要素 (またはその要素を含む要素) との間の距離を定義します。
  • パディングは、要素のコンテンツ (通常はテキストや画像) とオプションの境界線との間の距離を設定します。境界線が表示されていてもいなくても、パディング領域には背景色が表示されます。

マージンとパディングの CSS 正式表記

CSS の正式表記では、以下のようにマージンとパディングの値を指定します。

p
{
margin-top: 16px;
margin-right: 14px;
margin-bottom: 12px;
margin-left: 10px;
padding-top: 8px;
padding-right: 6px;
padding-bottom: 4px;
padding-left: 2px;
}

これらの値は、任意の順序で記述することができます。ほかの要素属性と混在している場合、テキスト エディタでスタイルシートを操作する際に、値の検索や変更が複雑になります。

マージンとパディングの CSS 省略表記

CSS の省略表記により、マージンとパディングのマークアップが大幅に簡素化されます。上記の値は、以下のように記述できます。

p
{
margin: 16px 14px 12px 10px;
padding: 8px 6px 4px 2px;
}

値がどのように適用されるか考えるとき、アナログ時計を想像すると良いでしょう。上からスタートして時計回りに進むことで、4 つの値が top、right、bottom、left であることが分かります。

2 つの値を指定することも可能です。その場合、1 つ目の値は top と bottom、2 つ目の値は right と left に適用されます。以下の例では、top と bottom マージンは 16 ピクセルに設定され、right と left マージンは 10 ピクセルに設定されます。

p
{
margin: 16px 10px;
}

1 つの値を指定すると、その値が top、right、bottom、left すべてに適用されます。

p
{
padding: 6px;
}

以下のように、0 を 1 つ指定すると、マージンとパディングはなしになります。

p
{
margin: 0;
padding: 0;
}

3 つの値を指定することも可能です。その場合、1 つ目の値は top、2 つ目の値は right と left、3 つ目の値は bottom に適用されます。

Flare GUI で要素を非表示にする

特定の div や p 要素を開発中のコンテンツに適用しない場合、これらのスタイルを Flare GUI に表示する必要はありません。例えば、著作権情報や PDF ページのフッターに使用される定型文でのみ使用される div や p 要素がある場合、これらの要素を GUI の [StylePicker] に表示する必要はありません。

スタイルシートで Flare 固有の mc-hidden 属性を使用して、要素を非表示にできます。

div.Copyright
{
mc-hidden: hidden;
}

これで、div クラスが GUI に表示されなくなります。

mc-hidden 属性に関する注意点

  • mc-hidden 属性は汎用クラスには効果がないため、mc-hidden を機能させるには、スタイルシート内で要素 (通常は div または p) とクラスを指定する必要があります。
  • Flare GUI のスタイルシート エディタでは、要素のプロパティの Unclassified カテゴリに mc-hidden があります。[ビュー: 高度] と [表示: すべてのプロパティ] を選択してから、mc-hidden までスクロールして、hidden 値を適用します。
  • 要素クラスが GUI で非表示になっていても、テキスト エディタを使用して手動でトピック マークアップにクラスを追加できます。
  • mc-hidden 属性が出力に影響を与えることはありません。

まとめ

CSS には省略表記や便利な機能がたくさんあります。これらのテクニックを身につけることで、CSS デザイナーとして、また Flare ユーザーとして、効率良く仕事ができるようになります。スタイルシートを整理し、柔軟性を最大限に高めながら、定義すべきスタイル クラスの数を最小限に抑えることができます。

MadCap Flare を評価する

MadCap Flare の無料の評価版では、すべての機能を 30 日間ご利用いただけます。また、ご要望に応じて、製品デモで機能をご紹介いたします。

無料評価版は、https://www.xlsoft.com/jp/products/madcap/download.html から入手できます。

MadCap Flare やその他の MadCap 製品についてご不明な点がありましたら、お問い合わせください。

この資料は、MadBlog で公開されている「Simple CSS Tricks and Tips」の日本語参考訳です。

タイトルとURLをコピーしました