boder-radias(ブロックの角に丸みをつける)
boder-radias(ボーダーレイディアス)は要素の境界の外側の角を丸めます。 1 つの半径を設定すると円の角になり、2 つの半径を設定すると楕円の角になります。
<body>
<p class=”none”>boder-radias無し</p>
<p class=”boder-radias5px”>boder-radias5px</p>
<p class=”boder-radias50px”>boder-radias50px</p>
</body>
p{
margin: 10px;
padding: 5px;
border: solid 2px;
width: 200px;
}
.boder-radias5px{
border-radius: 5px;
}
.boder-radias50px{
border-radius: 50px;
}
値はパーセント（％）でもでき、１００％で円を描くことができます。
max,min-width max,min-height(タグの高さ、横幅の最大小を設定)
min(ミニ)は最小値で
max(マックス)は最大値となります。
box-shadow
box-shadow(ボックスシャドウ)はタグ要素に影をつけることが可能です。
<body>
<button>button</button>
</body>
button{
border-radius: 5px;
padding: 15px;
box-shadow: 5px 5px black;
}
値はbox-shadow: 5px（右横の影） 5px（下の影） black（色）;となっています。
transition
transition(トランジション)は、要素の 2 つの状態間の変化を定義するためのものです。カーソルで要素を触れた際や、クリックした際に動作を加えることができます。
クラス名
CSS初級ではクラス名の場所を変更したいタグ名となっていましたがタグにはclass属性を使って名前をつけることができその名前を使って個別に色付けすることが可能です。
<p class=”CLASS”>段落</p>
.CLASS{color:red;}
CSSコードでクラス名を書くときには必ず.（ドット）を入れてください。
※タグ名にはいりません
擬似クラス
動きをつけたいタグ要素クラスと動作後のクラスを作ることが必要でこのクラスを擬似クラスといいます。疑似クラスにも効果別に名前がありますのでご紹介いたします。
疑似クラスはクラス名の後に書くのが原則です。
| 疑似クラス名 | 効果 |
| :hover | カーソルを近づけた際に変化する |
| :active | クリックした際に変化する |
<body>
<button>button</button>
</body>
button{
border-radius: 5px;
padding: 15px;
box-shadow:5px 5px black;
transition: box-shadow .25s;
}
button:active{
box-shadow: 0 0;
}
cursor
cursor(カーソル)は、タグ内に入った時のカーソルの種類を変えることができます。
<body>
<p>カーソルが変わります</p>
</body>
p{
background-color: aqua;
width: 200px;
text-align: center;
padding: 15px;
cursor: pointer;
}
コメント