枠線を手書きでぐるぐる書いたようなボックスデザインに続き、シンプルで使いやすいボックスデザインのご紹介です。
枠線を手書きでぐるぐる書いたようなボックスデザインについてはこちら。
ボックスデザインとCSSコード
丸みのあるシンプルで優しい雰囲気のデザインです。
「なんか見たことあるぞ」っていうくらいシンプルで使いやすく、違和感のないものにしてみました。
タイトルがつけられるタイプで、ボックスでもリストでも使えるようになってます。
.box00s {
margin: 2em 0;
border: solid 3px #FFAB8B;
border-radius: 20px;
}
.box00s .box-title {
font-size: 1.2em;
background: #FFAB8B;
padding: 5px;
text-align: center;
color: #FFF;
font-weight: bold;
letter-spacing: 0.05em;
border-radius: 15px 15px 0 0;
}
.box00s p {
padding: 15px 20px;
margin: 0;
}
.box00s ul {
padding: 0 1em;
position: relative;
}
.box00s ul li {
line-height: 1.5;
padding: 0.5em 0 0.5em 1.5em;
list-style-type: none!important;
}
.box00s ul li:before {
font-family: "FontAwesome";
content: "\f138";/*アイコン種類*/
position: absolute;
left : 1em; /*左端からのアイコンまで*/
color: #FFAB8B; /*アイコン色*/
}
※他のボックスと併用する場合は、名前がかぶらないように注意してください。
古いタイプのFontAwesomeを使っているので、新しいFontAwesomeを使っている場合は「font-family: "Font Awesome 5 Free";」等、変更して使ってください。
FontAwesomeの導入方法についてはこちらが参考になります。
CSSコードの3か所の色の設定（マーカー部分）を変更するとボックスの色を変更することができます。
今回は上の赤いボックスの他に青、黄色、緑の3色を用意してみました。
青いボックス（カラーコード：#9ED1FF）
.box00s {
margin: 2em 0;
border: solid 3px #9ED1FF;
border-radius: 20px;
}
.box00s .box-title {
font-size: 1.2em;
background: #9ED1FF;
padding: 5px;
text-align: center;
color: #FFF;
font-weight: bold;
letter-spacing: 0.05em;
border-radius: 15px 15px 0 0;
}
.box00s p {
padding: 15px 20px;
margin: 0;
}
.box00s ul {
padding: 0 1em;
position: relative;
}
.box00s ul li {
line-height: 1.5;
padding: 0.5em 0 0.5em 1.5em;
list-style-type: none!important;
}
.box00s ul li:before {
font-family: "FontAwesome";
content: "\f138";/*アイコン種類*/
position: absolute;
left : 1em; /*左端からのアイコンまで*/
color: #9ED1FF; /*アイコン色*/
}
黄色のボックス（カラーコード：#FFE23F）
.box00s {
margin: 2em 0;
border: solid 3px #FFE23F;
border-radius: 20px;
}
.box00s .box-title {
font-size: 1.2em;
background: #FFE23F;
padding: 5px;
text-align: center;
color: #FFF;
font-weight: bold;
letter-spacing: 0.05em;
border-radius: 15px 15px 0 0;
}
.box00s p {
padding: 15px 20px;
margin: 0;
}
.box00s ul {
padding: 0 1em;
position: relative;
}
.box00s ul li {
line-height: 1.5;
padding: 0.5em 0 0.5em 1.5em;
list-style-type: none!important;
}
.box00s ul li:before {
font-family: "FontAwesome";
content: "\f138";/*アイコン種類*/
position: absolute;
left : 1em; /*左端からのアイコンまで*/
color: #FFE23F; /*アイコン色*/
}
緑のボックス（カラーコード：#9AE36F）
.box00s {
margin: 2em 0;
border: solid 3px #9AE36F;
border-radius: 20px;
}
.box00s .box-title {
font-size: 1.2em;
background: #9AE36F;
padding: 5px;
text-align: center;
color: #FFF;
font-weight: bold;
letter-spacing: 0.05em;
border-radius: 15px 15px 0 0;
}
.box00s p {
padding: 15px 20px;
margin: 0;
}
.box00s ul {
padding: 0 1em;
position: relative;
}
.box00s ul li {
line-height: 1.5;
padding: 0.5em 0 0.5em 1.5em;
list-style-type: none!important;
}
.box00s ul li:before {
font-family: "FontAwesome";
content: "\f138";/*アイコン種類*/
position: absolute;
left : 1em; /*左端からのアイコンまで*/
color: #9AE36F; /*アイコン色*/
}
そのまま使うもよし、色や線を変えてみるもよし。いろいろ試してお好みのものを見つけてみてください。
ボックスで使う
ボックスとして使う場合は記事を書くときには、以下のhtmlコードを貼り付けて使います。
<div class="box00s"><div class="box-title">ここにタイトル</div>
<p>ここに文章</p>
</div>
※他のボックスと併用する場合は、名前がかぶらないように注意してください。
CSSで名前を変えた場合は、こっちの<div class="box00ｓ">の部分も変更が必要です。
リストで使う
リストとして使う場合は、以下のhtmlコードを貼り付けて使います。
<div class="box00s"><div class="box-title">タイトル</div>
<ul>
<li>文章１</li>
<li>文章２</li>
</ul>
</div>
※他のボックスと併用する場合は、名前がかぶらないように注意してください。
CSSで名前を変えた場合は、こっちの<div class="box00ｓ">の部分も変更が必要です。
以上です！
ボックス以外のカスタマイズ方法についてはこちらをどうぞ。
はてなブログのブログテーマ「Minimalism」を使っていなくても使えるCSSもまとめているのでぜひにー。