シンプルな囲み枠（ボックスデザイン）のサンプル４つ

今日は、このテーマで使用している囲み枠（ボックス）を４つご紹介します。

私はこのテーマ（WordPress）を開発をするにあたり、おしゃれな囲み枠を何としても作りたい！と思っていました。

理由は「SANGO」や「JIN」などの読みやすいテーマのわかりやすさの秘密が「囲み枠」にある、と確信していたからです。

参考にしたのはサルワカさんの記事！

制作にはわかりやすいサルワカさんの記事＞＞＞「【CSS】おしゃれなボックスデザイン（囲み枠）のサンプル30」を参考にさせて頂きました。おかげでレスポンシブ対応の使いやすい囲み枠が完成し、とても気に入っています。

今回、30記事書いたタイミングで自分のテーマ用に①枠内外の余白のバランスの調整、②「文章と箇条書き」の両方に対応できるようCSSの編集をしました。

それぞれの囲み枠のCSSにあるクラス名（box数字）は、サルワカさんの記事内にあるサンプルコードに対応しています。

特に苦心したのは、箇条書きと文章で枠内のHTMLを書き分けるコツをみつけることでしたが、なんとか使いやすいデザインにすることができました。自分への忘備録として、またオリジナルテーマの制作をする方の参考になればうれしいと思い記事にしておきます。

尚、初心者が自分用に作ったものですので、CSSをそのままコピペするとデザインが崩れるおそれがあります！質問の受付けも致しかねますのでご了承ください。

⒈むらさき点線枠

CSS

/*背景薄いムラサキ、点線枠、タイトルなし*/
.box6 { 
  padding: 30px 35px 0 35px; 
  margin: 20px 20px 40px 20px;
  background: #f7f7fb; 
  border: dashed 1.5px #5652AA;/*外枠の点線*/
  line-height: 1.8;
  font-size: 16px;
}

.box6 p {
    margin: 0;
    padding: 0;
}

【むらさき枠-⒈箇条書き】

HTML

<div class="box6">
<p>【5つのポイント】<br>
①ブログの始め方<br>
②ブログの続け方<br>
③テーマの色を決める<br>
④構成を決める<br>
⑤記事カードは？サイドバーは？SNSは何を表示させる？</p>
</div>

【むらさき枠-⒉文章のみ】

HTML

<div class="box6">
<p>ストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキキストテキストテキストテキストテキストテキストテキストテキストテキステキストテキキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキトテキストテキキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
</div>

【むらさき枠-3.応用編】

HTML

<div class="box6">・キーワードを単発で丸暗記するだけでは解けない<br>
→<strong class="marker-pink">人物一人につき、三つのキーワードを関連づけて覚える。</strong><p></p>
<p>・一連の功績や時代背景とともに人物を暗記しておく<br>
→<strong class="marker-pink">オリジナルのあだ名をつけ、「キャラクター化」</strong></p></div>

☆テキストモードで、行間を一行あけた場合↓

HTML

<div class="box6">
<p>・キーワードを単発で丸暗記するだけでは解けない</p>
<p><strong class="marker-pink">→人物一人につき、三つのキーワードを関連づけて覚える。</strong></p>
<p>・一連の功績や時代背景とともに人物を暗記しておく</p>
<p><strong class="marker-pink">→オリジナルのあだ名をつけ、「キャラクター化」</strong></p>
</div>

⒉“引用枠”

CSS

/*折り紙風、グリーンの引用枠*/
blockquote {
  position: relative;
  padding: 20px 20px 0 20px;
  margin: 20px 20px 40px 20px;
  box-sizing: border-box;
  font-style: italic;
  background: #f3f3f3;
}

blockquote:before{
  display: inline-block;
  position: absolute;
  top: -8px;
  left: 9px;
  width: 55px;
  height: 30px;
  vertical-align: middle;
  text-align: center;
  content: "\f10d";
  font-family: FontAwesome;
  color: #FFF;
  font-size: 18px;
  line-height: 30px;
  background: #d8e072;
  font-weight: 900;
}

blockquote:after{
  position: absolute;
  content: '';
  top: -8px;
  left: 64px;
  border: none;
  border-bottom: solid 8px #9CA361;
  border-right: solid 9px transparent;
}

blockquote p {
  position: relative;
  padding: 0;
  margin: 10px 0;
  z-index: 3;
  line-height: 1.7;
}

blockquote p:first-child {
  /* padding: 7px 0 18px 15px; */
  padding: 13px 15px
}

blockquote cite {
    display: block;
    text-align: right;
    color: #888888;
    font-size: 0.9em;
}

【引用枠-⒈引用元あり~箇条書き】

引用元「……」より

①アイウエオアイウエオ
②アイウエオアイウエオ
③アイウエオアイウエオ

HTML

<blockquote class="wp-block-quote"><p>引用元「……」より</p><p>①アイウエオアイウエオ<br>
②アイウエオアイウエオ<br>
③アイウエオアイウエオ</p></blockquote>

【引用枠-⒉引用元あり~文章】

CSS Block Quotation Examples

ここに引用する文を書きます。ここに引用する文を書きます。ここに引用する文を書きます。ここに引用する文を書きます。ここに引用する文を書きます。

HTML

<blockquote class="wp-block-quote"><p>CSS Block Quotation Examples</p><p><strong>ここに引用する文を書きます。ここに引用する文を書きます。ここに引用する文を書きます。ここに引用する文を書きます。ここに引用する文を書きます。</strong></p></blockquote>

⒉CSS Block Quotation Examples

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

HTML

<blockquote class="wp-block-quote"><p>⒉CSS Block Quotation Examples</p><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p></blockquote>

⒊ピンク枠

CSS

/*ピンク枠、ボックス内にタイトル付き*/
.box28 {　
  position: relative;
  margin: 2em 0;
  border: solid 2px #E1A7CA;
  border-radius: 5px;
  padding: 1.5em 2.0em;
  font-size: 17px;
  background-color: #fbf5f9;
}

.box28 .box-title {
    position: relative;
    display: inline-block;
    top: -27px;
    left: -35px;
    padding: 0 9px;
    height: 25px;
    line-height: 25px;
    vertical-align: middle;
    font-size: 17px;
    background: #E1A7CA;
    color: #ffffff;
    font-weight: bold;
    border-radius: 3px;
}

【ピンク枠-⒈箇条書き】

A:初期設定では行間がせまい

HTML

<div class="box28"><span class="box-title" style="top: -28px;">タイトルはここ！</span><br>
①ブログの始め方<br>
②ブログの続け方<br>
③テーマの色を決める<br>
④構成を決める<br>
⑤記事カードは？サイドバーは？SNSは何を表示させる？</div>

B:テキストモードで<br>を挿入して改行→Aと同じ表示

HTML

<div class="box28"><span class="box-title">タイトル！</span><br>
①ブログの始め方<br>
②ブログの続け方<br>
③テーマの色を決める<br>
④構成を決める<br>
⑤記事カードは？サイドバーは？SNSは何を表示させる？</div>

C:①〜⑤の行間を適度にあける解決法

HTML

<div class="box28" style="line-height: 2;"><span class="box-title" style="top: -32px;">タイトルはここ！</span><br>
①ブログの始め方<br>
②ブログの続け方<br>
③テーマの色を決める<br>
④構成を決める<br>
⑤記事カードは？サイドバーは？SNSは何を表示させる？</div>

・class=”box28“にstyle=”line-height: 2;”を書く。
・タイトル位置がずれたらclass=”box-title”にstyle=”top: -32px;”と書いて微調整

D:フォントの大きさやカラーを変更する

HTML

<div class="box28"><span class="box-title">タイトルはここ！</span><br>
<span class="box28-text" style="font-size: 30px; color: green;">①ブログの始め方 文字30</span><br>
<span class="box28-text" style="font-size: 25px;">②ブログの続け方 文字25</span><br>
<span class="box28-text" style="font-size: 20px; color: blue;">③テーマの色を決める 文字20</span><br>
<span class="box28-text" style="font-size: 13px;">③テーマの構成を決める 文字11</span></div>

【ピンク枠-⒉文書のみ】

HTML

<div class="box28"><span class="box-title">タイトル</span><br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit.</div>

⒋キミドリ枠

CSS

/*きみどり枠、背景イエロー、タイトル付き*/
.box26 {　
  position: relative;
  margin: 2em 0;
  padding: 30px 35px; 
  border: dotted 3px #D8E072;
  border-radius: 8px;
  line-height: 1.8;
  font-size: 17px;
  background: #fdfdf1;
}

.box26 .box-title {
  position: relative;
  display: inline-block;
  top: -38px;
  left: 10px;
  padding: 0 9px;
  line-height: 1;
  font-size: 22px;
  background: #FFF;
  color: #C1CC2D;
  font-weight: bold;
}

【キミドリ枠-⒈文章のみ】

HTML

<div class="box26"><span class="box-title">タイトルはここ！</span><br>
ストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキキストテキストテキストテキストテキスト</div>

【キミドリ枠-⒉箇条書き】

A:初期設定では行間がせまい

最初の文字列（pタグ）「①ブログの始め方」の上に余白ができている原因は、タイトルのpositionが上に移動しているから。これはタイトル付きの枠「ピンク枠」でも同様。

HTML

<div class="box26"><span class="box-title">ここにタイトル！</span><br>
①ブログの始め方<br>
②ブログの続け方<br>
③テーマの色を決める<br>
④構成を決める<br>
⑤記事カードは？サイドバーは？SNSは何を表示させる？</div>

B:テキストモードで<br>を挿入して改行→Aと同じ表示

HTML

<div class="box26"><span class="box-title">ここにタイトル！</span><br>
①ブログの始め方②ブログの続け方③テーマの色を決める④構成を決める⑤記事カードは？サイドバーは？SNSは何を表示させる？</div>

C:①〜⑤の行間を適度にあける解決法

HTML

<div class="box26" style="line-height: 2;"><span class="box-title" style="top: -45px;">タイトルはここ！</span><br>
①ブログの始め方<br>
②ブログの続け方<br>
③テーマの色を決める<br>
④構成を決める<br>
⑤記事カードは？サイドバーは？SNSは何を表示させる？</div>

☆ピンク枠のC:「①〜⑤の行間を適度にあける解決法」を参照。

おわりに

４つのシンプルな囲み枠のサンプルは、いかがでしたか？

今回ボックスデザインをして思ったことは、プロのテーマ開発者はなんてすごいんだろう！ということです。

初心者でもカンタンに使えて見栄えも最高な囲み枠をいくつも作れるんですから…。本当に神様みたいに思えてきました。

ちなみに私はこのシンプルなデザインを作るのに15時間以上もかかりました 汗　でも苦労したぶん愛着のある囲み枠が完成したので、とても満足しています。

各ボックスデザインのCSSも掲載しましたので、なにか参考になればうれしいです。

ではでは、また読みにきて下さいね！

関連記事

【初心者】CSSのコピペだけで実装できる見出しデザイン例4つ

今日は私がこのテーマのために作った見出しのデザインを４つご紹介します。 見出しは<h1>タグとか<h2>タグ...

記事を読む→

文系でパソコンも苦手だった私がプログラミングを学べた理由

こんにちは！えひめのMiho（@ehimemiho）です。 今日はCodeGrit（コードグリット）というオンラインスクールで201...

記事を読む→

Chromeのアップデートでサイトのレイアウトが崩れたときの対処法【CSS編集】

こんにちは。未経験からHTML&CSSを学び、自作のWordPressテーマでこのブログを運営している、えひめのMiho（＠ehi...

記事を読む→

【HTML＆CSS初心者でもできる】ボックス（囲み枠）のカスタマイズ

こんにちは、えひめのMiho（＠ehimemiho）です。 自作したWordPressのテーマでこのブログを運営して１年３ヶ月がたち...

記事を読む→

すべて公開！私のWeb制作スキルについて【HTML/CSS,WordPress】

こんにちは！えひめのMiho（＠ehimemiho）です。 未経験からHTML&CSSを学び、自分の作ったWordPress...

記事を読む→

次の記事   ＞＞

【初心者】CSSのコピペだけで実装できる見出しデザイン例4つ