Work Life Fun

Marpの本文を中央から上詰めに変更する方法

作成:
カテゴリー: 業務効率化
タグ: Marp Markdown

Markdownからそのままセミナー資料を作ることができる「Marp」の使い方・設定を試行錯誤しています。

Markdown + CSSによる魅力は、何といっても、一度、デザイン・構図を設定してしまえば、すべての資料に一元的に適用できる点です。

デフォルトは上下方向の中央

Marpのデフォルトの設定では、以下のように、上下方向の中央に、タイトル・本文が集まります。

この設定の場合、文字数・行数によって、見出しの位置が変わるため、なんとなく気持ち悪さが残ります。

今まで作成してきたKeynoteのデザインを再現したいところですし、上詰めの方が一般的な気がします。

きれいな写真を背景に、一言で書いているスライド資料はかっこいいし、その場合は中央から始まるデフォルトの設定の方が良いのですが。。。

本文を上詰めに変更するCSSの設定

sectionタグが本文の全体設定になっているため、本文を上詰めに変更するためには、sectionタグに、以下のスタイルを書けばOKです。


section {
    justify-content: start;
}

以下のように、見出し、本文が上詰めになります。

今回調べてみて知ったのですが、フレックスボックスのレイアウト設定になっているんですね。

ちなみに、justify-content: center; とすれば、デフォルトと同じように中央寄せになります。

参考:Marpで上詰めにする方法

【無料】毎月1回、効率的に人事労務の情報を入手しませんか?

  • 毎年のように改正される労働法令への対応に頭を悩ませている
  • 働き方の見直しといっても、具体的な実務でどう対応すれば良いかわからない
  • 総務や経理などの他の業務を兼務しているので、人事労務業務だけに時間を割けない

といった悩みを抱える経営者・人事労務担当者向けに、公開型のブログでは書けない本音を交えた、人事労務に関する情報・ノウハウ、時期的なトピックをメールマガジンを配信しています。

過去の配信分は公開しません。情報が必要な方は、いますぐ以下のフォームから購読の登録をしてください。購読して不要と思ったら簡単に解除できますのでご安心ください。

なお、あべ社労士事務所では、信頼できる社労士仲間を増やしていきたいという想いから、社労士が業務を行う上で役立つ情報提供も行っています。ご関心があればこちらをクリックしてご登録ください。