はじめに
こんにちは、piyovateです。
Qiitaで記事やドキュメントを書くときに、
- 画像サイズの指定方法を毎回忘れる
- MarkdownをPDF変換するときの区切り方法を忘れる
…ということがよくあるので、自分用の備忘録としてまとめます。
1. Markdownの画像記法ではサイズ指定できない
よく使うこの記法。
これは 純Markdown なので、
幅（width）や高さ（height）は指定できない。
2. 画像サイズを変えたい場合は <img> を使う
QiitaはMarkdown内にHTMLを書けるので、
<img> タグを使えばサイズ指定ができる。
幅を指定する
<img src="image.png" alt="alt text" width="300">
高さを指定する
<img src="image.png" alt="alt text" height="200">
幅と高さを両方指定する
<img src="image.png" alt="alt text" width="300" height="200">
※ 縦横比が崩れる可能性があるので注意
3. MarkdownをPDF変換するときに区切りたい場合（小技）
Markdownを PDFに変換する用途 で使っていると、
「ここから次のページにしたい」という場面がある。
そのときに使っているのが以下。
<div style="page-break-before: always;"></div>
使いどころの例
ここまでが前半の説明。
<div style="page-break-before: always;"></div>
ここから後半の説明。
補足
- Web表示（Qiita上）では見た目はほぼ変わらない
- PDF変換時や印刷時にページ区切りとして効く
- ブラウザの「印刷プレビュー」で確認可能
Markdown → PDF 変換を前提にしたときの ちょっとした小技。
まとめ
- Markdownでは
<img>を使えば幅・高さを指定できる - MarkdownをPDF変換するときは
<div style="page-break-before: always;"></div>が便利 - いいね 👍 やストック 📦 してもらえると励みになります！
- それでは、また次回の記事でお会いしましょう ✨