数学、無料のオンライン学習塾

主に数学と数学に関するプログラミングを扱っています。小学生~大学入試までの算数と数学の問題と詳しい解説をしていきます。

この記事でわかること!チェックマーク~を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>

すると次のようになります。

 

この記事でわかること

 
チェックマークをCSSで作れます。
 
さらにこれを大きい枠に入れてみます。
大きい枠のスタイルシートはこうなります。

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>

するとこうなります。

 

この記事でわかること

 
チェックマークをCSSで作れます。
 
吹き出しも作れるようになって色々できることが増えてきました!
もっと技術力を高めて、今してる商人放浪記というゲームの説明ページとかポイ活のページとか作っていけたらなと思います(半年後に始めれたらうれしいです)
 
他のサイトは相変わらず1ページに情報を詰めすぎなので、それもそうならないようにしたいと思ってます。