HTML WEB関係

divタグの囲み枠をテキスト(文字)の幅に調節して修飾させる方法

投稿日:2020年12月16日 更新日:

サイトの修飾ってとても好き。けどなかなかうまく行かなくてイライラ☆
タイトルとかに色をつけたくてdivタグにカラーとか枠指定をすると、画面横いっぱいに色が広がってしまいますよね。
今回はちょうど修飾幅が文字の幅になるようにしていきたいと思います。

divタグの囲み枠が伸びる

さて、素敵に修飾するぞ!と思ったけど、divタグで修飾したら横いっぱいに広がってしまいますね…

  <div style=”background-color: #f2f2f2;”>俺の名はジャック!!!よろしくな!!</div>

上記のタグを作成して、ブラウザで表示させるとこうなります。
divtag_kakoi
テキストの幅は無視し、ピンク色の背景がひたすら長い。

…というのも、divタグはブロックレベル要素、横幅は画面いっぱいの100%になるのが特徴。後、改行も勝手に入りますね。
これはこれで便利なのですが、今回はテキスト(文字)幅に幅が合うようにします。

Divタグの囲み枠をテキスト(文字)の幅に調節して修飾するには?

それでは、このブロック要素を「インラインブロック要素」にしていい感じにしていきましょう。
インラインブロック要素は、文字幅によって横幅が決まります。

ブロックレベル要素をインラインブロック要素にするには、style属性に
display: inline-block;を入れてあげます。

    <div style=”background-color: pink;display: inline-block;“>俺の名はジャック!!!よろしくな!!</div>

divtag_kakoi_2

これで枠幅が文字にあいましたね!
微調整をしたい時は、paddingをぶっこみます。

<div style=” background: pink; display: inline-block; padding: 8px;“>ご使用上の注意</div>

完成したものは下記↓

俺の名はジャック!!!よろしくな!!

 

念の為、styleシートでで記入する時も同じだよ~。

.div {
    background: pink;
    display: inline-block;
    padding: 8px;
}

まとめ

未だにミスる…。

スポンサーリンク




スポンサーリンク




-HTML, WEB関係
-,

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

convenient _tool_3

背景画像の切り取り(削除)が一瞬で出来る無料サイトが最高なので綴る<remove.bg>

いきなりですが 無料で、背景画像が一瞬で切り取り(削除)が出来るサイトが最高でした。 フォトショとかで背景を切り取るするのって結構面倒くさい。ベジェ曲線も苦手。 画像加工の画像数が増えれば増えるほどめ …

wp_error

WPログイン画面でエラー(Cookieがブロック)が出る時の対策<SSLの設定にご注意を>

ある時、ログイン画面で下記のようなエラーがでてしまった。 「エラー: Cookie がブロックされているか、お使いのブラウザーで未対応のようです。WordPress を使うには Cookie を有効化 …

【Illustrator】イラレで蜘蛛の巣をさくっと簡単に作成する方法<備忘録>

今回はIllustrator(イラレ)でサクッと蜘蛛の巣を作成しましょ。 夏の季節・ハロウィンの季節に使えそうな予感。 Contents1 イラストレーター(イラレ)で作る蜘蛛の巣2 イラストレーター …

GoogleAdSense

アドセンス審査に受かるには?6記事で合格した方法まとめ

サイトを作成している方は、是非導入したい「Google AdSense」(成果報酬型広告)。このグーグルアドセンスを始める為には申請をして審査をパスする必要があるのです。今回、まさかの6記事でアドセン …

Illustrator_1

【イラストレーター(Illustrator)】イラレでアートボードの背景が白くなった時の対処法<備忘録>

イラレでラインスタンプ作ってたら、アートボードの背景が真っ白になって境界線が消えた。 ↑こーゆーこと。 普段、アートボードの背景は黒とかグレーなんだけど急に真っ白になっちまった。 一体何のショートカッ …

背景画像

プロフィール画像

あさの まき

WEB関連の仕事をしている旅行と酒を愛してやまない女。 いい大人の雑記。

ツイッター

SPONSORED LINK