0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

よく使うMarkdown記法

Last updated at Posted at 2024-02-14

Qiitaの記事を書くにあたりMarkdown記法のやり方が調べてもなかなか分かりづらいのと個人的な備忘録のためにも内容を書いていきます。


Qiita公式の記事はこちらです
Markdown記法 チートシート


Markdown記法画像
CheatSheetImage.png
よく使うのは記事書く前にQiita記事内画像で説明してくれています。


slash.png
また半角スラッシュでも補完機能で入力出来る機能もあります。



見出しを作る

見出しを作る場合は以下のようになります。

これはH1タグ見本です

# これはH1タグ見本です

コピペできます。


これはH3タグ見本です

### これはH3タグ見本です

コピペできます。


これはH6タグ見本です
###### これはH6タグ見本です

コピペできます。
このように『#』を入れることでタグが作れます。
#の数が多いほど文字の大きさは小さくなります。



行間隔を空ける

記事を書く際に文字が繋がっていると見にくいので行間隔を空けます。

一行空ける
< br >
一行あける

<br>

コピペできます。
上と下を一行空けて下さい。
それで行間が空きます。
画像↓
空白.png



コピー&ペーストのブロックを作る

コピペする時のブロックの作り方です
これです↓

バッククォート

コピーして貼り付けたい箇所の上下を『```』で囲みます。
この特殊文字『`』は「バッククォート」と言います。
MacBookで打ち込む場合は『@』と一緒のキーにあります。
英数にして『⇧』マークのシフトキーを押しながら入力して下さい。


[```]

コピペできます。[ ]は外して下さい。


画像↓
1.png
このように書いています。



コードをコピー&ペーストする

先ほどのコピペと同じですがより詳細にしたやり方です。

例えば以前使ったこちらで説明します
Qiita記事で見るとこのように表示されています。

Root.plist
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
 <key>StringsTable</key>
 <string>Root</string>
 <key>PreferenceSpecifiers</key>
 <array>
        <dict>
            <key>Type</key>
            <string>PSChildPaneSpecifier</string>
            <key>Title</key>
            <string>Licenses</string>
            <key>File</key>
            <string>com.mono0926.LicensePlist</string>
        </dict>
 </array>
</dict>
</plist>

実際の入力画面で見るとこのように書いています。
画像↓
2.png
コピペする時は基本的に『```』で上下を囲みます。

今回の場合のように『Root.plist』と何についてのコードなのかを記載する時は上の『```』の後に「Root.plist」と書きます。


if [ $CONFIGURATION = "Debug" ]; then
    ${PODS_ROOT}/LicensePlist/license-plist --output-path $PROJECT_NAME/Settings.bundle
fi

またこのようなコード内容を表示させたい時は『shell』をつけます。
すると白だけのコードから色がついた状態になるので分かりやすいです。

画像↓
shell.png
実際の入力画面です。


shell2.png
sheと入力するだけでQiitaの補完機能で何を表示させたいのか予測が出るので自分の書いているコードを選択して下さい。

Ruby.png
『r』と入力しただけでRubyなどの言語も予測変換で表示されます。



色のついた見出しを書く

GreenP.png
こんな感じの記事の書き方です。


画像です↓

info.png
こちらのようにやります。
『:』この記号はコロンです。コロン3つで囲んだ後に上のコロンの後に「note info」と記載します。

他にもある詳細な書き方は公式を参考にして下さい。



文字にリンクを貼る

文字にリンクを貼るケース

Markdown記法 チートシート

画像です↓
cheatsheet.png

[記事のタイトル] (記事のURL)という書き方になっています。

[Markdown記法 チートシート](https://qiita.com/Qiita/items/c686397e4a0f4f11683d)

コピペできます。


※注意点

cheatsheet2.png
タイトルとURLの『](』の部分にスペースを空けないで下さい。正しく表示されません。



リンクをそのまま貼る

リンクをそのまま貼るとタイトルと画像が表示されます。

このようなリンクです。
こちらはURLを貼り付けて上下を一行空けて書いて下さい。

画像↓

link.png
このように書いています。



画像を添付する

画像の添付方法です。

PhotoP.png
タイトルなどを入力する上の欄の本文の隣りにあるアイコンをクリックして下さい。


uploadP.png
載せたい画像を選択して『アップロード』をクリックします。


uploding.png

たまに白く「uploading...0」と画像が表示されないケースがあります。
大体は画像添付後にEnterキーで決定するか前後の行が空いていないなどなので空けて下さい。

画像↓
loading2.png



画像のサイズを調整する

MacBookのスクショ画像を切り取るとちょうど良いサイズになっていますが、たまにとんでもなく画像がでかくなる時があります。

iPhoneSettingsScreen.PNG
iPhoneの画面をスクショして添付するとなぜだか大きく表示されてしまいます。
これだととても見づらいので大きさを調整します。


元のサイズから50%にリサイズしました。
これぐらいだと見やすくなるかと思います。

<img src="https://◯◯◯◯◯◯.png" width="50%">

このように書いています。
『"https://.png"』の部分は自分のサイズ調整したい画像のURLを載せて下さい。
また50%と書いてある数値を変更すると調整できます。


参考

0
0
0

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
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?