CSSでボックスにタイトルを付ける!

CSSを使うとボックスの左上にタイトルを入れることができます。

ボックスの左上にタイトルを入れることができます。

CSSでラベルボックスを作る!

HTML

<div class="box_label" title="ここにタイトル">

 ボックスの左上にタイトルを入れることができます。

</div>

CSS

BOX部分

.box_label {
  position      : relative;            /* 子要素が親要素を基準に移動  */
  box-sizing    : border-box;          /* paddingとborderがwidthとheightの中に含まれる  */
  margin        : 14px auto 0 auto;    /* 枠の外側部分がマージン   */
  background    : #ffffff;                /* BOXの背景色             */
  padding       : 15px 10px 10px 10px; /* コンテンツと枠の間にある間隔が余白 */
  border        : 3px solid #6666ff;   /* BOXの枠線               */
  border-radius : 10px;                /* 要素の四隅の角を丸める   */
}

タイトル部分

.box_label::before {         /*疑似要素*/
  position      : absolute;          /* 親からの説対位置の定義  */
  display       : inline-block;      /* インライン要素のように横並びに配置でき、ブロック要素のように幅や高さ・余白の指定ができます。  */
  box-sizing    : border-box;        /* 罫線・余白も含む大きさ  */
  line-height   : 1;                 /* 行の高さを指定       */
  background    : #ffffff;           /* タイトル背景色          */
  color         : #6666ff;           /* タイトルの文字色        */
  content       : attr(title);       /* タグのhref属性やtitle属性が取得できます。 */
  font-weight   : bold;              /* タイトルは太字          */
  padding       : 8px 9px;          /* タイトル内の余白        */
  top           : -17px;             /* タイトル上位置はマイナス*/
  left          : 16px;              /* タイトル右位置は1文字分 */
  font-size     : 16px;              /* タイトルの文字サイズ    */
}

用語説明

padding
  1. 4つ値を指定する場合は上 右 下 左の時計回りの順
  2. 3つ値を指定する場合は上 左右 下の順
  3. 2つ値を指定する場合は上下 左右の順
  4. 1つだけ指定する場合は上下左右を一括で指定することになります。
「border」の内側の余白を設定するのが「padding」で外側の余白を設定するのが「margin」です。
padding

名詞のpaddingは、布やゴムなど柔らかい素材でできた「クッション、当て物、詰め物」で、衝撃を和らげたり形を整えたりするためのものです。

::before

要素の直前にHTMLには書かれていない疑似要素が挿入されます。
疑似要素は、親要素 「position: relative」 に対して「position: absolute」で絶対配置できます。

本来配置される場所を起点として配置することができるようになります。

CSSが分かるとボックスの左上にタイトルを入れることができます。

無料のホームページ作成ソフトBlueGriffonでホームページを作る方法

コメント

タイトルとURLをコピーしました