はじめてのモバイルウェブアプリ 1.5
TRANSCRIPT
ウェブアプリ入門PART1.5
はじめてのCSS
福野泰介 jig.jp代表
@taisukef #kosenbc
ロボコン、
プロコンに続き、
高専ビジコン!
エントリー受付
PART1おさらい
HTMLでシンプルなモバイルウェブアプリが
できた!
もっと美しく
HTMLを美しくするもの
CSS
CSSとは
CascadingStyleSheets
HTMLを装飾するもの
<style>
HTMLを装飾するタグ<head>の中に書く
色を付ける
<!DOCTYPE html><html><head><title>CSS</title><style>body { color: #f00; }</style></head><body>鯖江:サバエドッグ</body></html>
色の16進数表現色は赤緑青の成分のそれぞれの多さを0123456789abcdefの16段階で表現する
黒:#000 白:#fff赤:#f00黄: #ff0藍色: #357 わさび:#ac9
文字の大きさを変える
<!DOCTYPE html><html><head><title>CSS</title><style>body { font-size: 500%; }</style></head><body>鯖江:サバエドッグ</body></html>
色と大きさを変える<!DOCTYPE html><html><head><title>CSS</title><style>body {
color: #00f;font-size: 500%;
}</style></head><body>鯖江:サバエドッグ</body></html>
文字ごとに適応<!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>
<span>
文字グループ化するidを付け、#~で指定
背景色を変える<!DOCTYPE html><html><head><title>CSS</title><style>#t1 {
color: #fff;background: #34a;
}</style></head><body><div id=t1>鯖江</div></body></html>
<div>
グループ化するidを付け、#~で指定
ブロック状であることが<span>と違う
大きさを変える<!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>
右寄せ<style>#t1 {
color: #fff;background: #34a;width: 100px;height: 100px;text-align: right;
}</style>
センタリング<style>#t1 {
color: #fff;background: #34a;width: 100px;height: 100px;text-align: center;
}</style>
真ん中<style>#t1 {
color: #fff;background: #34a;width: 100px;height: 100px;text-align: center;vertical-align: middle;display: table-cell;
}</style>
下寄せ<style>#t1 {
color: #fff;background: #34a;width: 100px;height: 100px;text-align: right;vertical-align: bottom;display: table-cell;
}</style>
間隔を空ける#t1 {
color: #fff;background: #34a;text-align: center;vertical-align: middle;display: table-cell;padding: 10px;
}
間隔を空ける2
#t1 {color: #fff;background: #34a;text-align: center;vertical-align: middle;display: table-cell;padding: 10px 20px 40px 80px;
}
指定順:↑→↓←10px 20px 40px 80px
他もいろいろ
CSSで調べていろいろ試してみてください!
エントリーお待ちしてます
質問Twitterで
下記ハッシュタグを付けてツイートしてください
#kosenbc
完