CSSを使ったサンプル集（SLIMバージョン）

HTML要素のstyle属性として与える例

doctype html
p style="color:red" 赤い文字

簡単な例

１

doctype html
p id="sample" ここに赤い文字
css:
    #sample {color:red}
p ここは黒い字

２

doctype html
css:
  body{font-size:20pt}
  h2{color:red}
  li{background-color:#a8cfc0}
  .xx{color:blue}

h2 あいうえお
h4 かきくけこ

ul
  li abc
  li def
  li ghi
  li.xx jkl
  li mno

sass, sccs を使った例

• これを処理するためには、予め SLIMの内蔵エンジンとして gemのパッケージ sass を入れておく必要がある

    gem install sass
  

• sass というシステムで、sass, scss の２つの記法を扱える。
• いずれも、cssをより高度に扱うための記法である。
• １つのSLIMの中で css: sass: scss: を使うことができる。
• sass は、（原理的には slimと似た）「オフサイドルール」 による記法（なので { } が不要になる）

doctype html
p id="sample" ここに赤い文字
scss:
    #sample {color:red}
p ここは黒い字
sass:
	p 
	  color: red  

疑似クラス hover: の使用例

doctype html
css:
  .btn{width:60px;height:40px;background-image:url(p2.gif)}
  .btn:hover{background-image:url(p1.gif)}
.btn __

cssアニメーションの例

doctype html
css:
  #sample1 {
    position: absolute; width:200px ; height:100px ;
    background-color: yellow ;
    animation: smpl 5s linear 0s infinite alternate;
  }
  @keyframes smpl {
    0% {left:0%}
    100% {left:80%}
  }
span#sample1 動くよー