はじめてのモバイルウェブアプリ 1.5

ウェブアプリ入門PART1.5

はじめてのCSS

福野泰介 jig.jp代表

@taisukef #kosenbc

ロボコン、

プロコンに続き、

高専ビジコン！

エントリー受付

PART1おさらい

HTMLでシンプルなモバイルウェブアプリが

できた！

もっと美しく

HTMLを美しくするもの

CSS

CSSとは

CascadingStyleSheets

HTMLを装飾するもの

色を付ける

<!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;

}

間隔を空ける２

#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

はじめてのモバイルウェブアプリ 1.5

Internet