サルワカおしゃれボックス27を改良してスマホ対応してみた!画面幅が小さい時に長いラベルが見切れる現象を解消

「サルワカ」様のサイトにおしゃれなボックスがありました。こんなやつです。

「タイトルラベル」と「ボックス」から構成されており、タイトルラベルがボックスの上にちょこんと乗っているタイプです。とってもオシャレですよね!

下の記事の27番にHTMLソース・CSSソースがあり、コピペするだけで使えるので、超便利!ありがたいです。サルワカさまさまです。

【CSS】おしゃれなボックスデザイン(囲み枠)のサンプル30
HTMLとCSSのコピペですぐに表示できる『囲み枠』『ボックスデザイン』の例を30個紹介します。Webサイトやブログでご活用ください。

ところで、「コレは私も使いたい!」と思って実際に使ってみたところ、スマホのように画面幅が小さい場合の挙動が、私の希望とは少し違っていました。簡単に言うと、タイトルラベルが長くなったときに、スマホでキレイに表示されないんですね(後述)。

なので、自分なりに改良(カスタマイズ)してみました。

マニアックな話題ですが、同じ問題にぶつかってしまう人もいると思うので、解決方法を共有します。

(以下、画面キャプチャはChromeのスマホエミュレータが出力したものを使っています。)

スポンサーリンク
スポンサーリンク

問題点:ラベルに長い文字列を入れると見切れる

オシャレボックスはスマホだと通常次のように見えます。

参考のためにHTMLソースとCSSソースも載せておきます。

<div class="box27">
    <span class="box-title">POINT</span>
    <p>タイトルラベルがボックスからはみ出るようなデザインです。
    重要なポイントなどを強調したいときに使うのがおすすめです。</p>
</div>
.box27 {
    position: relative;
    margin: 2em 0;
    padding: 0.5em 1em;
    border: solid 3px #62c1ce;
}
.box27 .box-title {
    position: absolute;
    display: inline-block;
    top: -27px;
    left: -3px;
    padding: 0 9px;
    height: 25px;
    line-height: 25px;
    vertical-align: middle;
    font-size: 17px;
    background: #62c1ce;
    color: #ffffff;
    font-weight: bold;
    border-radius: 5px 5px 0 0;
}
.box27 p {
    margin: 0; 
    padding: 0;
}

上の例のように、タイトルラベルの文字が「POINT」など短い場合には何の問題もありません。でも長くなるとどうなるか? 理想としてはこうなってほしいのです。

しかし、実際には次のように表示され、長いタイトル文字列が途中で見切れてしまっていることが分かります。

上記画像では、右に見切れてしまった以降の文字列は改行され、ボックス部分の文字列と重なってしまっています。文字色が白なので、ボックス内の一行目の文字がかすれたように見えています。

環境によっては、タイトルラベルは改行されずに単に画面外に行く場合もあるはずです。どちらになるかは他のCSSとの兼ね合いで決まります。

ラベルが長い場合でもキレイに見せたいので、カスタマイズを行います。

解決策1:CSSのみを改良する

解決策の1つ目は、「既にサルワカ様サイトにあるHTML・CSSサンプルを多くの記事で利用している人」向けのカスタマイズです。

サルワカ様のオリジナルのCSSをいったん取り消して、次のCSSで置き換えればOKです。

.box27 {
	margin: 0;
}
.box27 .box-title {
    margin: 0;
    padding: 3px 9px 0 9px;
    display: inline-block;
    background: #62c1ce;
    color: #ffffff;
    font-weight: bold;
    border-radius: 5px 5px 0 0;
    border: solid 3px #62c1ce;
    vertical-align: middle;
}
.box27 p {
    margin: -1px 0 0 0;
    padding: 0.5em 1em;
    border: solid 3px #62c1ce;
}

CSSを置き換えると、画面幅が小さい場合にタイトル文字列がラベル部分の中で改行されますので、キレイに見えます。

CSSの解説は省略しますが、サルワカ様のオリジナルのものよりも単純な感じです。

もちろん、タイトル文字列が短い場合は、従来とほぼ同様の見た目になります。

解決策2:HTML・CSSを改良する

解決策の2つ目は、「まだサルワカ様提供のHTML・CSSを利用していない人」(というか私)向けの改良版です。画面での見た目は解決策1と同じですが、HTMLの構成に変更を加え、それに合わせてCSSも少し変えています。

<div class="kakomi">
    <div class="kakomi-title">POINT タイトルラベルが長くなるとどうなるか試してみよう</div>
    <div class="kakomi-content">タイトルラベルがボックスからはみ出るようなデザインです。重要なポイントなどを強調したいときに使うのがおすすめです。</div>
</div>
.kakomi {
	margin: 0;
}
.kakomi-title {
    margin: 0;
    padding: 3px 9px 0 9px;
    display: inline-block;
    background: #62c1ce;
    color: #ffffff;
    font-weight: bold;
    border-radius: 5px 5px 0 0;
    border: solid 3px #62c1ce;
}
.kakomi-content {
    margin: -1px 0 0 0;
    padding: 0.5em 1em;
    border: solid 3px #62c1ce;
}

HTML改良のポイントは3つ。

  • クラス名を変更。kakomi は「囲み」という意味です。私の好みです。
  • ラベル部分のタグを span から div に変更。これもあまり深い意味は無く、ただの好みです。
  • ボックス部分のタグを p から div に変更。これはオリジナル版では p のみを使うことが前提となっているのに対し、私は div 内に必要に応じて p や ul などのボックス要素を自由に配置したいと思い、このようにしました。

早い話、私が使いやすいようにカスタマイズしましたという話です。これからラベル付きボックスを使うよ!という人はこっちのバージョンでも良いかもしれません。

なお、こちらのバージョンも、タイトルが短い場合はほぼ従来通りの表示となります。

以上、解決策1と2を示しました。よかったら使ってみてくださいね。

スポンサーリンク
スポンサーリンク
【雑記】PC
Kiryuをフォローする
宅建士合格ブログ