Work Life Fun

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

※当サイトはリンクに広告ページが含まれている場合があります

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

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

デフォルトは上下中央の設定

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

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

今まで作成してきたKeynoteのデザインを再現したいですし、見出しの位置は固定したいところ。

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

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

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

section {
    justify-content: start;
}

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

わかりにくいかもしれないので、Before Afterを載せておきます。

Before

After

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

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

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

社労士のための「ほどほど」お悩み相談室

あなたのご質問・ご相談に、月1回、無料・本音で回答します。

ご質問・ご相談は、登録後に届くメールから送っていただけます。費用は一切かかりません。「お悩み相談室」というクローズドな場だからこそ、踏み込んだ内容の質問にも回答できます。

これまでに、こんなご質問・ご相談に回答してきました。

  • コンサル(3号業務)を主力業務にするには、どうすれば良いか?
  • どのようにして顧問料を上げれば良いか?
  • 営業が苦手で、新規の顧客獲得ができない
  • 業務をどう絞り込めば良いか?
  • 一人社労士のままで良いのか、人を雇うべきか?
  • 苦手・相性の悪い顧問先と、どう付き合うか?
  • 生成AIの時代、社労士は今後どう生き残るか?

なぜ、無料で同業の社労士からの相談に乗るのか?

それは「本当に顧客のために活動できる社労士仲間を増やしたい」からです。

私自身、社労士という資格に誇りを持っています。企業からの社労士に対する不満をよく聞きますし、「社労士なんて役に立たない」と思われることは、正直悔しいです。

  • 信頼される・信頼できる社労士の仲間を増やしていきたい

そんな想いから、少しでも社労士業界全体のレベルアップに貢献できればと考えています。

    登録は無料・月1回配信・配信解除いつでも可能
    ※ 登録後、本人確認のメールをお送りします。届かない場合は迷惑メールフォルダもご確認ください。


    up_line