READMEの実験
READMEの画像出力や、記号などの細かな検証していきます。初学者向け。
この記事に書いているのは「READMEで実験して起こったこと」のまとめになります。
QiitaとREADMEではの記事を書く際の仕様が違うため、原文のコードと実際のREADMEに反映した際の長ーいスクショでお送りしています。
適宜見比べながら、ご覧ください。
実験内容のもくじ
- ①画像の出力
画像サイズの変更 - ②GitHubのREADMEファイル内における記号の扱い方の説明
大見出しと小見出しとインデント - ③各記号の注意と例文
- ④改行と空白行
- ⑤コードブロックの作り方
知りたいことだけリスト
- 画像出力はイシューにドラッグ&ドロップでリンク生成。
- "#"は大見出しになる。
- "*"は小見出し"・"になる。
- 必要な半角スペースを忘れないように！
- 改行は半角の＜br＞で。とりあえず"#"以外は行末に片っ端から＜br＞つければ楽。
- 空白は半角の&NBSP；で。
- コードブロックは半角で ｀｀｀bashここに文字入れる｀｀｀
以下、スクショに続き、原文になります。
READMEのスクリーンショット
ここから、原文のコードです。
# READMEの実験
READMEの画像出力や、記号などの細かな検証していきます。初学者向け。<br>
# もくじ<br>
* ①画像の出力<br>
画像サイズの変更
* ②GitHubのREADMEファイル内における記号の扱い方の説明<br>
大見出しと小見出しとインデント
* ③各記号の注意と例文<br>
* ④改行と空白行
* ⑤コードブロックの作り方<br>
# 必要なことだけリスト<br>
* 画像出力はイシューにドラッグ&ドロップでリンク生成。<br>
* "#"は大見出しになる。<br>
* "*"は小見出し"・"になる。<br>
* 必要な半角スペースを忘れないように！<br>
* 改行は半角の＜br＞で。とりあえず"#"以外は行末に片っ端から＜br＞つければ楽。<br>
* 空白は半角の&NBSP；で。<br>
* コードブロックは半角で ｀｀｀bashここに文字入れる｀｀｀<br>
# ①画像の出力
<br>
↑この画像は
｀｀｀bash
｀｀｀
という文字列で出来ています。方法は以下。<br>
①リポジトリの新しいIssuesを作って、そこへ画像をドラッグ&ドロップし、自動で生成された画像のアドレスをコピー。<br>
②それをローカルのREADMEファイルへ貼り付けてリモートリポジトリへpushする。これで画像をREADMEに出力できます。<br>
少し外道っぽいやり方..って思ったんですが、よく使われる手段のようです。<br>
他にも方法はあるようですが、ややこしく、管理もずさんになりそうなのでこの方法がおすすめ。<br>
画像本体をimageフォルダなどへ入れる必要がありません。コードそのものが画像を作り出します。とても楽です。<br>
* 画像のサイズを指定するには<br>
｀｀｀bash
↓この書き方では画像が出力もされない。
<img src="" 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>
| △ △<br>
| (・・) <br>
| ⊂ ⊂ <br>
| ◎〜 しし <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>
文字入れる<br>
｀｀｀<br>
で囲う。