GithubのREADME.md実験


# READMEの実験
READMEの画像出力や、記号などの細かな検証していきます。初学者向け。

この記事に書いているのは「READMEで実験して起こったこと」のまとめになります。
QiitaとREADMEではの記事を書く際の仕様が違うため、原文のコードと実際のREADMEに反映した際の長ーいスクショでお送りしています。
適宜見比べながら、ご覧ください。
# 実験内容のもくじ
* ①画像の出力
画像サイズの変更
* ②GitHubのREADMEファイル内における記号の扱い方の説明
大見出しと小見出しとインデント
* ③各記号の注意と例文
* ④改行と空白行
* ⑤コードブロックの作り方

# 知りたいことだけリスト

* 画像出力はイシューにドラッグ&ドロップでリンク生成。<br>
* "#"は大見出しになる。<br>
* "*"は小見出し"・"になる。<br>
* 必要な半角スペースを忘れないように！<br>
* 改行は半角の＜br＞で。とりあえず"#"以外は行末に片っ端から＜br＞つければ楽。<br>
* 空白は半角の&NBSP；で。<br>
* コードブロックは半角で ｀｀｀bashここに文字入れる｀｀｀<br>
以下、スクショに続き、原文になります。

# READMEのスクリーンショット

![github.com_kohya-suzuki_sambo_blob_master_README.md.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/315207/97806554-f406-d969-8ff4-60e3ee527d5d.png)

# ここから、原文のコードです。
```bash
# READMEの実験
READMEの画像出力や、記号などの細かな検証していきます。初学者向け。<br>

# もくじ<br>
* ①画像の出力<br>
画像サイズの変更
* ②GitHubのREADMEファイル内における記号の扱い方の説明<br>
大見出しと小見出しとインデント
* ③各記号の注意と例文<br>
* ④改行と空白行
* ⑤コードブロックの作り方<br>

# 必要なことだけリスト<br>
* 画像出力はイシューにドラッグ&ドロップでリンク生成。<br>
* "#"は大見出しになる。<br>
* "*"は小見出し"・"になる。<br>
* 必要な半角スペースを忘れないように！<br>
* 改行は半角の＜br＞で。とりあえず"#"以外は行末に片っ端から＜br＞つければ楽。<br>
* 空白は半角の&NBSP；で。<br>
* コードブロックは半角で ｀｀｀bashここに文字入れる｀｀｀<br>

# ①画像の出力
![penguin300と250](https://user-images.githubusercontent.com/44775152/158930776-ad5529f3-fe63-48a5-a332-26963d16119b.jpg)<br>
↑この画像は
｀｀｀bash
![penguin300と250](https://user-images.githubusercontent.com/44775152/158930776-ad5529f3-fe63-48a5-a332-26963d16119b.jpg)
｀｀｀
という文字列で出来ています。方法は以下。<br>

①リポジトリの新しいIssuesを作って、そこへ画像をドラッグ&ドロップし、自動で生成された画像のアドレスをコピー。<br>
②それをローカルのREADMEファイルへ貼り付けてリモートリポジトリへpushする。これで画像をREADMEに出力できます。<br>
少し外道っぽいやり方..って思ったんですが、よく使われる手段のようです。<br>
他にも方法はあるようですが、ややこしく、管理もずさんになりそうなのでこの方法がおすすめ。<br>
画像本体をimageフォルダなどへ入れる必要がありません。コードそのものが画像を作り出します。とても楽です。<br>
* 画像のサイズを指定するには<br>

｀｀｀bash
↓この書き方では画像が出力もされない。
<img src="![penguin300と250](https://user-images.githubusercontent.com/44775152/158930776-ad5529f3-fe63-48a5-a332-26963d16119b.jpg)" width="30px">
↓これも同じ。
<img src="(https://user-images.githubusercontent.com/44775152/158930776-ad5529f3-fe63-48a5-a332-26963d16119b.jpg)" width="50px">
↓これならOK！
<img src="https://user-images.githubusercontent.com/44775152/158930776-ad5529f3-fe63-48a5-a332-26963d16119b.jpg" width="100px">
｀｀｀
<img src="https://user-images.githubusercontent.com/44775152/158930776-ad5529f3-fe63-48a5-a332-26963d16119b.jpg" width="100px"><br>
小さく表示できました！<br>
<br>
補足ですが、生成した画像用のコードは""で囲っても、''で囲っても、画像として出力されてしまいます。<br>

# ②GitHubのREADMEファイル内における記号の扱い方の説明

# "#"の意味
↑こんなふうに、大きな見出しになります。<br>
問答無用で長ーい線も入ってくるよ<br>

# "*"の意味
* ←このように、"*"は"・"に変換され、小見出しとなります。<br>
* "*"と"・"はどう違うんですか？↓答え<br>
* ・<br>
<br>

* "*"に関しては、文末に改行を意味する＜br＞(半角にしてください)を入れていないと、直下にある文も後ろに繋がってしまいます。<br>
* ＜br＞なし
だから繋がってる<br>
* ＜br＞あり<br>
だから繋がらない<br>

# "#"と"＊"は親子関係にあり、"＊"は常にインデントされています。
* こんなふうにインデントされます。ここの行末に＜br＞をつけてみると<br>
下に書いた文がさらにインデントされます。

# 色々な線を書いてみる

* "-"を連打してみる<br>
-------------------------------------------
区切り線に変換されました。<br>
* "_"を連打してみる<br>
___________________________________________
区切り線に変換されました。<br>
* "_"を連打してみる<br>
___________________________________________
区切り線に変換されました。<br>
* "="を連打してみる<br>
===========================================
変換はなく、自動で隣に文字が並んでしまいました。<br>

# ③各記号の注意と例文
"#"や"*"いずれも、直後に半角スペースを入れないと、機能してくれません。<br>
また「行の先頭に書いたもの」でなければ機能しません。<br>
以下は見辛いですが、例を挙げます。<br>

# ←直後に半角入れてます。私は見出しではありません。実験体です。
#←直後に半角入れてません。<br>

* ←直後に半角入れてます。<br>
*←直後に半角入れてません。"＊”は消滅し、小見出しに従ってさらに強制インデントされてます。<br>
北海道新潟#茨城福島岐阜大阪# <br>
北海道新潟*茨城福島岐阜大阪* <br>
↑間に入れた"*"が消滅した。<br>

* "井"は"#"の代わりになるんですか？↓答え<br>
井<br>
ならな井。

* 色々書いてみる<br>
"#" '#'<br>
'#' "#"<br>
"*" '*'←アスタリスクが消滅<br>
'*' "*"←アスタリスクが消滅<br>
(* ○ v ○)<br>
(# x o x)<br>
どれも大きな変換はされませんでした。
* ↓は順番に"*"を1コ、2コ、３コ、４コと半角を挟みながら増やしてます。<br>
* <br>
* * <br>
* * * 
* * * * 
↑もはや何だかよくわかりません。・と。と太線に変換されました。<br>
* ↓は順番に"#"を1コ、2コ、３コ、４コと半角を挟みながら増やしてます。<br>
# 
# # 
# # # 
# # # # 
↑２こまでは線に変換されましたが、それ以降は文字として認識されてます。<br>
* 軽くアートにする<br>
|     △ △
|    (・・)  
|   ⊂     ⊂ 
| ◎〜  しし   <br>
全然なってない。。<br>
空白スペースと改行がされていない。<br>
空白文字である＆NBSP;と、改行文字である＜br＞（どちらも半角に変換してください）をしてやってみる<br>
|&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;△&nbsp;△<br>
|&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(・・)&nbsp;&nbsp;<br>
|&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;⊂&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;⊂&nbsp;<br>
|&nbsp;◎〜&nbsp;&nbsp;しし&nbsp;&nbsp;&nbsp;<br>
ギリなんとかなる。環境によっては崩れます。<br>

# 他の記号は機能する？
* "+"の場合↓<br>
+ 
・に変換された。<br>
* "-"の場合↓<br>
- 
・に変換された。<br>
* "{}"の場合↓<br>
{} 

* "[]"の場合↓<br>
[] 

* "%"の場合↓<br>
% 

* "~"の場合↓<br>
~ 
あ
~
あ
~
* "^"の場合↓<br>
^  
* "$"の場合↓<br>
$ 
"$"を書くと、もう一度"$"を書くまでそれ以降の記号が機能を失うような挙動があるっぽい。。？<br>
ここでは＜br＞が効いていません。調査しきれてませんが、注意してください。<br>

* その他<br>
「&,¥,\,?, <>」あたりは特に大きな挙動が認められませんでした。<br>
& 
¥ 
\ 
? 
<> <br>
↑１文字ずつEnterで改行してますが、全部横並びになりました。

# ④改行と空白行
改行は「行末で半角スペースを２つ入れる」か「＜br＞を入れる」です。
* 半角２つパターン↓<br>
あああああああ  
* br入れるパターン↓<br>
あああああああ<br>
どちらも改行できました！
可読性の観点から、スペース２つ入れても気付けないので、＜br＞をおすすめします。<br>
* 改行４連続↓<br>
<br>
<br>
<br>
<br>
無事４行分改行できています。

* ただ思考停止でEnterを押して改行しても、GitHubで見た時には改行されず、連続して詰めて書かれてしまいます。<br>
一応、正規表現などで改行を試みてみる。<br>
(/n)
\n 
\r\n
\r
\n|\r\n|\r <br>
↑１文字ずつEnterで改行してますが、何してもREADMEとしては改行されません。<br>

# 空白行はどうなる？
↓この下に2行空白行を入れたまま、pushしてます。<br>


↓この下に4行空白行を入れたまま、pushしてます。<br>




↑それぞれに違いはなく、空行は無視され詰められます。<br>

# ⑤コードブロックの作り方
↓半角の
｀｀｀bash<br>
&nbsp;&nbsp;&nbsp;&nbsp;文字入れる<br>
｀｀｀<br>
で囲う。

```