CODE
.list {
position: relative;
background: #f37c7c;
padding: 2rem;
border-radius: 10px;
}
.list:before {
content: "POINT";
font-weight: bold;
position: absolute;
color: #f37c7c;
top: -28px;
left: 6px;
font-size: 2rem;
}
.list li {
position: relative;
padding-left: 1.6rem;
margin-top: 2rem;
color: #FFF;
line-height: 1.8rem;
}
.list li:first-child {
margin-top: 0;
}
.list li:before {
content: "";
position: absolute;
background: #ffeb3b;
display: block;
width: 5px;
height: 15px;
left: 0;
top: 6px;
transform: rotate(-45deg);
}
.list li:after {
content: "";
position: absolute;
background: #ffeb3b;
display: block;
width: 5px;
height: 20px;
left: 9px;
top: 2px;
transform: rotate(45deg);
}<ul class="list">
<li>テキストがはいります。テキストがはいります。</li>
<li>テキストがはいります。テキストがはいります。テキストがはいります。テキストがはいります。テキストがはいります。テキストがはいります。テキストがはいります。テキストがはいります。テキストがはいります。</li>
<li>テキストがはいります。テキストがはいります。テキストがはいります。テキストがはいります。テキストがはいります。</li>
</ul>DEMO
See the Pen list-sample-002 by CODE IDEA (@codeidea) on CodePen.
※ブラウザにデフォルトで付いているスタイルを消すため、リセットCSS「destyle.css」を使っています。
※CSSの指定方法は一例であり、同じ見た目を違う書き方で表現することもできます。絶対正しいというものではありません。
MEMO
チェックマークの作り方は複数ありますが、ここでは、:before と :after を組み合わせて作る形にしています。
縦棒をそれぞれ傾けてくっつけるだけです。背景にテクスチャなどを敷いている場合は、この方法が合っています。
背景の色がベタ塗りである場合は、こちらの方法も利用できます↓
https://code-idea.com/list-sample-003/
注意点は、↓li に指定した「position: relative;」と
.list li {
position: relative;
padding-left: 1.6rem;
margin-top: 2rem;
line-height: 1.8rem;
}↓li:before と li:after に指定した「position: absolute;」を必ず入れることです。
.list li:before {
content: "";
position: absolute;
background: #ffeb3b;
display: block;
width: 5px;
height: 15px;
left: 0;
top: 6px;
transform: rotate(-45deg);
}
.list li:after {
content: "";
position: absolute;
background: #ffeb3b;
display: block;
width: 5px;
height: 20px;
left: 9px;
top: 2px;
transform: rotate(45deg);
}これらの記述がないと、チェックマークがどこかへ飛んでいきます。
「.list」に指定した position: relative; と「.list:before」に指定した「position: absolute;」も同様です。
全体の li に「margin-top: 2rem;」を指定し、最初のliだけ「margin-top: 0;」で上部マージンを消すと、見た目がガタつかず、きれいになります。
クラス名、各数値、文言は用途に合わせて変えてください。
MANUAL
| border | 境界線の指定 |
| background | 背景色の指定 |
| padding | ボックス内の隙間の指定 |
| border-radius | 境界線角丸の指定 |
| position | 配置の指定 |
| padding-left | 内側の間隔(左方向)の指定 |
| margin-top | マージン上部の指定 |
| line-height | 行間の指定 |
| content | :after :before を使う際に必須 |
| color | 文字色の指定 |
| font-size | 文字サイズの指定 |
| font-weight | 文字ウェイトの指定 |
| top | 上方向 位置の指定 |
| left | 左方向 位置の指定 |
| width | 横幅の指定 |
| height | 縦幅の指定 |
| transform | 変形の指定 |
