文字入力が劇的に楽になる!初心者向け「マークダウン(Markdown)」超入門ガイド
前回の記事では、ホームページの表示速度を爆速にしてセキュリティも最強にする「静的サイトジェネレーター(Pelican)」の魅力をご紹介しました。
その中で、「記事はメモ帳などのテキストエディタに文字だけで書けばOK」とお話ししましたが、「見出しをつけたり、文字を太字にしたりする装飾はどうやるの?」と疑問に思った方も多いのではないでしょうか。
「やっぱり難しいHTMLのコード(タグ)を覚えないといけないの?」
いいえ、そんな心配は一切いりません!そこで登場するのが、今回ご紹介する「マークダウン(Markdown)」という文字入力のルールです。
マークダウンを使えば、難しいコードを自分で入力する必要はなくなります。まるで普段使っている「メモ帳」にメッセージを打ち込むような手軽さで、誰でも一瞬で綺麗に装飾されたブログ記事が書けるようになるのです。
今回は、これだけ覚えれば今すぐ静的サイトのブログ記事が書けるようになる「基本の書き方4選」を、どこよりも分かりやすく解説します。
当サービスのレンタルサーバー環境で、より快適でスピーディなサイト運営を行うための第一歩として、ぜひ参考にしてみてください!
この記事のポイント
- マークダウンの本質:HTMLコードを使わず、簡単な記号だけで文章を装飾する仕組み
- サクサクサク進む理由:画面に難しいタグが出ないため、文章を書くことだけに集中できる
- 基本の4選:ブログ運営に必要な「見出し」「太字」「箇条書き」「リンク」をマスター
1. そもそも「マークダウン」って何?
「マークダウン(Markdown)」という言葉を初めて聞いた方もいるかもしれませんが、実はこれ、多くのエンジニアやブロガーが愛用している「文章を効率よく書くための仕組み」です。
一言でいうと、「難しいHTMLタグを使わずに、簡単な記号だけで文章を装飾できる文字のルール」のことです。
これを使うと、ホームページの記事作成がどれくらい楽になるのか、従来のHTMLの書き方と比較してみましょう。
HTMLコードを書かなくていい魔法のルール
普通、ホームページで「見出し」を作ったり「太字」にしたりする場合、以下のような難しいHTMLタグを自分で入力する必要があります。
- HTMLでの書き方:
<h1>1. そもそもマークダウンって何?</h1>
<strong>ここを太字にします</strong>
文字を入力するたびに、半角の < や > などの記号で文字を囲まないといけないので、文章を書くリズムがどうしても止まってしまいますよね。
それがマークダウンを使うと、以下のように一瞬で書けてしまいます。
- マークダウンでの書き方:
# 1. そもそもマークダウンって何?
**ここを太字にします**
文頭に「#」を置いたり、文字を「**」で挟んだりするだけで、中身はこれだけで終わりです。
ホームページの文章作成が「メモ帳」感覚でサクサク進む理由
マークダウンの一番のメリットは、パソコンに最初から入っている「メモ帳」のようなシンプルなソフトを使って、普通の文章を入力するのと同じスピードで記事が書ける点にあります。
画面に難しいコードが並ばないため、書いている途中でも文章全体がとても読みやすく、「記事を書くこと」そのものに集中できるようになります。
「これなら自分にもできそう!」と思えてきたのではないでしょうか?
2. これだけ覚えればOK!基本の書き方4選
マークダウンにはたくさんの書き方がありますが、一般的なブログ記事やホームページの文章を書くノウハウであれば、まずは次の4つだけを覚えれば十分です。
これらを使うだけで、見栄えの良い綺麗な記事が完成しますよ。
① 見出し:文頭に「#」を入れるだけ
文章の区切りとなる「見出し」を作りたいときは、文頭に半角の「#(シャープ)」を入力して、その後に半角スペースを1つ空けて文字を書きます。
# 大見出し(HTMLのh1タグに変換されます)## 中見出し(HTMLのh2タグに変換されます)### 小見出し(HTMLのh3タグに変換されます)
「#」の数が増えるほど、小さな見出しになっていきます。この記事でも、章の区切りにこのルールを使っています。
② 太字:文字を「**」で囲むだけ
文章の中で特に強調したいキーワードや大切な部分は、半角のアスタリスク2つ「**」で文字を挟みます。
**ここが太字になります**
これだけで、自動的に力強い太字に変換されます。
③ 箇条書き:文頭に「-」を入れるだけ
ポイントを分かりやすく整理したいときの「箇条書き(リスト)」は、文頭に半角の「-(ハイフン)」または「*(アスタリスク)」を入力し、半角スペースを1つ空けて文字を書きます。
- 箇条書きの項目1- 箇条書きの項目2
自動的に綺麗な点が付いたリスト形式に整うので、文章の読みやすさがアップします。
④ リンク:[文字](URL)で一発つなぎ
他のページへのリンクを貼りたいときは、以下のように組み合わせるだけで設定できます。
[当サービスの公式サイト](https://wisnet.jp)
このように書くと、「当サービスの公式サイト」という文字に、指定したURLのリンクが自動的に埋め込まれます。
3. 前回の「Pelican」でブログを書くとき、どう使う?
基本の書き方が分かったところで、前回の記事でご紹介した静的サイトジェネレーター『Pelican(ペリカン)』でブログを書くときの、具体的な運用の流れをおさらいしてみましょう。
マークダウンを使った記事の更新は、驚くほどシンプルです。
メモ帳にマークダウンで書いて「.md」で保存するだけ!
あなたがやることは、パソコンのメモ帳を開き、先ほどご紹介した「#」や「**」などのルールを使っていつも通りに文章を書くだけです。
書き終わったら、ファイルの保存をするときに少しだけ工夫をします。普段なら「ブログ記事.txt」と保存するところを、「ブログ記事.md」という風に、お尻の文字(拡張子)を「.md」にして保存してください。この「.md」こそが、マークダウンのファイルの印です。
あとはPelicanが自動で綺麗なHTMLに変換してくれる
「.md」のファイルを指定のフォルダに入れたら、前回の記事でご紹介したコマンドをパソコンで1発実行します。
$ pelican content
これだけで、Pelicanが「.md」ファイルを読み込み、マークダウンの記号をすべて正しいHTMLコード(<h1>や<strong>など)へ一瞬で、全自動で変換してくれます。
あなたは難しいHTMLコードを一行も書くことなく、文字を入力しただけで、プロが作ったような綺麗で爆速なWebページが完成してしまうのです。
4. まとめ:まずは1記事、マークダウンで書いてみよう!
今回は、文字入力のスピードを劇的にアップさせ、ホームページ運営をより快適にする「マークダウン(Markdown)」の基本をご紹介しました。
最後に、マークダウンのポイントを振り返ってみましょう。
- 難しいHTMLコードの代わりに、「#」や「**」などの簡単な記号で装飾ができる
- 画面がスッキリするので、文章の作成や推敲にしっかり集中できる
- 前回の記事でご紹介した「Pelican」と組み合わせれば、文字を書くだけで爆速・安全な静的サイトが作れる
最初は「本当に記号だけで大丈夫かな?」と不思議に思うかもしれませんが、一度メモ帳で書いて Pelican で変換してみれば、その簡単さと便利さにきっと驚くはずです。
当サービスのレンタルサーバー環境なら、こうした新しい技術やツールを組み合わせた最先端のサイト運営も、安心・快適に行っていただけます。
まずは1つの見出しと1つの太字からで構いません。ぜひ、あなただけのオリジナルな記事をマークダウンで軽快に書き上げてみてください。