83回目授業内容　HTML5 + CSS3 - 四十路男TokiyoのWeb人生再スタートDiary

[授業][Dreamweaver][PhotoShop][JavaScript][jQuery]

HTML5 + CSS3

float時でのclear bothをulにかける方法

ul:after {
	content:"";
	display: block;
	clear: both;
}

マーキー

index.html

<body>
<p id="mq">4月20日まで期間限定セール実施中！</p>
</body>

style.css

#mq {
	overflow:-webkit-marquee;
}
#mq {
  background-color:#903;
  background-image:-webkit-gradient(linear, left top, right top, from(#903), to(#903),color-stop(0.4,#F00),color-stop(0.6,#F00));
  color:#FFF;
  border:inset #999 1px;
  padding:3px 0;
}

角度を変更した要素のマーキー

#mq {
  overflow:-webkit-marquee;
  -webkit-transform:rotate(45deg);
  width:50%;
  white-space:nowrap;
  position:absolute;
  top:0.5em;
  right:-2.5em;
}

無限背景

body {
  background-image:url(images/bg.jpg);
  background-repeat:repeat-x;
  -webkit-animation:bk_move 120s linear 0 infinite;
}
@-webkit-keyframes 'bk_move' {
  from {
    background-position-x:left;
  }
  to {
    background-position-x:2753px;
  }
}

脱線話（復活）

[http://tokiyo.hateblo.jp:title=四十路男Tokiyoの人生再スタートblogもやってます。