GitHubなどに公開されているコードをscriptタグで読み込む方法

Photo credit: kana hata via Visual Hunt / CC BY-NC-ND

jsFiddleやjsbin、CodePenといったサービスやローカル環境で実験用にコードを書くことがある。実験用なのでなるべく労力をかけず、なるべく1ファイルで完結させたい。

GitHubで公開されているコードを直接scriptタグで読み込めたらいいが、Raw（https://raw.githubusercontent.com）のURLを読み込もうとしてもうまくいかない。

Github is not a CDN, using it as such will cause issues with loading the file. Do you still wish to it?

良い方法はないかとググったら RawGit というsushiのアイコンが目立つサービスをみつけた。

::beforeや::afterのcontentプロパティを動的に変更する方法

Elementの前後にコンテンツを挿入するために擬似要素がある。
とりあえず擬似要素のサンプル。どちらも「擬似テスト要素」と表示される。

<style>
  .pseudo::before {
    content: "擬似";
    font-size: 50%;
  }
  .pseudo::after {
    content: "要素";
    font-size: 80%;
  }
</style>

<!-- 擬似要素を使う -->
<p class="pseudo">テスト</p>

<!-- 擬似要素を使わない -->
<p><span class="before">擬似</span>テスト<span class="after">要素</span></p>

擬似要素を使うことで、HTMLの可読性が向上していることがわかるだろう。
他にもいろんなことができるが、本題に逸れるため省略する。

2015年活動報告と2016年行動指針

photo by davecito

2015年はお世話になりました。
2016年もひきつづきダーシノ、当ブログともによろしくお願いします。