More Related Content
Similar to css for Kubo Semi 2014 (13)
css for Kubo Semi 2014
- 2. 目次
• 使い方
• スタイルシートの書きかた
（リンクはスライドショー時のみ使用可能）
- 3. 使い方
CSSの使い方（組み込む場所）は大きく分けて3種類
• htmlのタグに直接書き込む
利点： 細かく設定できる
難点： htmlが横に広がり、タグが見にくくなる
• htmlのヘッダ(<head></head>)内に書く★オススメ★
利点： 難点がそれほど難点ではない（笑）
難点： htmlが縦に長くなる
• 外部からカスケードファイル(.css)を読み込む
利点： 複数のhtmlファイルに適用できる
難点： .cssを読み込むためにbottleに新たな記載を追加しなければならない
- 4. 要素の呼称
セレクタ{プロパティ: 値}
p {font-size: 20px; text-align: center;}
div {float: left; padding: 0px 3px 3px 0px;}
- 5. 使い方タグに書き込む
<p style=“font-size: 20px; text-align: center;”>～～</p>
<div style=“float: left; padding: 0px 3px 3px 0px”>～～</div>
タグにstyle属性を追加し、その引数にプロパティと値を書き込んでいく。
pだけでなく、divやtableなど様々なものに書き込める。
- 6. 使い方ヘッダに書き込む※推奨
<head>
～～～～～
<style>
p {font-size: 20px; text-align: center;}
div {float: left; padding: 0px 3px 3px 0px;}
</style>
</head>
<body>
<p>～～～</p>
<div>～～～</div>
</body>
- 7. 使い方外部から読み込む
p {font-size: 20px; text-align: center;}
div {float: left; padding: 0px 3px 3px 0px;}
をxxx.cssとしてstaticフォルダに保存。bottleに以下を追加
@route("/static/<filename>")
def aaa(filename):
return static_file(filename, root="./static")
- 9. スタイルシートの書きかた
• bottleで使えそうな主なプロパティと（値の例）
color 文字色（red / #000000）
background-color 背景色(〃)
font-size フォントのサイズ(20px / 120%)
font-weight フォントの太さ(100～900まで100刻み, 400標準)
font-family フォントの種類(Arial / Century / Monotype Corsiva)
line-height 行の高さ(1が標準, 1.5は標準の1.5倍)
text-align 行揃えの位置(left / center / right)
- 10. スタイルシートの書きかた
• bottleで使えそうな主なプロパティと（値の例）
width 幅（200px）
height 高さ（200px）
margin マージン※領域間スペース（0px 3px 3px 0px）
padding パディング※領域内スペース（0px 3px 3px 0px）
marginとpaddingは値の数によって適応される場所が変わる
1・・・[上下左右] 2・・・[上下左右]
3・・・[上左右下] 4・・・[上右下左]
float 左寄せまたは右寄せ
