GitHub 上での書き込みに関するクイックスタート

はじめに

Markdown は、プレーンテキストを書式設定するための読みやすく書きやすい言語です。 Markdown 構文を追� の HTML タグと共に使用して、GitHub のリポジトリの README や、pull request や issue に関するコメントなどの� �所での書き込みを書式設定できます。このガイドでは、GitHub プロファイルの README を作成または編集することで、いくつかの高度な書式設定機能について説明します。

Markdown を初めて使用する� �合は、「基本的な書き方とフォーマットの構文」または「Markdown を使用したコミュニケーション」の GitHub Skills コースから始めるとよいでしょう。

既にプロファイルの README がある� �合は、既存の README にいくつかの機能を追� するか、about-me.md のような名前の Markdown ファイルを使用して gist を作成することで、このガイドに従うことができます。詳しくは、「Gist の作成」を参照してく� さい。

プロファイルの README を作成または編集する

プロファイルの README を作成すると、your GitHub Enterprise Server instance で自分に関する情� �をコミュニティと共有できます。 README はプロファイルページの上部に表示されます。

プロファイルの README がま� ない� �合は、追� できます。

GitHub ユーザー名と同じ名前のリポジトリを作成し、そのリポジトリを README.md ファイルで初期化します。詳細については、「プロファイルの README を管理する」を参照してく� さい。
README.md ファイルを編集し、ファイルの作成時に自動的に追� される (### Hi there で始まる) テンプレートテキストを削除します。

既にプロファイルの README がある� �合は、プロファイルページからそれを編集できます。

任意の GitHub Enterprise Server ページ上の右上隅にある自分のプロフィール写真をクリックしてから、 [自分のプロフィール] をクリックします。
プロファイルの README の横にあるをクリックします。

訪問者に合わせた画像を追� する

GitHub でのコミュニケーションに画像を含めることができます。ここでは、プロファイルの README の上部に、バナーなどの応答性の高い画像を追� します。

prefers-color-scheme メディア機能で HTML の <picture> 要� を使用すると、訪問者がライトモードとダークモードのどちらを使用しているかに応じて変化する画像を追� できます。詳細については、「テーマ設定を管理する」を参照してく� さい。

次のマークアップをコピーし、README.md ファイルに貼り付けます。

HTML

<picture>
 <source media="(prefers-color-scheme: dark)" srcset="YOUR-DARKMODE-IMAGE">
 <source media="(prefers-color-scheme: light)" srcset="YOUR-LIGHTMODE-IMAGE">
 <img alt="YOUR-ALT-TEXT" src="YOUR-DEFAULT-IMAGE">
</picture>

マークアップ内のプレースホルダーを、選ん� 画像の URL に置き換えます。または、最初にこの機能を試すには、次に示す例から URL をコピーできます。
- YOUR-DARKMODE-IMAGE は、ダークモードを使用している訪問者に対して表示する画像の URL に置き換えます。
- YOUR-LIGHTMODE-IMAGE は、ライトモードを使用している訪問者に対して表示する画像の URL に置き換えます。
- YOUR-DEFAULT-IMAGE は、他の画像のいずれも一致しない� �合に表示する画像の URL に置き換えます (たとえば、訪問者が使用しているブラウザーで prefers-color-scheme 機能がサポートされていない� �合など)。
スクリーンリーダーを使用している訪問者が画像にアクセスできるようにするには、YOUR-ALT-TEXT を画像の説明に置き換えます。
画像が正しくレンダリングされたことを確認するには、 [プレビュー] タブをクリックします。

Markdown での画像の使い方について詳しくは、「基本的な書き方とフォーマットの構文」を参照してく� さい。

例

<picture>
  <source media="(prefers-color-scheme: dark)" srcset="https://user-images.githubusercontent.com/25423296/163456776-7f95b81a-f1ed-45f7-b7ab-8fa810d529fa.png">
  <source media="(prefers-color-scheme: light)" srcset="https://user-images.githubusercontent.com/25423296/163456779-a8556205-d0a5-45e2-ac17-42d089e3c3f8.png">
  <img alt="Shows an illustrated sun in light mode and a moon with stars in dark mode." src="https://user-images.githubusercontent.com/25423296/163456779-a8556205-d0a5-45e2-ac17-42d089e3c3f8.png">
</picture>

外観

テーブルを追� する

Markdown のテーブルを使用して情� �を整理できます。ここでは、テーブルを使用して、よく使っているプログラミング言語やフレー� ワーク、学習に時間を費やしていること、好きな趣味など、何かをランク付けして自己紹介します。テーブル列に数値が含まれている� �合は、ヘッダー行の下で構文 --: を使用して列を右揃えにすると便利です。

[ファイルの編集] タブに戻ります。
自己紹介するには、次のように、</picture> タグの 2 行下で、## About me ヘッダーと自分に関する短い段落を追� します。
```
## About me

Hi, I'm Mona. You might recognize me as GitHub's mascot.
```
この段落の 2 行下に、次のマークアップをコピーして貼り付けてテーブルを挿入します。
Markdown
```
| Rank | THING-TO-RANK |
|-----:|---------------|
|     1|               |
|     2|               |
|     3|               |
```
右側の列で、THING-TO-RANK を "Languages"、"Hobbies" などに置き換え、列に� �目の一覧を入力します。
テーブルが正しくレンダリングされたことを確認するには、 [プレビュー] タブをクリックします。

詳しくは、「情� �を表に編成する」を参照してく� さい。

例

## About me

Hi, I'm Mona. You might recognize me as GitHub's mascot.

| Rank | Languages |
|-----:|-----------|
|     1| Javascript|
|     2| Python    |
|     3| SQL       |

外観

折りたたみセクションを追� する

コンテンツを整理しておくために、<details> タグを使用して、展開可能な折りたたまれたセクションを作成できます。

作成したテーブルの折りたたまれたセクションを作成するには、次の例のように、テーブルを <details> タグ内にラップします。
HTML
```
<details>
<summary>My top THINGS-TO-RANK</summary>

YOUR TABLE

</details>
```
<summary> タグの間で、THINGS-TO-RANK を、テーブルでランク付けしたものに置き換えます。
必要に応じて、セクションを既定で開いているように表示するには、open 属性を <details> タグに追� します。
```
<details open>
```
折りたたまれたセクションが正しくレンダリングされたことを確認するには、 [プレビュー] タブをクリックします。

例

<details>
<summary>My top languages</summary>

| Rank | Languages |
|-----:|-----------|
|     1| Javascript|
|     2| Python    |
|     3| SQL       |
  
</details>

外観

引用文を追� する

Markdown には、コンテンツを書式設定するための他の多くのオプションがあります。ここでは、ページとブロック引用を分割する横罫線を追� し、お気に入りの引用文を書式設定します。

ファイル下部の </details> タグの 2 行下に、3 個以上のダッシュを入力して横罫線を追� します。
```
---
```
--- 行の下に、次のようなマークアップを入力して引用文を追� します。
```
> QUOTE
```
QUOTE を任意の名前に置き換えます。または、次の例から引用文をコピーします。
すべてが正しくレンダリングされたことを確認するには、 [プレビュー] タブをクリックします。

例

---
> If we pull together and commit ourselves, then we can push through anything.

— Mona the Octocat

外観

コメントを追� する

HTML コメント構文を使用して、出力で非表示になるコメントを追� できます。ここでは、後で README を更新するのを忘れないようにするためのコメントを追� します。

## About me ヘッダーの 2 行下に、次のマークアップを使用してコメントを挿入します。
```

```
COMMENT を、後で何かをする (たとえば、テーブルに� �目を追� する) ことを忘れないようにするための "To Do" � �目に置き換えます。
コメントが出力で非表示になっていることを確認するには、 [プレビュー] タブをクリックします。

例

## About me

<!-- TO DO: add more details about me later -->

作業を保存する

変更に問題がなければ、プロファイルの README を ( [変更のコミット] をクリックして) 保存します。

main ブランチに直接コミットすると、プロファイルのすべての訪問者に変更が表示されます。作業内容を保存するが、プロファイルに表示する準備ができていない� �合は、 [このコミット用に新しいブランチを作成して pull request を開始する] を選ぶことができます。

次の手� �

高度な書式設定機能について引き続き学習しましょう。たとえば、「コードブロックの作成と強調表示」を参照してく� さい。
GitHub 全体 (issue、pull request、ディスカッション) でコミュニケーションを取る際に、新しいスキルを使用します。詳しくは、「GitHub でのコミュニケーション」を参照してく� さい。