かるみに

レスポンシブデザイン対応！シンプルな番号付きリストデザイン

レスポンシブデザイン対応の番号付きリストデザインを作成しました。番号付きリストデザインは、文章が長文になると文章が崩れてしまうこともあります。

これは画面サイズに関わらず、デザインをきれいなまま保ちます。スマートフォンから見てもデザインが崩れないので、どのようなサイトにも馴染みます。

サンプル

こんな感じに表示されます
こんなにリスト内の文章が長くなってもスマートフォン画面で見づらくなる心配がありません
もちろん短くてもOK

CSSのコード

.entry-content ol{
list-style:none;
margin:0;
padding:2em 0 0;
counter-reset:num;
background-color:#eff5fc;
border-radius:4px;
}
.entry-content ol li{
position:relative;
padding:2em 2em 2em;
}

.entry-content ol li:before{
counter-increment:num;
content: "その"counter(num);
position:absolute;
top:0em;
display:inline-block;
background:linear-gradient(transparent 60%, #ffdfef 0%) ;
padding:0;
border-radius:4px;
color:#235180;
font-weight:bold;
}