*目的 [#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 margin-left : auto ; margin-right : auto ; 下の方法はいまいち使い勝手が良くない感じ http://www.css-lecture.com/log/css-beginner/026.html 親要素を幅100%にしておいて、 自身の幅要素を80%とか小さめにする。 そんで、 margin: 0 auto; *絶対座標の使い方 [#f50ec646] コツはdivタグを2重にする。 <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>