スポンサーリンク

CSSを使って囲み枠を作ってみた！ちょっとおしゃれなデザインにチャレンジ！

2019年7月6日HTML・CSS

  • 2021年8月22日
    『4.アイコン付き』を追加しました。
  • 2019年7月27日
    『1-5 サブタイトル付き』を追加しました。

前回の記事で基本的なCSSを使って囲み枠を作る方法を紹介しました。

今回はちょっとだけおしゃれな囲み枠を作ってみたのでご紹介します。

きらり

きらり

今回はCSSとか教えてくれないの？
結耶

結耶

んーデザインによって使うもの違うしね(^^;
できるだけどこをいじったらいいかを解説はするようにします。
スポンサーリンク

シンプル(タイトル付き)

1-1 枠線の上にタイトル
1-1 枠線上にタイトルシンプルな囲み枠の左上の枠線の上にタイトルをつけたものです。

HTML
<div class="box1-1">
<span class="box-title1-1">タイトル付き</span>ここに内容</div>
CSS
/*タイトル付きボックス*/
.box1-1 {
    margin:20px auto;  /*ボックス外側の余白*/
    padding:1em;    /*ボックス内側の余白*/
    position:relative;
    border:2px solid gray;  /*枠線の太さ 線種 色*/
}

/*タイトル部分*/
.box-title1-1 {
    position:absolute;
    top:-17px;  /*上からのタイトルの位置*/
    left:10px;   /*左からのタイトルの位置*/
    padding:0 7px;  /*内側の余白*/
    background:#fff;  /*背景色*/
    font-size:18px;  /*文字サイズ*/
    font-weight:bold;  /*太字*/
}
Point
  • タイトルの位置がズレたりした場合は、12行目のtop、13行目leftの値を変えてください。
  • タイトルの背景色を帰る場合は15行目の色を変更してください。合わせて文字色(color)no指定もしてください。

タイトルの位置を変える

上のCSSの12行目と13行目のtopやleftを変えるとタイトルの位置を変えることができます。

タイトルタイトルを右上にしたものです。
上のCSS 13行目の「left」を「right」に変えるとタイトルが右上になります。
タイトル12行目のtopをbottom、13行目のleftをrightに変えると右下にタイトルを表示させることができます。

タイトルの背景色を変える

15行目のbackgroundの色を変更すれば背景色を変更することができます。

普段は白背景を使っていても…ときと場合によっては「色を変えたい」と思うこともあります。

きらり

きらり

そういうときはまたクラス名を変えてCSSを新たに設定した方がいいの？
結耶

結耶

ううん。その必要はないよ。
CSSはHTMLに近い方が適用されるからHTMLに変えたい箇所をstyle=""で指定すれば変えられるよ！

タイトルと枠線の色を変えてみた！<div class="box1-1″ style="border-color:navy;">
<span class="box-title1″ style=""background:royalblue; color:white; “>タイトル付き</span>ここに内容</div>

HTMLnの黄色い部分のようにCSSを入れてタイトルと枠線の色を変えています。
このようにすればときどき色を変えたいときに色を変えることができます。

私がやっているタイトルの背景色の変え方

私はタイトル付きの囲み枠のタイトル部分のCSSは背景色と文字色の指定をしていません。

タイトルの背景色と文字色を別でCSSを設定しています。

例えば上のような場合、

.ao-label {
    background:royalbelue; 
    color:white;
    font-weight:bold;
}

こんな感じで青色以外の色も作っています。
そしてこれをタイトル部分のclass="box-title ao-label" と追加してタイトルの色を変えています。

※複数のクラスを指定する場合は半角スペースで区切って指定してください。

このように別に作ったものはボックスのタイトルだけではなく こんな風に文章など他のところでも使えます。
(ちなみにたびたび出てくるのHTML CSSでもこれらを使っていますw)

結耶

結耶

これはあくまで私のやり方です。私はこの方が都合がいいのでこうしています。
【3年連続/楽天年間1位】iPhone 充電ケーブル Lightning ケーブル apple認証品 充電器 ライトニングケーブル 1m 1.5m 2m 3m 15cm 50cm 純正品質 MFi 12 SE2 11 X 8 iPad アップル 断線 丈夫 細い 【メール便専用】長期保証 ポイント消化 [015]
¥1,000 （2024/12/06 09:50時点 | 楽天市場調べ）
Amazon
楽天市場
Yahooショッピング
1-2 枠線の上にタイトル(角丸)
1-2 枠線上にタイトル(角丸)シンプルな囲み枠(角丸)の左上の枠線の上にタイトルをつけたものです。

 

HTML
<div class="box1-2">
<span class="box-title1-2">タイトル付き</span>ここに内容</div>
CSS
/*タイトル付きボックス(角丸)*/
.box1-2 {
    margin:20px auto;  /+*ボックス外側の余白*/
    padding:1em;    /*ボックス内側の余白*/
    position:relative;
    border:2px solid gray;  /*枠線の太さ 線種*/
    border-radius:0.5em;  /*角丸*/
}

/*タイトル部分*/
.box-title1-2 {
    position:absolute;
    top:-17px;    /*上からのタイトルの位置*/
    left:10px;     /*左からのタイトルの位置*/
    padding:0 7px;  /*内側の余白*/
    background:#fff;  /*背景色*/
    font-size:18px;  /*文字サイズ*/
    font-weight:bold;  /*太字*/
}
1-3 ボックスの上にタイトル
1-3 ボックスの上にタイトルボックスの上にタイトルをつけてみました。

 

HTML
<div class="box1-3">
<span class="box-title1-3">タイトル</span>ここに内容</div>
CSS
/*ボックスの上にタイトル*/
.box1-3 {
    margin:3em auto;  /*ボックス外側の余白*/
    padding:1em;    /*ボックス内側の余白*/
    position:relative;
    border:2px solid #ff8c00;  /*枠線の太さ 線種 色*/
}

/*タイトル部分*/
.box-title1-3 {
    position:absolute;
    top:-32px;  /*上からのタイトルの位置*/
    left:-2px;    /*左からのタイトルの位置*/
    padding:0 7px;  /*内側の余白*/
    background:#ff8c00 ;  /*背景色*/
    color:#fff;    /*文字色*/
    font-size:18px;  /*文字サイズ*/
    font-weight:bold;    /*太字*/
}
1-4 ボックスの中(左上)にタイトル
ボックスの中(左上)ボックスの中(左上)にタイトルをつけたものです。

 

HTML
<div class="box1-4">
<span class="box-title1-4">タイトル</span>ここに内容</div>
CSS
/*ボックスの中(左上)にタイトル*/
.box1-4 {
    margin:20px auto;
    padding:2.7em 1em 1em;
    max-width:500px;
    position:relative;
    border:2px solid #ff8c00;
}

/*タイトル部分*/
.box-title1-4 {
    position:absolute;
    top:0;
    left:0;
    padding:0 7px;
    background:#ff8c00;
    color:#fff;
    font-size:18px;
    font-weight:bold;
}
1-4 ① ボックスの中(枠いっぱい)にタイトル
ボックスの中(枠いっぱい)上のタイトル部分を枠いっぱいに広げてタイトルを中央に表示するようにしたものです。

 

HTML
<div class="box1-4_1">
<span class="box-title1-4_1">タイトル</span>ここに内容</div>
CSS
/*ボックスの中(左上)にタイトル*/
.box1-4_1 {
    margin:20px auto;
    padding:2.7em 1em 1em;
    max-width:500px;
    position:relative;
    border:2px solid #ff8c00;
}

/*タイトル部分*/
.box-title1-4_1 {
    position:absolute;
    top:0;
    left:0;
    padding:0 7px;
    width:100%;
    background:#ff8c00;
    color:#fff;
    font-size:18px;
    font-weight:bold;
    text-align:center;
}
1-5 サブタイトル付き
1-5 サブタイトル付き
サブタイトル付きのボックスです。左上枠線上にサブタイトルを付けて、ボックス内にタイトルをつけました。

 

HTML
<div class="box1-5">
<span class="box-title1-5">タイトル</span>
ここに文章</div>
CSS
.box1-5 {
    margin:20px auto;
    padding:17px 1em 1em;
    position:relative;
    border:2px solid #ff8c00;
}

/*サブタイトル(固定)*/
.box1-5 :before{
    padding:0 8px;
    position:absolute;
    top:-22px;
    left:10px;
    font-family: 'Gochi Hand', cursive;
    content:"Point";
    color:#ff8c00;
    font-size:24px;
    font-weight:bolder;
    background:white;
}

/*タイトル*/
.box-title1-5 {
    margin:7px 0 10px;
    padding:2px 7px;
    color:#ff8c00;
    font-size:18px;
    font-weight:900;
    border-bottom:4px double #ff8c00;
}

※サブタイトル(左上枠線上)は『Point』にしています。変更する場合は15行目の『Point』を変更してください。
また字体はWebフォント(欧文フォント)を使用しています。使わない場合は14行目のfont-familyを削除または他のフォントに変更してください。

※上の『Point』だけで下のタイトル無しにする場合HTMLの2行目、CSSの22行目～30行目を削除してください。

黒板風

前回紹介した黒板風の囲み枠にもタイトルをつけてみます。
※タイトルなしのコードは全2回の記事を参考にしてください。
    CSSを使って囲み枠を作ってみよう！
2 黒板風(タイトル付き)
お知らせタイトルをつけてみました(*^^*)
「お知らせ」の部分がタイトルになります。

 

HTML
<div class="box-kokuban2-1">
<span class="kokuban2-1">タイトル</span>ここに内容</div>
CSS
/*黒板風タイトル付き*/
.box-kokuban2-1 {
    margin:20px auto;
    padding:4em 1em 1em;
   position:relative;
    background:#0B614B;
    color:#fff;
    border:8px ridge chocolate;
}

/*タイトル部分*/
.kokuban2-1 {
    position:absolute;
    top:1em;
    padding:0 7px;
    width:90%;
    font-size:18px;
    font-weight:bold;
    color:#fff;
    text-align:center;
    border-bottom:3px double #fff;
}
お知らせタイトルの位置を変えたものです。

 

HTML
<div class="box-kokuban2-2">
<span class="kokuban2-2">タイトル</span>ここに内容</div>
CSS
/*黒板風タイトル付き*/
.box-kokuban2-2 {
    margin:20px auto;
    padding:4em 1em 1em;
   position:relative;
    background:#0B614B;
    color:#fff;
    border:8px ridge chocolate;
}

/*タイトル部分*/
.kokuban2-2 {
    position:absolute;
    top:1em;
    left:1em;
    padding:0 7px;
    font-size:18px;
    font-weight:bold;
    color:#fff;
    border:3px double #fff;
}

※タイトル部分の線(二重線)がいらない場合は21行目の「border:3px double #fff;」を削除してください。

メモ風

3-1 メモ風囲み枠
MEMO
こんな囲み枠を作ってみました！
メモ風というかノートのように罫線が入った囲み枠です(*^^*)
 
ちゃんと文章(行)に合わせて罫線が表示されます

HTML
<div class="memo3-1">
<span class="memo-title3-1">MEMO</span>
<div>ここに内容</div></div>
CSS
/*メモ風*/
.memo3-1 {
    margin:20px auto;
    padding:3.2em 1em 1em;
    position:relative;
    border:2px solid #555;
    border-radius:0.5em;
}

/*タイトル部分*/
.memo-title3-1 {
    position:absolute;
    top:0.5em;
    left:1em;
    padding:0 7px;
    font-size:20px;
    font-weight:800;
    color:#a61919;
}

/*テキスト部分*/
.memo3-1 div {
    margin:0;
    padding:0 3px;
    width:100%;
    background-image:url(罫線画像のURL);
    line-height:28px;
}

※罫線部分は背景画像(26行目)で罫線に見えるようにしています。

罫線となる画像の作り方は以下の通りです。

罫線画像の作り方
  1. 画像の大きさ：縦 28px×横 5px(高さは行間と同じにしないといけないので自分のブログにあった高さにしてください。)
  2. 下から1px～2pxあたりにポチポチ点を3px分横に線を描きます。(点線に見えるように2px分は残します)
  3. 画像を保存します。(背景色を設定している場合は画像全体に背景色と同じ色で塗りつぶすかPNG(透過))で保存してください。
  4. できた画像をアップロードしてURLを26行目background-imageに記述してください。

※27行目のline-heightは行間です。ここの値は必ず罫線画像の高さと同じにしてください。

3-2 メモ風 上下に線
MEMO
ここに内容

HTML
<div class="memo3-2">
<span class="memo-title3-2">MEMO</span>
<div>ここに内容</div></div>
HTML
/*メモ風囲み枠*/
.memo3-2 {
    margin:20px auto;
    padding:3.2em 1em 1em;
    position:relative;
    border-style:solid;
    border-width:1px 1px 7px 1px;
    border-color:#ff8c00;
}
 
/*タイトル部分*/
.memo-title3-2 {
    position:absolute;
    top:0;
    left:0;
    padding:0 7px;
    width:100%;
    background:#ff8c00;
    font-size:20px;
    font-weight:800;
    color:#fff;
}
 
/*テキスト部分*/
.memo3-2 div {
    margin:0;
    padding:0 3px;
    width:100%;
    background-image:url(keisen.jpg);
    line-height:28px;
}

アイコン付き

左側にアイコンが付いた囲み枠です。

お知らせや注意事項などに使えそうな囲み枠です。

HTML
<div class="box-info">
<p>ここに内容</p></div>
HTML
/*アイコン付き囲み枠*/
.box-info{
    margin:20px auto;
    position: relative;
    background: #fff;
    padding: 1em 0.5em;
    border-width: 2px 2px 2px 50px;  /*枠線の太さ(上 右 下 左)
    border-style:solid;                            /*枠線のスタイル*/
    border-color:#ff0000;                    /*枠線の色*/
}

.box-info:before {
    font-family: "Font Awesome 5 Free";
    content: "f071";          /*アイコンのコード*/
    font-weight: 900;
    position: absolute;
    padding:0;
    color: white;               /*アイコンの色*/
    left: -1.4em;;              /*アイコンの位置(左)*/
    top: 50%;
    font-size:30px;        /*アイコンの大きさ*/
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}

.box-info p{
    margin:0;
}

最後に

今回はタイトル付きの囲み枠を作ってみました。
タイトルがついただけでもちょっとオシャレになりませんか？

上記のサンプルは私のブログに合わせて作っています。
みなさんのサイトでは位置がズレたりしてしまうかもしれません。
もしコピーして使う場合はご自分のサイトに合わせて調整をしてください。

応援よろしくお願いします。
      ブログランキング・にほんブログ村へ

お問い合わせはこちら
この記事を書いた人
結耶 フォロー
結耶(ゆうや)

2017年9月からブログを始め、2018年1月にWordPressに変更しました。知識ゼロのから始めた超初心者で、WordPressやHTML、CSSなど勉強したことを書いています。
愛知県在住。多発性硬化症(MS)という難病と闘っています。

登場キャラクター
きらり
きらり

ある日ひょっこり現れ住みついた居候(いそうろう)。今は結耶と一緒にWordPressやアフィリエイトのことを勉強している。
性別は♂ 。どこから来たかは不明。

楽天ROOM