ボックス

ボックスのコピペで使えるFontAwesomeサンプル集です。まとめ・注意・アドバイスなど文章をまとめるときに利用するボックスデザインを揃えました。

アイコン付きのボックス

SAMPLE
CODE

アイコンと背景色がはいったシンプルなボックスのサンプルです。アイコンのサイズはボックス内の文字サイズによって変化するようにしています。またボックス内の文章が１行でもきれいに表示できるように余白などを調節しています。

HTML
COPY

<div class="fas_box_icon">
	{ボックス内の文章}
</div>

CSS
COPY

.fas_box_icon{
	position: relative;
	padding: 15px 15px 15px calc(1.4em + 30px);
	line-height: 1.4;
	background: #e0ecf9;
}
.fas_box_icon:before{
	position: absolute;
	top: 5px;
	left: 10px;
	font-style: normal;
	font-variant: normal;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	font-family: "Font Awesome 5 Free"; 
	font-weight: 900;
	content: '\f058';
	font-size: calc(1.4em + 8px);
	color: #3366cc;
}

枠線ありのボックス

SAMPLE
CODE

枠線が付いたボックスのサンプルです。backgroundで背景色を設定して、borderで枠線を入れています。お好みで背景や枠線の色を変えてお使いください。

HTML
COPY

<div class="fas_box_border">
	{ボックス内の文章}
</div>

CSS
COPY

.fas_box_border{
	position: relative;
	padding: 15px 15px 15px calc(1.4em + 30px);
	line-height: 1.4;
	background: #e0ecf9;
	border: 1px solid #3366cc;
}
.fas_box_border:before{
	position: absolute;
	top: 5px;
	left: 10px;
	font-style: normal;
	font-variant: normal;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	font-family: "Font Awesome 5 Free"; 
	font-weight: 900;
	content: '\f06a';
	font-size: calc(1.4em + 8px);
	color: #3366cc;
}

左線ありのボックス

SAMPLE
CODE

アイコンと背景色に左線を引いたボックスのサンプルです。ボックスに対してborder-leftで左線を設定しています。線や背景色などをお好みに色に変えるなどしてお使いください。

HTML
COPY

<div class="fas_box_iconborderleft">
	{ボックス内の文章}
</div>

CSS
COPY

.fas_box_iconborderleft{
	position: relative;
	padding: 15px 15px 15px calc(1.4em + 30px);
	line-height: 1.4;
	background: #e0ecf9;
	border-left: 5px solid #3366cc;
}
.fas_box_iconborderleft:before{
	position: absolute;
	top: 5px;
	left: 10px;
	font-style: normal;
	font-variant: normal;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	font-family: "Font Awesome 5 Free"; 
	font-weight: 900;
	content: '\f138';
	font-size: calc(1.4em + 8px);
	color: #3366cc;
}

上線ありのボックス

SAMPLE
CODE

アイコンと背景色に上線を引いたボックスのサンプルです。ボックスに対してborder-topで上線を引いています。

HTML
COPY

<div class="fas_box_iconbordertop">
	{ボックス内の文章}
</div>

CSS
COPY

.fas_box_iconbordertop{
	position: relative;
	padding: 15px 15px 15px calc(1.4em + 30px);
	line-height: 1.4;
	background: #e0ecf9;
	border-top: 5px solid #3366cc;
}
.fas_box_iconbordertop:before{
	position: absolute;
	top: 5px;
	left: 10px;
	font-style: normal;
	font-variant: normal;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	font-family: "Font Awesome 5 Free"; 
	font-weight: 400;
	content: '\f075';
	font-size: calc(1.4em + 8px);
	color: #3366cc;
}

影付きのボックス

SAMPLE
CODE

影を付けたボックスのサンプルです。ボックスにbox-shadowで全体的に影を設定しています。影を付けることで少し浮き出た感じのボックスにすることができます。

HTML
COPY

<div class="fas_box_iconshadow">
	{ボックス内の文章}
</div>

CSS
COPY

.fas_box_iconshadow{
	position: relative;
	padding: 15px 15px 15px calc(1.4em + 30px);
	box-shadow: 0 0 5px 0 #999;
	line-height: 1.4;
	background: #e0ecf9;
}
.fas_box_iconshadow:before{
	position: absolute;
	top: 5px;
	left: 10px;
	font-style: normal;
	font-variant: normal;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	font-family: "Font Awesome 5 Free"; 
	font-weight: 900;
	content: '\f059';
	font-size: calc(1.4em + 8px);
	color: #3366cc;
}

アイコンが左上に表示されるボックス

SAMPLE
CODE

左上に丸枠に入ったアイコンが表示されるボックスサンプルです。アイコンを擬似要素でボックスからはみ出す形で表示しています。注意点として回りに余白がないとアイコンが他の要素に干渉してしまうことがあります。

HTML
COPY

<div class="fas_box_topleft">
	{ボックス内の文章}
</div>

CSS
COPY

.fas_box_topleft{
	position: relative;
	padding: 15px 15px 15px 20px;
	background: #fff;
	border: 2px solid #3366cc;
	line-height: 1.4;
	border-radius: 5px;
}
.fas_box_topleft:before{
	position: absolute;
	top: -17.5px;
	left: -17.5px;
	display: inline-block;
	width: 35px;
	height: 35px;
	line-height: 35px;
	background: #3366cc;
	color: #fff;
	border-radius: 50%;
	text-align: center;
	font-style: normal;
	font-variant: normal;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	font-family: "Font Awesome 5 Free"; 
	font-weight: 900;
	content: '\f0eb';
	font-size: 20px;
}

アイコンが別背景色のボックス

SAMPLE
CODE

アイコンと文章を別々の背景色にしたボックスのサンプルです。アイコンの擬似要素をheight:100%;にしてbackgroundを指定することで文章とは違う背景色になるようにしています。

HTML
COPY

<div class="fas_box_iconback">
	{ボックス内の文章}
</div>

CSS
COPY

.fas_box_iconback{
	position: relative;
	padding: 15px 15px 15px calc(1.4em + 40px);
	background: #e0ecf9;
	border-radius: 5px;
	line-height: 1.4;	
}
.fas_box_iconback:before{
	position: absolute;
	top: 0;
	left: 0;
	width: calc(1.4em + 10px);
	height: 100%;
	padding-top: 5px;
	text-align: center;
	font-size: calc(1.4em + 8px);
	background: #3366cc;
	color: #fff;
	border-radius: 5px 0 0 5px;
	font-style: normal;
	font-variant: normal;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	font-family: "Font Awesome 5 Free"; 
	font-weight: 400;
	content: '\f058';
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

背景がストライプのボックス

SAMPLE
CODE

背景色をストライプ柄にしたボックスのサンプルです。background-colorで背景色を設定してbackground-imageでストライプの斜め線をいれています。お好みでストライプの色を変えるなどしてお使いください。

HTML
COPY

<div class="fas_box_stripe">
	{ボックス内の文章}
</div>

CSS
COPY

.fas_box_stripe{
	position: relative;
	padding: 15px 15px 15px calc(1.4em + 30px);
	background-color: #f4f9ff;
	background-image: -webkit-gradient(linear, 0 0, 100% 100%,color-stop(.25, #ecf5ff), color-stop(.25, transparent),color-stop(.5, transparent), color-stop(.5, #ecf5ff),color-stop(.75, #ecf5ff), color-stop(.75, transparent),to(transparent));
	-webkit-background-size: 28px 28px;
	line-height: 1.4;
}
.fas_box_stripe:before{
	position: absolute;
	top: 5px;
	left: 10px;
	font-style: normal;
	font-variant: normal;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	font-family: "Font Awesome 5 Free"; 
	font-weight: 900;
	content: '\f00c';
	font-size: calc(1.4em + 8px);
	color: #3366cc;
}

ノート風のボックス

SAMPLE
CODE

ノートのように文章に下線が引かれたデザインのボックスサンプルです。background-imageで下線を表現した背景を繰り返し表示することでノート風のデザインにしています。注意点としてフォントサイズを変える場合はpxなどの絶対値を使ってください。emなどの相対値を使うと文章と線がずれることがあります。

HTML
COPY

<div class="fas_box_note">
	<div class="fas_box_note_line">
		{ボックス内の文章}
	</div>
</div>

CSS
COPY

.fas_box_note{
	position: relative;
	padding: 15px 15px 15px calc(1.4em + 30px);
	background: #e0ecf9;
	border: 1px solid #3366cc;
	line-height: 2;
}
.fas_box_note_line{
	background-image:linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) calc(100% - 1px), #ccc calc(100% - 1px), #ccc 100%);
	background-size: 100% 2em;
	padding-bottom: 10px;
}
.fas_box_note:before{
	position: absolute;
	top: 5px;
	left: 10px;
	font-style: normal;
	font-variant: normal;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	font-family: "Font Awesome 5 Free"; 
	font-weight: 900;
	content: '\f303';
	font-size: calc(1.4em + 8px);
	color: #3366cc;
}

アイコンが話しているボックス

SAMPLE
CODE

アイコンの右側に吹き出しを表示して話している風のボックスサンプルです。会話などを表現したい場合などに役に立つと思います。ラップしたdivタグでアイコンと吹き出しの配置をおこない、吹き出し用のdivタグに擬似要素で三角形を作っています。

HTML
COPY

<div class="fas_box_balloon">
	<div class="fas_box_balloon_in">
		{ボックス内の文章}
	</div>
</div>

CSS
COPY

.fas_box_balloon{
	position: relative;
	padding: 0 0 0 calc(1.4em + 25px);
	line-height: 1.4;
}
.fas_box_balloon:before{
	position: absolute;
	top: 5px;
	left: 0;
	font-style: normal;
	font-variant: normal;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	font-family: "Font Awesome 5 Free"; 
	font-weight: 900;
	content: '\f007';
	font-size: calc(1.4em + 8px);
	color: #3366cc;
}
.fas_box_balloon .fas_box_balloon_in{
	position: relative;
	padding: 15px;
	background: #e0ecf9;
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
}
.fas_box_balloon .fas_box_balloon_in:before{
	content: "";
	position: absolute;
	top: 15px;
	left: -10px;
	margin: auto;
	width: 0px;
	height: 0px;
	border-style: solid;
	border-color: transparent #e0ecf9 transparent transparent;
	border-width: 10px 10px 10px 0;
}

アイコンが話しているボックス（リバースバージョン）

SAMPLE
CODE

アイコンが話しているボックスのアイコンと吹き出しが反対になったリバースバージョンです。通常バージョンと組み合わせることで会話を表現することができます。

HTML
COPY

<div class="fas_box_balloonreverse">
	<div class="fas_box_balloonreverse_in">
		{ボックス内の文章}
	</div>
</div>

CSS
COPY

.fas_box_balloonreverse{
	position: relative;
	padding: 0 calc(1.4em + 25px) 0 0;
	line-height: 1.4;
}
.fas_box_balloonreverse:after{
	position: absolute;
	top: 5px;
	right: 0;
	font-style: normal;
	font-variant: normal;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	font-family: "Font Awesome 5 Free"; 
	font-weight: 900;
	content: '\f007';
	font-size: calc(1.4em + 8px);
	color: #3366cc;
}
.fas_box_balloonreverse_in{
	position: relative;
	padding: 15px;
	background: #e0ecf9;
	border-radius: 5px;
}
.fas_box_balloonreverse_in:before{
	content: "";
	position: absolute;
	top: 15px;
	right: -10px;
	margin: auto;
	width: 0px;
	height: 0px;
	border-style: solid;
	border-color: transparent transparent transparent #e0ecf9;
	border-width: 10px 0 10px 10px;
}

左上＋右下のアイコン付きボックス

SAMPLE
CODE

左上と右下にアイコンが表示されるボックスのサンプルです。引用などで使えるボックスです。擬似要素の:beforeで左上、:afterで右下のアイコン設定をおこなっています。

HTML
COPY

<div class="fas_box_side">
	{ボックス内の文章}
</div>

CSS
COPY

.fas_box_side{
	position: relative;
	padding: calc(1.4em + 15px) calc(1.4em + 25px);
	background: #e0ecf9;
	line-height: 1.4;
}
.fas_box_side:before, .fas_box_side:after{
	position: absolute;
	font-style: normal;
	font-variant: normal;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	font-family: "Font Awesome 5 Free"; 
	font-weight: 900;
	font-size: calc(1.4em + 8px);
	line-height: 1em;
	color: #3366cc;
}
.fas_box_side:before{
	top: 5px;
	left: 10px;
	content: '\f10d';
}
.fas_box_side:after{
	bottom: 5px;
	right: 10px;
	content: '\f10e';
}

固定タイトルが付くボックス

SAMPLE
CODE

固定されたタイトルが付くボックスのサンプルです。擬似要素の:beforeでアイコンとタイトル文言を表示しています。同じタイトルのボックスを何度も使うときなどにご利用ください。

HTML
COPY

<div class="fas_box_title">
	{ボックス内の文章}
</div>

CSS
COPY

.fas_box_title{
	position: relative;
	padding: calc(1.2em + 30px) 15px 15px 15px;
	background: #e0ecf9;
	line-height: 1.4;
}
.fas_box_title:before{
	position: absolute;
	top: 10px;
	left: 15px;
	font-style: normal;
	font-variant: normal;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	font-family: "Font Awesome 5 Free",sans-serif; 
	font-weight: 900;
	content: '\f06a  注意';
	font-size: 1.2em;
	color: #3366cc;
}

枠線の途中に固定タイトルが付くボックス

SAMPLE
CODE

枠線の途中に固定タイトルが付くボックスのサンプルです。擬似要素の:beforeで固定タイトルを作り、文字サイズの半分だけ上にあげることで枠線の途中に表示しています。

HTML
COPY

<div class="fas_box_titleborder">
	{ボックス内の文章}
</div>

CSS
COPY

.fas_box_titleborder{
	position: relative;
	top: 0.6em;
	margin: 0 0 0.6em 0;
	padding: calc(0.6em + 10px) 20px 10px 20px;
	background: #fff;
	border: 2px solid #3366cc;
	border-radius: 5px;
	line-height: 1.4;
}
.fas_box_titleborder:before{
	position: absolute;
	top: -0.5em;
	left: 10px;
	display: inline-block;
	background: #fff;
	padding: 0 10px;
	font-style: normal;
	font-variant: normal;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	font-family: "Font Awesome 5 Free",sans-serif; 
	font-weight: 900;
	content: '\f075  解説';
	font-size: 1.2em;
	line-height: 1;
	color: #3366cc;
}

固定タイトルが付くボックス（ウィンドウ風）

SAMPLE
CODE

ウィンドウ風にした固定タイトル付きのボックスサンプルです。擬似要素の:beforeで上部の背景を作ってアイコンとタイトル文言を表示しています。

HTML
COPY

<div class="fas_box_titleback">
	{ボックス内の文章}
</div>

CSS
COPY

.fas_box_titleback{
	position: relative;
	padding: calc(1.2em + 30px) 15px 15px 15px;
	background: #e0ecf9;
	border-radius: 5px 5px 0 0;
	line-height: 1.4;
}
.fas_box_titleback:before{
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: calc(1em + 15px);
	line-height: calc(1em + 15px);
	padding: 0 15px;
	background: #3366cc;
	border-radius: 5px 5px 0 0;
	color: #fff;
	font-size: 1.2em;
	font-style: normal;
	font-variant: normal;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	font-family: "Font Awesome 5 Free",sans-serif; 
	font-weight: 900;
	content: '\f058  重要';
}

固定タイトルが付くボックス（タブ風）

SAMPLE
CODE

タブ風の固定タイトル付きのボックスサンプルです。擬似要素の:beforeでタブのような背景を作ってアイコンとタイトル文言を表示しています。

HTML
COPY

<div class="fas_box_titletab">
	{ボックス内の文章}
</div>

CSS
COPY

.fas_box_titletab{
	position: relative;
	top: calc(1em + 10px);
	margin-bottom: calc(0.9em + 10px);
	padding: 15px 15px 15px 15px;
	background: #e0ecf9;
	line-height: 1.4;
}
.fas_box_titletab:before{
	position: absolute;
	top: calc(-1em - 10px);
	left: 0;
	display: inline-block;
	height: calc(1em + 10px);
	line-height: calc(1em + 10px);
	padding: 0 15px;
	background: #3366cc;
	border-radius: 5px 5px 0 0;
	color: #fff;
	font-size: 1em;
	font-style: normal;
	font-variant: normal;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	font-family: "Font Awesome 5 Free",sans-serif; 
	font-weight: 900;
	content: '\f0eb  Point';
}

固定タイトルが付くボックス（帯風）

SAMPLE
CODE

帯風の固定タイトル付きのボックスサンプルです。擬似要素の:beforeで帯のような背景を作ってアイコンとタイトル文言を表示し、:afterで折り返しの三角形を作っています。左端に余白がないと途切れてしまうので注意してください。

HTML
COPY

<div class="fas_box_titleband">
	{ボックス内の文章}
</div>

CSS
COPY

.fas_box_titleband,
.fas_box_titleband:before{
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
.fas_box_titleband{
	position: relative;
	padding: 65px 15px 15px 15px;
	background: #e0ecf9;
	line-height: 1.4;
}
.fas_box_titleband:before{
	position: absolute;
	top: 10px;
	left: -10px;
	display: inline-block;
	width: 100%;
	line-height: 40px;
	padding: 0 15px;
	background: #3366cc;
	box-shadow: 2px 2px 2px 0 #ccc;
	font-style: normal;
	font-variant: normal;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	font-family: "Font Awesome 5 Free",sans-serif; 
	font-weight: 900;
	content: '\f00c  Check';
	font-size: 1.2em;
	color: #fff;
}
.fas_box_titleband:after{
	position: absolute;
	top: 50px;
	left: -10px;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0 10px 6px 0;
	border-color: transparent #153150 transparent transparent;
	content: '';
}

アイコンが点滅するボックス

SAMPLE
CODE

アイコンが点滅するボックスのサンプルです。閲覧者の注意を特に引きたい内容に使えるボックスです。アイコンの透明度を定期的に0%から100％に変化させることで点滅しているように見せています。

HTML
COPY

<div class="fas_box_blink">
	{ボックス内の文章}
</div>

CSS
COPY

.fas_box_blink{
	position: relative;
	padding: 15px 15px 15px calc(1.4em + 30px);
	background: #e0ecf9;
	line-height: 1.4;
}
.fas_box_blink:before{
	position: absolute;
	top: 5px;
	left: 10px;
	font-style: normal;
	font-variant: normal;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	font-family: "Font Awesome 5 Free"; 
	font-weight: 900;
	content: '\f06a';
	font-size: calc(1.4em + 8px);
	color: #3366cc;
	-webkit-animation:blink 1s ease-in-out infinite alternate;
    -moz-animation:blink 1s ease-in-out infinite alternate;
    animation:blink 1s ease-in-out infinite alternate;
}
@-webkit-keyframes blink{
    0% {opacity:0;}
    100% {opacity:1;}
}
@-moz-keyframes blink{
    0% {opacity:0;}
    100% {opacity:1;}
}
@keyframes blink{
    0% {opacity:0;}
    100% {opacity:1;}
}

アイコンが回転するボックス

SAMPLE
CODE

アイコンが回転するボックスのサンプルです。こちらも閲覧者の目を引くデザインにすることができます。アイコンの角度を滑らかに変えていくことで回転をおこなっています。

HTML
COPY

<div class="fas_box_spin">
	{ボックス内の文章}
</div>

CSS
COPY

.fas_box_spin{
	position: relative;
	padding: 15px 15px 15px calc(1.4em + 30px);
	background: #e0ecf9;
	line-height: 1.4;
}
.fas_box_spin:before{
	position: absolute;
	top: 5px;
	left: 10px;
	font-style: normal;
	font-variant: normal;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	font-family: "Font Awesome 5 Free"; 
	font-weight: 900;
	content: '\f013';
	font-size: calc(1.4em + 8px);
	color: #3366cc;
	display: inline-block;
    animation-duration: 2s;
    animation-timing-function: linear;
    animation-delay: 0s;
    animation-iteration-count: infinite;
    animation-direction: normal;
    animation-fill-mode: none;
    animation-play-state: running;
    animation-name: fa-spin;
}