[CSS] リンクの頭に参考バッヂ付けたらレイアウト崩れた。white-spaceで解決

2015/04/19 2017/01/31

Pocket

CSSで可愛いレイアウトが出来るとうれしくなりますよね。Webデザインのお勉強中okutani(@okutani_t)です。

参考リンクを紹介するとき、以前はリンクをそのまま貼り付けているだけだったのですが、質素すぎたので簡単なバッヂをCSSで作ったんですね。

そしたら、リンクの長さによってバッヂのレイアウトが崩れてしまったので、今回その解決方法を載せておきます。

バッヂの崩れを防ぐ方法

まず僕が作ったバッヂがこれです。

HTMLとCSSはこんな感じ。

・HTML

<span class="s-badge">参考</span>

・CSS

span.s-badge {
    padding: 3px 6px;
    margin-right: 8px;
    margin-left: 1px;
    font-size: 75%;
    color: white;
    background-color: #04B404;
    border-radius: 6px;
    box-shadow: 0 0 3px #ddd;    
}

リンクURLが短いと大丈夫なのですが、長くなると…

ガーン。崩れてる。無理やり再現したので、URLわけわからないことになってますが気にしない。

このレイアウト崩れを直すには、CSSにwhite-spaceを付け加えてあげればOKです。

white-spaceって？

white-spaceプロパティは、ソース中の半角スペース・タブ・改行の表示の仕方を指定する際に使用します。

参考white-space－スタイルシートリファレンス

White-spaceの値を「nowrap」にしてあげることで、自動的な折り返しを禁止することができます、とのこと。

これを使えば、バッヂのレイアウト崩れを防ぐことができるのでは…！？

CSSにwhite-spaceを設置

先ほどのCSSにwhite-space: nowrap;を付け加えてあげましょう。

span.s-badge {
    padding: 3px 6px;
    margin-right: 8px;
    margin-left: 1px;
    font-size: 75%;
    color: white;
    background-color: #04B404;
    border-radius: 6px;
    box-shadow: 0 0 3px #ddd;
    white-space: nowrap; /* ←追加 */
}

確認すると…