はじめに
Marketing部門では今後、GDSC Chuo内で行われるイベント等において記録用の記事を作成する予定です。
当初はNoteを検討していましたが、プログラマ向けの情報共有媒体ということでQiitaを使うことにしました。
しかし初めて記事を作成する際、HTMLの記法を使ったことがないと混乱すると思ったため（実際私は混乱しました）重要だと思った使い方をまとめておきます。
私自身、不慣れな部分ばかりなので、追加してほしい情報や修正・アドバイス等ありましたらよろしくお願いいたします。
目次
タイトルの書き方
文頭に "#" をつけると、太字の文字を入力することができ、そのすぐ下に薄いアンダーラインが引かれます。
またタイトルの中にさらに見出しを作りたい場合は、"#" を重ねることで分岐することができます。
# 見出し1
## 見出し2
### 見出し3
#### 見出し4
##### 見出し5
###### 見出し6
これ以上のタグは付けられません。
基本的に見出しの数（深さとも言います）は2,3個が妥当かなと思います。
また、太字の下にアンダーラインが付くのは "#" 2つまでです。
見出しの深さを分けることで、投稿の右に表示される目次にも段ができ分かりやすくなります。
視認性・可読性を高めるための記法
1. 太字・斜体・打消し字
太字
**文字列**
斜体
*文字列*
打消し字
~~文字列~~
2. 文字に色をつける
<font color = "○○○"> 文字列 </font>
色の指定は "○○○" の中に red, blue, brown など色の名前を入れるほか、カラーコードで行うこともできます。
GDSCでの活動記事等では、ブランドキットで指定されているカラーコードを入れておくと無難です。
3. リスト
- 文字列
- 文字列
- 文字列
- 文字列
段下げはハイフン " - " の手前にカーソルを置き、Tabキーを押します。
ハイフンと文字列の間には必ずスペースを入れてください。
4. インライン表示
先ほどのカラー番号のところで使われている、文字がグレーの背景で囲まれているような表記をインライン表示といいます。
`文字列`
文字列を囲っているのは、バッククォート（Shift + @）です。
シングルクォーテーション（Shift + 7）ではないので注意してください。
5. 改行
エンターキーで改行をたくさん行っても、実際に表示される際に改行されるのは1行だけです。
それ以上の改行を行いたい場合は以下のコードを使用してください。
<br>
6. テーブルの挿入
縦x横
縦・横は数字を入れます。
その間にあるのはローマ字のエックス " x " なので注意してください。
これを入力すると右下に「テーブルの挿入」と出てくるので、クリックして作成します。
7. コードの挿入
これまでにも使われている、背景が黒くなる表記は、コードを実行されない形で表記しておくために使われます。
```
コード
```
インライン表示と同様にバッククォートなので注意してください。
8. 引用
> 文字列
>> 文字列
" > "の数に応じて深さを出せます。
ハイパーリンク
よく文字列をクリックすると指定の場所に飛べるような仕組みがあると思います。
ハイパーリンクと呼ばれるその仕組みの記法はこのようになります。
[押してほしい文字列](URL)
例：GDSCのInstagramアカウント
[Instagram](https://www.instagram.com/gdsc_chuo/)
例：を入力するとこのように緑色の文字で表記されます
Instagram
ちなみにクリックした後は紫色に変わります。
ページ内リンクを作成する
これはちょっと余談になりますが…
Qiitaでは、PCの全画面だと右側に目次が表示される仕組みになっています。
しかし画面を小さくしたり、スマホで記事を読む場合にはそれが隠れてしまいます。
そのためクリックで飛べると便利かなと思います。
ちなみにこの記事の目次はこのようになっています。
- [タイトルの書き方](#タイトルの書き方)
- [視認性・可読性を高めるための記法](#視認性可読性を高めるための記法)
- [1. 太字・斜体・打消し字](#1-太字斜体打消し字)
- [2. 文字に色をつける](#2-文字に色をつける)
- [3. リスト](#3-リスト)
- [4. インライン表示](#4-インライン表示)
- [5. 改行](#5-改行)
- [6. テーブルの挿入](#6-テーブルの挿入)
- [7. コードの挿入](#7-コードの挿入)
- [8. 引用](#8-引用)
- [ハイパーリンク](#ハイパーリンク)
- [ページ内リンクを作成する](#ページ内リンクを作成する)
- [リンクをつける際の注意点](#リンクをつける際の注意点)
- [記事の記法を見る](#記事の記法を見る)
ここで、目次の中に大文字のローマ字や記号、空白などがある場合は記法が異なります↓
リンクをつける際の注意点
" () " の中身は以下の点に注意が必要です。
-
空白
- 半角の 空白は "-" で表記
- 全角の 空白は省略
-
大文字は () 内では小文字で表記
-
見出しはどれだけ深くしても " # " ひとつのみ
-
記号
- 全角・半角のは基本的に抜いて表記する
- 例外としてアンダーバーとハイフンはそのまま入力
記事の記法を見る
記事の左側に「いいね」や「ストック」などのボタンが並んでいます。
その下にある点 " ･･･ " を押すとメニューが出てくるので、「Markdownで本文を見る」をクリックします。
そうすると画面が切り替わり、記事がどのような記法で書かれているかを見ることができます。
書き方がわからなくなったり、真似したい記法を見つけた時はぜひ活用してみてください！
参考
マークダウン記法は以下の記事に分かりやすくまとめられています。
こちらもぜひご参照ください。