vdeep

*

vdeepはプログラミング、IT、Web技術、ライフハックの事などなどを管理人okutaniがつぶやくブログです。月間13万PV〜。

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

      2017/01/31

LINEで送る
Pocket

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

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

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

スポンサーリンク

バッヂの崩れを防ぐ方法

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

link-badge-white-space

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が短いと大丈夫なのですが、長くなると…

link-badge-white-space2

ガーン。崩れてる。無理やり再現したので、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; /* ←追加 */
}

確認すると…

link-badge-white-space3

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

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

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

是非おためしあれ!

この記事が気に入ったら
いいね ! しよう

Twitter で
LINEで送る
Pocket

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

 - CSS

スポンサーリンク

PC用AdSense

PC用AdSense

▼格安のWebサイト制作はじめました▼

格安のWebサイト制作
Share
  • このエントリーをはてなブックマークに追加

  こちらの関連記事もどうぞ

[WordPress]記事内で使える『連載記事一覧』機能をPHPで作ってみた

こんにちは、okutani(@okutani_t)です。ブログを書いていると、連 …

ポチレバをCSSで装飾してみた

こんにちは、okutaniです。前回「カエレバをCSSで装飾してみた | vde …

【Win・Mac】Sassを導入&初めてScssを使ってみる

こんにちは、okutani(@okutani_t)です。今まで、Webコーディン …

[レスポンシブ対応] CSSでチャット風デザインを実装する

「好きなプログラム言語何?」と聞かれれば、ためらいなく「CSS」と答えるokut …

カエレバをCSSで装飾してみた

こんにちは、okutani(@okutani_t)です。Amazonや楽天の商品 …

WordPress記事内の画像に影をつける方法

こんにちは、okutani(@okutani_t)です。WordPressサイト …

hタグ下に斜めのストライプボーダーを設置&ボーダー画像の作り方解説

デザインセンスが皆無、見よう見まねでWebデザインやってる僕okutani(@o …

CSSでリンク横に「参考・LINK」バッジをつけてみよう

こんにちは、okutani(@okutani_t)です。今回は、リンク横にCSS …

CSSで“蛍光ペン”っぽく文字にマーカー線を引く方法

こんにちは、okutani(@okutani_t)です。Twitterでこんな質 …

「Animate.css + wow.js」でWebサイトにアニメーションをつけてみよう

こんにちは、okutani(@okutani_t)です。みなさんはWebサイトに …

vdeepのトップページへ戻る画像です。風船の形をした島を女の子が掴んでいます。