6/16(月)授業メモ HTML5
今日はHTML5でレスポンシブWEBデザイン、ボックスとテキストにシャドウを付ける。
①可変レイアウトパターン:HTML+CSS
学校のブログ 2014-07-08の記事の「可変レイアウトパターン:HTML+CSS」をもとに進行。
②ボックスとテキストにシャドウを付ける。
学校のブログ 2014-07-23の記事の「CSS3シャドウ」をもとに進行。
2-1. #bShadow は、ボックスにシャドウを付ける。
2-2. inset は内側にシャドウがかかる
2-3. ブログ7/23を参照
2-4. ボックスシャドウ
ソース
<body>
<div id="bShadow1"></div>
<div id="bShadow2"></div>
<div id="bShadow3"></div>
</body>
スタイル
#bShadow3 {
-webkit-box-shadow: 0 0 6px #f00, inset 0 0 6px #00f;
-moz-box-shadow: 0 0 6px #f00, inset 0 0 6px #00f;
box-shadow: 0 0 6px #f00, inset 0 0 6px #00f;
}
※ 1. 0 0 6px #f00は外側へ
※ 2. inset 0 0 6px #00fは内側へ
※ 3. insetは内側にシャドウを付ける指示
※ 4. bShadow は boxShadow を示している
2-5. テキストシャドウ
ソース
<body>
<div id="tShadow1">テキスト<br>シャドウ</div>
<div id="tShadow2">テキスト<br>シャドウ</div>
<div id="tShadow3">テキスト<br>シャドウ</div>
<div id="tShadow4">テキスト<br>シャドウ</div>
</body>
スタイル
#tShadow2 {
text-shadow: 0 0 6px #666;
color: #fff;
}
※ 1. ヨコ タテ シャドウの大きさ(幅) 色
※ 2. color は文字色
#tShadow4 {
text-shadow: -40px -10px 0 #f00, 40px 10px 10px #00f;
}
※ 1. シャドウはたくさん付けれる。(3個まで付けられた)