ウェブページ上に「Fork me on GitHub」のようなリンクを設置するGitHub Ribbons系のツールまとめ

ウェブページ上に「Fork me on GitHub」のようなリンクを設置する、GitHub Ribbons系のツールについてまとめました。

## GitHub Ribbons

https://github.blog/2008-12-19-github-ribbons/

GitHub自身が提供しているものです。
リボン部分は画像になっているので、後に紹介するCSS製のものを使うことをおすすめします。

<p class="codepen" data-height="300" data-default-tab="result" data-slug-hash="XWParjR" data-user="munieru_jp" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/munieru_jp/pen/XWParjR">
  GitHub Ribbons</a> by Munieru (<a href="https://codepen.io/munieru_jp">@munieru_jp</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

## Fork me on GitHub CSS Ribbon

https://github.com/simonwhitaker/github-fork-ribbon-css

GitHub RibbonsをCSSで再現したものです。
CSS製なので、色やテキストを柔軟に変更することができます。

<p class="codepen" data-height="300" data-default-tab="result" data-slug-hash="KKxvPZg" data-user="munieru_jp" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/munieru_jp/pen/KKxvPZg">
  Fork me on GitHub CSS Ribbon</a> by Munieru (<a href="https://codepen.io/munieru_jp">@munieru_jp</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

## Pure CSS responsive "Fork me on GitHub" ribbon

https://github.com/codepo8/css-fork-on-github-ribbon/

こちらもCSS製ですが、レスポンシブデザインに対応しています。
画面の横幅が充分ではない場合はインライン表示になるので、コンテンツの上に重なって表示されることを防げます。

<p class="codepen" data-height="300" data-default-tab="result" data-slug-hash="oNPevMQ" data-user="munieru_jp" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/munieru_jp/pen/oNPevMQ">
  Pure CSS responsive &quot;Fork me on GitHub&quot; ribbon</a> by Munieru (<a href="https://codepen.io/munieru_jp">@munieru_jp</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

## GitHub Corners

https://github.com/tholman/github-corners

こちらは、「Fork me on GitHub」というテキストのかわりにOctocatアイコンのみになっています。
マウスオーバーすると足が動くのがかわいいですね。

<p class="codepen" data-height="300" data-default-tab="result" data-slug-hash="ExevYzp" data-user="munieru_jp" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/munieru_jp/pen/ExevYzp">
  Untitled</a> by Munieru (<a href="https://codepen.io/munieru_jp">@munieru_jp</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

そのままだとリンクの範囲が背景を含む領域になっていますが、CSSに以下のコードを追加することで、リボン部分のみにすることができます。[^1]

```css
.github-corner svg {
  clip-path: polygon(0 0, 100% 0, 100% 100%)
}
```

<p class="codepen" data-height="300" data-default-tab="result" data-slug-hash="poOryJj" data-user="munieru_jp" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/munieru_jp/pen/poOryJj">
  Untitled</a> by Munieru (<a href="https://codepen.io/munieru_jp">@munieru_jp</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

## 比較

|名前|描写|ラベル|リンクの範囲|
|---|---|---|---|
|[GitHub Ribbons](https://github.blog/2008-12-19-github-ribbons/)|画像|テキスト|背景を含む領域|
|[Fork me on GitHub CSS Ribbon](https://github.com/simonwhitaker/github-fork-ribbon-css)|CSS|テキスト|リボン部分のみ|
|[Pure CSS responsive "Fork me on GitHub" ribbon](https://github.com/codepo8/css-fork-on-github-ribbon/)|CSS|テキスト|リボン部分のみ|
|[GitHub Corners](https://github.com/tholman/github-corners)|CSS|アイコン|背景を含む領域|

[^1]: [Adds clip-path for clickable area by Nick-Gabe · Pull Request #52 · tholman/github-corners](https://github.com/tholman/github-corners/pull/52)