YutaKaのPython教室

Python の文法やライブラリ、API、環境構築について画像・動画・ソースコード付きで徹底解説！

トップ > Python超入門シリーズ > Markdownの使い方｜一緒に覚えておきたいhtml付き！

Markdownの使い方｜一緒に覚えておきたいhtml付き！

Python超入門シリーズ Colaboratory

Markdownって名前は聞いたことがあるけど…

  • プログラミングだけでも大変なのにMarkdownまで勉強するのは大変…。
  • Markdownってhtmlタグも使えるから何から覚えていいのかわからない！

という方向けに、

  • Markdown記法の基本的な使い方
  • Markdownと一緒に覚えたいhtmlタグ！

をまとめました。

私も業務でPythonのノートブックを共有するのですが、Markdownを使うようになってから、圧倒的にノートブックが見やすくて・伝わりやすくなったと思います！

 

今回紹介するMarkdown記法、htmlタグは次のノートに整理しています。
≫YutaKaのPython教室｜Markdownまとめ【ノート】

このノートは閲覧専用で共有しているので、自由に編集・実行してください
（いくらいじっても元のノートに影響は出ないので、ご安心を！）
≫ Google Colaboratoryノートの共有方法（権限設定など注意点含む）

Markdownの使い方

Markdownは…

  • 普通に書いたテキストを
  • -, *, ~, |, :などを使ってテキストを装飾設定できる

htmlほど難しくなく、必要十分な機能が備わっているテキスト記法です。

さらに、Markdownと一緒に少しだけhtmlを利用するとより一層見やすくなります！

この記事では、Markdownと一緒に覚えたいhtmlタグも紹介しています。

▲目次へ戻る

見出しの設定

Markdownでの見出しは、次のように設定します。

  • # 見出し名 と書く
  • # の後ろにスペースを忘れない
  • #の個数によって、見出しのレベルを設定可能
項目 Markdownでの書き方 出力イメージ
見出し１ # 見出し１ 見出し１
見出し２ ## 見出し２ 見出し２
見出し３ ### 見出し３ 見出し３
見出し４ #### 見出し４ 見出し４
見出し５ ##### 見出し５ 見出し５
見出し６ ###### 見出し６ 見出し６

ちなみに、見出しを設定しておくと、Google Colaboratoryでは目次が自動生成されます。

▲目次へ戻る

改行の方法（文末でEnterはNG！？）

Markdown記法では、文末での改行１回では改行されません。

次のどちらかの方法で改行します。

  • ソフトブレーク（改行幅小さい）｜文末にスペース×２を入れる
  • ハードブレーク（改行幅大きい）｜空白行を入れる
項目 Markdownでの書き方 出力イメージ
ソフトブレーク
（改行幅小さい）		 
一行目▯▯
二行目
 一行目
二行目
ハードブレーク
（改行幅大きい）		 
一行目
(空白行)
二行目
 一行目
二行目

改行前後での文章の関係性が…

  • 強い⇒ソフトブレーク
  • 弱い⇒ハードブレーク

という使い分けをするとよいと思います。

▲目次へ戻る

文字のフォント設定

  • 文字飾り
  • 文字の色設定

の順番で紹介します。

▲目次へ戻る

文字飾り（太字、斜体、下付き、上付きなど）

太字や斜体、取り消し線は、*, ~で記述します。

下線、上付き文字、下付き文字はMarkdown記法がないので、htmlタグで対応しましょう。

項目 Markdownでの書き方 出力イメージ
太字 **Bold** Bold
斜体 *Italic* Italic
太字＋斜体 ***Bold italic*** Bold italic
取り消し線 ~Strikethrough ~ Strikethrough
下線 <u>Underline</u> Underline&lt
上付き x<sup>2</sup> x2
下付き y<sub>2</sub> y2
▲目次へ戻る

文字の色設定

文字色の指定はMarkdown記法にはないので、htmlタグでfont colorを指定します。

ここではよく使いそうな9色を紹介します。

項目 Markdown記法 出力イメージ
赤 <font color= "red">赤文字</font> 赤文字
青 <font color= "blue">青文字</font> 青文字
緑 <font color= "green">緑文字</font> 緑文字
黄色 <font color= "yellow">黄色文字</font> 黄色文字
灰色 <font color= "gray">灰色文字</font> 灰色文字
紫色 <font color= "purple">紫色文字</font> 紫色文字
紺色（濃紺） <font color= "navy">紺色文字</font> 紺色文字
黄緑（ライム） <font color= "lime">黄緑色文字</font> 黄緑色文字
ピンク（フクシア） <font color= "fuchsia" >ピンク色文字</font> ピンク色文字

htmlタグで使用できる色はネットで調べるとすぐ出てきます。
例えば、こちらのサイトがわかりやすかったです。

▲目次へ戻る

段落設定

次の３つの段落設定について紹介します。

  • 箇条書き
  • チェックボックス
  • 段落番号
▲目次へ戻る

箇条書き

箇条書きは、次のように-を使用して書きます。

- 項目１
- 項目２

- の後ろにスペースを忘れないようにしましょう。

インデントを付けると、サブ項目を設定できます。

項目 Markdown記法 出力イメージ
通常の箇条書き 
- 項目１
- 項目２
  • 項目１
  • 項目２
サブ項目付き箇条書き 
- 項目１
▯- 項目１－１
▯- 項目１－２
- 項目２
  • 項目１
    • 項目１－１
    • 項目１－２
  • 項目２
▲目次へ戻る

チェックボックス

箇条書きの後ろに、

  • [▯]：チェックなし
  • [x]：チェックあり

を追加するとチェックボックスになります。

項目 Markdown記法 出力イメージ
チェックボックス 
- [ ] タスク１
- [x] タスク２
  • ☐タスク１
  • ☑タスク２

ボックスをクリックしても、✔の追加・削除はできません。
変更にはMarkdownを書き換えが必要です。

▲目次へ戻る

段落番号

段落番号は、次のように1.を使用して書きます。

  1. 項目１
  1. 項目２

数字の後ろの.と- の後ろのスペースを忘れないようにしましょう。

インデントを付けると、サブ項目として設定できます。

項目 Markdown記法 出力イメージ
通常の段落番号 
1. 項目１
1. 項目２
  1. 項目１
  2. 項目２
サブ項目付き段落番号 
1. 項目１
▯1. 項目１－１
▯1. 項目１－２
1. 項目２
  1. 項目１
    1. 項目１－１
    2. 項目１－２
  2. 項目２

段落番号を指定する数字は1.だけではなく、

  1. 項目１
  2. 項目２
  3. 項目３

のように、数字を増やして書くこともできますが、
1.で揃えて書いた方が後から項目を増やすときに修正が少なくてすみます。

▲目次へ戻る

プログラムコード

次の2つの書き方があります。

  • インライン（行中に書く）：`バッククォート`で囲う
  • コードブロック（コードの段落作成）：```バッククォート×３```で囲う
    • ```の後に言語名でシンタックスハイライト（見やすい色付け）

 

項目 Markdown記法 出力イメージ
インライン 
繰り返しには`for`を使う
 繰り返しにはforを使う
コードブロック 
```python
# for文で1～9まで出力
for i in range(10): 
    print(i)
```
 
# for文で1～9まで出力
for i in range(10): 
    print(i)
▲目次へ戻る

水平線

画面端まで伸びる水平線です。

項目 Markdown記法 出力イメージ
水平線 --- ———————————

水平線は

  • セクションの区切り
  • 説明分とスクリプトの区切り

に挿入するとノートブック全体が見やすくなります。

▲目次へ戻る

引用

項目 Markdown記法 出力イメージ
引用 >引用文 ｜引用文

URLリンクと組み合わせて、次に記述するとわかりやすいですね。

>Markdown（マークダウン）は、文書を記述するための軽量マークアップ言語のひとつである。  
出典：[Wikipedia(Markdown)](https://ja.wikipedia.org/wiki/Markdown)

⇩⇩⇩出力結果⇩⇩⇩

Markdown（マークダウン）は、文書を記述するための軽量マークアップ言語のひとつである。

出典：Wikipedia(Markdown)

▲目次へ戻る

URLリンク

URLリンクは、次の2つの方法で作成できます。

  1. インライン：[リンクテキスト](URL)
  2. 参照形式：[リンクテキスト][参照名]（[参照名]: URLを別の行に書く）
項目 Markdown記法 出力イメージ
URLリンク（インライン） 
[リンクテキスト](URL)
 リンクテキスト
URLリンク（参照形式） 
[リンクテキスト１][参照名]
[リンクテキスト２][参照名]
 
[参照名]:URL
 リンクテキスト１
リンクテキスト２

参照形式だと、次のようなメリット/デメリットがあります。

  • 参照先が変更になっても、修正が1か所で済む（メンテナンス性高）
  • 参照先URLを別の行に書くので、若干めんどくさい（作業性低）
▲目次へ戻る

画像の挿入

画像の添付は、次の２つの方法があります。

  1. Markdownで記述：![代替テキスト](画像URL)
  2. html imgタグを使用：<img src="画像URL " alt="代替テキスト">

htmlタグはオプションの属性を指定することで、自由度が上がります。

項目 Markdown記法 出力イメージ
Markdown 
![代替テキスト](画像URL)
imgタグ 
<img src="画像URL" alt="代替テキスト">
imgタグ
（マウスを載せてタイトル表示）		 
<img src="画像URL" alt="代替テキスト" 
       title="タイトル">
imgタグ
（画像のサイズ調整）		 
<img src="画像URL" alt="代替テキスト"
       width=50%>
▲目次へ戻る

テーブル

テーブルは、|項目|を組み合わせて作成します。

  • 基本的な作成方法
  • データの左寄せ・中央寄せ・右寄せ

の順に紹介していきます。

▲目次へ戻る

テーブル基本形

作成方法のポイントは次の通りです。

  • |項目|形式で作成
  • ヘッダー行とデータは|---|で区切る
  • 表の上下に空白行が必要
  • |の前後の空白は、表の内容に影響しない
（空白行）
| ヘッダー１ | ヘッダー２ |
|    ---     |    ---     |
|  データA1  |  データB1  |
|  データA2  |  データB2  |
（空白行）

⇩⇩⇩出力結果⇩⇩⇩

ヘッダー１ ヘッダー２
データA1 データB1
データA2 データB2
▲目次へ戻る

データの左寄せ・中央寄せ・右寄せ

データはデフォルトで左寄せになります。

左寄せ、右寄せ、中央寄せにしたい場合には次のように入力します。

  • 左寄せ :--- or ---
  • 中央寄せ :---:
  • 右寄せ ---:
（空白行）
|    左寄せ   |  中央寄せ  |  右寄せ    |
|    :---     |    :---:   |    ---:    |
|      左     |    中央    |    右      |
|      左寄せのデータ      |    中央寄席のデータ    |    右寄せのデータ      |
（空白行）

⇩⇩⇩出力結果⇩⇩⇩

左寄せ 中央 右寄せ
左 中央 右
左寄せのデータ 中央寄せのデータ 右寄せのデータ
▲目次へ戻る

テキストの展開/折り畳み折り畳み

テキストの展開/折り畳みをするにはhtmlタグの

  • <details>
  • <summary>

を使用します。

詳細な説明や理論などは、あえて折り畳んだ方が読み手に伝わりやすい場合があります。

<details>
 <summary>表示するテキスト</summary>
 折りたたむ内容（クリックすると表示される）
</details>

⇩⇩⇩出力結果⇩⇩⇩

 

 

 

 

表示するテキスト 折りたたむ内容（クリックすると表示される）

 

 

 

 

▲目次へ戻る

おわりに

今回は、

  • Markdown記法の使い方
  • Markdownと併用すると便利なhtmlタグ

を紹介しました。

今回紹介したMarkdown記法はこちらのColaboratoryノートで公開しています。
≫YutaKaのPython教室｜Markdownまとめ【ノート】

Google Colaboratoryの使い方はこちらで紹介しています。
≫YutaKaのPython教室｜Google Colaboratory使い方

Twitter@YutaKaでは、ほぼ毎日pythonに関する情報を発信しています。

気楽にツイートしているので、気軽にフォローしてください！