分からないことは「ユーザー助け合い掲示板」で聞いてみよう
HTMLとCSSでデザインされた囲み枠のサンプルです。 ホームページ作りにご利用ください。
<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です。赤色の部分はクラスです。青色の部分はアイコンフォントです。それを変更することで色や左側のアイコンフォントを変更できます。
*{
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:5px;
padding:.5em .5em .5em 0;
display:-webkit-box;
display:-ms-flexbox;
display:flex;
flex-wrap:wrap;
}
.icon-font{
text-align:center;
margin-left:auto;
margin-right:auto;
padding:.3em 0 .3em 0;
font-size:4em;
width:80%;
}
.msgbox .msg{
padding:1.2em 1.2em .3em 1.2em;
vertical-align:middle;
text-align:left;
}
.msgarea .msg:last-child{
margin-bottom:0;
}
.msgbox .msg p{
line-height:1.4;
}下で紹介するボックスの共通CSSです。「色」以外のデザインCSSです。
共通CSSをコピー&ペーストします。貼り付ける場所は下記をご覧ください。。
それではデザインサンプルをご覧ください。
直感的なイメージですが、アイコンフォントを使うことでボックスに意味を持たせています。
エラーや警告などに使うと良さそうなデザインですね。
複数行にする場合はp要素を足して書いてください。
<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>
.msgarea-alert{
border:1px solid #f13d54;
}
.msgarea-alert i,.msgarea-alert .msg p{
color:#f13d54;
}
.msgarea-alert .icon-font{
border-bottom:1px solid #f13d54;
}ヒントを掲載したり質問に上がるだろう内容と答えなどを書くのに良さそう。
<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>.msgarea-question{
border:1px solid #4f5dff;
}
.msgarea-question i,.msgarea-question .msg p{
color:#4f5dff;
}
.msgarea-question .icon-font{
border-bottom:1px solid #4f5dff;
}インフォメーション・案内などガイドライン的な誘導に使えそうです。
<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>.msgarea-info{
border:1px solid #05b483;
}
.msgarea-info i,.msgarea-info .msg p{
color:#05b483;
}
.msgarea-info .icon-font{
border-bottom:1px solid #05b483;
}確認内容を掲載すると良さそうなデザインです。
<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>.msgarea-check{
border:1px solid #2f387c;
}
.msgarea-check i,.msgarea-check .msg p{
color:#2f387c;
}
.msgarea-check .icon-font{
border-bottom:1px solid #2f387c;
}管理人から閲覧者へ何かお願いする内容が似合いそうなデザイン
<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>.msgarea-smile{
border:1px solid #359dd9;
}
.msgarea-smile i,.msgarea-smile .msg p{
color:#359dd9;
}
.msgarea-smile .icon-font{
border-bottom:1px solid #359dd9;
}注意など気を付けて欲しい事柄を記載するのが良さそうです。
<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>.msgarea-notice{
border:1px solid #ff9e44;
}
.msgarea-notice i,.msgarea-notice .msg p{
color:#ff9e44;
}
.msgarea-notice .icon-font{
border-bottom:1px solid #ff9e44;
}