- 追加された行はこの色です。
- 削除された行はこの色です。
*目的 [#mf449b10]
CSSでよく忘れがちなのでメモしておく。
*目次 [#fa6d7e59]
#contents
*DIVタグのレイアウトを指定する [#t485591c]
#div1 {
color:black;
background-color:white;
position:absolute;
top:20px;
left:40px;
width:200px;
height:300px;
}
**HTMLのIDの書き方。 [#e8c0d18f]
ダブルクォートが不要
<div id=div1>
hoge
</div>
*HTMLファイルからCSSファイルを読み込ませる。 [#n2dab739]
<link rel="stylesheet" href="css/style.css">
*HTMLファイルからJSファイルを読み込ませる。 [#m7da7ea1]
<script type="text/javascript" src="style.js"></script>
*jqueryはあたりまえとして、JSでのスタイルシート設定例 [#u261218a]
window.onload = function() {
$("#div2").css("color", "black");
$("#div2").css("background-color", "blue");
$("#div2").css("position", "absolute");
$("#div2").css("top", "20px");
$("#div2").css("left", "340px");
$("#div2").css("width", "200px");
$("#div2").css("height", "300px");
}
*マウス位置の座標を知る [#zc79ff42]
**参考URL [#t3fe1335]
http://www.electrictoolbox.com/jquery-mouse-co-ordinates-mouseover-click-within-element/
<div id="example2-xy" class="mouse-xy">MOUSE XY</div>
<div id="example2" class="mouse-click">MOUSE CLICK AREA</div>
<script language="Javascript">
$('#example2').mousemove(function(e){
var x = e.pageX - this.offsetLeft;
var y = e.pageY - this.offsetTop;
$('#example2-xy').html("X: " + x + " Y: " + y);
});
</script>
*正しいセンタリングの仕方 [#oa39953f]
http://w3g.jp/webstandards/hack/css_block_control
**横が中央にそろえる場合 [#gdcff69b]
http://www.stylish-style.com/csstec/basic/p-boxc.html
.box1{
text-align:center;
width:100%;
}
.box2{
text-align:left;
margin:0px auto;
width:150px;
}
<div class="box1">
<div class="box2"> </div>
</div>
ポイントは２重にくくるってことと、内側の指定は幅を入れるってところかな。
**中央に寄せる場合 [#w3225e90]
height:100%;
width:100%;
margin: 0px auto;
padding: 0px;
**別の方法 [#gd5e3506]
下の方法はいまいち使い勝手が良くない感じ
http://www.css-lecture.com/log/css-beginner/026.html
親要素を幅１００％にしておいて、
自身の幅要素を80%とか小さめにする。
そんで、
margin: 0 auto;
*絶対座標の使い方 [#f50ec646]
コツはdivタグを２重にする。
<div style="position:relative;">
<div style="position:absolute;">
</div>
<div>
たぶんこんなかんじ
*position で absolute 設定時に中央に指定する方法 [#xbfcd382]
http://www.zachgraeve.com/2006/10/01/center-abosulte-position-div/
*テキストの装飾 [#a59c8e86]
**テキストでグラデーション [#y6f046cb]
http://d.hatena.ne.jp/kudakurage/20111113/1321170623
**テキストのエフェクト [#y90c47ad]
http://www.midwinter-dg.com/blog_demos/css-text-shadows/
*iphoneサファリ高速化 [#sc01c55a]
HTMLのエレメントに -webkit-transform:translateZ(0px) を設定するとGPUで処理が行われる為、フレームレートが倍になる。
*アンダーラインに色を付ける [#pe9b8ad5]
http://www.smile-peace4.com/?p=5105
<span style="text-decoration:underline; color:blue;"><span style="color:black;">青いアンダーラインを引く</span></span>
*後でiFrame内に入れて使う場合 [#xa284639]
せっかくデザインしてもiFrame内に入れるとレイアウトがずれる可能性があるので、
あらかじめ、自分がデザインする時に気をつけることをメモしておく。
**BODY [#p64818e6]
body {
background-color: #000000;
margin: 0px;
}
