[Qiita初投稿]記事の書き方を学ぶ

はじめに(ちょっとした自己紹介)

初めまして、軟水です。
名前の由来は単純に軟水が好きだという簡単な理由で、アイコンは最近育て始めたガジュマルです。
在宅メインで外に出ないことが多いので緑が欲しくなる衝動に駆られるんですよね...笑

今年で3年目のSEをしていて、主にスマホアプリ、Webアプリ、それに伴うバックエンドの開発に携わらせていただいています。(設計とかも少し)
使用言語は、HTML、CSS、TypeScript、Python、Dart、Swift(最近は触れてないですが...)です。

業務でQiitaの記事にはとてもお世話になっているので、今更ながら自分でも業務で解決に時間がかかってしまったものは記事にして備忘録として記録したいと思い始めました。

実際に書いてみる

今回の記事としては、記事の書き方を学びながら実際に記事を作成していこうと思います。
(すでにMarkdown記法のチートシートというものがあるようなのでそちらを参考にやってみます。)

作成手順

投稿の流れ(アカウント登録完了後)

まずは記事を作成するところからやっていきます。

1. Qiitaログイン後、画面右上の「投稿する」ボタンをタップ
   

2. ボタンタップ後プルダウン形式で何をするか選べるので選択(今回は記事を作るので「記事を新規作成」をタップ)
   

3. 作成画面に遷移
   本文記載がない状態だと、画面右側にチートシートがあるので初手から詰むことはなさそう(地味に嬉しい)
   本文に記載を行うと画面右側がプレビューになるのでこれもまた嬉しい...

   プレビュー非表示などは画面右中段の「edit」ボタン(鉛筆のようなボタン)、「view_column_2」ボタン(見開き本のようなボタン)、「visibility」ボタン(目のマーク)で表示画面を変えることができます。

   他にも画面左中段には画像や、絵文字挿入、チートシートへのリンクボタン(?マーク)などがあり、使い勝手が良さそうです。(特に初期画面のチートシートが消えてしまって焦りそうなので便利すぎる...)
   

Markdown記法

記事作成ができたので実際の中身の記法について、よく使いそうなものをピックアップして記載していきます。

見出し

すでにこの記事を書く際に使用していますが、見出しを作成していきます。
目次(TOC)は記事内の見出しを元に自動生成し、右に自動挿入されるようです。

注意点
#とテキストの間にスペースを記載すること

書き方

# 見出し1
## 見出し2
### 見出し3
・・・(省略)・・・
###### 見出し6

表示結果

見出し1

見出し2

見出し3

見出し6

コードを挿入する

コードスパン

見出しの書き方の例を記載したような表示ができます。
例ではpython言語でpython_code_exampleという名前のコードを挿入してみます。

書き方

    ```diff_python:python_code_example
     if (A):
        print("A")
    ```

表示結果

python_code_example

 if (A):
    print("A")

差分

差分があるように見せるためには
書き方

    ```diff_python
        - print("A")
        + print("B")
    ```

上記のように記載すると-と+で背景色が表示されて、vscodeみたいになります！

- print("A")
+ print("B")

補足説明・太字

まずは補足説明から
書き方

:::note info
緑枠
説明
:::

:::note warn
警告
注意
:::

:::note alert
強い警告
警告！！！
:::

表示結果

緑枠
説明

警告
注意

強い警告
警告！！！

見出しの箇所でも使用しましたが、様々な箇所で使用できそうです。
次に太字

書き方

_ か * で囲むとHTMLのemタグ→ *italic type*
__ か ** で囲むとHTMLのstrongタグ→**太字**

表示結果
italic type
太字

リスト

順序なしリスト

• 文頭に* + -のいずれかを入れると順序なしリスト
• 注* + -の後には スペースが必要

番号付きリスト

1. 文頭に数字.を入れると番号付きリスト
2. 数字.の後には スペースが必要

説明リスト

<dl>
  <dt>例</dt>
  <dd>例は<strong>特に</strong>重要</dd>
</dl>

表示結果

例

例は特に重要

リンク

リンクはタイトル付きで作成できるようです。
外部サイトなどのリンク
書き方

例[リンクテキスト](URL "タイトル")
[Qiita](http://qiita.com "Qiitaホームリンク")

表示内容
Qiita
マウスをリンクに持っていくとホバーでタイトルが表示されるようになります。

ページ内へのリンク
書き方

###### ページ内へのリンク
下記で同じページ内の見出しに飛ぶリンク
[「リンク」にジャンプ](#リンク)

表示内容

ページ内へのリンク

下記で同じページ内の見出しに飛ぶリンク
「リンク」にジャンプ

作成した投稿する

1. 投稿作成画面上部の「公開設定へ」ボタンをタップ
   

2. 記事の公開設定画面に遷移するので、公開設定をして、画面上部の「記事を投稿する」をタップすれば完了です！🎉
   (公開設定の時に非公開にもできるみたいです。)

終わりに

今回初めてQiita記事を作成・投稿してみましたが、Markdownを普段使用する機会がなかったので記事を書きながら学んでいきたいと思います。
冒頭でも書きましたが、今後は普段の業務で起こった問題の解決方法や情報系資格取得できたら合格体験記なども載せてみたいと考えているのでよければ見てもらえると嬉しいです🙇‍♂️

最後まで読んでいただきありがとうございました！