目的

CSSでよく忘れがちなのでメモしておく。

目次

DIVタグのレイアウトを指定する

#div1 {
   color:black;
   background-color:white;
   position:absolute;
   top:20px;
   left:40px;
   width:200px;
   height:300px;
}

HTMLのIDの書き方。

ダブルクォートが不要

<div id=div1>
hoge
</div>

HTMLファイルからCSSファイルを読み込ませる。

<link rel="stylesheet" href="css/style.css">

HTMLファイルからJSファイルを読み込ませる。

<script type="text/javascript" src="style.js"></script>

jqueryはあたりまえとして、JSでのスタイルシート設定例

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");
}

マウス位置の座標を知る

参考URL

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>

正しいセンタリングの仕方

http://www.css-lecture.com/log/css-beginner/026.html

親要素を幅100%にしておいて、 自身の幅要素を80%とか小さめにする。 そんで、

margin: 0 auto;  

絶対座標の使い方

コツはdivタグを2重にする。

<div style="position:relative;">
   <div style="position:absolute;">
   </div>
<div> 

たぶんこんなかんじ

position で absolute 設定時に中央に指定する方法

http://www.zachgraeve.com/2006/10/01/center-abosulte-position-div/

トップ   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS