GitとGitHubを基本からまとめてみた【README】

## READMEファイルの役割
- READMEファイルは主に「システムの概要」「ツールの使い方」「インストール方法」などが記述される。
- リポジトリに格納されたソースコードを利用したり、参照する前に読んでほしい内容が記載される。

## READMEファイルの記述法
READMEファイルは「マークダウン記法」で記述されるファイルで、マークダウン記法では文字の装飾を簡単に行うことが出来るため、読みやすいドキュメントを効率的に作成することが出来る。

## READMEの作成方法

1. リポジトリの画面を開き、「Add a README」をクリックする。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/939638/cd8ee1cd-d6db-95c5-417f-5e91f13d8262.png)

2. ファイル編集画面が開く。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/939638/1b836ca0-8e05-3c53-800c-621f7a020acb.png)

3. 内容を編集し、「Commit a new file」をクリックする。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/939638/5c2dfa9b-9987-2591-1ad2-253f434960da.png)

4. READMEファイルが作成される。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/939638/bacb7019-680e-be39-b367-ddc77730b988.png)

※ リポジトリを新規作成する場合は、「Initialize this repository with a README」にチェックを入れるとリポジトリ作成と同時に自動で作成される。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/939638/d1c363db-24fc-27b9-f909-edc8cb208654.png)

## READMEの編集方法

1. リポジトリのページ「README.md」ファイルをクリックする。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/939638/99485961-1fb1-7789-a892-49c0a081d5d0.png)

2. 右上の「鉛筆」マークを押す。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/939638/023747e9-4e2a-53bc-445f-294ef5f9cc66.png)

3. READMEファイルの編集画面が開く。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/939638/f3280d57-266e-bf9c-6e2f-16532a31960f.png)

※ リポジトリのページでREADMEセクションの編集アイコンをクリックする方法も可能

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/939638/66fa44aa-de5d-56ab-030d-addd0a14ade3.png)

4. 内容を編集し、「Commit changes」（もしくは「Commit a new file」）をクリックする。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/939638/5c327c90-5555-a681-b043-c492cd75d98c.png)

5. READMEが編集した内容で更新される。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/939638/96598f07-0acc-74d4-6a2e-adee372837d8.png)

## READMEに画像を入れる方法

1. リポジトリのページを開いて「Upload files」をクリックする。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/939638/e5cdeb49-4108-ba28-f180-c51c2d6d17f1.png)

2. 「choose your files」をクリックするか、画像ファイルをドラッグ&ドロップでアップロードする。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/939638/c206df9e-e6ea-4a83-fc15-475469b2227e.png)

3. ファイルの名称が表示されていることを確認し「Commit changes」をクリックする。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/939638/73af7b56-490c-0cfa-35da-efdc22581240.png)

4. 画像がアップロード済み。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/939638/0d779aaa-3694-ad8a-7911-7776f9682977.png)

5. 続いてREADMEファイルを編集してマークダウンで画像のパスを指定する。
 
※ 画像のパスは「相対パス指定」「絶対パス指定」のどちらでも可能。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/939638/36a09d25-623b-33c7-ecb4-9867ffc61cd0.png)

#### 相対パス指定の場合

README.mdファイルから見た画像のパスを指定する。
README.mdファイルを編集して以下の記述を追加する。

```
![画像名](画像の相対パス) 　　　//画像名は任意の名称を記述する。
```
仮に「images」フォルダを作成して格納する場合はパスは「./images/sample_image.jpg」となる。

#### 絶対パス指定の場合

絶対パスの指定は、画像のURLをそのまま画像のパスに使用する方法。

① リポジトリから画像ファイルをクリックして絶対パスのURLを取得する。
② README.mdには以下のように記述する。

```
![画像名](https://github.com/quin001cunx/newRead/blob/master/sample_image.jpg)
``` 

6. READMEに画像のマークダウンが記述できら「Commit changes」で更新する。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/939638/18340e9a-97fd-078a-eb56-2ea153a827f7.png)

7. READMEに画像が追加。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/939638/cd44c0f8-39e8-6826-65db-9de587e70dde.png)




## 参考サイト
[【GitHub】READMEって使ってる？使い方と書き方を確認しよう](https://style.potepan.com/articles/33682.html)
[GitHub – READMEの作成方法と書き方【改行やリンク・画像の入れ方】](https://howpon.com/8334)