2
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

【目指せ完走賞】hataのワクワクしたことまとめAdvent Calendar 2023

Day 21

HTMLでのマークアップに慣れている人がMarkdown記法と仲良くなるために覚える優先順位

Posted at

はじめに

 Qiitaの記事で初めてmarkdown記法と出会いました。

 今までHTMLでサイトを作ったり、WordPressがブロックエディタ(Gutenberg)に代わる前はHTMLで書いていたので、その違いにかなり戸惑いました。

 ただ、苦労しながら覚えて思ったのが、「HTMLで身につけた考え方が、Markdown記法にもかなり役立っている」ということです。

 全く初めてでMarkdownを触り始めるよりも有利なところにいると思うので、まずは覚える表現の優先順位づけをすると、苦手意識がなくなると思います。

全ては網羅していないので、Qiita公式さんの素敵チートシートをご参考ください!

Markdown記法 チートシート

HTMLでのマークアップに慣れている人がMarkdown記法と仲良くなるために覚える優先順位

1. 見出し(<h1><h2><h3><h4>

 Markdown記法では、#を重ねることで見出しのレベルを表現できます。
#の後に半角スペースを入れるのをお忘れなく。

htmlの場合

<h1>Hello</h1>
<h2>World</h2>
<h3>Merry</h3>
<h4>Christmas</h4>

markdown記法の場合

# Hello
## World
### Merry
#### Christmas

出力

※目次に影響が出てしまうのでスクリーンショット貼り付け

スクリーンショット 2023-12-23 10.56.01.png

2. 箇条書き・番号付きリスト

  • 箇条書きリスト
    文頭に""をつけることで表現できます。""の後に半角スペースを入れるのをお忘れなく。
  • 番号付きリスト
    「1.」などの数字を入れることで表現できます。"."の後に半角スペースを入れるのをお忘れなく。

htmlの場合

# 箇条書きリスト

<ul>
    <li>あんぱん</li>
    <li>食パン</li>
    <li>カレーパン</li>
</nl>

# 番号付きリスト

<ol>
    <li>あんまん</li>
    <li>豚まん</li>
    <li>カレーまん</li>
</ol>

markdown記法の場合

# 箇条書きリスト
* あんぱん
* 食パン
* カレーパン

# 番号付きリスト
1. あんまん
2. 豚まん
3. カレーまん

出力

  • あんぱん
  • 食パン
  • カレーパン
  1. あんまん
  2. 豚まん
  3. カレーまん

3. リンクの貼り方

  • リンクカードを貼る
    URLをコピペして、上下に空白を入れればOK!
  • 文字リンクを貼る
    タイトルや表示したい文字を[]内に入れて、()内にURLをコピペすればOK!

htmlの場合

# リンクカードを貼る(媒体によって記述方法が異なるので割愛)

# 文字リンクを貼る

<a href="https://qiita.com/advent-calendar/2023/hata">
【目指せ完走賞】hataのワクワクしたことまとめ Advent Calendar 2023
</a>

markdown記法の場合

# リンクカードを貼る(媒体によって記述方法が異なるので割愛)

https://qiita.com/advent-calendar/2023/hata

# 文字リンクを貼る

[【目指せ完走賞】hataのワクワクしたことまとめ Advent Calendar 2023](https://qiita.com/advent-calendar/2023/hata)

出力

【目指せ完走賞】hataのワクワクしたことまとめ Advent Calendar 2023

4. Markdownの調べ方を覚える

 上記三つを覚えておけば、特に何も見なくても大体の記事は書けるようになります!

 もう一つ覚えておくといいのは、Markdownの調べ方です。

  • Qiita公式チートシートを参照する

 冒頭でご紹介したリンクからも飛べますが、もう一つ行き方があります。

 Qiitaの記事エディタ上の上のメニューバーにはてな(❓)があるので、クリックすると、公式チートシートに飛ぶことができます。記事を書いているときに、「あれ? どうやって記述するんだっけ?」と思ったときにご活用ください。

スクリーンショット 2023-12-23 10.46.11.png

スクリーンショット 2023-12-23 10.46.22.png

まとめ

 Markdownは基本タグを閉じなくていいのがめちゃくちゃ楽&便利ですね。(補完してくれるエディタを使えばそこら辺はストレスないのですが)

 個人的に覚えて良かった順番なので、もしかしたら別の順番の方が覚えやすい!という方もいらっしゃるかもしれません。

 自分なりに優先順位を入れ替えつつ、記事執筆を楽しんでいただけると幸いです!

おまけ

 iPhoneやMacで記事やネタメモを書くことが多いので、クラウドで同期できるメモアプリを使用しています。

 Simplenoteでは、Qiitaのように、Markdownで書いた記事のプレビューもできるので、ぜひ試してみてくださいね!

2
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?