見出し画像

【中学生でも分かる】マークダウン形式

Seika_USA

こんにちは！アメリカ・シリコンバレー在住のSeikaです😊

今回は、マークダウン形式について、その基本と書き方を分かりやすく説明していきたいと思います。
マークダウンをこれから学習したいと考えている方、
マークダウンってなに？と思った方は、ぜひ読んでみてくださいね。

(2023年10月26日公開）


1.マークダウン形式とは？

マークダウン形式は、文章を書くための簡単な記法（ルール）のことです。特に、テキストファイルで見やすく文章を整えるために使われます。
マークダウン形式のファイルは、`.md` や `.markdown` という拡張子を持つことが多いです。

例えば、`#` を行の先頭につけると、その行は大きな見出しになります。

#をつけると見出しになります。
右側がプレビューです。

2.誰が使うの？

マークダウンを使っている人は様々ですが、以下のようなグループや場面でよく利用されています。

  1. プログラマーや開発者
    ソフトウェアやアプリのドキュメントを書くときに、
    GitHubやBitbucketなどのコードホスティングサービスでマークダウンが頻繁に使われます。
    READMEファイルや説明文書にマークダウンが使われることが多いです。

  2. ブロガーやライター
     一部のブログプラットフォームやCMS（コンテンツ管理システム）は
    マークダウンでの入力をサポートしています。
    そのため、ブロガーやライターが記事を書く際にマークダウンを使うことがあります。

  3. 学生や研究者
    メモを取ったり、報告書を書いたりする際に、簡単にフォーマットされたテキストを作成したいときにマークダウンを利用することがあります。

  4. テクニカルライター
    マニュアルやヘルプドキュメントを書く際に、マークダウンを使用することでシンプルで統一されたフォーマットの文書を作成することができます。

  5. 一般のユーザー
    シンプルなメモやToDoリストを書くためのツールとして、マークダウンをサポートするアプリを使用することが増えています。

  6. プレゼンテーションを作成する人
    一部のツールやサービスでは、マークダウンを使ってスライドショーやプレゼンテーションを作成することができます。

3.メリット

マークダウンのメリットはこちらです。

  1. 簡単に学べる
    記号数が少なく、すぐに覚えられます。

  2. どこでも使える
    マークダウンはテキストベースなので、特別なソフトウェアは不要。
    テキストエディタがあればどこでも書けます。

  3. 見た目がシンプル
    デザインの邪魔をせず、内容に集中できます。

  4. 高い互換性
    テキストベースであるため、異なるプラットフォームやツール間の互換性が高いです。

4.デメリット

デメリットもいくつか挙げられます。

  1. 高度なデザインは難しい
    シンプルな文書は作れますが、複雑なレイアウトやデザインを求める場合には向きません。

  2. 慣れるまで時間がかかるかも
    初めは記号の意味を覚えるのが大変かもしれません。

5.マークダウンを使うためのステップ

マークダウンを使うためのステップを簡単にご紹介します。

1. テキストエディタの準備

マークダウンはただのテキストなので、Windowsの「メモ帳」やMacの「テキストエディット」のような基本的なテキストエディタで書くことができます。
ただし、専用のマークダウンエディタを使用すると、
リアルタイムでのプレビュー機能や便利なショートカットなどが使えるので、より効率的です。

代表的なマークダウンエディタ

  • Visual Studio Code (拡張機能を利用)

  • Atom (拡張機能を利用)

  • Typora

  • MarkText

  • StackEdit (オンライン)

2. マークダウン記法の学習

基本的なマークダウンの記法を学びましょう。

2-1.見出し

# 見出し1
## 見出し2
### 見出し3
#### 見出し4
##### 見出し5
###### 見出し6
見出しが出来ました

2-2.段落と改行

  • 段落は空の行で分けます。

  • 改行は行の最後に2つのスペースを入れるか、`<br>`を使います。

<br>は改行

2-3.強調

*イタリック* または _イタリック_
**太字** または __太字__
***太字とイタリック*** または ___太字とイタリック___
イタリックと太字もできます

2-4.リスト

- 項目1
- 項目2
  - サブ項目1
  - サブ項目2
1. 数字付きの項目1
2. 数字付きの項目2
箇条書き、番号付きリストができました

2-5.リンク

[テキスト](URL)
リンクも貼れます

2-6.画像

![代替テキスト](画像のURL)
画像の挿入

2-7.引用

> 引用文
引用文だと分かります

2-8.コード
インラインコードとは、マークダウン文書の中でテキストをコードのように強調表示するための方法のこと。
主に、文章の中でコードの一部や特定のキーワードをハイライトしたい場合に使用されます。
バッククォート(`)を使ってコードや特定のテキストを強調します。

`コード`
バッククォートを使用し強調しました

2-9.コードブロック
コードブロックとは、マークダウン文書内で複数行のコードやテキストを整形して表示するための方法です。
バッククォート(`)を3つ使うことで、複数行のコードを示すことができます。

```
print("Hello, World!")
print("This is a code block.")
```
見にくいのですが、薄いグレーで囲まれています。

2-10.水平線
水平線を挿入するには、--- または *** を使用します。

水平線
---
***
横線が2本入りました

2－11.テーブル
| と - を使用して列と行を作成します。

テーブル

| ヘッダー1 | ヘッダー2 | ヘッダー3 |
|----------|----------|----------|
| セル1    | セル2    | セル3    |
きれいに揃いました

2-12.チェックボックス
- [ ] で未チェックのボックス、- [x] でチェック済みのボックスを示します。

- [x] チェック済み項目
- [ ] 未チェック項目
未チェックのボックスとチェック済みのボックス

2-13.取り消し線 (一部のマークダウンエディタでのみサポート)
取り消し線は、~~ でテキストを囲むことで実現します。


~~取り消し線~~
文字の上に取り消し線が引かれています

3. マークダウンで文章を書く

書き方が分かったらVisual Studio Codeなどのエディタを開き、
実際に文章を書いてみましょう。

4. プレビュー

多くのマークダウンエディタには、リアルタイムでのプレビュー機能がついています。
Visual Studio Codeの場合は、Ctrl＋K Vのショートカットで開きます。

画面右上の方にある虫眼鏡のようなボタン。
これを押してもプレビューを確認することができます。

プレビューを見ると、実際にどのように表示されるかを確認しながら文章を書くことができます。

Visual Studio Codeのプレビュー画面

5. 保存と共有

マークダウンの文章は .md や .markdown という拡張子で保存します。
このファイルはテキストとして他の人と共有したり、GitHubなどのプラットフォームで公開したりすることができます。

拡張子.md

6. HTMLなどに変換（必要に応じて）

マークダウンをウェブページとして公開する場合や、他のフォーマットに変換したい場合は、マークダウンをHTMLやPDFなどに変換するツールやライブラリを使用します。

以上、マークダウン形式の説明でした。
簡単なので、ぜひ試してみてくださいね。
次回の記事でお会いしましょう😊！

Youtube│Instagram│Twitter│Dribbble│Linkedin│Behance│Notion│Portfolio│Figma│質問箱

この記事が参加している募集

週末プロジェクト

4,717件

よろしければサポートお願いいたします。いただいたサポートはクリエイターとしての活動費に使わせていただきます。