タイトル付きのシンプルなCSSリストデザイン
ブログのサイドバーなどにどうぞ
<html style="max-height: 100%;"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><style id="basic-style">body,#svg-section{font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue','游ゴシック Medium',YuGothic,YuGothicM,'Hiragino Kaku Gothic ProN',メイリオ,Meiryo,sans-serif;}a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body,svg{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}table{border-collapse:collapse;border-spacing:0}</style><style id="root-style">:root{--pic-image-data:none;}</style><link class="basic-style" rel="stylesheet" href="https://picput.tubudeco.com/css/webfont.css" id="link-font-style"><link class="basic-style" rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.3/css/all.css"><link class="basic-style" rel="stylesheet" href="https://picput.tubudeco.com/css/reset.css"><style id="out-style">.pic-container {
display: flex;
align-items: center;
width: 600px;
height: 338px;
background-color: #E6E3D6;
}
.box {
width: 100%;
margin: 1rem;
}
.box-heading {
padding: 0.4em;
background-color: #111;
text-align: center;
}
.box-title {
color: #fff;
font-size: 22px;
word-wrap: break-word;
font-weight: normal;
}
.box-body {
padding: 0.5em;
background-color: #efefef;
}
.box-body ul {
padding-left: 2rem;
list-style-type: disc;
}
.box-body ul li {
padding: 0.7rem;
}
</style><style id="pic-style"></style><style id="body-style">body,#svg-section {font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue','游ゴシック Medium',YuGothic,YuGothicM,'Hiragino Kaku Gothic ProN',メイリオ,Meiryo,sans-serif;}</style><link href="chrome-extension://nffaoalbilbmmfgbnbgppjihopabppdk/inject.css" type="text/css" rel="stylesheet"></head><body id="svg-section" class="vsc-initialized" style="overflow: auto; width: 600px; height: 337.5px; transform-origin: left top; transform: scale(1);"><div class="pic-container">
<div class="box">
<div class="box-heading">
<h3 class="box-title">カテゴリ</h3>
</div>
<div class="box-body">
<ul>
<li>読書</li>
<li>筋トレ</li>
<li>プログラミング学習</li>
<li>瞑想</li>
</ul>
</div>
</div>
</div>
</body></html>
<div class="box">
<div class="box-heading">
<h3 class="box-title">カテゴリ</h3>
</div>
<div class="box-body">
<ul>
<li>読書</li>
<li>筋トレ</li>
<li>プログラミング学習</li>
<li>瞑想</li>
</ul>
</div>
</div>.box {
width: 100%;
margin: 1rem;
}
.box-heading {
padding: 0.4em;
background-color: #111;
text-align: center;
}
.box-title {
color: #fff;
font-size: 22px;
word-wrap: break-word;
font-weight: normal;
}
.box-body {
padding: 0.5em;
background-color: #efefef;
}
.box-body ul {
padding-left: 2rem;
list-style-type: disc;
}
.box-body ul li {
padding: 0.7rem;
}