2
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

Mark! 落ち着いて(Markdown記法)

Last updated at Posted at 2020-12-19

#概要
ネタ的に物語を読み進めることでMarkdownに触れてみよう!!
##物語
やあ、Mark!!
君はアスタリスク先輩とよくいるね?
Mark: 愛しているんだ! 太字は** か__ __間にテキストを入れる
いや、そんなに強調されても困るよ…
最近は六つ子のシャープさん達と距離をとっているじゃないかい?
Mark
###Qiita学校ではくっついているよ!!六つ子だけど大きさが違って魅力が違うんだ!!
冒頭に#テキスト(H1タグ)・・・######テキスト(H6タグ)
GitHubやVSCodeでは
#の後に半角スペースが必要**
Markきみの煩悩を打ち消したいよ 打消しは~~テキスト~~


水平線は***か---か<hr> *と-は連続して3つ以上

~At School 斜体は*で英数字を挟む

黒板
  改行
 ```ここに言語指定するとコードに色付け:ここはタグ
 コードやテキストや数式を書く
 ```                       
   Qiita.LOVE(^▽^(^▽^*)LOVE.@toriton2020

黒板に落書きしたのかいMark!!
Mark:違うよ! そんなことより先輩見た?? 文字色指定<font color="色">文字</font>
先輩なら校舎裏に誰かと行ったような……
Mark:wせdrftgyふじこlp インライン表示は`で文字を囲む

校舎裏へ行く 先輩:Happy birthday Mark!!
ふぅ、追いついた。markこれだけは忘れちゃダメだよ Cool **Down**することが大事だよ 改行を忘れずに😊

##使われる記号~配役~
*アスタリスク #シャープ 'シングルクォーテーション `バッククォート ~チルダ :コロン >大なり 
-ハイフン \バックスラッシュ |パイプライン [角カッコ
.ドット
##見出し
冒頭に#(H1タグ)・・・######(H6タグ) GitHubやVSCodeでは#半角スペースが必要 # H1と## H2は下線ができる
##文字色
テキスト

<font color="Red">テキスト</font>

##色見本
#ffce60
rgb(240,0,0)
rgba(0,230,0,0.4)
hsl(80, 10%, 10%)
hsla(20, 24%, 40%, 0.8)

文字の色は変えるのには使えません
`#ffce44`
`rgb(255,0,0)`
`rgba(0,255,0,0.4)`
`hsl(100, 10%, 10%)`
`hsla(100, 24%, 40%, 0.5)

##斜体(イタリック体)
イタリック体 Italic type←Italic type * *か- - 間にテキストを入れる
##強調
太字 ** **か__ __ 間にテキストを入れる
##打消し
打消し ~~ ~~ 間にテキストを入れる
####水平線
 ***か---か<hr> *と-は連続して3つ以上


##マークダウン無効化
~~無効化~~ \とマークダウンの記号をくっつけること
##インライン表示
インライン

`インライン` `で文字を囲む

###黒板みたいにする

 改行
 ```
 このように黒板の色みたいになります
 ```

####タブ

枠上部のタブ
 改行
 ```:タブにしたい文字
 ```

####コードに色付け

 改行
 ```javascript:タブにしたい文字
   (↑言語を記述することでコードに色付け)
 const qiita = 'キータ'
 ```
const qiita = 'キータ'

##箇条書き番号なし(Disc型)

  • AAA
    • BBB
    • BBB
  • AAA
 -半角スペース文字
 -+-でもよし
 - AAA
    - BBB
    - BBB
 - AAA

##箇条書き番号付き(Decimal型)

  1. AAA
  2. AAA
  3. BBB
  4. BBB
  5. AAA
 数字を何番にするかは関係なく同じ階層にあるかで連番が振られる
 数字.半角スペース文字
 1. AAA
 1. AAA
   1. BBB
   1. BBB
 1. AAA

##数式の挿入

\left( \sum_{k=1}^n a_k b_k \right)^{!!2} \leq
\left( \sum_{k=1}^n a_k^2 \right) \left( \sum_{k=1}^n b_k^2 \right)
 改行
 ```math
 \left( \sum_{k=1}^n a_k b_k \right)^{!!2} \leq
 \left( \sum_{k=1}^n a_k^2 \right) \left( \sum_{k=1}^n b_k^2    \right)
 ```

##チェックボックス

  •  ハイフン半角スペース[x]半角スペース(GitHubやVSCodeは文字が必要)
  •  ハイフン半角スペース[半角スペース]半角スペース(GitHubやVSCodeは文字が必要)

##折り畳み

オープン ```
始めに表示させたい文字 ここにMarkdownを書いていこう!
```

####テーブル

ひだり ちゅうおう みぎ
テキストだよ テキストだよ テキストだよ

改行してから

|左 中央
ひだり ちゅうおう みぎ
ハイフンは右寄せと左寄せは2個以上いる。体裁整えるために多く入れてもよし。
3x2と打つとテーブルを挿入するかと聞かれます(ショートカット)

##引用

引用してみた

←薄いグレー

>引用してみた
>>←薄いグレー

##リンク
Qiita公式リンク
https://qiita.com/

[テキスト](リンクurl例https://qiita.com/)
テキストリンクは各カッコでアンカーテキスト指定し丸カッコでリンクURL指定
URL貼り付けでもよし

##埋め込みタグ(Twitter・Asciinema・CodePen)
Twitter

代替テキスト 右上の下矢印を押してツイートを埋め込むをクリックしてそこにあるコードをコピペして完了 CodePen

See the Pen Qiita_Markdown by toriton (@toriton) on CodePen.

代替テキスト
右下のEmbedをおしてコピーしてScriptを変更する↓
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

###画像の埋め込み
イメージ

今回は自分のドロップボックスから持ってきました
youtubeなど動画の埋め込みは画像が表示されないのでテキストリンクを使う
![ここはalt](https://dl.dropbox.com/s/gf3tte5q6vasf0p/tebasaki3.jpg?dl=0)

###画像サイズ指定
代替テキスト

<img width="30" alt="代替テキスト" src="https://dl.dropbox.com/s/gf3tte5q6vasf0p/tebasaki3.jpg?dl=0">

動画はgifでやるといいらしい。
####参考サイト Qiita
https://qiita.com/kamorits/items/6f342da395ad57468ae3
https://qiita.com/Qiita/items/c686397e4a0f4f11683d

2
1
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
2
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?