More Related Content
Similar to はじめてのモバイルウェブアプリ 1.5
Similar to はじめてのモバイルウェブアプリ 1.5 (20)
More from Taisuke Fukuno
More from Taisuke Fukuno (20)
はじめてのモバイルウェブアプリ 1.5
- 7. 色を付ける <!DOCTYPE html> <html><head><title>CSS</title> <style> body { color: #f00; } </style> </head><body> 鯖江：サバエドッグ </body></html>
- 8. 色の16進数表現 色は赤緑青の成分の それぞれの多さを 0123456789abcdef の16段階で表現する 黒:#000 白:#fff 赤:#f00 黄: #ff0 藍色: #357 わさび:#ac9
- 10. 文字の大きさを変える <!DOCTYPE html> <html><head><title>CSS</title> <style> body { font-size: 500%; } </style> </head><body> 鯖江：サバエドッグ </body></html>
- 12. 色と大きさを変える <!DOCTYPE html> <html><head><title>CSS</title> <style> body { color: #00f; font-size: 500%; } </style> </head><body> 鯖江：サバエドッグ </body></html>
- 14. 文字ごとに適応 <!DOCTYPE html> <html><head><title>CSS</title> <style> #t1 { color: #f00; } #t2 { color: #000; } </style> </head><body> <span id=t1>鯖江：</span> <span id=t2>サバエドッグ</span> </body></html>
- 17. 背景色を変える <!DOCTYPE html> <html><head><title>CSS</title> <style> #t1 { color: #fff; background: #34a; } </style> </head><body> <div id=t1>鯖江</div> </body></html>
- 20. 大きさを変える <!DOCTYPE html> <html><head><title>CSS</title> <style> #t1 { color: #fff; background: #34a; width: 100px; height: 100px; } </style> </head><body> <div id=t1>鯖江</div> </body></html>
- 22. 右寄せ <style> #t1 { color: #fff; background: #34a; width: 100px; height: 100px; text-align: right; } </style>
- 24. センタリング <style> #t1 { color: #fff; background: #34a; width: 100px; height: 100px; text-align: center; } </style>
- 26. 真ん中 <style> #t1 { color: #fff; background: #34a; width: 100px; height: 100px; text-align: center; vertical-align: middle; display: table-cell; } </style>
- 28. 下寄せ <style> #t1 { color: #fff; background: #34a; width: 100px; height: 100px; text-align: right; vertical-align: bottom; display: table-cell; } </style>
- 30. 間隔を空ける #t1 { color: #fff; background: #34a; text-align: center; vertical-align: middle; display: table-cell; padding: 10px; }
- 32. 間隔を空ける２ #t1 { color: #fff; background: #34a; text-align: center; vertical-align: middle; display: table-cell; padding: 10px 20px 40px 80px; }
- 33. 指定順：↑→↓← 10px 20px 40px 80px
- 36. 完