ラベルつきボックスを作る【記事でも使用中】

プログラミングの勉強用記事ばかりあげてたので、ここいらでWebデザインの記事を投稿させていただきます。

よく巷で見かけるラベル付きボックス。

サンプルは1種類 × 4色。
とりあえず形だけ作って、あとはなんぼでもいじってデザイン整えていきましょ！の気持ちで、シンプルなのをチョイスしました。

コピペでも世にたくさん出回ってますが、使うブログのテンプレートとかで変わってきちゃうかもなんで、結局は自分で理解して作れた方が早いよなあ…と思いまして。

案外簡単に実装できるので、ぜひご自身でもお好きなデザインのボックスを作ってみてください。

説明付き。

見本とコード

いつも通り、まずは見本とコードです。

See the Pen ラベル付きボックス by Micche (@micche) on CodePen.

※SCSSタブをクリック後、View CompiledクリックでSCSSからCSSに変換されます。

コードの説明HTML編

まずはhtmlの方から。

直接記事に貼り付けて使う方ですね。

<div></div>で箱をつくって、<span></span>でラベルを作ります。
文章は<p></p>で段落にします。改行は
でしますが、段落が変わる時は<p></p>を使います。

<div class="box">
  <span class="label">ラベル</span>
  <p>段落１</p>
  <p>段落２</p>
  <p>段落３</p>
  <p>段落４<br>改行</p>
  <p>段落５</p>
</div>

このままだとただ文字が羅列しているだけ。

文字が並んでいるだけのプレーンな状態

htmlの構造。

ここからデザインしていきます。 見本はSCSSで作ってますが、説明はCSSでしていきます。

コードの説明CSS編

ここからデザインの説明に入ります。

順序としては、

1. divタグに枠線をつける
2. spanタグをラベル風にする
3. ボックスの中身（本文部分）のを整える
4. 余白を整える

といった感じに進めていきます。

1.divタグに枠線をつける

今回<div class="box">とクラスをつけたので、そのクラス名を使用します。

.box {
  margin: 4em auto; /*上下に余白4em分・左右真ん中揃え*/
  padding: 1em; /*内側の余白*/
  width: auto; /*ボックスの横幅はオートに*/
  max-width: 600px; /*横幅600pxよりも大きくならないように*/
  font-size: 0.95em; /*本文より少しだけ文字小さめ*/
  background: white; /*box内の背景色。透明にしたければなくてOK*/
  border: 2px solid #ddd; /*boxの枠線の設定*/
  border-radius: 0 5px 5px; /*枠線に丸みを持たせる*/
  position: relative; /*後々出てくるspanタグのラベルのために設定*/
}

marginは、ラベルの縦幅分+2emで計算してます。
余白をとらないとラベル部分と記事の文字がかぶって見えなくなります。

paddingは内側の余白。枠線と文字との隙間がきつきつになると見づらいので設定します。

widthとmax-widthはボックスの横幅指定。
指定しないとどこまでものびていくので、max-widthで最大値を決めておきます。
記事内だったらだいたい600pxくらいかな。
モバイルでみたときは横幅いっぱいになってると思います。

font-sizeは好みのサイズに。 1em=記事と同じ文字サイズなので、ちょこっと小さいくらいにしてみました。同じサイズでも全然問題ないです。

backgroundは白色にしていますが、背景色がいらなければまるっと消してOKです。 逆に、背景色はほしいけど、線はいらないって場合は、後述のborder:〜〜〜;をまるっと消します。

borderで枠線を作ります。太さは2pxくらいがかわいいかなと。自由に決めちゃってください。

線の種類は、

• solid…実線
• dashed…波線
• dotted…点線
• double…２重線

で。(2重線は3px以上でしか2重になりません。)

border-radius: 0 5px 5px;で線に丸みをもたせます。背景色だけの場合も角が丸くなります。
完全にカクカクした四角いboxがよければまるっと消してください。
5pxの値を大きくすると丸の度合いがもっと丸くなります。
逆に小さくするとどんどんカクカクになります。

値と角の場所の関係は、border-radius:左上・左下右上・右下;　です。

positionは絶対位置と相対位置の指定です。 このあとでラベルを<span>で作るのですが、その時に絶対位置でボックスの上にラベルをつけるので、ここではposition:relative;とし、相対位置にします。

簡単に覚えるなら、

position:absolute;とセットで使う！と覚えます。

position:absolute;にした要素は自由に配置ができるようになるので、その基準点をposition:relative;で決めてあげるというイメージです。

現段階での見た目はこんな感じ

ラベル部分をタグで作る

.box .label {
    display: inline-block; /*自由に動かせるブロック要素に*/
    position: absolute; /*絶対位置*/
    border-radius: 5px 5px 0 0; /*左上・右上のみ丸く*/
    padding: 0 1em; /*文字の左右に余白*/
    width: auto; /*横幅は文字数に合わせて伸縮*/
    height: 2em; /*好きな高さ*/
    line-height: 2em; /*heightで設定した高さと同じ*/
    top: -2em; /*heightで設定した高さ分上に移動させる*/
    left: -2px; /*borderで設定した線の太さ分左に寄せる*/
    font-weight: bold; /*文字を太字に。お好きに。*/
    background: #ddd; /*ラベルの背景色。お好きに。*/
}

ここでのポイントは、

1. position:absolute;で絶対位置にし、ボックスを基準として自由に移動できるようにすること
2. inline要素である<span>タグをdisplay:inline-block;に変え、自由に移動できるようにすること
3. 高さを揃え、文字を中央揃えにすること
4. 高さ分上に移動させること
5. ボックスの枠線分左に寄せること

の計5つ。

heightでラベルの高さをきめ、さらにline-height（文字の高さ）をheightと同じ高さにすることで、文字を中央に配置します。

top:-2em;で、ラベルの高さ分上に上げます。 というのも、ボックスを基準に考えるので、top:0;left:0;でボックスの左上にぴったりとはまります。 なので、そこからラベルの高さ分を上にあげてあげます。

left:-2px;で枠線の太さ分左によせてあげます。
そうすることで、完全にボックスに綺麗にぴったりくっついたラベルの完成です。

ここまででラベルが完成。あと少し。

あとはボックス内の段落の余白を調整します。

段落部分の余白を調整する。

大体のブログが余白はすでに作られてると思いますが、念のためにbox内の余白を指定して作りました。

.box > p:not(:last-child) {
  padding-bottom: 1em;
}

padding-bottom:1em;でそれぞれの段落の下に１文字分間隔をあけています。 :not(:last-child)で、「最後の段落以外」ということになります。 最後の段落は余白をつけず、それ以外の段落のみpadding-bottom:1em;が適応されます。

`:not()`をつけることで、`padding-bottom`は`p:last-child`以外に適応される

わかりやすいよう隙間を消すと…

隙間がないと窮屈で見づらく、段落の区切れ目がわからない

まとめ

と、いうことで簡単にラベル付きのボックスを作る方法でした。

ポイントは

1. <div>タグをposition:relative;で相対位置にすること
2. <span>タグをposition:absolute;で絶対位置にし、<div>で作ったボックスの外に配置すること

の２点。

それから、ラベルにした<span>タグの部分でのポイントは、

1. heightとline-heightを同じ値にし、文字の高さを中心にもってくること
2. topの値はheightの高さにマイナスをつけ、上に移動させること
3. leftの値はborderの太さ分にマイナスをつけ、左に移動させること

の３点。

また、色のバリエーションを作ることもできます。 code penの見本をみながら、好きな色を作ってみてください✨