LoginSignup
273
224

More than 5 years have passed since last update.

Qiita記事作成方法 初心者の備忘録

Last updated at Posted at 2018-05-20

概要

Qiitaで技術記事を書いてみたい!!
と思ったのですが、MarkDown記法やQiitaの書き方自体がさっぱり分からないのでまとめてみます。
完全初心者向け。
これでとりあえず記事かけるでしょ、ってレベルです。

目次

  • まず読むべし
  • こまめに下書き保存しようね
  • そもそもMarkdown記法ってなんやねん
  • 見出し(この↑の目次みたいな)やつってどうすんの?
  • 目次ってどうやってつくってるの?
  • 写真を載せたいんだけど、添付? 埋め込み?
  • コードを載せたいのですけれど
  • 表を作るときってどうすれば
  • 他の記事を参考にしたいんだけど
    • リンクってどうするの?
    • 引用ってどうするの?

まず読むべし

Qiitaガイドライン

こまめに下書き保存しようね

まずはじめに。こまめに下書き保存しようね。
これはマジ。
時間経過や、Qiita内でのボタンによる画面遷移なら自動保存されるみたいです。
一方、ブラウザバックやうウィンドウを閉じた場合では保存されないみたいです。
私のMacは2本指で右にスワイプするとブラウザバックをする設定になっていたので、うっかりブラウザバックして書きかけのこの記事内容が消えました。ハァ?
Qiitaに投稿 の右側の上三角を押すと、下書き保存が選択できるので、こまめに下書き保存するようにしてください〜〜!!
タグを設定しないと、うっかりボタンを押し間違えた際に投稿できないので、最後にタグを設定するのがおすすめ。

そもそもMarkdown記法ってなんやねん

マークダウン記法とは、テキスト文書の記述に用いられるマークアップ言語「Markdown」における文書の書き方(ルール)のことである。Markdownの利用、あるいはMarkdownそのものを指す場合もある。

マークダウン記法はシャープ、ハイフン、アスタリスク等の記号を主に用いて、太字、斜体、リンク、リスト形式、見出しといったHTML的要素を記述できるようになっている。たとえば特定の文字列の前後にアスタリスクを足すと、アスタリスクで囲まれた文字列に強調(strong)の効果が付与される。
(Weblioより)

要はテキストを特殊な記号を用いることで、htmlっぽく装飾してくれるってことですね。
覚えるルール自体はあまりややこしくないです。
htmlのタグも使えます。
Qiitaの記事作成の際は右上の?をクリックすると、Markdown記法のまとめがあります。
じゃあこの記事需要ないじゃん
次からMarkdown記法をまとめます。

見出し(この↑の目次みたいな)やつってどうすんの?

#を使います。#の数によって、見出しの大きさが変わります。

記述方法

#見出し1
##見出し2
###見出し3
####見出し4
#####見出し5
######見出し6

表示

見出し1

見出し2

見出し3

見出し4

見出し5
見出し6

目次ってどうやってつくってるの?

リスト表記というものを使います。- を用いて表します。
tabで段落を下げることで、階層構造にもできます。

記述方法

- まず読むべし
- こまめに下書き保存しようね
- そもそもMarkdown記法ってなんやねん
- 見出し(この↑の目次みたいな)やつってどうすんの?
- 目次ってどうやってつくってるの?
- 写真を載せたいんだけど、添付? 埋め込み?
- コードを載せたいのですけれど
- 表を作るときってどうすれば
- 他の記事を参考にしたいんだけど
    - リンクってどうするの?
    - 引用ってどうするの?

表示

  • まず読むべし
  • こまめに下書き保存しようね
  • そもそもMarkdown記法ってなんやねん
  • 見出し(この↑の目次みたいな)やつってどうすんの?
  • 目次ってどうやってつくってるの?
  • 写真を載せたいんだけど、添付? 埋め込み?
  • コードを載せたいのですけれど
  • 表を作るときってどうすれば
  • 他の記事を参考にしたいんだけど
    • リンクってどうするの?
    • 引用ってどうするの?

写真を載せたいんだけど、添付? 埋め込み?

添付も埋め込みもやってることは同じみたいです。

画像は、自分の訃報をニュースで見て驚いている人イラストです。(いらすとやより)

記述方法

添付は、写真メニューをクリックすればできます。
埋め込みは画像アドレスを直接はっつけてください。
画像サイズの変更方法

![news_gohou.png](https://4.bp.blogspot.com/-NXWtB_ZVHyU/Vt08zgFmQ2I/AAAAAAAA4g8/kUJHy-2ifhc/s800/news_gohou.png)

表示

news_gohou.png

コードを載せたいのですけれど

コードをのっけたいときは、バッククォーテーション3つでくくります(``)
記述方法の方では、printの前にスペース4つはいってます。
\
で囲わない場合、スペースは無視されるようです。

記述方法

```
for i in range(10):
print(i)
```

表示

for i in range(10):
    print(i)

表を作るときってどうすれば

これがちょっとめんどくさいかも。
まずヘッダーを「|」でくくって作成する。
その次の行で、「:」の位置で右寄せ、左寄せ、中央寄せを決定する。
「-」は無視される模様。
そしてテーブル内容を、「|」でくくって作成します。

記述方法

| Left align       |       Right align |    Center align    |
|:-----------------|------------------:|:------------------:|
| This             |              This |        This        |
| column           |            column |       column       |
| will             |              will |        will        |
| be               |                be |         be         |
| left             |             right |       center       |
| aligned          |           aligned |      aligned       |

表示

Left align Right align Center align
This This This
column column column
will will will
be be be
left right center
aligned aligned aligned

他の記事を参考にしたいんだけど

リンクってどうするの?

[表示させたい文字列](とばしたいurl)
のように記載すると、リンクを貼ることができます。

記述方法

[読売新聞のページ](http://www.yomiuri.co.jp/)

表示

読売新聞のページ

引用ってどうするの?

>
を記述することで引用にできます。
>>
と書くことで二重引用にすることができます。
二重引用から引用に戻すためには、改行が一回必要なようです。

記述方法

>織田信長は言った
>>まんじゅうこわい
>まだ二重引用

>もどった!!!

表示

織田信長は言った

まんじゅうこわい
まだ二重引用

もどった!!!

まとめ

とりあえずこれだけあれば記事作成できるんじゃないかってものをまとめました。
参考にしていただけたら幸いです。
他にも様々な記述方法がありますので、記事作成において必要だと思ったものは逐次まとめようと思います。
みなさまよいQiitaライフを。

273
224
2

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
273
224