気づき&学び days

ブログで「お知らせ」や「イベント案内」などで使いたくなる『囲み枠』

でも、実際に使ってみると

『囲み枠』が表示エリアの幅全体に広がってしまい、バランスが悪く体裁がよくないので、

● 『囲み枠』の幅を狭くしたい

● 『囲み枠』の幅を枠内のテキストの長さに合わせて狭くしたい

といったお問い合わせが時々あります。


今日は、そのような時に便利な『囲み枠』の幅を調整する方法を２つ紹介したいと思います。

● 『囲み枠』の幅を指定して枠幅を狭くしたい

例えば、次のようなお知らせでは


枠内のテキストの長さに関係なく、枠の幅が表示エリア全体の幅いっぱいに広がってしまい、なんだか間延びしてしまいます。

通常、この囲み枠を表示させるタグは次のように書きます。

こんな時、枠幅を狭くするために枠幅を指定する方法があります。


こんな感じで枠幅を指定して、枠幅を狭く表示できます。


囲み枠を表示させる通常のタグの中に、上記のように枠幅を指定する width:300px; を追加すると、上記のように表示されます。

● 『囲み枠』の幅を枠内のテキストの長さに合わせて狭くしたい

枠幅を指定してしまうと、スマホで見た時に枠幅がはみ出てしまったりすることもあるので、枠内のテキストの長さに合わせて枠幅を自動調整する方法です。



こんな感じで、テキストの長さが一番長い「日時：2016年2月3日10:00～12:00」に合わせて、枠幅が自動調整されます。

このようにするには、


囲み枠を表示させる通常のタグの中に、display:inline-block;を追加すると上記のように表示されます。

囲み枠の幅が気になる方は、是非試してみてください。

今日も最後までお読みくださりありがとうございました。