Category
Archives
Cocotiie
Trial And Error!やってみよう!の精神でWeb制作をしています。初心者の方にも伝わるよう、心がけています。少しでも誰かの助けになれれば嬉しいです。宜しくお願い致します。

2006年:Web制作に関する覚書きブログをはじめる。

2018年:Cocotiie(ココッティー)として運営開始。
テーマをSWELLにしてリニューアルしましたSWELLについて

[CSS]文字の長さだけinline-blockで装飾する

css-inline-block

CSSってなんて便利なの!CSSでボタンを作れば画像で作る手間が省けます。作業効率が格段に上がります。
要素にborderや、display:blockでボタンにする場合、一行まるごとCSSが適応されてしまいます。

そんな時は、display: inline-block; を追記すると、文字がある長さだけ装飾する事ができます。paddingで余白を整える事で簡単にボタンの様にする事ができます

a{
display: inline-block;
margin-left: 6px;
white-space: nowrap;
padding: 1px 4px;
border-radius: 3px;
text-decoration: none;
}

この記事は2015年11月に旧ブログに書いたものを引っ越しさせました。

\この記事がお役にたったら/

広告を減らしサイトを見やすくする予定です

cocotiieの運営をサポートして頂ければ嬉しいです

「金額を入力」で1円から入力できます

よかったらシェアお願いします
  • URLをコピーしました!
  • URLをコピーしました!

コメント ※ハンドルネームでお願いします

コメントする

INDEX