Download to read offline
![スタイルシートの書きかた
• bottleで使えそうな主なプロパティと（値の例）
width 幅（200px）
height 高さ（200px）
margin マージン※領域間スペース（0px 3px 3px 0px）
padding パディング※領域内スペース（0px 3px 3px 0px）
marginとpaddingは値の数によって適応される場所が変わる
1・・・[上下左右] 2・・・[上下左右]
3・・・[上左右下] 4・・・[上右下左]
float 左寄せまたは右寄せ](https://image.slidesharecdn.com/css-141107233052-conversion-gate01/75/css-for-Kubo-Semi-2014-10-2048.jpg)
css for Kubo Semi 2014
- 1. 暇ならば いじってみよう CSS スタイルシート 外装 一通りbottleが完成してすることなくなったらいじるくらいでちょうどいい
- 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")
- 8. 使い方外部から読み込む さらにstaticフォルダに保存されたxxx.cssを読み込むために、htmlのヘッダ 内に <head> ～～～～ <link rel="stylesheet" type="text/css" href="../static/xxx.css"> </head> を追加。
- 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 左寄せまたは右寄せ
- 11. スタイルシートの書きかた 同じセレクタでもIDをつけたり、クラスを作って区別できる •IDの例 <div id=“left”>～～</div> <div id=“right”>～～</div> div#left {font-size: 20px;} div#right {font-size: 30px;}
- 12. スタイルシートの書きかた 同じセレクタでもIDをつけたり、クラスを作って区別できる •クラスの例 <div class=“left”>～～</div> <div class=“right”>～～</div> div.left {font-size: 20px;} div.right {font-size: 30px;}