gist 埋め込みのレイアウト崩れを直す

gist をウェブサイトに埋め込むとき、レイアウトが崩れてしまうことがあります。

原因としては、もともと指定されていたスタイルがウェブサイトの css によって上書きされていることが考えられます。つまり、その点を修正すればレイアウトは直ります。

レイアウトの直し方

ウェブサイトによってなにがどう崩れているかが変わってくると思うので、まずは何が上書きされているのかを特定し、修正するためのスタイルを追加します。

多くのブラウザには開発者ツールがついているので、それを用いると崩れている原因の特定が楽になります。よくわからないときは「[ブラウザ名] 開発者ツール」でググればいけると思います。以下は Google Chrome の例で進めています。

1 開発者ツールで要素を検証

レイアウトが崩れているページで、埋め込まれている gist 要素を検証します。ツール一覧から選択するか、F12を押せば開発者ツールを開けます（ブラウザによって開き方は多少異なります）。Chrome であれば、検証したい要素のところで右クリックをして「要素を検証」で一発です。
ちなみに gist埋め込み部分は、gist クラスの div 要素で囲まれています。

2 該当部分のスタイルを読む

レイアウトが崩れている部分のスタイルを読んで、何が上書きされているせいでレイアウトが崩れているのかを特定します。画像のように、取り消し線が引かれている部分が上書きされたスタイルです。

例えばこのブログの場合は、行番号がずれていたので、「line-heght」「font-family」「font-size」あたりが怪しいなと検討をつけて、それらに注目しました。

3 上書きされたスタイルをさらに上書きする

スタイルを追加し、もとのスタイルで上書きして修正します。

このブログでは、line-numberクラスの「line-height」が上書きされていたのがレイアウト崩れの原因だったため、以下のように css に追加したらレイアウトが直りました。

これらを応用すれば、gist埋め込みのデザインを色々といじくることができますね。