Qiita投稿時に使用する機能

Qiitaの記事をカラフルにすると書いていて楽しくなる。
それに太字や色を活用することでポイントもわかりやすくなるし、多用しすぎなければ読み手にも優しいはず。
記事を活用するにあたり、初心者の自分がどのように知識を得たのか、またこれを見返して成長するための記録として記録するものです。

#文章の装飾
色を付けたり絵文字を入れることで目を引く記事にすることができる（可能性大）

##文字に色を付ける
色を付けたい文字を``<font color="#色コード">``と``</font>``で囲む

色コードは以下リンク先から調べて指定することが可能。``#ff0000 = 赤``
・[WEB色見本 原色大辞典 - HTMLカラーコード](https://www.colordic.org/)

```markdown
<font color="#ff0000">色を付けたい文字（今回は赤）</font>
```
**結果**
<font color="#ff0000">色を付けたい文字（今回は赤）</font>

##文字を太字にする
太字にしたい文字を前後``**``で囲む

```markdown
**太字にしたい文字**
```

**結果**
**太字にしたい文字**

##文字を太字にして色を付ける

```markdown
<font color="#ff0000">**文字を太字にして色を付ける（今回は赤）**</font>
```

**結果**
<font color="#ff0000">**文字を太字にして色を付ける（今回は赤）**</font>

##文字を太字にして色を付け、絵文字を追加する
上記を組み合わせる+絵文字も入れる
絵文字は以下リンク先から調べて指定することが可能。
・[Emoji Cheat Sheet](https://www.webfx.com/tools/emoji-cheat-sheet/)

```markdown
:sparkles::two_hearts:<font color="#ff0000">**文字を太字にして色（今回は赤）を付け、絵文字を追加**</font>:two_hearts::sparkles:
```
**結果**
:sparkles::two_hearts:<font color="#ff0000">**文字を太字にして色（今回は赤）を付け、絵文字を追加**</font>:two_hearts::sparkles:

##Note補足説明
目を引く形で補足説明をしたい場合、補足したい内容を`:::note info`と `:::` で囲む。
補足したい内容と`:::note info` と `:::` はそれぞれ別の行にする必要あり。
noteの後のinfoは省略可能。

```markdown
:::note info
情報  ※infoは省略可能
猿が出没しはじめました。
:::
```

:::note info
情報  ※infoは省略可能
猿が出没しはじめました。
:::

```markdown
:::note warn
警告
猿に注意してください。
:::
```

:::note warn
警告
猿に注意してください。
:::
```markdown

:::note alert
より強い警告
外出しないでください。
:::
```

:::note alert
強い警告
外出しないでください。
:::


##訂正線（`~~文字~~`）

```markdown
~~ここに消したい文字を入れると線が入る~~
```

**結果**
~~ここに消したい文字を入れると線が入る~~

##一部非表示（`<!-- 消したい文字 -->`）

```markdown
<!-- ここに消したい文字を入れる -->
```

**結果**

↓
<!-- ここに消したい文字を入れる -->
↑

##折りたたみ
クリックすると見ることができるように設定できる。
長くなる処理コードなどを折りたたむと良い

```markdown
<details><summary>折りたたんだときに表示される文字（クリックで開けます）</summary><div>
クリックして見える中身
</div></details>
```

**結果**
<details><summary>折りたたんだときに表示される文字（クリックで開けます）</summary><div>
クリックして見える中身
</div></details>

##表
表を挿入することで文章を見やすくすることができる
また、スペースを有効活用できるので縦に長くならなく、見やすい記事にすることができる（可能性大）
<font color="#ff0000">表の開始前に空白行が一行必要</font>

```markdown
| 左揃え | 中央揃え | 右揃え |
|:-|:-:|-:|
| Left-aligned | Centering | Right-aligned |
| **太字** | **太字** | **太字** |
| :sparkles::two_hearts: | :sparkles::two_hearts: | :sparkles::two_hearts: |
| <font color="#0000ff">青文字</font> | <font color="#008000">緑文字</font> | <font color="#ffa500">橙文字</font> |

```
**結果**

| 左揃え | 中央揃え | 右揃え |
|:-|:-:|-:|
| Left-aligned | Centering | Right-aligned |
| **太字** | **太字** | **太字** |
| :sparkles::two_hearts: | :sparkles::two_hearts: | :sparkles::two_hearts: |
| <font color="#0000ff">青文字</font> | <font color="#008000">緑文字</font> | <font color="#ffa500">橙文字</font> |


##画像を挿入してサイズを指定する
``img src=``に画像URLを入れてから``width=50%``でサイズを指定

```markdown
<img src="https://qiita-image-store.s3.ap-northeast～画像URL" width=50%>
```
**結果**
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2122199/3e64c51f-ffa9-1f68-5ec0-90b1da039cff.jpeg" width=50%>

##■一部のみ非表示にする（<!-- 消したい文字 -->）
いわゆるコメントアウトですね。自分用のメモを残しておきたい時に便利。

```
<!-- ここに消したい文字を入れる -->
--見本--（検証ツールやソースを表示すると見れる）
```

↓ここ

↑ここ
------------------


#書き方
・[Qiita 記事の書き方](https://qiita.com/wdwd5454/items/7d8db521c5c0d1f570f6)
・[Markdown記法 チートシート](https://qiita.com/Qiita/items/c686397e4a0f4f11683d)
・[Qiita記事作成方法 初心者の備忘録](https://qiita.com/U-MA/items/996ae933ae94c5711883)
・[Qiitaの投稿で装飾したいときによく使うHTMLタグ](https://qiita.com/7note/items/9c0763d5491e43edb552)

#埋め込み
・[Qiitaで記事にcodepenを埋め込み](https://qiita.com/nagiama0726/items/52bf3548023dc537d3c6)
・[Qiitaにtwitterを埋め込む方法](https://qiita.com/shizen-shin/items/5704c659727ec83356ff)
・[QiitaにYouTubeを埋め込む（MarkdownにYouTubeを埋め込む）](https://qiita.com/tnarihi/items/762b6ba4ac0a160eef5b)

#人の記事を参考にするとき
Qiita記事URLの末尾に「.md」をつけると、書き方を確認することができる。

#ガイドライン
・[良い記事を書くためのガイドライン	
](https://help.qiita.com/ja/articles/qiita-article-guideline)