[CSS] リンクの頭に参考バッヂ付けたらレイアウト崩れた。white-spaceで解決
2017/01/31
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の値を「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; /* ←追加 */
}
確認すると…
あら不思議。バッヂが崩れず表示できました。
※リンクエラーチェックのプラグインが発動してますが、無視してください。。
これが正しいやり方なのか分かりませんが、とりあえずレイアウトの崩れを防ぐことができました。
是非おためしあれ!
Web開発のお仕事を募集しています
フリーランスのエンジニアとして、Webシステム開発のお仕事依頼を随時募集しています(現在の業務量によってお受けできない場合もあります)。
「Ruby on Rails」「JavaScript(jQuery, Reactなど)」「HTML + CSS」を用いたシステム開発、「Heroku」等を用いたサーバー構築・運用、「Git」や「GitHub」を利用したソーシャルコーディングなどに対応しています。
ご依頼を検討している方は、下記リンク本ブログからのお問い合わせ、もしくはokutaniのポートフォリオからご連絡ください。
LINKお問い合わせ
スポンサーリンク