CSS【囲み枠】ボックスデザイン

HTMLとCSSでデザインされた囲み枠のサンプルです。 ホームページ作りにご利用ください。

基本HTML

<div class="msgbox msgarea-alert">
  <div class="icon-font">
    <i class="fas fa-exclamation-circle"></i>
  </div>
  <div class="msg">
    <p>ここに内容を書く。</p>
  </div>
</div>

基本になるHTMLです。赤色の部分はクラスです。青色の部分はアイコンフォントです。それを変更することで色や左側のアイコンフォントを変更できます。

共通CSSをみてみる 
*{
	font-family:-apple-system-body,BlinkMacSystemFont,"Helvetica Neue","Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans Japanese","游ゴシック  Medium","Yu Gothic Medium","メイリオ",meiryo,sans-serif;
	word-break:normal !important;
	word-wrap:break-word;
	-webkit-text-size-adjust:100%;
	margin:0;
	padding:0;
	line-height:1.0;-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
}
.msgbox{
	max-width:90%;
	margin:2em auto;
	text-align:left;
	border-radius:12px;
	padding:0 .5em .5em 0;
	display:-webkit-box;
	display:-ms-flexbox;
	display:flex;
	flex-wrap:wrap;
}
.icon-font{
	position:relative;
	top:-.5em;
	text-align:center;
	margin-left:auto;
	margin-right:auto;
	margin-bottom:-.6em;
	padding:0 0 0 0;
	font-size:4em;
	background:#fff;
	width:80px;
}
.msgbox .msg{
	padding:1.2em 1.2em .3em 1.2em;
	vertical-align:middle;
	text-align:left;
}
.msgbox .msg p{
	line-height:1.4;
}

下で紹介するボックスの共通CSSです。「色」以外のデザインCSSです。

使い方

共通CSSをコピー&ペーストします。貼り付ける場所は下記をご覧ください。。

管理画面内の貼り付ける場所

CSS
管理画面のHEAD間編集かCSS編集へコピペしてください。
HTML
管理画面の編集枠へコピペしてください。
HEAD間編集に記述する際は <style> と </style> の中に書いてください。 CSS編集に記述する場合は <style> と </style> は書いてはダメです。

分からないことは「ユーザー助け合い掲示板」で聞いてみよう

それではデザインサンプルをご覧ください。

直感的なイメージですが、アイコンフォントを使うことでボックスに意味を持たせています。

エラーや警告などに使うと良さそうなデザインですね。

複数行にする場合はp要素を足して書いてください。

コードを見てみる

HTML

<div class="msgbox msgarea-alert">
  <div class="icon-font">
    <i class="fas fa-exclamation-circle"></i>
  </div>
  <div class="msg">
    <p>Font Awesome 5をアクセントにしたBOXデザインサンプルです。</p>
  </div>
</div>

CSS

.msgarea-alert{
	background:#fff;
	border:4px solid #f13d54;
}
.msgarea-alert i,.msgarea-alert .msg p{
	color:#f13d54;
}

ヒントを掲載したり質問に上がるだろう内容と答えなどを書くのに良さそう。

コードを見てみる

HTML

<div class="msgbox msgarea-question">
  <div class="icon-font">
    <i class="far fa-question-circle"></i>
  </div>
  <div class="msg">
    <p>Font Awesome 5をアクセントにしたBOXデザインサンプルです。</p>
  </div>
</div>

CSS

.msgarea-question{
	background:#fff;
	border:4px solid #4f5dff;
}
.msgarea-question i,.msgarea-question .msg p{
	color:#4f5dff;
}

インフォメーション・案内などガイドライン的な誘導に使えそうです。

コードを見てみる

HTML

<div class="msgbox msgarea-info">
  <div class="icon-font">
    <i class="fas fa-info-circle"></i>
  </div>
  <div class="msg">
    <p>Font Awesome 5をアクセントにしたBOXデザインサンプルです。</p>
  </div>
</div>

CSS

.msgarea-info{
	background:#fff;
	border:4px solid #05b483;
}
.msgarea-info i,.msgarea-info .msg p{
color:#05b483;
}

確認内容を掲載すると良さそうなデザインです。

コードを見てみる

HTML

<div class="msgbox msgarea-check">
  <div class="icon-font">
    <i class="far fa-check-circle"></i>
  </div>
  <div class="msg">
    <p>Font Awesome 5をアクセントにしたBOXデザインサンプルです。</p>
  </div>
</div>

CSS

.msgarea-check{
	background:#fff;
	border:4px solid #2f387c;
}
.msgarea-check i,.msgarea-check .msg p{
	color:#2f387c;
}

管理人から閲覧者へ何かお願いする内容が似合いそうなデザイン

コードを見てみる

HTML

<div class="msgbox msgarea-smile">
  <div class="icon-font">
    <i class="far fa-smile-wink"></i>
  </div>
  <div class="msg">
    <p>Font Awesome 5をアクセントにしたBOXデザインサンプルです。</p>
  </div>
</div>

CSS

.msgarea-smile{
	background:#fff;
	border:4px solid #359dd9;
}
.msgarea-smile i,.msgarea-smile .msg p{
	color:#359dd9;
}

注意など気を付けて欲しい事柄を記載するのが良さそうです。

コードを見てみる

HTML

<div class="msgbox msgarea-notice">
  <div class="icon-font">
    <i class="fas fa-exclamation-triangle"></i>
  </div>
  <div class="msg">
    <p>Font Awesome 5をアクセントにしたBOXデザインサンプルです。</p>
  </div>
</div>

CSS

.msgarea-notice{
	background:#fff;
	border:4px solid #ff9e44;
}
.msgarea-notice i,.msgarea-notice .msg p{
	color:#ff9e44;
}