[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; /* ←追加 */
}

確認すると…

あら不思議。バッヂが崩れず表示できました。

※リンクエラーチェックのプラグインが発動してますが、無視してください。。

これが正しいやり方なのか分かりませんが、とりあえずレイアウトの崩れを防ぐことができました。

是非おためしあれ！

Pocket

okutani (okutani_t) のヒトコト

okutani_t

リンクの頭にバッヂをつけるだけで、ちょっとオシャレになっていいですよね。オススメのバッヂの作り方があったら是非教えて下さい( ´ ▽ ` )ﾉ

Web開発のお仕事を募集しています

フリーランスのエンジニアとして、Webシステム開発のお仕事依頼を随時募集しています（現在の業務量によってお受けできない場合もあります）。

「Ruby on Rails」「JavaScript（jQuery, Reactなど）」「HTML + CSS」を用いたシステム開発、「Heroku」等を用いたサーバー構築・運用、「Git」や「GitHub」を利用したソーシャルコーディングなどに対応しています。

ご依頼を検討している方は、下記リンク本ブログからのお問い合わせ、もしくはokutaniのポートフォリオからご連絡ください。

LINKお問い合わせ

LINKokutani's Portfolio

- CSS