目的

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://w3g.jp/webstandards/hack/css_block_control

横が中央にそろえる場合

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>

ポイントは2重にくくるってことと、内側の指定は幅を入れるってところかな。

中央に寄せる場合

		height:100%;
               width:100%;
		margin: 0px auto;
               padding: 0px;

別の方法

下の方法はいまいち使い勝手が良くない感じ

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/

テキストの装飾

テキストでグラデーション

http://d.hatena.ne.jp/kudakurage/20111113/1321170623

テキストのエフェクト

http://www.midwinter-dg.com/blog_demos/css-text-shadows/

iphoneサファリ高速化

HTMLのエレメントに -webkit-transform:translateZ(0px) を設定するとGPUで処理が行われる為、フレームレートが倍になる。

アンダーラインに色を付ける

http://www.smile-peace4.com/?p=5105

span style="text-decoration:underline; color:blue;"><span style="color:black;">青いアンダーラインを引く</span></span>

後でiFrame内に入れて使う場合

せっかくデザインしてもiFrame内に入れるとレイアウトがずれる可能性があるので、 あらかじめ、自分がデザインする時に気をつけることをメモしておく。

BODY

       body {
           background-color: #000000;
           margin: 0px;
       }
トップ   編集 凍結 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS
Last-modified: 2012-11-12 (月) 12:16:28 (3270d)