２月２２日 授業内容（前半 rgba,hsla,border-radius,etc...）
今日のgoogle top画面
ミカド（オペレッタ）https://ja.wikipedia.org/wiki/%E3%83%9F%E3%82%AB%E3%83%89_(%E3%82%AA%E3%83%9A%E3%83%AC%E3%83%83%E3%82%BF)
.....................................................
こんにちわjapan http://konnichiwajapan.tokyo/
・CSS3の概要（P257～）
＊htmlファイルの中のスタイルのコメントアウトするときは/**/で挟まないときちんと表示できないので注意が必要。
・ドロップシャドウ（ちょっと浮き上がっているデザイン）・・・質量の軽い物に使うと良い
・光彩・・・質量が重いものにつかうと良い
<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>ＣＳＳ３の練習ーテキストの装飾(P276～Ｐ２９３)</title>
<style>
/*reset*/
html,body,ul,li{font-family:"Hiragino Kaku Gothic proN",
Meiryo,
sans-serif;
padding:0;
margin:0;
line-height:1.0;}
ul{list-style:none;}
/*body*/
body{font-size:16px;
background:#333333;}
.shadow{width:600px;
margin:50px auto;}
.shadow li{text-align:center;
margin:5px 0;
padding:10px;
border:#ccc 1px solid;
background:#eee;
font-family:arial,sans-serif;
font-size:200%;
font-weight:bold;
}
/*liのindividual*/
.ts01{text-shadow:2px 2px 6px #333;
color:#0ff;}
.ts02{color:#ff6600;
text-shadow:0 0 10px #093;}
.ts03{color:#ccc;
text-shadow:-1px -1px 0 #0ff, 1px 1px 0 red;}
.ts04{color:#ccc;
text-shadow:-1px -1px 0 #0FF, 1px 1px 0 red;}
.ts05{color:#FFF;
text-shadow:1px 1px 0 #999,
-1px 1px 0 #999,
1px -1px 0 #999,
-1px -1px 0 #999;}
.ts06{text-shadow:
0 0 5px #fff,
0 0 13px #F03,
0 0 13px #f03,
0 0 13px #f03,
0 0 13px #f03;}
</style>
</head>
<body>
<ul class="shadow">
<li class="ts01">Drop shadow</li>
<li class="ts02">Grow</li>
<li class="ts03">Bevel</li>
<li class="ts04">Embos</li>
<li class="ts05">Stroke</li>
<li class="ts06">Neon</li>
</ul>
</body>
</html>
<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>背景色だけを半透明に設定</title>
</head>
<style>
/*reset*/
html,body,ul,li{font-family:"Hiragino Kaku Gothic proN",
Meiryo,
sans-serif;
padding:0;
margin:0;
line-height:1.0;}
ul{list-style:none;}
/*body*/
body{font-size:16px;
background:url(%E5%90%8D%E7%A7%B0%E6%9C%AA%E8%A8%AD%E5%AE%9A-1.gif);}
/*rgba(P276～)*/
p.rgba{width:300px;
margin:300px auto 20px auto;
font-size:200%;
color:yellow;
text-align:center;
overflow:hidden;}
p.rgba span{
border:#fff 1px solid;
padding:10px;
background:rgba(255,255,255,0.5);}
/*hsla*/
.hsla01{background:hsla(0,100%,30%,0.7);}
.hsla02{background:hsla(30,100%,30%,0.7);}
.hsla03{background:hsla(60,100%,30%,0.7);}
.hsla04{background:hsla(120,100%,30%,0.7);}
.hsla05{background:hsla(240,100%,30%,0.7);}
.hsla06{background:hsla(270,100%,30%,0.7);}
.hsla07{background:hsla(300,100%,30%,0.7);}
ul.hsla{width:600px;
text-align:center;
margin:20px auto;
overflow:hidden;}
ul.hsla li{width:50px;
line-height:50px;
margin:0 10px;
float:left;
}
/*ul.bdr*//*角丸の半径*/
ul.bdr{width:400px;
margin:20px auto;
}
ul.bdr li{width:400px;
line-height:100px;
background:#DA5557;
text-align:center;
margin-top:10px;
}
.bdr01{border-radius:10px;}
.bdr02{border-radius:5px 10px 15px 20px;}
.bdr03{border-radius:10px 0 20px;}
.bdr04{border-radius:10px 0;}
ul.bdr>li.bdr05{width:400px;
text-align:center;
border-radius:400px;
line-height:400px;}
</style>
<body>
<p class="rgba"><span>RGBA color</span></p><!--（P２７８、２７９）-->
<ul class="hsla">（<!--P２７９）-->
<li class="hsla01">赤</li>
<li class="hsla02">橙</li>
<li class="hsla03">黄</li>
<li class="hsla04">緑</li>
<li class="hsla05">青</li>
<li class="hsla06">紫</li>
<li class="hsla07">桃</li>
</ul>
<ul class="bdr"><!--（P２８０）-->
<li class="bdr01">全て同じ10px</li>
<li class="bdr02">左上5px｜右上10px｜右下15px｜左下20px</li>
<li class="bdr03">左上10px｜右上と左下0px｜右下20px</li>
<li class="bdr04">左上と右下10px｜右上と左下0px</li>
<li class="bdr05">正円（幅、高さ、border-radiusを全て同じ値）</li>
</ul>
</body>
</html>
