読者です 読者をやめる 読者になる 読者になる

Gobble up pudding

プログラミングの記事がメインのブログです。

MENU

スマホで見たときにGistのレイアウトが崩れる問題の修正

スポンサードリンク

f:id:fa11enprince:20150730081143j:plain

Gistのコードをスマホで見ると……

Gistのコードを貼りつけているとPCで見ている分には全く問題ないのですが、
スマホで見たときに、Gistの行が重なってレイアウトが崩れることがあります。
細かい条件はわかっていないのですが、
どうも1行に表示しきれるかどうか微妙な1行の長さの時に折り返しが発生し、
そのときに次の行と重なるという現象になるっぽいです。
もっと詳細にいうと、単語の途中で折り返されてしまっています。

iPhoneで見たときのイメージ

f:id:fa11enprince:20150711141800p:plain
こんな感じです(ノД`)・゜・。

はてなブログProでないと
今回のGistのスマホレイアウトの崩れは修正できません。

とにかく、折り返しが発生するとレイアウトが崩れるということで、
折り返しをCSSで禁止してやればいいじゃないか!
ということで修正します。
基本的にはword-breakを使います。

しかし、word-breakには罠が潜んでいたのだった……

下調べ

とはいっても、どこをどう直せばいいの?ってことで
CSSがどう作成されているか覗きます。
何でもいいのですが、Firefoxなら標準でついているDeveloper toolを使います。
正式名称は知りません(´・ω・`)
F12で使えます。最近はFirebugよりこっちのほうが高機能です。Chromeについても
デフォルトのものが使いやすいです。
選択ツールのアイコンみたいのを選択してGist表示部あたりを選択して、
そのあたりのCSSを見ます。
f:id:fa11enprince:20150709024604p:plain
すると、class="file-data"となっていてその親に
class="gist-data gist-syntax"とかかれていることがわかります。
説明する必要があるかわかりませんが、このクラスの書き方は複数指定の意味です。
とりあえず、gist-dataの配下のtdをいじってやればいいかなー
ということになります(もちろんクラス名でも良い)。
じゃあ、子孫セレクタを使ってCSSを設定してやればいいということになります。
CSSのセレクタについてはここに簡潔にまとまっています。
セレクタ|CSS HappyLife ZERO

スタイル適用

はてなブログProの方限定ですが、tsukuruiroiro.hatenablog.com
に書いてある要領で、
f:id:fa11enprince:20150709042455p:plain
スマホのデザイン > ヘッダ > タイトル下で
スマートフォン用にHTMLを設定する
を選択します。
次のCSSを設定します。

<style type="text/css"> 
/* 仕方ないからこういう手である程度回避 */
.gist .gist-file .gist-data table {
    width: 500px;
}

/* 改行禁止 */
.gist .gist-file .gist-data td {
  word-break: normal;
}
</style>

これで保存してスマホで見ればだいたいの場合OKなはずです。
ちなみに400pxじゃダメでした。

CSS適用後

f:id:fa11enprince:20150711141813p:plain

私は、Web系がそれほど得意でない上にCSSも片手間で書いている程度なので
全然詳しくないのですが、word-breakはかなり曲者だそうで、
効かないことが多いみたいです。
そこでググったところ、安直な回避策はtableのwidthを設定してやることだそうです。
Webデザイナーさん。こういうのと闘っていて恐れ入ります。
【CSS3】word-wrap:break-wordとword-break:break-allの違いを説明します
CSS:CSSでボックス内の英語文字列等を折り返しさせる | raining
のあたりの記事を参考にしました。

そんなわけで充分に広いtable幅を設定し、word-breakにより折り返さないように設定しています。
もっと良い方法をご存じの方がいましたら教えていただけると感謝いたします!