この記事でわかること!チェックマーク~をCSSで作ってみた HTML,CSS復習13
こんにちは。ブログを見てたら最初の記事の要約とかで、この記事でわかること!みたいな感じで”チェックマーク(文章)”ってなってるのをよく見かけますよね
できるとスタイリッシュだよね!今回はそれをしてみよう☆
でもどうするの?
四角の小さい枠を作って下と左にだけ境界線をいれてそれを傾ければいいのよ
チェックマークを入れるには
まずただの四角の小さい枠のスタイルシートです。
小さい枠なので幅を20px、高さを10pxにしてみます。
width:20px;
height: 10px;
枠の左と下にだけ境界線を入れます。
border-left: 2px ridge green; /*ridgeは立体的な線*/
border-bottom: 2px ridge green;
ここでtransform: rotateを使って45度回転させます
transform: rotate(-45deg);
またチェックマークの領域は空白なので
content: "";
とします。
まとめるとチェック部分のスタイルシートは次のようになります。
div.check{
width:20px;
height: 10px;
border-left: 2px ridge green; /*ridgeは立体的な線*/
border-bottom: 2px ridge green;
transform: rotate(-45deg);
content: "";
}
ここでチェックマークと文字を横並びにするので横並びのスタイルシートも用意します。
横並びのスタイルシートは次のようになります。
div.yoko{
display: inline-block;
}
記事中には次のように記述します。
<p>この記事でわかること</p>
<div class="yoko"><div class="check"></div></div>
<div class="yoko">チェックマークをCSSで作れます。</div>
すると次のようになります。
この記事でわかること
div.checkmaru{
border-radius: 10px; /* 四隅を丸くする */
padding: 10px; /*領域と文字との余白10px*/
border: 4px ridge #red; /*境界線の幅4px ridgeは立体的 色はred*/
}
<p>この記事でわかること</p>
<div class="checkmaru">
<div class="yoko"><div class="check"><div></div>
<div class="yoko">・チェックマークをCSSで作れます。</div>
</div>
するとこうなります。
この記事でわかること